/* PodTranser 三種主題：pro（財經專業）、warm（溫暖收聽，預設）、night（深色夜聽）。
   建在 Pico CSS 上：用 <html data-style="…"> 覆寫 Pico 的變數，再補幾個站內元件（卡片、時間戳、標籤）。
   設計稿：PodTranser 風格提案（畫布）。 */

/* ---------- 共用元件 ---------- */
.brand { display: inline-flex; align-items: center; gap: .55rem; font-weight: 700; font-size: 1.2rem; text-decoration: none; color: var(--pt-ink); }
.brand-mark { width: 1.6rem; height: 1.6rem; border-radius: .35rem; background: var(--pt-accent); display: inline-block; }
.muted { color: var(--pico-muted-color); font-size: .9em; }
.tag { display: inline-block; padding: .05em .5em; border-radius: var(--pt-pill); font-size: .78em; border: 1px solid var(--pt-warn-border); color: var(--pt-warn-ink); background: var(--pt-warn-bg); vertical-align: middle; }
.warn { border-radius: var(--pico-border-radius); padding: .7em 1em; background: var(--pt-warn-bg); color: var(--pt-warn-ink); }
.flash-error { color: var(--pt-danger); } .flash-info { color: var(--pt-accent-ink); }
.quota { display: inline-flex; flex-wrap: wrap; gap: .4rem 1rem; font-size: .85rem; color: var(--pico-muted-color); background: var(--pt-surface); border-radius: var(--pt-pill); padding: .35rem 1rem; margin: 0 0 1rem; }
.quota strong { color: var(--pt-ink); }
nav ul li form { margin: 0; } nav button { padding: .3em .8em; margin: 0; }
.row-actions { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.row-actions form { display: inline; margin: 0; }
.row-actions button, .row-actions a[role=button] { width: auto; padding: .45em 1em; margin: 0; }
.panel { background: var(--pt-surface); border-radius: var(--pico-border-radius); padding: 1.25rem 1.5rem; margin-bottom: 1.5rem; }
.panel > :last-child { margin-bottom: 0; }
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: 1.25rem; }
.card-grid article { margin: 0; display: flex; flex-direction: column; gap: .5rem; }
.card-grid article h3 { font-size: 1.05rem; margin: 0; line-height: 1.5; }
.card-grid article p { margin: 0; font-size: .92rem; }
.card-foot { margin-top: auto; display: flex; justify-content: space-between; align-items: center; gap: .5rem; }
.count { font-size: .85rem; color: var(--pico-muted-color); }
.ts { font-family: var(--pt-mono); font-weight: 600; white-space: nowrap; text-decoration: none; color: var(--pt-accent-ink); background: var(--pt-accent-soft); padding: .1em .55em; border-radius: var(--pt-pill); font-size: .88em; }
.points { list-style: none; padding: 0; margin: 0 0 1.5rem; }
.points li { display: flex; gap: .9rem; align-items: baseline; padding: .7rem 0; border-bottom: 1px solid var(--pico-muted-border-color); list-style: none; }
.chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.5rem; }
.chip { background: var(--pt-surface); border-radius: var(--pt-pill); padding: .35em .9em; font-size: .92rem; }
.chip .code { font-family: var(--pt-mono); color: var(--pico-muted-color); font-size: .85em; margin-left: .3em; }
.hero { padding: 2.5rem 0 2rem; }
.hero h1 { font-size: clamp(2rem, 4vw, 2.9rem); line-height: 1.25; margin-bottom: .8rem; }
.hero p { font-size: 1.1rem; color: var(--pico-muted-color); max-width: 40rem; }
.hero form { display: flex; gap: .6rem; max-width: 44rem; margin-top: 1.2rem; }
.hero form input { margin: 0; } .hero form button { width: auto; margin: 0; white-space: nowrap; padding-inline: 1.6rem; }
.theme-switch { display: inline-flex; gap: .4rem; align-items: center; margin: 0; }
.theme-switch button { width: auto; margin: 0; padding: .25em .7em; font-size: .8rem; }
.theme-switch button[aria-pressed="true"] { background: var(--pt-accent); border-color: var(--pt-accent); color: var(--pt-on-accent); }
h1, h2, h3 { font-family: var(--pt-display); }

