/* Dark-first design tokens — matches the iOS app (Snipd-class) */
:root {
  --paper: #0e1217;
  --paper-deep: #1a212b;
  --card: #171d26;
  --ink: #f2efe9;
  --ink-soft: #9aa3ac;
  --vermillion: #f2613a;
  --vermillion-deep: #d94f2b;
  --pine: #4cae7c;
  --gold: #d9a64c;
  --line: rgba(255, 255, 255, 0.08);
  --surface-1: #151b23;
  --surface-2: #1c242e;
  --surface-3: #232d39;
  --radius: 16px;
  color-scheme: dark;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: 'Noto Sans TC', -apple-system, sans-serif;
  background: var(--paper);
  color: var(--ink);
  line-height: 1.7;
  min-height: 100vh;
}
.serif { font-family: 'Noto Serif TC', serif; }
.wrap { max-width: 860px; margin: 0 auto; padding: 0 16px; }

header.app {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  backdrop-filter: blur(10px);
  padding: calc(10px + env(safe-area-inset-top)) 0 10px;
}
.header-inner { display: flex; align-items: center; gap: 10px; max-width: 860px; margin: 0 auto; padding: 0 16px; }
.logo-seal {
  width: 30px; height: 30px; background: var(--vermillion); color: var(--paper);
  display: grid; place-items: center; border-radius: 7px;
  font-family: 'Noto Serif TC', serif; font-weight: 700; font-size: 0.9rem;
  box-shadow: 2px 2px 0 var(--ink); flex-shrink: 0;
}
.logo-text { font-family: 'Noto Serif TC', serif; font-weight: 900; font-size: 1.15rem; text-decoration: none; color: var(--ink); }
.header-spacer { flex: 1; }

.btn {
  display: inline-flex; align-items: center; gap: 6px; justify-content: center;
  background: var(--vermillion); color: #fff;
  padding: 10px 20px; border-radius: 999px; border: none;
  font-weight: 700; font-size: 0.88rem; cursor: pointer; text-decoration: none;
  font-family: inherit; transition: all 0.15s;
}
.btn:hover { background: var(--vermillion-deep); }
.btn:disabled { opacity: 0.5; pointer-events: none; }
.btn.outline { background: var(--surface-2); color: var(--ink); }
.btn.outline:hover { background: var(--surface-3); }
.btn.small { padding: 6px 13px; font-size: 0.78rem; }
.btn.danger { background: var(--surface-2); color: var(--vermillion); }

.tabs { display: flex; gap: 8px; margin: 18px 0 4px; }
.tab {
  padding: 8px 18px; border-radius: 999px; border: none;
  background: var(--surface-1); font-weight: 700; font-size: 0.9rem; cursor: pointer;
  color: var(--ink-soft); font-family: inherit; transition: all 0.15s;
}
.tab.active { background: var(--ink); color: var(--paper); }

.search-row { display: flex; gap: 8px; margin: 16px 0; }
input[type="text"], input[type="search"], input[type="url"], input[type="password"] {
  flex: 1; min-width: 0; padding: 12px 16px; border-radius: 12px;
  border: none; background: var(--surface-1);
  font-size: 16px; font-family: inherit; color: var(--ink); outline: none;
  box-shadow: inset 0 0 0 1px transparent; transition: box-shadow 0.15s;
}
input:focus { box-shadow: inset 0 0 0 1.5px var(--vermillion); }

.section-label {
  font-size: 0.8rem; font-weight: 700;
  letter-spacing: 0.04em; color: var(--ink-soft);
  margin: 24px 0 10px;
}

.card {
  background: var(--surface-1); border: none;
  border-radius: var(--radius); padding: 18px;
}
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }

.pod-tile {
  background: var(--surface-1); border: none; border-radius: var(--radius);
  overflow: hidden; cursor: pointer; transition: transform 0.15s;
  text-align: left; font-family: inherit; padding: 0;
}
.pod-tile:hover { transform: translateY(-3px); }
.pod-tile img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; background: var(--paper-deep); }
.pod-tile .ph { width: 100%; aspect-ratio: 1; display: grid; place-items: center; font-size: 2rem; background: var(--pine); color: var(--paper); }
.pod-tile .t { padding: 10px 12px; font-weight: 700; font-size: 0.85rem; line-height: 1.4; color: var(--ink); }

