:root {
  --bg: #fafafa;
  --surface: #ffffff;
  --surface-high: #f0f0f0;
  --surface-dock: rgba(255,255,255,0.86);
  --on-surface: #0b0b0b;
  --on-surface-var: #5a5a5a;
  --outline: #e2e2e2;
  --accent: #111111;
  --on-accent: #ffffff;
  --shadow: 0 8px 28px rgba(0,0,0,0.08);
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0b0b0b;
    --surface: #151515;
    --surface-high: #1d1d1d;
    --surface-dock: rgba(21,21,21,0.86);
    --on-surface: #fafafa;
    --on-surface-var: #a3a3a3;
    --outline: #2a2a2a;
    --accent: #fafafa;
    --on-accent: #0b0b0b;
    --shadow: 0 10px 32px rgba(0,0,0,0.45);
  }
}

:root[data-theme="dark"] {
  --bg: #0b0b0b;
  --surface: #151515;
  --surface-high: #1d1d1d;
  --surface-dock: rgba(21,21,21,0.86);
  --on-surface: #fafafa;
  --on-surface-var: #a3a3a3;
  --outline: #2a2a2a;
  --accent: #fafafa;
  --on-accent: #0b0b0b;
  --shadow: 0 10px 32px rgba(0,0,0,0.45);
}

* { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
  background: var(--bg);
  color: var(--on-surface);
  font-family: "Inter", "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

body {
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

button { font-family: inherit; cursor: pointer; }

/* ---------- Preload screen ---------- */
.preload {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: 10vh 8vw;
  gap: 18px;
  max-width: 560px;
}
.preload-mark {
  width: 96px; height: 96px;
  border-radius: 40% 60% 55% 45% / 50% 40% 60% 50%;
  background: var(--accent);
  display: flex; align-items: center; justify-content: center;
  animation: blob-pop 600ms cubic-bezier(.2,1.4,.4,1) both;
}
.preload-mark .blob { fill: var(--accent); }
.preload-mark svg { display: block; }
.preload-mark .check { stroke: var(--on-accent); }
@keyframes blob-pop { from { transform: scale(.6); opacity: 0 } to { transform: scale(1); opacity: 1 } }

.preload-title { font-size: clamp(28px, 5vw, 38px); font-weight: 700; margin: 0; letter-spacing: -0.01em; }
.preload-sub { margin: 0; color: var(--on-surface-var); line-height: 1.5; font-size: 15px; }

.preload-bar { width: 100%; max-width: 420px; height: 6px; border-radius: 999px; background: var(--outline); overflow: hidden; }
.preload-bar-fill { height: 100%; width: 10%; border-radius: 999px; background: var(--accent); animation: bar-grow 2.6s cubic-bezier(.3,.8,.4,1) forwards; }
@keyframes bar-grow { to { width: 100%; } }

.preload-steps { list-style: none; padding: 0; margin: 4px 0 0; width: 100%; max-width: 420px; display: flex; flex-direction: column; gap: 8px; }
.preload-steps li {
  display: flex; align-items: center; gap: 12px;
  background: var(--surface-high); border-radius: 16px;
  padding: 12px 16px; font-size: 14px; color: var(--on-surface-var);
  opacity: .5;
}
.preload-steps li.is-active, .preload-steps li.is-done { opacity: 1; color: var(--on-surface); }
.step-icon {
  width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid var(--outline); flex: none;
  position: relative;
}
.preload-steps li.is-active .step-icon {
  border-top-color: var(--on-surface);
  animation: spin 800ms linear infinite;
}
.preload-steps li.is-done .step-icon {
  border: none; background: var(--on-surface);
}
.preload-steps li.is-done .step-icon::after {
  content: ""; position: absolute; left: 5px; top: 2px;
  width: 4px; height: 8px; border: solid var(--bg);
  border-width: 0 2px 2px 0; transform: rotate(45deg);
}
@keyframes spin { to { transform: rotate(360deg); } }

.preload-footer { margin: 4px 0 0; font-size: 12px; color: var(--on-surface-var); }
.preload-footer a { color: inherit; }

.preload.is-leaving { animation: fade-out 400ms ease forwards; }
@keyframes fade-out { to { opacity: 0; transform: translateY(-8px); } }

/* ---------- App shell ---------- */
.app { min-height: 100vh; display: flex; flex-direction: column; }

.topbar {
  position: sticky; top: 0; z-index: 5;
  display: flex; align-items: center; justify-content: space-between;
  padding: calc(14px + env(safe-area-inset-top, 0px)) 20px 14px;
  background: var(--bg);
}
.topbar-title { font-size: 20px; font-weight: 700; margin: 0; letter-spacing: -0.01em; }

.icon-btn {
  width: 42px; height: 42px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface-high); color: var(--on-surface);
  border: none; transition: transform 160ms cubic-bezier(.3,1.4,.4,1);
}
.icon-btn:active { transform: scale(.9); }

.screens { flex: 1; padding: 4px 20px 160px; max-width: 560px; margin: 0 auto; width: 100%; }
.screen-title { font-size: 22px; font-weight: 700; margin: 10px 0 16px; }

/* ---------- Hero / Today ---------- */
.hero-card {
  background: var(--surface);
  border-radius: 28px;
  box-shadow: var(--shadow);
  overflow: hidden;
  margin-top: 8px;
}
.hero-art {
  width: 100%; aspect-ratio: 1 / 1; max-height: 320px;
  background-size: cover; background-position: center;
  background-color: var(--surface-high);
}
.hero-body { padding: 20px 22px 24px; }
.hero-date { font-size: 26px; font-weight: 700; margin: 0 0 4px; letter-spacing: -0.01em; }
.hero-note { font-size: 14px; color: var(--on-surface-var); margin: 0 0 18px; }

.player { display: flex; align-items: center; gap: 16px; }
.play-fab {
  flex: none; width: 60px; height: 60px; border-radius: 50%;
  background: var(--accent); color: var(--on-accent); border: none;
  display: flex; align-items: center; justify-content: center;
  transition: transform 180ms cubic-bezier(.3,1.6,.4,1);
}
.play-fab:active { transform: scale(.88); }
.play-fab--large { width: 84px; height: 84px; margin: 20px auto 10px; }

.scrub { flex: 1; min-width: 0; }
.scrub input[type="range"] {
  -webkit-appearance: none; width: 100%; height: 4px; border-radius: 999px;
  background: var(--outline); outline: none;
}
.scrub input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 14px; height: 14px; border-radius: 50%;
  background: var(--on-surface); cursor: pointer;
}
.scrub-time { display: flex; justify-content: space-between; font-size: 11px; color: var(--on-surface-var); margin-top: 6px; }

.pill-row { display: flex; gap: 12px; margin-top: 18px; }
.pill-btn {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px; border-radius: 999px; border: none;
  background: var(--surface-high); color: var(--on-surface);
  font-size: 14px; font-weight: 600;
  transition: transform 160ms cubic-bezier(.3,1.4,.4,1);
}
.pill-btn:active { transform: scale(.96); }

/* ---------- Archive ---------- */
.date-strip { display: flex; gap: 8px; overflow-x: auto; padding: 4px 0 14px; scrollbar-width: none; }
.date-strip::-webkit-scrollbar { display: none; }
.date-chip {
  flex: none; padding: 10px 16px; border-radius: 999px; border: none;
  background: var(--surface-high); color: var(--on-surface-var); font-size: 13px; font-weight: 600;
}
.date-chip.is-selected { background: var(--accent); color: var(--on-accent); }

.episode-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.episode-row {
  display: flex; align-items: center; gap: 14px;
  background: var(--surface); border-radius: 18px; padding: 14px 16px;
  border: none; width: 100%; text-align: left; color: var(--on-surface);
}
.episode-row[disabled] { opacity: .4; }
.episode-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--outline); flex: none; }
.episode-row.is-playing .episode-dot { background: var(--accent); }
.episode-main { flex: 1; }
.episode-date { font-weight: 600; font-size: 15px; }
.episode-sub { font-size: 12px; color: var(--on-surface-var); }

