#app { max-width: 44rem; margin: 0 auto; padding: 0 1.5rem 6rem; }

.mini-hero { text-align: center; padding: 5rem 0 4rem; }
.mini-hero__cover { width: 190px; height: 190px; margin: 0 auto 2rem; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow); }
.mini-hero__cover img, .mini-hero__cover.cover-fallback { width: 100%; height: 100%; object-fit: cover; }
.mini-hero__title { font-family: var(--font-display); font-weight: 600; font-size: clamp(2rem, 5vw, 3rem); margin: 0 0 1rem; letter-spacing: -0.015em; }
.mini-hero__desc { color: var(--text-muted); font-size: 1rem; max-width: 30rem; margin: 0 auto; white-space: pre-line; }
.mini-hero__meta { margin-top: 1.5rem; font-size: 0.8rem; color: var(--text-muted); letter-spacing: .04em; text-transform: uppercase; }

.mini-divider { border: none; border-top: 1px solid var(--border); margin: 0 0 1rem; }

.mini-list { display: flex; flex-direction: column; }
.mini-row {
  display: flex; align-items: baseline; gap: 1.25rem; padding: 1.4rem 0; border-bottom: 1px solid var(--border);
  cursor: pointer;
}
.mini-row__date { font-size: 0.78rem; color: var(--text-muted); width: 4.2rem; flex-shrink: 0; }
.mini-row__body { flex: 1; min-width: 0; }
.mini-row__title { font-family: var(--font-display); font-size: 1.15rem; margin: 0; line-height: 1.35; transition: color .15s ease; }
.mini-row:hover .mini-row__title { color: var(--accent); }
.mini-row.is-open .mini-row__title { color: var(--accent); }
.mini-row__duration { font-size: 0.78rem; color: var(--text-muted); flex-shrink: 0; }

.mini-row__panel { display: none; padding: 0 0 0 5.45rem; margin-top: 0.7rem; }
.mini-row.is-open .mini-row__panel { display: block; }
.mini-row__panel-inner { display: flex; align-items: center; gap: 0.85rem; }
.mini-play {
  width: 2.4rem; height: 2.4rem; border-radius: 50%; border: 1px solid var(--border); background: var(--surface);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.mini-play svg { width: 0.9rem; height: 0.9rem; }
.mini-row.is-open.is-playing .mini-play { background: var(--accent); border-color: var(--accent); color: #fff; }
.mini-progress { flex: 1; height: 3px; background: var(--border); border-radius: 999px; position: relative; cursor: pointer; }
.mini-progress__fill { position: absolute; inset: 0; width: 0%; background: var(--accent); border-radius: 999px; }
.mini-time { font-size: 0.72rem; color: var(--text-muted); width: 3.6rem; text-align: right; flex-shrink: 0; }
.mini-desc { font-size: 0.85rem; color: var(--text-muted); margin: 0.6rem 0 0; max-width: 32rem; }

.load-more { display: flex; justify-content: center; margin-top: 2rem; }
.load-more button { border: none; background: none; color: var(--text-muted); font-size: 0.85rem; text-decoration: underline; text-underline-offset: 3px; }
.load-more button:hover { color: var(--text); }

.toast {
  position: fixed; bottom: 1.25rem; left: 50%; transform: translateX(-50%) translateY(120%);
  background: var(--text); color: var(--bg); padding: 0.75rem 1.25rem; border-radius: var(--radius-sm);
  font-size: 0.85rem; transition: transform .25s ease; z-index: 100; max-width: 90vw; text-align: center;
}
.toast.is-visible { transform: translateX(-50%) translateY(0); }

@media (max-width: 520px) {
  .mini-row { gap: 0.8rem; }
  .mini-row__date { width: 3.2rem; font-size: 0.72rem; }
  .mini-row__title { font-size: 1rem; }
  .mini-row__panel { padding-left: 4rem; }
}