.ep-item {
  display: flex; gap: 12px; align-items: center; padding: 14px;
  background: var(--surface-1); border-radius: var(--radius);
  margin-bottom: 8px; cursor: pointer; transition: background 0.15s;
}
.ep-item:hover { background: var(--surface-2); }
.ep-item .meta { flex: 1; min-width: 0; }
.ep-item .t { font-weight: 700; font-size: 0.93rem; line-height: 1.45; }
.ep-item .sub { font-size: 0.75rem; color: var(--ink-soft); margin-top: 3px; font-family: 'IBM Plex Mono', monospace; }
.pill {
  font-size: 0.65rem; padding: 2px 10px; border-radius: 999px; font-weight: 700;
  flex-shrink: 0; letter-spacing: 0.05em;
}
.pill.ready { background: color-mix(in srgb, var(--pine) 14%, transparent); color: var(--pine); }
.pill.new { background: var(--paper-deep); color: var(--ink-soft); }
/* dark theme: gold chip at 0.18 alpha bg keeps >4.5:1 with the light gold text */
.pill.transcribing { background: color-mix(in srgb, var(--gold) 18%, transparent); color: var(--gold); }
.pill.error { background: color-mix(in srgb, var(--vermillion) 12%, transparent); color: var(--vermillion); }

.snip-card {
  background: var(--surface-1); border: none;
  border-radius: var(--radius); padding: 18px; margin-bottom: 12px;
}
.snip-card .title { font-family: "Noto Serif TC", serif; font-weight: 900; font-size: 1.05rem; line-height: 1.45; letter-spacing: 0.01em; }
.snip-card .src { font-family: 'IBM Plex Mono', monospace; font-size: 0.68rem; color: var(--ink-soft); margin-top: 4px; }
.snip-card .summary { font-size: 0.85rem; color: var(--ink-soft); margin-top: 8px; }
.ai-label {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 0.68rem; font-weight: 800; letter-spacing: 0.14em;
  color: var(--gold); margin-top: 10px; text-transform: uppercase;
}
ul.bullets {
  margin: 8px 0 0; padding-left: 1.15em;
  display: flex; flex-direction: column; gap: 7px;
}
ul.bullets li { font-size: 0.9rem; line-height: 1.65; color: var(--ink); }
ul.bullets li::marker { color: var(--gold); }
.snip-card .text {
  font-size: 0.85rem; margin-top: 10px; padding: 12px 14px;
  background: var(--surface-2); border-radius: 8px; white-space: pre-wrap;
  max-height: 150px; overflow-y: auto;
}
.snip-card .actions { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; align-items: center; }
.export-ok { font-size: 0.7rem; color: var(--pine); font-weight: 700; }