/* ---------- Live ---------- */
.live-hero { text-align: center; padding: 30px 0; }
.live-logo { width: 96px; height: 96px; object-fit: contain; border-radius: 24px; background: var(--surface-high); padding: 10px; }
.live-dot { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; letter-spacing: .04em; color: var(--on-surface-var); margin: 16px 0 4px; }
.live-dot span { width: 8px; height: 8px; border-radius: 50%; background: #e23; animation: pulse 1.4s ease-in-out infinite; }
@keyframes pulse { 0%,100% { opacity: 1 } 50% { opacity: .3 } }
.live-name { font-size: 24px; font-weight: 700; margin: 4px 0 0; }
.live-status { font-size: 13px; color: var(--on-surface-var); margin-top: 10px; }

/* ---------- Mini player ---------- */
.mini-player {
  position: fixed; left: 16px; right: 16px; bottom: calc(92px + env(safe-area-inset-bottom, 0px));
  z-index: 6; max-width: 528px; margin: 0 auto;
  background: var(--surface); border-radius: 22px; box-shadow: var(--shadow);
  display: flex; align-items: center; gap: 12px; padding: 8px 10px 8px 8px;
  transition: transform 220ms cubic-bezier(.3,1.2,.4,1);
}
.mini-player:active { transform: scale(.98); }
.mini-art { width: 44px; height: 44px; border-radius: 14px; object-fit: cover; background: var(--surface-high); }
.mini-text { flex: 1; min-width: 0; }
.mini-title { font-size: 13px; font-weight: 600; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mini-sub { font-size: 11px; color: var(--on-surface-var); margin: 0; }

/* ---------- Dock ---------- */
.dock {
  position: fixed; left: 16px; right: 16px; bottom: env(safe-area-inset-bottom, 14px);
  z-index: 7; max-width: 420px; margin: 0 auto;
  display: flex; justify-content: space-around;
  background: var(--surface-dock); backdrop-filter: blur(16px);
  border-radius: 999px; box-shadow: var(--shadow); padding: 8px;
}
.dock-item {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  background: none; border: none; color: var(--on-surface-var);
  padding: 8px 18px; border-radius: 999px; font-size: 11px; font-weight: 600;
  transition: all 220ms cubic-bezier(.3,1.3,.4,1);
}
.dock-item[aria-current="page"] { background: var(--surface-high); color: var(--on-surface); transform: scale(1.04); }
.dock-item:active { transform: scale(.92); }

/* ---------- Settings dialog ---------- */
.settings-dialog {
  border: none; border-radius: 26px; padding: 0; width: min(440px, 92vw);
  background: var(--bg); color: var(--on-surface);
  box-shadow: var(--shadow);
}
.settings-dialog::backdrop { background: rgba(0,0,0,0.45); backdrop-filter: blur(2px); }
.settings-header { display: flex; align-items: center; justify-content: space-between; padding: 20px 20px 4px; }
.settings-header h2 { font-size: 19px; margin: 0; }
.settings-card { padding: 16px 20px; }
.settings-card h3 { font-size: 12px; text-transform: none; color: var(--on-surface-var); margin: 0 0 10px; font-weight: 600; }
.about-line { font-size: 13px; color: var(--on-surface-var); margin: 0 0 6px; }
.about-line a { color: var(--on-surface); }

.segmented { display: flex; background: var(--surface-high); border-radius: 999px; padding: 4px; gap: 2px; }
.seg-btn { flex: 1; border: none; background: none; padding: 10px 0; border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--on-surface-var); transition: all 200ms ease; }
.seg-btn.is-active { background: var(--accent); color: var(--on-accent); }

@media (max-width: 380px) {
  .pill-btn { font-size: 13px; padding: 12px 6px; }
  .screens { padding-left: 14px; padding-right: 14px; }
}