:root {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color-scheme: light;
}
* { box-sizing: border-box; }
body { margin: 0; background: #f4f4f5; color: #18181b; }
a { color: inherit; }
.topbar { padding: 18px 20px; background: white; border-bottom: 1px solid #ddd; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; position: sticky; top: 0; z-index: 5; }
.brand-block { margin-right: auto; }
h1 { margin: 0; font-size: 1.45rem; }
h2 { margin: 0; font-size: 1.25rem; }
h3 { margin: 0; font-size: 1rem; }
p { margin: 4px 0; }
.search { display: flex; gap: 8px; flex: 1; max-width: 560px; }
input { flex: 1; min-width: 160px; font-size: 16px; padding: 10px 12px; border: 1px solid #bbb; border-radius: 9px; background: white; }
button { min-height: 44px; padding: 10px 14px; border: 0; border-radius: 9px; background: #27272a; color: white; font-size: 15px; cursor: pointer; }
button.secondary { background: #52525b; }
main { max-width: 1180px; margin: auto; padding: 20px; }
.muted { color: #71717a; font-size: .9rem; }
.section-block { margin-bottom: 28px; }
.section-heading { display: flex; justify-content: space-between; gap: 12px; align-items: end; margin-bottom: 12px; }
.breadcrumbs { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; color: #52525b; margin-bottom: 16px; }
.breadcrumbs a { text-decoration: none; }

.continue-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.continue-card { background: white; border: 1px solid #e4e4e7; border-radius: 14px; padding: 12px; display: flex; gap: 12px; align-items: center; text-decoration: none; min-width: 0; }
.continue-copy { min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.continue-copy strong, .continue-copy span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.category-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
.category-card { background: white; border: 1px solid #e4e4e7; border-radius: 14px; padding: 18px; text-decoration: none; display: flex; flex-direction: column; gap: 5px; }
.category-name { font-size: 1.05rem; font-weight: 700; }
.category-count { color: #71717a; font-size: .9rem; }

.author-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.author-card { background: white; border: 1px solid #e4e4e7; border-radius: 12px; padding: 12px; display: flex; align-items: center; gap: 10px; text-decoration: none; }
.author-card small { display: block; color: #71717a; margin-top: 3px; }
.author-initial { width: 42px; height: 42px; border-radius: 50%; background: #e4e4e7; display: grid; place-items: center; font-weight: 700; flex: 0 0 auto; }

.books { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.book { background: white; border: 1px solid #e4e4e7; border-radius: 14px; padding: 12px; min-width: 0; }
.book-link { display: flex; gap: 14px; color: inherit; text-decoration: none; width: 100%; min-width: 0; }
.book-copy { min-width: 0; flex: 1; }
.book-title-row { display: flex; justify-content: space-between; gap: 8px; align-items: flex-start; }
.book-title-row h3 { min-width: 0; overflow-wrap: anywhere; }
.series { color: #52525b; font-size: .92rem; }
.cover, .cover-placeholder { width: 72px; height: 100px; border-radius: 9px; object-fit: cover; flex: 0 0 auto; background: #e4e4e7; }
.cover-placeholder { display: grid; place-items: center; font-size: 28px; }
.cover-medium { width: 62px; height: 86px; }
.status-pill { display: inline-block; border-radius: 999px; padding: 3px 7px; font-size: .72rem; font-weight: 700; white-space: nowrap; }
.status-pill.listening { background: #e0f2fe; color: #075985; }
.status-pill.finished { background: #dcfce7; color: #166534; }
.status-pill.unplayed { background: #f4f4f5; color: #52525b; }
.empty { padding: 30px; background: white; border-radius: 12px; border: 1px solid #e4e4e7; }

.player-header { position: static; }
.back-link { text-decoration: none; font-weight: 600; }
.player-heading { min-width: 0; }
.player-heading p { color: #71717a; }
.player-card { background: white; border: 1px solid #e4e4e7; border-radius: 16px; padding: 18px; display: flex; gap: 22px; align-items: center; flex-wrap: wrap; margin-bottom: 26px; }
.player-cover { width: 180px; height: 250px; font-size: 4rem; }
.now { flex: 1; min-width: 260px; }
.track-name { font-weight: 650; overflow-wrap: anywhere; }
audio { width: 100%; margin: 1rem 0; }
.player-actions { display: flex; gap: .75rem; margin-bottom: 1rem; }
.speed-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
select { font-size: 1rem; padding: .55rem .7rem; border: 1px solid #bbb; border-radius: 8px; background: white; }
.track-list { padding-left: 1.4rem; }
.track-list button { width: 100%; text-align: left; margin: .2rem 0; background: #52525b; }
.track-list button.active { font-weight: 800; background: #18181b; }

@media (max-width: 650px) {
  .topbar { align-items: stretch; position: static; }
  .brand-block { width: 100%; }
  .search { max-width: none; width: 100%; }
  main { padding: 12px; }
  .books, .continue-row, .author-grid { grid-template-columns: 1fr; }
  .book-title-row { flex-direction: column; }
  .player-card { align-items: stretch; }
  .player-cover { width: 132px; height: 184px; align-self: center; }
  .now { min-width: 0; width: 100%; }
  .player-actions button { flex: 1; }
}

.notice{background:#fff7ed;border:1px solid #fed7aa;padding:10px 12px;border-radius:10px;margin:0 0 14px}
.nav-button{min-height:44px;padding:11px 14px;border-radius:9px;background:#27272a;color:#fff;text-decoration:none}
.auth-wrap{max-width:480px;padding-top:8vh}.auth-card,.management-card,.stat-card{background:#fff;border:1px solid #e4e4e7;border-radius:16px;padding:20px}
.auth-form{display:grid;gap:16px;margin-top:18px}.auth-form label{display:grid;gap:6px;font-weight:600}.auth-form input,.delete-form input{width:100%}
.management-card{margin-bottom:26px}.management-actions{display:flex;gap:10px;flex-wrap:wrap;margin:14px 0}.delete-box{border-top:1px solid #e4e4e7;padding-top:12px}.delete-box summary{cursor:pointer;font-weight:700}.delete-form{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px}.delete-form input{flex:1;min-width:200px}.danger{background:#991b1b}
.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:28px}.stat-card{display:flex;flex-direction:column}.stat-card strong{font-size:2rem}.stat-card span{color:#71717a}.history{display:grid;gap:8px;margin-top:12px}.history>div{background:#fff;border:1px solid #e4e4e7;border-radius:10px;padding:12px;display:flex;flex-direction:column}
@media(max-width:650px){.stat-grid{grid-template-columns:1fr 1fr}.delete-form{display:grid}.auth-wrap{padding-top:20px}}

.settings-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.settings-card{background:#fff;border:1px solid #e4e4e7;border-radius:16px;padding:20px}
.settings-card h2{margin-bottom:6px}
.settings-wide{grid-column:1/-1}
.https-form{display:flex;gap:10px;align-items:end;flex-wrap:wrap;margin-top:14px}
.https-form label{display:grid;gap:6px;flex:1;min-width:240px;font-weight:600}
.success-note{background:#ecfdf5;border:1px solid #a7f3d0;padding:10px 12px;border-radius:10px}
.danger-zone{border-color:#fecaca}
.danger-zone summary{cursor:pointer;font-weight:700;margin-top:10px}
code{background:#f4f4f5;padding:2px 5px;border-radius:5px}
@media(max-width:650px){.settings-grid{grid-template-columns:1fr}.settings-wide{grid-column:auto}.https-form{display:grid}}

.mobile-install-hint{display:none;background:#eef2ff;border:1px solid #c7d2fe;border-radius:12px;padding:10px 12px;margin-bottom:14px}
.progress-readout{display:grid;grid-template-columns:1fr auto 1fr;gap:10px;align-items:center;margin-top:8px;font-variant-numeric:tabular-nums}.progress-readout span:last-child{text-align:right}
.sticky-now-playing{position:sticky;bottom:10px;z-index:20;background:rgba(24,24,27,.96);color:#fff;border-radius:16px;padding:12px 14px;margin:14px 0;display:flex;justify-content:space-between;gap:12px;align-items:center;box-shadow:0 8px 30px rgba(0,0,0,.2)}.sticky-now-playing div{display:grid;min-width:0}.sticky-now-playing small{font-size:.65rem;letter-spacing:.08em;color:#a1a1aa}.sticky-now-playing strong,.sticky-now-playing span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sticky-now-playing span{font-size:.82rem;color:#d4d4d8}.sticky-now-playing button{flex:none}
.period-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:28px}.period-grid>div{background:#fff;border:1px solid #e4e4e7;border-radius:14px;padding:16px;display:grid}.period-grid strong{font-size:1.5rem}.period-grid span{color:#71717a}.history-link{background:#fff;border:1px solid #e4e4e7;border-radius:10px;padding:12px;display:flex;flex-direction:column;text-decoration:none;color:inherit}
@media(max-width:650px){.mobile-install-hint{display:block}.period-grid{grid-template-columns:1fr 1fr 1fr}.topbar{position:sticky;top:0;z-index:30}.sticky-now-playing{bottom:8px}.stat-card strong{font-size:1.6rem}}