.empty { text-align: center; padding: 48px 16px; color: var(--ink-soft); }
.empty .big { font-size: 2.2rem; }
.spinner {
  display: inline-block; width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid var(--line); border-top-color: var(--vermillion);
  animation: spin 0.8s linear infinite; vertical-align: -3px;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* skeleton shimmer + card entrance (perceived-speed polish) */
.skel {
  background: linear-gradient(90deg, var(--card) 25%, var(--paper-deep) 50%, var(--card) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.3s infinite;
  border-radius: 10px;
}
@keyframes shimmer { to { background-position: -200% 0; } }
.skel-row { display: flex; gap: 12px; padding: 14px 4px; align-items: center; }
.ep-item, .snip-card, .pod-tile, .integ { animation: cardIn 0.28s ease both; }
@keyframes cardIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

/* mobile: app-grade bottom tab bar (top pills hide) */
@media (max-width: 640px) {
  .tabs.main-tabs {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 120;
    margin: 0; padding: 8px 10px calc(10px + env(safe-area-inset-bottom));
    background: color-mix(in srgb, var(--paper) 92%, transparent);
    backdrop-filter: blur(14px);
    border-top: 1px solid var(--line);
    display: flex; justify-content: space-around; gap: 0;
  }
  .tabs.main-tabs .tab {
    border: none; background: none; flex: 1; text-align: center;
    display: flex; flex-direction: column; align-items: center; gap: 3px;
    font-size: 0.72rem; padding: 4px 0; color: var(--ink-soft);
  }
  .tabs.main-tabs .tab .ico { width: 22px; height: 22px; }
  .tabs.main-tabs .tab.active { background: none; color: var(--vermillion); }
  main.wrap { padding-bottom: 96px; }
}

.toast {
  position: fixed; bottom: calc(24px + env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%);
  background: var(--ink); color: var(--paper); padding: 10px 22px; border-radius: 999px;
  font-size: 0.85rem; font-weight: 700; z-index: 200; box-shadow: 0 8px 24px rgba(28,24,19,0.3);
  opacity: 0; transition: opacity 0.25s; pointer-events: none; max-width: 90vw; text-align: center;
}
.toast.show { opacity: 1; }

.tabs.main-tabs .tab .ico { width: 20px; height: 20px; display: none; }
@media (max-width: 640px) { .tabs.main-tabs .tab .ico { display: block; } }
#snip-sheet::before {
  content: ''; display: block; width: 38px; height: 4px; border-radius: 2px;
  background: var(--line); margin: -6px auto 12px;
}

/* top-right account menu */
#acct-avatar {
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--vermillion); color: #fff; border: none;
  font-weight: 800; font-size: 0.9rem; cursor: pointer;
}
#acct-dropdown {
  position: absolute; right: 0; top: 44px; z-index: 300;
  background: var(--surface-2); border-radius: 14px;
  min-width: 230px; padding: 8px;
  box-shadow: 0 16px 40px rgba(0,0,0,0.5);
  display: flex; flex-direction: column; gap: 2px;
}
#acct-dropdown .acct-head { padding: 10px 12px; border-bottom: 1px solid var(--line); margin-bottom: 4px; }
#acct-dropdown .acct-head b { font-size: 0.85rem; display: block; overflow: hidden; text-overflow: ellipsis; }
#acct-dropdown .acct-head small { font-size: 0.72rem; color: var(--ink-soft); }
#acct-dropdown a, #acct-dropdown button {
  display: block; width: 100%; text-align: left;
  padding: 10px 12px; border: none; background: none;
  color: var(--ink); font-size: 0.88rem; font-family: inherit;
  border-radius: 10px; cursor: pointer; text-decoration: none;
}
#acct-dropdown a:hover, #acct-dropdown button:hover { background: var(--surface-3); }
#acct-dropdown .danger { color: var(--vermillion); }

/* GLOBAL GUARD: the hidden attribute always wins, no matter what display a rule sets.
   (This class of bug bit us twice: #nowplaying and #acct-dropdown.) */
[hidden] { display: none !important; }

/* ============================================================
   MOTION SYSTEM — 讓整體手感從「網頁」變「原生 app」
   彈性緩動 + 點擊壓下回饋 + 去手機灰框 + 順滑捲動。
   附加在最後，同權重後蓋，覆寫上方生硬的 transition:all。
   ============================================================ */
:root {
  --ease-spring: cubic-bezier(0.34, 1.4, 0.5, 1);   /* 帶一點過衝，像回彈 */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);        /* 快進慢出，滑順收尾 */
}
html { scroll-behavior: smooth; }
body {
  -webkit-tap-highlight-color: transparent;          /* 手機點擊不再閃醜灰框 */
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: contain;                    /* 邊界不連動、無橡皮筋外溢 */
}

/* 所有可點元素：hover 用 out 緩動、按下瞬間縮 0.96（native 壓感） */
.btn, .tab, .pill, .chip {
  transition: transform 0.22s var(--ease-spring), background 0.18s var(--ease-out), box-shadow 0.18s var(--ease-out), opacity 0.18s;
}
.btn:active, .tab:active, .pill:active,
button:active:not(:disabled), .chip:active,
[data-plan]:active, [data-x]:active, [data-share]:active, [data-card]:active,
[data-extend]:active, [data-note]:active, [data-del]:active {
  transform: scale(0.96);
}
.pod-tile, .ep-item, .snip-card, .card {
  transition: transform 0.25s var(--ease-spring), background 0.18s var(--ease-out), box-shadow 0.25s var(--ease-out);
}
.pod-tile:active, .ep-item:active { transform: scale(0.975); }
.pod-tile:hover { transform: translateY(-4px); box-shadow: 0 12px 28px rgba(0,0,0,0.35); }

