:root{
  --bg:#0b1020; --card:#121933; --text:#e6e9f3; --muted:#9aa3c0;
  --accent:#4B87C7; --accent-2:#CA88B3; --border:#1f2a4d;
  --bg-end:#070b18; --card-end:#0c1430;
}
@media (prefers-color-scheme: light){
  :root{
    --bg:#f7f8fc; --card:#ffffff; --text:#0c1226; --muted:#53607e;
    --accent:#1f66c1; --accent-2:#b95a8e; --border:#e5e8f4;
    --bg-end:#e8ebf5; --card-end:#d8ddf0;
  }
}
[data-theme="dark"]{
  --bg:#0b1020; --card:#121933; --text:#e6e9f3; --muted:#9aa3c0;
  --accent:#4B87C7; --accent-2:#CA88B3; --border:#1f2a4d;
  --bg-end:#070b18; --card-end:#0c1430;
}
[data-theme="light"]{
  --bg:#f7f8fc; --card:#ffffff; --text:#0c1226; --muted:#53607e;
  --accent:#1f66c1; --accent-2:#b95a8e; --border:#e5e8f4;
  --bg-end:#e8ebf5; --card-end:#d8ddf0;
}
* {box-sizing:border-box}
html, body {height:100%}
body {
  margin:0;
  background:linear-gradient(180deg,var(--bg),var(--bg-end));
  color:var(--text);
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
}
.container {max-width:960px;margin:auto;padding:24px}
/* Header */
header {display:flex;gap:18px;align-items:center;margin:12px 0 24px}
header img.cover {
  width:92px;height:92px;border-radius:18px;object-fit:cover;
  box-shadow:0 10px 24px rgba(0,0,0,.35)
}
header .titles {flex:1}
h1 {font-size:clamp(24px,3.4vw,36px);margin:0 0 6px;font-weight:800;letter-spacing:.3px}
.tagline {margin:0;color:var(--muted)}
/* Platform links */
.links {display:flex;gap:10px;flex-wrap:wrap;margin-top:10px}
.links a {
  border:1px solid var(--border);
  padding:8px 12px;border-radius:10px;
  color:var(--text);text-decoration:none
}
.links a:hover {border-color:var(--accent)}
/* Player */
.player {
  position:sticky;top:0;z-index:20;
  background:linear-gradient(180deg,var(--card),var(--card-end));
  border:1px solid var(--border);
  padding:14px;border-radius:16px;
  box-shadow:0 8px 24px rgba(0,0,0,.25)
}
.np {display:flex;gap:12px;align-items:center;margin-bottom:10px}
.np .thumb {
  width:56px;height:56px;border-radius:12px;
  background:var(--bg-end) center/cover no-repeat;
  border:1px solid var(--border)
}
.np .meta {min-width:0}
.np .title {font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.np .sub {color:var(--muted);font-size:12px}
.controls {display:flex;gap:14px;align-items:center;flex-wrap:wrap}
button.icon {
  appearance:none;border:1px solid var(--border);
  background:transparent;color:var(--text);
  padding:10px 12px;border-radius:12px;cursor:pointer
}
button.icon:hover {border-color:var(--accent)}
.seek {display:flex;align-items:center;gap:10px;flex:1;min-width:200px}
input[type=range] {flex:1;accent-color:var(--accent)}
.time {font-variant-tabular-nums:tabular-nums;color:var(--muted);font-size:12px;min-width:94px;text-align:right}
select {
  background:transparent;color:var(--text);
  border:1px solid var(--border);border-radius:10px;padding:8px
}
/* Continue Listening Card */
#continueCard {
  margin-top: 16px;
  padding: 16px;
}
.continue-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.continue-meta {
  min-width: 0;
  flex: 1;
}
.continue-title {
  font-weight: 700;
  font-size: 15px;
  line-height: 1.3;
  white-space: normal; /* allow wrapping */
  overflow: visible;
  word-break: break-word;
}
.continue-sub {
  color: var(--muted);
  font-size: 13px;
  margin-top: 4px;
  white-space: normal; /* allow wrapping */
  word-break: break-word;
}
/* Cards */
.grid {display:grid;grid-template-columns:1fr;gap:16px;margin-top:22px}
@media (min-width:860px) { .grid {grid-template-columns:1fr 1fr} }
.card {
  background:linear-gradient(180deg,var(--card),var(--card-end));
  border:1px solid var(--border);
  padding:16px;border-radius:16px
}
.search {display:flex;gap:10px}
.search input {
  flex:1;padding:12px 14px;border-radius:12px;
  border:1px solid var(--border);
  background:transparent;color:var(--text)
}
.h3 {margin:0 0 8px}
.about {margin:0;color:var(--muted)}
.hint {color:var(--muted);font-size:12px;margin-top:10px}
/* Episodes header with sort + count */
.episodes-header {
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:12px;
  margin-bottom:12px;
}
.episode-count {
  font-size: 13px;
  color: var(--muted);
  background: rgba(var(--muted), 0.15);
  padding: 2px 8px;
  border-radius: 12px;
  margin-left: 8px;
}
.sort-controls {
  display:flex;
  gap:8px;
}
.sort-btn {
  padding:6px 12px;
  font-size:13px;
}
.sort-btn.active {
  background:rgba(var(--accent), 0.15);
  border-color:var(--accent);
  color:var(--accent);
}
/* Episodes list */
.episodes {display:flex;flex-direction:column;gap:12px}
.ep {
  padding:12px;
  border:1px solid var(--border);
  border-radius:14px;
  background:rgba(255,255,255,0.02);
  transition: all 0.15s ease;
  overflow:hidden;
}
.ep:active {
  background: rgba(var(--accent), 0.12);
  transform: scale(0.985);
  transition: all 0.12s ease;
}
.ep:hover {
  border-color:var(--accent);
  background:rgba(255,255,255,0.05);
}
.ep.highlight {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(75, 135, 199, 0.25);
}
.ep.highlight .ep-title {
  text-decoration: underline;
  text-decoration-color: rgba(75, 135, 199, 0.6);
  text-underline-offset: 3px;
}
.ep-top {
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:12px;
  align-items:center;
  cursor:pointer;
  user-select:none;
  overflow:hidden;
}
.ep .bullet {
  width:36px;height:36px;border-radius:12px;
  background:radial-gradient(circle at 30% 30%, var(--accent-2), var(--accent));
  display:grid;place-items:center;color:white;font-weight:800
}
.ep .ep-title {font-weight:700;line-height:1.2}
.ep .ep-sub {
  color:var(--muted);
  font-size:12px;
  margin-top:2px;
  white-space:normal;
  line-height:1.3;
  word-break:break-word;
}
.ep .ep-actions {
  display:flex;
  gap:8px;
  align-items:center;
  flex-wrap:wrap;
  min-width:0;
}
/* Buttons */
.btn {
  border:1px solid var(--border);
  background:transparent;color:var(--text);
  padding:8px 10px;border-radius:10px;cursor:pointer;
  text-decoration:none; display:inline-block;
  white-space:nowrap;
}
.btn:hover {border-color:var(--accent)}
.btn.primary {border-color:var(--accent)}
/* Inline details drawer */
.ep-details {
  margin-top:12px;
  padding-top:12px;
  border-top:1px solid var(--border);
  display:none;
}
.ep-details.open {display:block !important;}
.ep-desc {color:var(--text);line-height:1.6;font-size:15px;margin:0 0 16px;}
.ep-desc p {margin:0 0 1em;}
.ep-desc p:last-child {margin-bottom:0;}
.ep-desc strong,.ep-desc b {font-weight:700;color:var(--accent-2);}
.ep-desc em,.ep-desc i {font-style:italic;opacity:0.9;}
.ep-desc ul,.ep-desc ol {margin:1em 0 1em 1.5em;padding-left:1em;}
.ep-desc li {margin-bottom:0.5em;}
.ep-desc a {color:var(--accent);text-decoration:underline;text-underline-offset:2px;transition:color 0.15s;}
.ep-desc a:hover {color:var(--accent-2);}
.ep-desc a[target="_blank"]::after {content:" ↗";font-size:0.8em;opacity:0.7;margin-left:2px;}
.share-row {display:flex;gap:8px;flex-wrap:wrap;margin:0 0 10px;}
.small-note {color:var(--muted);font-size:12px;margin:8px 0 0;}
/* Newsletter */
.newsletter-inner {display:flex;gap:20px;align-items:center;flex-wrap:wrap;}
.newsletter-text {flex:1;min-width:180px;}
.newsletter-text .h3 {margin-bottom:4px;}
.newsletter-form {flex:1;min-width:240px;}
.newsletter-fields {display:flex;gap:8px;}
.newsletter-fields input[type="email"] {
  flex:1;padding:10px 14px;border-radius:12px;
  border:1px solid var(--border);background:transparent;
  color:var(--text);font-size:14px;font-family:inherit;
}
.newsletter-fields input[type="email"]::placeholder {color:var(--muted);}
.newsletter-fields input[type="email"]:focus {outline:none;border-color:var(--accent);}
.newsletter-msg {
  font-size:13px;margin-top:8px;padding:8px 12px;border-radius:8px;
}
.newsletter-msg.success {
  color:#10bf7a;background:rgba(16,191,122,0.1);border:1px solid rgba(16,191,122,0.25);
}
.newsletter-msg.error {
  color:#f2643b;background:rgba(242,100,59,0.1);border:1px solid rgba(242,100,59,0.25);
}
/* Tag filters */
.tag-filters {display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.tag-chip {
  border:1px solid var(--border);background:transparent;color:var(--muted);
  padding:4px 12px;border-radius:20px;cursor:pointer;font-size:12px;transition:all 0.15s;
}
.tag-chip:hover {border-color:var(--accent);color:var(--text)}
.tag-chip.active {background:var(--accent);border-color:var(--accent);color:#fff}
/* Footer + status */
.status {margin:14px 0 0;color:var(--muted);font-size:12px}
footer {margin:26px 0 8px;color:var(--muted);font-size:12px;text-align:center}
.hidden {display:none;}
/* Toast */
.toast {position:fixed;left:50%;bottom:18px;transform:translateX(-50%);background:rgba(0,0,0,.7);color:#fff;padding:10px 12px;border-radius:12px;font-size:12px;z-index:80;}
/* Mobile */
@media (max-width: 720px){
  .container{padding:16px}
  header{align-items:flex-start}
  header img.cover{width:76px;height:76px;border-radius:16px}
  .btn, button.icon{ padding:10px 12px; border-radius:12px; }
  .ep-top{ grid-template-columns:auto 1fr; }
  .ep .ep-actions{ grid-column: 1 / -1; }
  .seek{ min-width:100%; }
  .time{ min-width: 88px; }
  .newsletter-inner{ flex-direction:column; gap:12px; }
  .newsletter-fields{ flex-direction:column; }
  .newsletter-fields input[type="email"],
  .newsletter-fields .btn { width:100%; }
}