:root{
    --bg: #0b0f14;
    --card: #121722;
    --card-2: #151b28;
    --text: #e8eef7;
    --muted: #a8b3c7;
    --accent: #4da3ff;
    --accent-2: #79ffe1;
    --border: #253046;
    --playing: #1f2a3d;
    --btn: #1b2333;
  }
  
  *{ box-sizing: border-box; }
  html, body{ height:100%; }
  body{
    margin:0;
    font-family: ui-sans-serif, system-ui, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
    background: radial-gradient(1200px 800px at 10% -10%, #152035 0%, #0b0f14 60%) no-repeat, var(--bg);
    color: var(--text);
  }
  
  .topbar{
    display:flex; justify-content:space-between; align-items:center;
    padding:14px 18px; border-bottom:1px solid var(--border);
    position: sticky; top:0; background: rgba(11,15,20,0.8); backdrop-filter: blur(6px);
  }
  .brand{ display:flex; gap:12px; align-items: center; }
  .brand .logo{ width:40px; height:40px; border-radius:10px; background: linear-gradient(135deg,var(--accent),var(--accent-2)); display:flex; align-items:center; justify-content:center; font-size:22px; }
  .brand h1{ margin:0; font-size:18px; letter-spacing: .2px; }
  .brand .meta{ margin:2px 0 0; color: var(--muted); font-size:12px; }
  
  .controls{ display:flex; gap:10px; align-items:center; }
  .switch{ display:flex; gap:6px; align-items:center; font-size:14px; color: var(--muted); }
  .btn{
    background: var(--btn);
    color: var(--text);
    border: 1px solid var(--border);
    padding:6px 10px; border-radius:10px; cursor:pointer;
  }
  .btn:hover{ border-color: var(--accent); }
  .live-btn { border-color: #ff4444; color: #ff8888; }
  .live-btn.live-active { background: #3a1010; border-color: #ff4444; color: #ff4444; }
  
  .player{
    padding: 16px 18px;
    display: flex; flex-direction: column; gap: 8px;
  }
  audio{ width:100%; border-radius: 8px; }

  .now{ color: var(--muted); font-size: 14px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

  .player-controls-row {
    display: flex; align-items: center; gap: .75rem; flex-wrap: wrap;
    padding-top: .25rem; border-top: 1px solid var(--border);
  }
  
  .toolbar{
    display:flex; gap:12px; align-items:center; justify-content:space-between;
    padding: 8px 18px 0;
  }
  .search{
    flex:1;
    background: var(--card-2); color: var(--text);
    border:1px solid var(--border); border-radius:10px;
    padding:10px 12px; outline:none;
  }
  .search::placeholder{ color: #7b879b; }
  
  .days{ padding: 8px 18px 30px; }

  /* tab bar */
  .tab-bar {
    display: flex; border-bottom: 1px solid var(--border);
    padding: 0 18px; gap: .25rem;
  }
  .tab-btn {
    background: none; border: none; color: var(--muted);
    padding: .65rem 1.1rem; font-size: .9rem; cursor: pointer;
    border-bottom: 2px solid transparent; margin-bottom: -1px;
    transition: color .15s;
  }
  .tab-btn:hover { color: var(--text); }
  .tab-btn.active { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; }

  .section-label{
    font-size:.75rem; text-transform:uppercase; letter-spacing:.1em;
    opacity:.45; padding:.9rem .25rem .4rem; user-select:none;
  }
  .section-count{ opacity:.7; }

  /* day cards */
  .day-card{
    background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08);
    border-radius:10px; overflow:hidden; margin-bottom:.5rem;
  }
  .day-header{
    display:flex; align-items:center; justify-content:space-between;
    padding:.7rem .9rem; cursor:pointer; user-select:none;
  }
  .day-header:hover{ background:rgba(255,255,255,.05); }
  .day-name{ font-weight:600; font-size:.95rem; }
  .day-count{ font-size:.75rem; opacity:.45; margin-top:.15rem; }
  .day-chevron{ opacity:.4; transition:transform .2s; font-size:.8rem; }
  .day-card.open .day-chevron{ transform:rotate(90deg); }
  .day-files{ display:none; border-top:1px solid rgba(255,255,255,.07); }
  .day-card.open .day-files{ display:block; }

  .scroller{ max-height:60vh; overflow:auto; }
  ul.filelist{ list-style:none; margin:0; padding:0; }
  li.file{
    display:flex; align-items:center; justify-content:space-between; gap:10px;
    padding:9px 12px; border-bottom:1px solid rgba(255,255,255,.05); font-size:.88rem;
  }
  li.file:last-child{ border-bottom:none; }
  li.file .name{ flex:1; word-break:break-all; opacity:.85; }
  .actions{ display:flex; gap:8px; flex-shrink:0; }
  .file.playing{ background: var(--playing); }
  
  a.link, a.link:visited{ color: var(--accent); text-decoration: none; }
  a.link:hover{ text-decoration: underline; }
  
  /* scrollbar */
  .scroller::-webkit-scrollbar { width: 10px; }
  .scroller::-webkit-scrollbar-thumb {
    background: #2b384f; border-radius: 10px; border: 2px solid transparent; background-clip: padding-box;
  }
  .scroller::-webkit-scrollbar-track { background: transparent; }

  /* player buttons row */
  .player-btns {
    display: flex;
    gap: .5rem;
  }
  .skip-btn {
    flex: 1;
    padding: 9px 0;
    font-size: .9rem;
    text-align: center;
  }

  .block-item{
    display:flex; justify-content:space-between; align-items:center; gap:.5rem;
    padding:.5rem .9rem; border-bottom:1px solid rgba(255,255,255,.05); font-size:.88rem;
  }
  .block-item:last-child{ border-bottom:none; }
  .block-label{ opacity:.85; }