/* 內容進場：彈性上浮 + 前幾張錯開（stagger），比一次全跳更順眼 */
.ep-item, .snip-card, .pod-tile, .integ {
  animation: cardInSpring 0.42s var(--ease-out) both;
}
@keyframes cardInSpring {
  from { opacity: 0; transform: translateY(14px) scale(0.985); }
  to { opacity: 1; transform: none; }
}
.snip-card:nth-child(1), .ep-item:nth-child(1) { animation-delay: 0.02s; }
.snip-card:nth-child(2), .ep-item:nth-child(2) { animation-delay: 0.06s; }
.snip-card:nth-child(3), .ep-item:nth-child(3) { animation-delay: 0.10s; }
.snip-card:nth-child(4), .ep-item:nth-child(4) { animation-delay: 0.14s; }
.snip-card:nth-child(5), .ep-item:nth-child(5) { animation-delay: 0.18s; }

/* Toast：從底部彈上來，比純淡入有生命力 */
.toast {
  transition: opacity 0.3s var(--ease-out), transform 0.42s var(--ease-spring);
  transform: translateX(-50%) translateY(16px);
}
.toast.show { transform: translateX(-50%) translateY(0); }

/* 分頁切換：底部 tab 圖示按下時輕彈 */
.tabs.main-tabs .tab:active .ico { transform: scale(0.85); }
.tabs.main-tabs .tab .ico { transition: transform 0.3s var(--ease-spring); }