/* ---------- 頁面版型（設計稿 B-Me：標題列＋額度膠囊、膠囊收錄列、節目卡片） ---------- */
.page-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .8rem 1.5rem; margin: .5rem 0 1.5rem; }
.page-head h1 { margin: 0; font-size: clamp(1.7rem, 3.2vw, 2.15rem); }
.page-head .quota { margin: 0; }
.page-head p { margin: .3rem 0 0; }
.collect-bar { background: var(--pt-surface); border-radius: var(--pt-pill); padding: .5rem; margin-bottom: 1.75rem; }
.collect-bar .bar { display: flex; gap: .6rem; align-items: center; }
.collect-bar .bar input[name=url] { flex: 1; margin: 0; border: 0; background: transparent; box-shadow: none; padding-left: 1.1rem; }
.collect-bar .bar select { width: auto; margin: 0; background-color: var(--pico-background-color); border: 0; }
.collect-bar .bar button { width: auto; margin: 0; padding-inline: 1.5rem; white-space: nowrap; }
.collect-bar .opts { display: flex; flex-wrap: wrap; gap: .3rem 1.2rem; padding: .5rem 1.1rem .2rem; font-size: .88rem; color: var(--pico-muted-color); }
.collect-bar .opts label { margin: 0; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.channel-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr)); gap: 1.25rem; margin-bottom: 1.5rem; }
.channel-card { margin: 0; background: var(--pt-surface); border-radius: calc(var(--pico-border-radius) + .15rem); padding: 1.3rem; display: flex; flex-direction: column; gap: .85rem; box-shadow: var(--pico-card-box-shadow); }
.channel-card .who { display: flex; gap: .8rem; align-items: center; }
.channel-card .who a { font-weight: 700; font-size: 1.05rem; color: var(--pt-ink); text-decoration: none; }
.channel-card .who span { display: block; font-size: .82rem; color: var(--pico-muted-color); }
.avatar { flex: none; width: 3.5rem; height: 3.5rem; border-radius: .9rem; display: flex; align-items: center; justify-content: center; font-family: var(--pt-display); font-size: 1.35rem; font-weight: 700; }
.av-0 { background: #F2D9C8; color: #8E3814; } .av-1 { background: #D7E3D3; color: #3E5B37; } .av-2 { background: #D6E1EA; color: #34506A; }
html[data-style="night"] .av-0 { background: #3A2A20; color: #F2C3A4; } html[data-style="night"] .av-1 { background: #22311F; color: #B7D6AE; } html[data-style="night"] .av-2 { background: #1F2B36; color: #AFC6DA; }
.strip { display: flex; justify-content: space-between; align-items: center; gap: .6rem; background: var(--pico-background-color); border-radius: .75rem; padding: .55rem .85rem; font-size: .88rem; }
.strip.paused { background: var(--pt-warn-bg); color: var(--pt-warn-ink); }
.strip .on { color: #2F6B4F; } html[data-style="night"] .strip .on { color: var(--pt-accent); }
.strip form { display: flex; gap: .35rem; margin: 0; }
.strip form button { width: 2.75rem; height: 2.75rem; padding: 0; margin: 0; border-radius: 999px; }
.card-end { align-self: flex-end; font-size: .88rem; color: var(--pico-muted-color); }
.links-row { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; font-size: .92rem; }
/* 單集列表：桌機一列一集，手機變卡片（取代表格） */
.ep-list { list-style: none; padding: 0; margin: 0 0 1.5rem; display: flex; flex-direction: column; gap: .6rem; }
.ep-list > li { list-style: none; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .35rem 1rem; align-items: center; background: var(--pt-surface); border-radius: var(--pico-border-radius); padding: .85rem 1.1rem; box-shadow: var(--pico-card-box-shadow); }
.ep-list .t a { font-weight: 600; color: var(--pt-ink); text-decoration: none; }
.ep-list .meta { display: flex; flex-wrap: wrap; gap: .2rem .9rem; font-size: .82rem; color: var(--pico-muted-color); }
.ep-list .act { grid-row: 1 / span 2; grid-column: 2; }
.ep-list .act form { margin: 0; } .ep-list .act button, .ep-list .act a[role=button] { width: auto; margin: 0; padding: .4em .95em; font-size: .88rem; }
/* 登入註冊：置中窄卡 */
.auth-card { max-width: 27rem; margin: 1.5rem auto 2.5rem; background: var(--pt-surface); border-radius: calc(var(--pico-border-radius) + .25rem); padding: 1.75rem 1.75rem 1.25rem; box-shadow: var(--pico-card-box-shadow); }
.auth-card h1 { font-size: 1.7rem; margin-bottom: 1.2rem; }
.auth-card .alt { display: flex; flex-direction: column; gap: .55rem; }
.auth-card .alt a[role=button], .auth-card .alt button { width: 100%; margin: 0; }
.divider { display: flex; align-items: center; gap: .8rem; color: var(--pico-muted-color); font-size: .85rem; margin: 1.2rem 0; }
.divider::before, .divider::after { content: ""; flex: 1; border-top: 1px solid var(--pico-muted-border-color); }
/* 設定頁：分區卡片 */
.panel h2 { font-size: 1.2rem; margin-bottom: .9rem; }
.kv { list-style: none; padding: 0; margin: 0; } .kv li { list-style: none; display: flex; justify-content: space-between; gap: 1rem; padding: .55rem 0; border-bottom: 1px solid var(--pico-muted-border-color); }
.kv li:last-child { border-bottom: 0; }
.sub-nav { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1.5rem; }
.sub-nav a { background: var(--pt-surface); border-radius: var(--pt-pill); padding: .35em .95em; font-size: .9rem; text-decoration: none; }
.table-wrap { overflow-x: auto; margin-bottom: 1.5rem; } .table-wrap table { margin: 0; }
/* 頂部導覽：手機收成選單 */
.nav-toggle { display: none; }
.nav-toggle summary { list-style: none; cursor: pointer; padding: .5rem .9rem; border-radius: var(--pt-pill); background: var(--pt-surface); font-size: .95rem; }
.nav-toggle summary::-webkit-details-marker { display: none; }
.nav-toggle summary::after { display: none; }

@media (max-width: 767px) {
  body > header.container, body > main.container, body > footer.container { padding-inline: 1rem; }
  header nav { flex-wrap: wrap; position: relative; align-items: center; }
  .nav-toggle { margin: 0; }
  .nav-links li form button { border: 0; background: transparent; color: var(--pico-primary); box-shadow: none; }
  .nav-links { display: none; }
  .nav-toggle { display: block; }
  .nav-toggle[open] + .nav-links, .nav-toggle[open] ~ .nav-links { display: flex; }
  .nav-links { flex-direction: column; align-items: stretch; width: 100%; gap: 0; margin: .4rem 0 0; background: var(--pt-surface); border-radius: var(--pico-border-radius); padding: .4rem; }
  .nav-links li { padding: 0; } .nav-links li a, .nav-links li button { display: block; width: 100%; padding: .7rem .9rem; margin: 0; text-align: left; }
  .hero form, .collect-bar .bar { flex-wrap: wrap; }
  .collect-bar { border-radius: var(--pico-border-radius); }
  .collect-bar .bar input[name=url] { flex-basis: 100%; padding-left: .6rem; }
  .collect-bar .bar select, .collect-bar .bar button, .hero form button { flex: 1; }
  .ep-list > li { grid-template-columns: minmax(0, 1fr); }
  .ep-list .act { grid-row: auto; grid-column: 1; }
  .page-head .quota { border-radius: var(--pico-border-radius); }
  .channel-grid, .card-grid { grid-template-columns: minmax(0, 1fr); }
  .points li { flex-direction: column; gap: .3rem; }
  .auth-card { padding: 1.3rem 1.1rem 1rem; margin-top: .5rem; }
  .theme-switch { flex-wrap: wrap; }
  main table { display: block; overflow-x: auto; }
}

/* ---------- B 溫暖收聽（預設） ---------- */
html[data-style="warm"]:root {
  --pt-accent: #B4481A; --pt-accent-ink: #8E3814; --pt-accent-soft: #F7E6DA; --pt-on-accent: #FFFFFF;
  --pt-ink: #2A2522; --pt-surface: #FFFFFF; --pt-pill: 999px; --pt-danger: #B3261E;
  --pt-warn-bg: #FBEFE2; --pt-warn-ink: #7A4200; --pt-warn-border: #E8C79A;
  --pt-display: "Noto Serif TC", serif; --pt-mono: "Noto Sans TC", sans-serif;
  --pico-font-family: "Noto Sans TC", system-ui, sans-serif;
  --pico-background-color: #F7F3EC; --pico-color: #2A2522; --pico-muted-color: #6A615A; --pico-muted-border-color: #E7DFD3;
  --pico-h1-color: #2A2522; --pico-h2-color: #2A2522; --pico-h3-color: #2A2522;
  --pico-primary: #B4481A; --pico-primary-hover: #8E3814; --pico-primary-underline: rgba(180,72,26,.4);
  --pico-primary-background: #B4481A; --pico-primary-hover-background: #8E3814; --pico-primary-border: #B4481A;
  --pico-primary-hover-border: #8E3814; --pico-primary-inverse: #FFFFFF; --pico-primary-focus: rgba(180,72,26,.25);
  --pico-secondary: #6A615A; --pico-secondary-background: #FFFFFF; --pico-secondary-border: #E7DFD3; --pico-secondary-inverse: #2A2522;
  --pico-secondary-hover-background: #F2ECE2; --pico-secondary-hover-border: #D9CEBF;
  --pico-card-background-color: #FFFFFF; --pico-card-sectioning-background-color: #FFFFFF; --pico-card-box-shadow: none;
  --pico-form-element-background-color: #FFFFFF; --pico-form-element-border-color: #E0D6C8;
  --pico-border-radius: 1rem;
}
html[data-style="warm"] button, html[data-style="warm"] [role=button], html[data-style="warm"] input:not([type=checkbox], [type=radio]), html[data-style="warm"] select { border-radius: 999px; }
html[data-style="warm"] .brand { font-family: "Noto Serif TC", serif; color: var(--pt-accent); }
html[data-style="warm"] .brand-mark { display: none; }

/* ---------- A 財經專業 ---------- */
html[data-style="pro"]:root {
  --pt-accent: #0B6E78; --pt-accent-ink: #0B5C64; --pt-accent-soft: #E7F4F5; --pt-on-accent: #FFFFFF;
  --pt-ink: #13233A; --pt-surface: #F5F8FB; --pt-pill: .3rem; --pt-danger: #B3261E;
  --pt-warn-bg: #FFF4E5; --pt-warn-ink: #7A4200; --pt-warn-border: #F0D3A8;
  --pt-display: "Noto Sans TC", sans-serif; --pt-mono: "IBM Plex Mono", ui-monospace, monospace;
  --pico-font-family: "Noto Sans TC", system-ui, sans-serif;
  --pico-background-color: #FFFFFF; --pico-color: #13233A; --pico-muted-color: #52627A; --pico-muted-border-color: #E3E8EF;
  --pico-h1-color: #13233A; --pico-h2-color: #13233A; --pico-h3-color: #13233A;
  --pico-primary: #0B6E78; --pico-primary-hover: #084F57; --pico-primary-underline: rgba(11,110,120,.4);
  --pico-primary-background: #0B6E78; --pico-primary-hover-background: #084F57; --pico-primary-border: #0B6E78;
  --pico-primary-hover-border: #084F57; --pico-primary-inverse: #FFFFFF; --pico-primary-focus: rgba(11,110,120,.25);
  --pico-secondary: #52627A; --pico-secondary-background: #FFFFFF; --pico-secondary-border: #C9D3E0; --pico-secondary-inverse: #13233A;
  --pico-secondary-hover-background: #F5F8FB; --pico-secondary-hover-border: #AEBBCB;
  --pico-card-background-color: #FFFFFF; --pico-card-sectioning-background-color: #F5F8FB; --pico-card-box-shadow: 0 0 0 1px #E3E8EF;
  --pico-form-element-background-color: #FFFFFF; --pico-form-element-border-color: #C9D3E0;
  --pico-border-radius: .55rem;
}
html[data-style="pro"] header.container { border-bottom: 1px solid #E3E8EF; }

/* ---------- C 深色夜聽 ---------- */
html[data-style="night"]:root {
  --pt-accent: #7CE0B0; --pt-accent-ink: #7CE0B0; --pt-accent-soft: #173528; --pt-on-accent: #0B1A13;
  --pt-ink: #ECEEF1; --pt-surface: #1A1F25; --pt-pill: .5rem; --pt-danger: #FF8A80;
  --pt-warn-bg: #3A2E14; --pt-warn-ink: #F5C25B; --pt-warn-border: #6B5524;
  --pt-display: "Noto Sans TC", sans-serif; --pt-mono: "Noto Sans TC", sans-serif;
  --pico-font-family: "Noto Sans TC", system-ui, sans-serif;
  --pico-background-color: #111418; --pico-color: #ECEEF1; --pico-muted-color: #9AA2AD; --pico-muted-border-color: #262C34;
  --pico-h1-color: #ECEEF1; --pico-h2-color: #ECEEF1; --pico-h3-color: #ECEEF1;
  --pico-primary: #7CE0B0; --pico-primary-hover: #A8F0CB; --pico-primary-underline: rgba(124,224,176,.4);
  --pico-primary-background: #7CE0B0; --pico-primary-hover-background: #A8F0CB; --pico-primary-border: #7CE0B0;
  --pico-primary-hover-border: #A8F0CB; --pico-primary-inverse: #0B1A13; --pico-primary-focus: rgba(124,224,176,.3);
  --pico-secondary: #C5CAD2; --pico-secondary-background: #1A1F25; --pico-secondary-border: #2C333C; --pico-secondary-inverse: #ECEEF1;
  --pico-secondary-hover-background: #222830; --pico-secondary-hover-border: #3A424D;
  --pico-card-background-color: #1A1F25; --pico-card-sectioning-background-color: #1A1F25; --pico-card-box-shadow: 0 0 0 1px #262C34;
  --pico-form-element-background-color: #1A1F25; --pico-form-element-border-color: #2C333C; --pico-form-element-color: #ECEEF1;
  --pico-border-radius: .8rem;
}
html[data-style="night"] h1 { font-weight: 900; }