:root {
    --bg: #0b0c10;
    --card: #121318;
    --text: #e6e6e6;
    --muted: #a0a3a8;
    --accent: #6ee7b7;
    --accent-2: #60a5fa;
    --ring: #ffffff33;
  }
  * { box-sizing: border-box; }
  html, body { height: 100%; }
  body {
    margin: 0;
    font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji";
    color: var(--text);
    background: linear-gradient(180deg, #0b0c10 0%, #0f1117 100%);
  }
  .site-header, .site-footer { text-align: center; padding: 1rem; }
  .site-header h1 { margin: .2rem 0 .2rem; font-size: clamp(1.2rem, 2.5vw, 1.8rem); }
  .site-header .tagline { margin: 0; color: var(--muted); }
  .site-footer { color: var(--muted); }
  
  .player-wrap { max-width: 860px; margin: 0 auto; padding: 1rem; }
  
  .now-playing {
    display: grid; grid-template-columns: 72px 1fr; gap: 1rem; align-items: center;
    background: var(--card); border-radius: 16px; padding: 1rem;
    box-shadow: 0 10px 30px rgba(0,0,0,.25), inset 0 0 0 1px var(--ring);
  }
  .cover { font-size: 2rem; display:flex; align-items:center; justify-content:center; height: 56px; width: 56px; background: #171923; border-radius: 12px; }
  .meta h2 { margin: 0 0 .2rem; font-size: 1.1rem; }
  .meta p { margin: 0; color: var(--muted); font-size: .9rem; word-break: break-all; }
  
  .controls { display:flex; gap:.6rem; align-items:center; justify-content:center; margin: 1rem 0 .5rem; }
  .controls button { appearance: none; border: 0; cursor:pointer; padding:.7rem 1rem; background: #171923; color: var(--text); border-radius: 12px; box-shadow: inset 0 0 0 1px var(--ring); }
  .controls button:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; }
  
  .timers, .volume, .search { display:grid; grid-template-columns: auto 1fr auto; gap:.8rem; align-items:center; }
  .timers { margin-bottom: .5rem; }
  #seek, #volume { width: 100%; }
  
  .search { grid-template-columns: 1fr; margin: .8rem 0; }
  .search input { width:100%; padding:.8rem 1rem; border-radius:12px; border: 0; background:#171923; color:var(--text); box-shadow: inset 0 0 0 1px var(--ring); }
  
  .playlist { margin-top: .6rem; }
  #playlist { list-style:none; margin:0; padding:0; }
  #playlist li {
    display:grid; grid-template-columns: 1fr auto; align-items:center; gap:.6rem;
    padding:.75rem 1rem; margin-bottom:.5rem; border-radius:12px; background:#0f1220; box-shadow: inset 0 0 0 1px transparent;
  }
  #playlist li.active { box-shadow: inset 0 0 0 1px var(--accent); }
  #playlist button.play { appearance:none; border:0; padding:.4rem .6rem; border-radius:10px; background:#171923; color:var(--text); cursor:pointer; }
  .track-title { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .track-meta { color:var(--muted); font-size:.85rem; }
  
  @media (max-width: 520px) { .now-playing { grid-template-columns: 52px 1fr; } }