/* 起始節目：橫向滑動帶（不再切字），可滑、隱藏捲軸、邊緣淡出提示可捲 */
.starter-strip {
  display: flex; gap: 8px; margin-top: 12px; width: calc(100vw - 40px); max-width: 100%;
  overflow-x: auto; scroll-snap-type: x proximity;
  padding: 2px 2px 8px; -webkit-overflow-scrolling: touch;
  scrollbar-width: none; justify-content: flex-start;
  mask-image: linear-gradient(90deg, #000 92%, transparent);
}
.starter-strip::-webkit-scrollbar { display: none; }
.starter-strip > button { scroll-snap-align: start; white-space: nowrap; }

/* 尊重使用者的「減少動態」設定（無障礙 + 省電） */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* account section: collapsible groups */
.acct-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.acct-row .plan-badge {
  font-size: 0.7rem; font-weight: 800; padding: 3px 10px; border-radius: 999px;
  background: color-mix(in srgb, var(--pine, #3f7a5a) 25%, transparent); color: #7fc79e;
}
details.acct-group { border-top: 1px solid var(--line); margin-top: 12px; padding-top: 4px; }
details.acct-group summary {
  cursor: pointer; list-style: none; display: flex; align-items: center; gap: 8px;
  font-size: 0.82rem; font-weight: 700; padding: 9px 2px; color: var(--ink);
}
details.acct-group summary::-webkit-details-marker { display: none; }
details.acct-group summary::after { content: '›'; margin-left: auto; color: var(--ink-soft); transition: transform 0.2s; font-size: 1rem; }
details.acct-group[open] summary::after { transform: rotate(90deg); }
details.acct-group .g-body { padding: 2px 2px 12px; }
details.acct-group .hint-inline { font-size: 0.72rem; color: var(--ink-soft); }
.acct-group input { min-width: 0; }

/* ============================================================
   VISUAL DESIGN v2 — 從「陽春暗色」升級成「有質感的暗」
   暖調暗色 + 氛圍光暈 + 卡片景深 + 粗襯線。附加在最後、同權重後蓋。
   ============================================================ */
:root {
  /* 暖一點的深色（原本偏冷藍）——與朱紅呼應，更有情緒 */
  --paper: #100d0e;
  --paper-deep: #17131a;
  --card: #1b1618;
  --surface-1: #191416;
  --surface-2: #221b1e;
  --surface-3: #2b2226;
  --line: rgba(255, 240, 235, 0.07);
  --line-hi: rgba(255, 245, 240, 0.14);   /* 卡片頂緣受光 */
  --glow: rgba(242, 97, 58, 0.5);
}
/* 氛圍：頂部一抹朱紅光暈 + 極淡雜訊，讓純黑背景有空氣感 */
body { position: relative; overflow-x: clip; }
.hero-sub, .how-step small, .how-step b { overflow-wrap: anywhere; }
body::before {
  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(120% 60% at 50% -10%, rgba(242,97,58,0.10), transparent 60%),
    radial-gradient(90% 50% at 100% 0%, rgba(217,166,76,0.05), transparent 55%);
}

/* Header：底線 + 印章 logo 質感（對齊行銷頁的暖印章） */
header.app { border-bottom: 1px solid var(--line); }
.app-seal {
  width: 32px; height: 32px; flex-shrink: 0;
  background: linear-gradient(145deg, #f2613a, #d94f2b);
  color: #fff; display: grid; place-items: center; border-radius: 9px;
  font-family: 'Noto Serif TC', serif; font-weight: 900; font-size: 1.05rem;
  box-shadow: 0 3px 12px rgba(242,97,58,0.35), inset 0 1px 0 rgba(255,255,255,0.25);
}

/* 卡片景深系統：頂緣受光 hairline + 由上而下微漸層 + 柔陰影 */
.card, .snip-card, .ep-item, .pod-tile, #snip-sheet, #acct-dropdown, .review-card {
  background: linear-gradient(180deg, var(--surface-2), var(--surface-1));
  border: 1px solid var(--line);
  border-top-color: var(--line-hi);
  box-shadow: 0 2px 6px rgba(0,0,0,0.25), 0 10px 30px rgba(0,0,0,0.18);
}
.snip-card { box-shadow: 0 2px 6px rgba(0,0,0,0.28), 0 14px 36px rgba(0,0,0,0.22); }
.pod-tile { background: var(--surface-1); }
.pod-tile img { border-bottom: 1px solid var(--line); }

/* 區塊標題：小標大寫金字，更有編輯感 */
.section-label {
  color: var(--gold); text-transform: uppercase; letter-spacing: 0.12em;
  font-size: 0.72rem; opacity: 0.85;
}

/* 主 CTA 按鈕：漸層 + 光暈，不再是死板色塊 */
.btn:not(.outline):not(.danger) {
  background: linear-gradient(145deg, #f2613a, #d94f2b);
  box-shadow: 0 4px 16px rgba(242,97,58,0.30), inset 0 1px 0 rgba(255,255,255,0.2);
}
.btn:not(.outline):not(.danger):hover { box-shadow: 0 6px 22px rgba(242,97,58,0.42), inset 0 1px 0 rgba(255,255,255,0.25); }

/* 標題襯線更重、字距收緊，質感提升 */
h1, h2, .serif { letter-spacing: 0.01em; }

/* 底部 tab bar：毛玻璃更濃、上緣受光 */
@media (max-width: 640px) {
  .tabs.main-tabs {
    background: color-mix(in srgb, var(--paper) 82%, transparent);
    backdrop-filter: blur(20px) saturate(1.3);
    border-top: 1px solid var(--line-hi);
    box-shadow: 0 -8px 30px rgba(0,0,0,0.35);
  }
}

#library-empty { width: 100%; box-sizing: border-box; }
/* 空狀態圖示：從細線改成有光暈的填色圓，不再陽春 */
.empty .big svg { filter: drop-shadow(0 0 20px rgba(242,97,58,0.25)); }

/* 首次進入的英雄卡 + 三步驟：把空白填成有設計感的引導 */
.hero-card {
  position: relative; overflow: hidden; width: 100%; box-sizing: border-box;
  background: linear-gradient(165deg, #241a1c, #17131a 70%);
  border: 1px solid var(--line-hi);
  border-radius: 22px; padding: 30px 24px 26px; text-align: center;
  box-shadow: 0 20px 50px rgba(0,0,0,0.35);
}
.hero-card::before {
  content: ''; position: absolute; top: -40%; left: 50%; transform: translateX(-50%);
  width: 320px; height: 320px; pointer-events: none;
  background: radial-gradient(circle, rgba(242,97,58,0.22), transparent 65%);
}
.hero-badge {
  position: relative; display: inline-block;
  font-size: 0.72rem; font-weight: 800; letter-spacing: 0.04em;
  color: var(--vermillion); border: 1px solid color-mix(in srgb, var(--vermillion) 40%, transparent);
  padding: 5px 14px; border-radius: 999px; margin-bottom: 16px;
}
.hero-title {
  position: relative; font-size: 1.7rem; font-weight: 900; line-height: 1.35;
  color: var(--ink); margin-bottom: 10px;
}
.hero-sub { position: relative; font-size: 0.88rem; color: var(--ink-soft); line-height: 1.8; }

.how-strip { display: flex; flex-direction: column; gap: 10px; margin: 18px 0; }
.how-step {
  display: flex; gap: 14px; align-items: flex-start; text-align: left; width: 100%; box-sizing: border-box;
  background: linear-gradient(180deg, var(--surface-2), var(--surface-1));
  border: 1px solid var(--line); border-top-color: var(--line-hi);
  border-radius: 14px; padding: 15px 16px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.2);
}
.how-step .how-n {
  flex-shrink: 0; width: 28px; height: 28px; border-radius: 8px;
  background: linear-gradient(145deg, #f2613a, #d94f2b); color: #fff;
  display: grid; place-items: center; font-weight: 900; font-size: 0.9rem; font-family: 'Noto Serif TC', serif;
  box-shadow: 0 3px 10px rgba(242,97,58,0.35);
}
.how-step > div { min-width: 0; }
.how-step b { font-size: 0.92rem; color: var(--ink); display: block; margin-bottom: 3px; }
.how-step small { font-size: 0.78rem; color: var(--ink-soft); line-height: 1.65; }

/* 桌面版：內容別在寬螢幕上孤零零飄著 */
@media (min-width: 720px) {
  .hero-title { font-size: 2rem; }
  #library-empty { max-width: 560px; margin: 12px auto 0; }
}

/* 節目篩選 chip 帶：封面小頭像 + 更好的選中態 + 邊緣淡出 */
#show-chips {
  padding: 2px 2px 4px; width: calc(100vw - 40px); max-width: 100%;
  -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity;
  mask-image: linear-gradient(90deg, transparent, #000 12px, #000 92%, transparent);
}
#show-chips::-webkit-scrollbar { display: none; }
.show-chip {
  display: inline-flex; align-items: center; gap: 7px; flex-shrink: 0;
  scroll-snap-align: start; white-space: nowrap;
  padding: 5px 13px 5px 5px; border-radius: 999px; border: 1px solid var(--line);
  background: linear-gradient(180deg, var(--surface-2), var(--surface-1));
  color: var(--ink-soft); font-size: 0.76rem; font-weight: 700; font-family: inherit;
  cursor: pointer; transition: transform 0.2s var(--ease-spring), border-color 0.2s, color 0.2s;
}
.show-chip svg { margin-left: 6px; }
.show-chip img, .show-chip .chip-ph {
  width: 22px; height: 22px; border-radius: 50%; object-fit: cover; flex-shrink: 0;
  background: var(--surface-3);
}
.show-chip .chip-ph { display: grid; place-items: center; font-size: 0.7rem; color: var(--ink); background: var(--pine); }
.show-chip:active { transform: scale(0.94); }
.show-chip.active {
  color: #fff; border-color: transparent;
  background: linear-gradient(145deg, #f2613a, #d94f2b);
  box-shadow: 0 3px 12px rgba(242,97,58,0.32);
}
.show-chip.active .chip-ph { background: rgba(255,255,255,0.2); color: #fff; }

/* 硬鎖：卡片寬度不得超過視窗（不論任何兄弟元素），保證長文換行不被切 */
.hero-card, .how-step { max-width: calc(100vw - 32px); }
@media (min-width: 720px) { .hero-card, .how-step { max-width: 100%; } }

/* App header 真 logo（聲波圖，對齊 iOS/App Store），保留精緻圓角+陰影 */
.app-logo {
  width: 32px; height: 32px; border-radius: 9px; flex-shrink: 0; object-fit: cover;
  box-shadow: 0 3px 12px rgba(0,0,0,0.35), inset 0 0 0 1px var(--line-hi);
}