:root {
  /* Retro terminal palette */
  --bg: #050805;
  --panel: #07110a;
  --text: #d4ffd4;
  --muted: #85b985;
  --accent: #19ff7a;
  --accent-2: #10d869;
  --border: #114b2b;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  color: var(--text);
  background: var(--bg);
  text-shadow: 0 0 1px rgba(25, 255, 122, 0.25);
}
/* Subtle CRT scanlines + vignette */
body::after {
  content: "";
  position: fixed; inset: 0; pointer-events: none; z-index: 9999;
  background:
    radial-gradient(120% 80% at 50% 20%, rgba(0,0,0,0) 0%, rgba(0,0,0,0.15) 70%, rgba(0,0,0,0.35) 100%),
    repeating-linear-gradient(180deg, rgba(0,0,0,0.08), rgba(0,0,0,0.08) 2px, transparent 3px, transparent 4px);
  mix-blend-mode: multiply;
}

::selection { background: rgba(25,255,122,0.25); color: var(--text); }

.topbar {
  position: sticky; top: 0; z-index: 2;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem;
  padding: 0.8rem 1rem;
  background: var(--panel);
  border-bottom: 1px solid var(--border);
}
.topbar h1 { font-size: 1.05rem; margin: 0; letter-spacing: 0.05em; text-transform: uppercase; color: var(--accent); }
.controls { display: flex; gap: 0.75rem; align-items: center; }
input[type="search"] {
  width: min(48ch, 60vw);
  padding: 0.45rem 0.6rem;
  border-radius: 4px;
  border: 1px solid var(--border);
  background: #06160c;
  color: var(--text);
  caret-color: var(--accent);
}
input::placeholder { color: #5a8c5a; }
.toggle { display: inline-flex; gap: 0.4rem; align-items: center; color: var(--muted); }
.login-link { display: none; }
.toggle { display: inline-flex; gap: 0.4rem; align-items: center; color: var(--muted); }

main { padding: 0.8rem 1rem 7.5rem; display: grid; grid-template-columns: 14ch 1fr; gap: 1rem; align-items: start; }
.summary { color: var(--muted); margin: 0.5rem 0 1rem; }
.summary-actions { margin: 0 0 0.8rem; }
.summary-actions button {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 0.3rem 0.55rem;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.summary-actions button:hover { border-color: var(--accent); color: var(--accent); }

.year {
  margin: 1.2rem 0 0.4rem;
  font-weight: 600;
  color: var(--accent);
}
.group { border: 1px solid var(--border); border-radius: 6px; overflow: hidden; background: #06160c; }
.row { display: grid; grid-template-columns: 9ch 1fr auto; gap: 0.75rem; align-items: center; }
.row { padding: 0.5rem 0.7rem; background: #06160c; border-bottom: 1px solid #0b2416; }
.row:nth-child(2n) { background: #05130b; }
.row:last-child { border-bottom: none; }
.row .date { color: var(--muted); }
.row .title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.row .len { color: var(--muted); font-variant-numeric: tabular-nums; }
.row .len.loading { opacity: 0.7; }
.row.playing { background: #0a2215; outline: 1px solid var(--accent-2); }
.row button.link { appearance: none; border: none; background: transparent; color: inherit; text-align: left; cursor: pointer; padding: 0; font-weight: 600; }
.row button.link:hover { color: var(--accent); }

.player {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 3;
  display: grid; grid-template-columns: 1fr auto; gap: 0.6rem; align-items: center;
  padding: 0.6rem 0.8rem; background: var(--panel); border-top: 1px solid var(--border);
  box-shadow: 0 -6px 20px rgba(0,0,0,0.5);
}
.now-title { font-weight: 600; }
.now-sub { color: var(--muted); font-size: 0.9rem; }
.player-controls { display: inline-flex; gap: 0.5rem; align-items: center; }
.player button { background: transparent; color: var(--text); border: 1px solid var(--border); border-radius: 4px; padding: 0.3rem 0.55rem; cursor: pointer; text-transform: uppercase; letter-spacing: 0.05em; }
.player button:hover { border-color: var(--accent); color: var(--accent); }
audio { width: 100%; grid-column: 1 / -1; }
label.rate { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--muted); }
select#rate { background: #06160c; border: 1px solid var(--border); color: var(--text); border-radius: 4px; padding: 0.2rem 0.4rem; }

.muted { color: var(--muted); }

/* Year nav */
.year-nav { position: sticky; top: 3.25rem; max-height: calc(100vh - 4rem); overflow: auto; padding-right: 0.25rem; }
.year-nav a { display: block; color: var(--muted); text-decoration: none; padding: 0.15rem 0.25rem; border-radius: 4px; }
.year-nav a:hover { color: var(--text); background: #07160d; }
.year-nav .count { color: var(--muted); font-variant-numeric: tabular-nums; }

.toggle-btn[aria-pressed="true"] { border-color: var(--accent-2); color: var(--accent-2); box-shadow: 0 0 0 2px rgba(16,216,105,0.18) inset; }

@media (max-width: 800px) {
  main { grid-template-columns: 1fr; }
  .year-nav { display: none; }
}

/* Mobile-friendly tweaks */
@media (max-width: 640px) {
  .topbar { flex-wrap: wrap; gap: 0.6rem; }
  .topbar h1 { flex: 1 0 100%; font-size: 0.95rem; }
  .controls { flex-wrap: wrap; width: 100%; }
  input[type="search"] { width: 100%; }
  .toggle { order: 2; }
  /* login removed */

  .row { grid-template-columns: 7ch 1fr; gap: 0.6rem; }
  .row .len { display: none; }
  .row .title { white-space: normal; }
  .row button.link { font-size: 0.95rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; white-space: normal; word-break: break-word; overflow-wrap: anywhere; }
  .row { padding: 0.65rem 0.7rem; }

  .player { grid-template-columns: 1fr; gap: 0.5rem; }
  .player-controls { justify-content: space-between; flex-wrap: wrap; }
  .player button { padding: 0.45rem 0.7rem; }
}

/* Audio element slight tint for theme cohesion */
audio { filter: hue-rotate(80deg) saturate(0.85); }