:root {
    --bg: #f5f4f0; --surface: #ffffff; --surface2: #f0ede6;
    --border: #e2ddd6; --text: #1a1916; --text-muted: #7a7670;
    --accent: #2d6a4f; --accent-light: #e8f5ef; --accent2: #c9441e;
    --chip-bg: #eceae4; --chip-active: #2d6a4f; --chip-active-text: #fff;
    --shadow: 0 1px 3px rgba(0,0,0,0.08), 0 4px 12px rgba(0,0,0,0.05);
    --input-bg: #f5f4f0;
  }
  @media (prefers-color-scheme: dark) {
    :root {
      --bg: #111110; --surface: #1c1c1a; --surface2: #252523;
      --border: #2e2e2b; --text: #f0ede6; --text-muted: #7a7670;
      --accent: #3d8f6a; --accent-light: #1a3d2e; --accent2: #e05a30;
      --chip-bg: #2a2a28; --chip-active: #3d8f6a; --chip-active-text: #fff;
      --shadow: 0 1px 3px rgba(0,0,0,0.4), 0 4px 12px rgba(0,0,0,0.3);
      --input-bg: #1c1c1a;
    }
  }
  * { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
  body { font-family: 'DM Sans', sans-serif; background: var(--bg); color: var(--text); min-height: 100dvh; overscroll-behavior: none; }

  /* HEADER */
  header { position: sticky; top: 0; z-index: 100; background: var(--surface); border-bottom: 1px solid var(--border); padding: 14px 16px 12px; }
  .header-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
  .logo { font-family: 'DM Mono', monospace; font-size: 15px; font-weight: 500; letter-spacing: -0.3px; }
  .logo span { color: var(--accent); }
  .header-right { display: flex; gap: 8px; align-items: center; }
  .track-count { font-family: 'DM Mono', monospace; font-size: 12px; color: var(--text-muted); }
  .wishlist-btn {
    background: none; border: 1.5px solid var(--border); border-radius: 8px;
    padding: 4px 10px; font-size: 13px; font-weight: 500; cursor: pointer;
    color: var(--text-muted); display: flex; align-items: center; gap: 4px; transition: all .15s;
  }
  .wishlist-btn.has-items { border-color: #f59e0b; color: #d97706; }
  .wl-count { font-family: 'DM Mono', monospace; }

  /* SEARCH */
  .search-wrap { position: relative; }
  .search-wrap svg { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--text-muted); pointer-events: none; }
  #searchInput {
    width: 100%; padding: 9px 12px 9px 34px; border: 1.5px solid var(--border); border-radius: 10px;
    font-family: 'DM Sans', sans-serif; font-size: 15px; background: var(--input-bg); color: var(--text); outline: none; transition: border-color .15s;
  }
  #searchInput:focus { border-color: var(--accent); }
  #searchInput::placeholder { color: var(--text-muted); }
  .filter-toggle { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; color: var(--text-muted); background: none; border: none; cursor: pointer; padding: 0; margin-top: 8px; }
  .filter-toggle .badge { background: var(--accent); color: #fff; border-radius: 50%; width: 18px; height: 18px; font-size: 11px; display: grid; place-items: center; font-family: 'DM Mono', monospace; }
  .filter-toggle .badge.hidden { display: none; }

  /* FILTER PANEL */
  #filterPanel { background: var(--surface); border-bottom: 1px solid var(--border); padding: 0 16px; max-height: 0; overflow: hidden; transition: max-height .3s ease, padding .3s ease; }
  #filterPanel.open { max-height: 600px; padding: 14px 16px; }
  .filter-section { margin-bottom: 14px; }
  .filter-section:last-child { margin-bottom: 0; }
  .filter-label { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 8px; }
  .chip-list { display: flex; flex-wrap: wrap; gap: 6px; }
  .chip { padding: 5px 12px; border-radius: 20px; font-size: 13px; background: var(--chip-bg); color: var(--text); border: 1.5px solid transparent; cursor: pointer; transition: all .12s; user-select: none; white-space: nowrap; }
  .chip:active { transform: scale(.96); }
  .chip.active { background: var(--chip-active); color: var(--chip-active-text); border-color: var(--chip-active); }
  .bpm-row { display: flex; align-items: center; gap: 10px; }
  .bpm-display { font-family: 'DM Mono', monospace; font-size: 13px; font-weight: 500; min-width: 90px; }
  .range-wrap { flex: 1; display: flex; flex-direction: column; gap: 6px; }
  input[type=range] { width: 100%; accent-color: var(--accent); cursor: pointer; height: 4px; }

  /* SORT BAR */
  .sort-bar { display: flex; align-items: center; gap: 6px; padding: 8px 16px; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--border); background: var(--bg); }
  .sort-bar::-webkit-scrollbar { display: none; }
  .sort-label { font-size: 12px; color: var(--text-muted); white-space: nowrap; }
  .sort-btn { padding: 4px 10px; border-radius: 6px; font-size: 12px; font-weight: 500; background: none; border: 1.5px solid var(--border); cursor: pointer; white-space: nowrap; color: var(--text); transition: all .12s; }
  .sort-btn.active { border-color: var(--accent); color: var(--accent); background: var(--accent-light); }
  .sort-btn.all-btn { border-color: var(--accent); color: var(--accent); }
  .sort-btn.all-btn.on { background: var(--accent); color: #fff; }

  /* UPLOAD SCREEN */
  #uploadScreen { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100dvh; padding: 40px 24px; text-align: center; gap: 16px; }
  .upload-icon { font-size: 48px; }
  .upload-title { font-size: 22px; font-weight: 600; }
  .upload-sub { font-size: 15px; color: var(--text-muted); line-height: 1.5; max-width: 280px; }

  /* TRACK LIST */
  #trackList { padding: 8px 12px 100px; }
  .track-card { background: var(--surface); border-radius: 12px; padding: 12px 14px; margin-bottom: 8px; border: 1.5px solid transparent; box-shadow: var(--shadow); transition: border-color .15s; cursor: pointer; }
  .track-card:active { border-color: var(--accent); }
  .track-card.in-wishlist { border-color: rgba(245,158,11,.4); }
  .track-main { display: flex; align-items: flex-start; gap: 10px; }
  .track-color-bar { width: 3px; border-radius: 3px; align-self: stretch; flex-shrink: 0; min-height: 36px; }
  .track-info { flex: 1; min-width: 0; }
  .track-title { font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .track-artist { font-size: 13px; color: var(--text-muted); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .track-meta { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
  .meta-pill { font-family: 'DM Mono', monospace; font-size: 11px; padding: 3px 8px; border-radius: 6px; background: var(--surface2); color: var(--text-muted); }
  .meta-pill.bpm { color: var(--accent); font-weight: 500; }
  .meta-pill.key { color: var(--accent2); }
  .meta-pill.genre { background: var(--accent-light); color: var(--accent); }

  .meta-pill.rating { background: #fef9c3; color: #a16207; letter-spacing: 0; }

  .track-playlists { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
  .pl-tag { font-size: 10px; padding: 2px 7px; border-radius: 5px; background: var(--chip-bg); color: var(--text-muted); }
  .track-actions { display: flex; gap: 6px; margin-top: 8px; }
  .action-btn { padding: 4px 10px; border-radius: 7px; font-size: 12px; font-weight: 500; border: 1.5px solid var(--border); background: none; cursor: pointer; color: var(--text-muted); transition: all .12s; }
  .action-btn.wish { border-color: #f59e0b; color: #d97706; }
  .action-btn.unwish { border-color: #f59e0b; color: #d97706; background: #fef3c7; }
  .empty-state { text-align: center; padding: 60px 24px; color: var(--text-muted); font-size: 15px; }
  .empty-state .e { font-size: 36px; margin-bottom: 10px; }

  /* VIEW TOGGLE */
  .view-toggle.active { background: var(--accent); color: #fff; border-color: var(--accent); }

  /* COMPACT VIEW */
  .compact .track-card { padding: 5px 10px; margin-bottom: 3px; border-radius: 8px; display: flex; align-items: center; gap: 8px; }
  .compact .track-main { flex: 1; align-items: center; min-width: 0; }
  .compact .track-color-bar { min-height: 28px; }
  .compact .track-info { display: flex; align-items: baseline; gap: 6px; flex-wrap: nowrap; min-width: 0; }
  .compact .track-title { font-size: 13px; flex-shrink: 1; min-width: 0; }
  .compact .track-artist { font-size: 12px; margin-top: 0; flex-shrink: 1; min-width: 0; opacity: .7; }
  .compact .track-meta { margin-top: 0; gap: 4px; flex-wrap: nowrap; flex-shrink: 0; }
  .compact .meta-pill { font-size: 10px; padding: 1px 5px; border-radius: 4px; }
  .compact .track-playlists { display: none; }
  .compact .track-actions { margin-top: 0; gap: 4px; flex-shrink: 0; }
  .compact .action-btn { padding: 2px 6px; font-size: 11px; border-radius: 5px; }
  .compact .action-btn.radar { padding: 2px 5px; }
  .compact .action-btn.radar svg { width: 10px; height: 10px; }

  /* FAB */
  .fab { position: fixed; bottom: 20px; right: 16px; background: var(--accent); color: #fff; border: none; border-radius: 14px; padding: 12px 18px; font-size: 13px; font-weight: 600; font-family: 'DM Sans', sans-serif; box-shadow: 0 4px 16px rgba(45,106,79,.35); cursor: pointer; display: flex; align-items: center; gap: 6px; z-index: 200; }

  /* ── DJ VIEW ── */
  #djView { display: none; position: fixed; inset: 0; z-index: 500; background: #0c0c0c; flex-direction: column; align-items: center; justify-content: space-between; }
  #djView.open { display: flex; }
  /* Landscape: keyword left, footer right */
  @media (orientation: landscape) and (max-height: 500px) {
    #djView.open { flex-direction: row; flex-wrap: wrap; }
    .dj-topbar { width: 100%; flex-shrink: 0; padding: 10px 16px 0; }
    .dj-keyword-area { flex: 1; padding: 8px 16px; min-height: 0; }
    .dj-footer { width: 240px; padding: 8px 20px 16px; text-align: left; display: flex; flex-direction: column; justify-content: flex-end; }
    .dj-meta-row { justify-content: flex-start; }
  }
  .dj-topbar { width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 16px 16px 0; flex-shrink: 0; }
  .dj-wish-btn {
    background: rgba(255,255,255,.08); border: 1.5px solid rgba(255,255,255,.15);
    border-radius: 10px; padding: 8px 16px; cursor: pointer;
    color: rgba(255,255,255,.6); font-size: 13px; font-weight: 500;
    font-family: 'DM Sans', sans-serif; display: flex; align-items: center; gap: 6px; transition: all .15s;
  }
  .dj-wish-btn.active { background: rgba(245,158,11,.18); border-color: #f59e0b; color: #fbbf24; }
  .dj-close-btn { background: rgba(255,255,255,.08); border: none; border-radius: 50%; width: 44px; height: 44px; cursor: pointer; display: grid; place-items: center; color: rgba(255,255,255,.5); font-size: 18px; transition: background .15s; }
  .dj-close-btn:active { background: rgba(255,255,255,.18); }

  .dj-keyword-area { flex: 1; display: flex; align-items: center; justify-content: center; padding: 16px 20px; width: 100%; }
  #djKeyword {
    font-family: 'DM Sans', sans-serif; font-weight: 700; color: #fff;
    line-height: 1.0; text-align: center; word-break: break-word; width: 100%;
    transition: font-size .2s;
  }

  .dj-footer { width: 100%; padding: 16px 24px 44px; text-align: center; flex-shrink: 0; }
  .dj-full-title { font-size: 14px; color: rgba(255,255,255,.3); font-weight: 400; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .dj-artist { font-size: 12px; color: rgba(255,255,255,.18); margin-top: 3px; }
  .dj-meta-row { display: flex; justify-content: center; gap: 10px; margin-top: 10px; }
  .dj-pill { font-family: 'DM Mono', monospace; font-size: 11px; color: rgba(255,255,255,.25); padding: 3px 10px; border: 1px solid rgba(255,255,255,.1); border-radius: 6px; }

  /* ── WISHLIST OVERLAY ── */
  #wishlistOverlay { display: none; position: fixed; inset: 0; z-index: 400; background: var(--bg); flex-direction: column; }
  #wishlistOverlay.open { display: flex; }
  .wl-header { display: flex; align-items: center; justify-content: space-between; padding: 16px; background: var(--surface); border-bottom: 1px solid var(--border); }
  .wl-title { font-size: 17px; font-weight: 600; }
  .wl-close { background: none; border: none; font-size: 22px; cursor: pointer; color: var(--text-muted); }
  .wl-list { flex: 1; overflow-y: auto; padding: 8px 12px 40px; }
  .wl-empty { text-align: center; padding: 60px 24px; color: var(--text-muted); font-size: 15px; line-height: 1.6; }

  .wl-item { background: var(--surface); border-radius: 12px; padding: 12px 14px 12px 10px; margin-bottom: 8px; border: 1.5px solid var(--border); box-shadow: var(--shadow); display: flex; align-items: flex-start; gap: 8px; cursor: grab; user-select: none; }
  .wl-item.played { opacity: .45; }
  .wl-item.played .wl-item-title { text-decoration: line-through; }
  .wl-item.dragging { opacity: .25; transform: scale(.98); }
  .wl-drag-handle { color: var(--text-muted); font-size: 18px; padding-top: 1px; flex-shrink: 0; cursor: grab; touch-action: none; line-height: 1; }
  .wl-item-body { flex: 1; min-width: 0; }
  .wl-item-title { font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .wl-item-artist { font-size: 13px; color: var(--text-muted); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .wl-item-actions { display: flex; gap: 6px; margin-top: 8px; }
  .wl-btn { padding: 4px 10px; border-radius: 7px; font-size: 12px; font-weight: 500; border: 1.5px solid var(--border); background: none; cursor: pointer; color: var(--text-muted); transition: all .12s; }
  .wl-btn.played-btn { border-color: var(--accent); color: var(--accent); }
  .wl-btn.remove-btn { color: var(--accent2); border-color: #e2ddd6; }

  mark { background: #fef08a; border-radius: 2px; padding: 0 1px; }

  /* ── PLAYLIST OVERLAY ── */
  #playlistOverlay { display: none; position: fixed; inset: 0; z-index: 400; background: var(--bg); flex-direction: column; }
  #playlistOverlay.open { display: flex; }
  .pl-header { display: flex; align-items: center; justify-content: space-between; padding: 16px; background: var(--surface); border-bottom: 1px solid var(--border); }
  .pl-header-left { display: flex; align-items: center; gap: 10px; }
  .pl-back { background: none; border: none; font-size: 20px; cursor: pointer; color: var(--text-muted); padding: 0 4px; line-height: 1; }
  .pl-header-title { font-size: 17px; font-weight: 600; }
  .pl-header-sub { font-size: 12px; color: var(--text-muted); font-family: 'DM Mono', monospace; }
  .pl-close { background: none; border: none; font-size: 22px; cursor: pointer; color: var(--text-muted); }
  .pl-list { flex: 1; overflow-y: auto; padding: 8px 12px 40px; }
  .pl-item {
    background: var(--surface); border-radius: 12px; padding: 14px 16px; margin-bottom: 8px;
    border: 1.5px solid var(--border); box-shadow: var(--shadow); cursor: pointer;
    display: flex; align-items: center; justify-content: space-between; transition: border-color .15s;
  }
  .pl-item:active { border-color: var(--accent); }
  .pl-item-name { font-size: 15px; font-weight: 600; }
  .pl-item-count { font-family: 'DM Mono', monospace; font-size: 12px; color: var(--text-muted); }
  .pl-item-arrow { color: var(--text-muted); font-size: 16px; }
  .pl-folder { border-left: 3px solid var(--accent); }
  .pl-search-wrap { position: relative; padding: 10px 12px; background: var(--surface); border-bottom: 1px solid var(--border); }
  .pl-search-wrap svg { position: absolute; left: 23px; top: 50%; transform: translateY(-50%); color: var(--text-muted); pointer-events: none; }
  .pl-search-input {
    width: 100%; padding: 8px 12px 8px 34px; border: 1.5px solid var(--border); border-radius: 10px;
    font-family: 'DM Sans', sans-serif; font-size: 15px; background: var(--input-bg); color: var(--text); outline: none; transition: border-color .15s;
  }
  .pl-search-input:focus { border-color: var(--accent); }
  .pl-search-input::placeholder { color: var(--text-muted); }

  /* Playlist energy graph */
  .pl-energy-graph {
    margin: 10px 12px 4px; padding: 10px 12px 6px;
    background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
  }
  .pl-energy-label {
    font-size: 11px; font-weight: 600; color: var(--text-muted);
    margin-bottom: 4px; display: flex; align-items: center; gap: 4px;
  }
  .pl-energy-avg {
    font-family: 'DM Mono', monospace; font-size: 11px; color: var(--text-muted);
  }
  .pl-energy-svg {
    width: 100%; height: 48px; display: block;
  }

  /* ── BROWSE OVERLAY (Key / BPM) ── */
  #browseOverlay { display: none; position: fixed; inset: 0; z-index: 400; background: var(--bg); flex-direction: column; }
  #browseOverlay.open { display: flex; }
  .br-header { display: flex; align-items: center; justify-content: space-between; padding: 16px; background: var(--surface); border-bottom: 1px solid var(--border); }
  .br-header-left { display: flex; align-items: center; gap: 10px; }
  .br-back { background: none; border: none; font-size: 20px; cursor: pointer; color: var(--text-muted); padding: 0 4px; line-height: 1; }
  .br-title { font-size: 17px; font-weight: 600; }
  .br-sub { font-size: 12px; color: var(--text-muted); font-family: 'DM Mono', monospace; }
  .br-close { background: none; border: none; font-size: 22px; cursor: pointer; color: var(--text-muted); }
  .br-list { flex: 1; overflow-y: auto; padding: 8px 12px 40px; }
  .br-item {
    background: var(--surface); border-radius: 12px; padding: 14px 16px; margin-bottom: 8px;
    border: 1.5px solid var(--border); box-shadow: var(--shadow); cursor: pointer;
    display: flex; align-items: center; justify-content: space-between; transition: border-color .15s;
  }
  .br-item:active { border-color: var(--accent); }
  .br-item-label { font-size: 16px; font-weight: 600; display: flex; align-items: center; gap: 10px; }
  .br-item-dot { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; }
  .br-item-count { font-family: 'DM Mono', monospace; font-size: 12px; color: var(--text-muted); }
  .br-item-arrow { color: var(--text-muted); font-size: 16px; }
  /* BPM range picker */
  .bpm-browse-controls { padding: 14px 16px; background: var(--surface); border-bottom: 1px solid var(--border); }
  .bpm-browse-row { display: flex; align-items: center; gap: 10px; }
  .bpm-browse-display { font-family: 'DM Mono', monospace; font-size: 14px; font-weight: 500; min-width: 100px; }
  .bpm-browse-ranges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
  .bpm-preset { padding: 5px 12px; border-radius: 20px; font-size: 13px; background: var(--chip-bg); color: var(--text); border: 1.5px solid transparent; cursor: pointer; transition: all .12s; white-space: nowrap; }
  .bpm-preset.active { background: var(--chip-active); color: var(--chip-active-text); border-color: var(--chip-active); }
  .br-search-wrap { position: relative; padding: 10px 12px; background: var(--surface); border-bottom: 1px solid var(--border); }
  .br-search-wrap svg { position: absolute; left: 23px; top: 50%; transform: translateY(-50%); color: var(--text-muted); pointer-events: none; }
  .br-search-input { width: 100%; padding: 8px 12px 8px 34px; border: 1.5px solid var(--border); border-radius: 10px; font-family: 'DM Sans', sans-serif; font-size: 15px; background: var(--input-bg); color: var(--text); outline: none; transition: border-color .15s; }
  .br-search-input:focus { border-color: var(--accent); }
  .br-search-input::placeholder { color: var(--text-muted); }

  /* ── RADAR OVERLAY ── */
  #radarOverlay { display: none; position: fixed; inset: 0; z-index: 450; background: var(--bg); flex-direction: column; }
  #radarOverlay.open { display: flex; }
  .radar-header { display: flex; align-items: flex-start; justify-content: space-between; padding: 16px; background: var(--surface); border-bottom: 1px solid var(--border); }
  .radar-header-info { flex: 1; min-width: 0; }
  .radar-header-title { font-size: 16px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .radar-header-sub { font-size: 12px; color: var(--text-muted); margin-top: 3px; font-family: 'DM Mono', monospace; }
  .radar-close { background: none; border: none; font-size: 22px; cursor: pointer; color: var(--text-muted); flex-shrink: 0; margin-left: 8px; }
  .radar-list { flex: 1; overflow-y: auto; padding: 8px 12px 40px; }
  .radar-section-label { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); padding: 8px 2px 6px; }
  /* radar icon button */
  .action-btn.radar { border-color: #6366f1; color: #6366f1; }
  /* radar icon in DJ view */
  .dj-radar-btn {
    background: rgba(99,102,241,.15); border: 1.5px solid rgba(99,102,241,.4);
    border-radius: 10px; padding: 8px 16px; cursor: pointer;
    color: rgba(99,102,241,.9); font-size: 13px; font-weight: 500;
    font-family: 'DM Sans', sans-serif; display: flex; align-items: center; gap: 6px; transition: all .15s;
  }
  .dj-radar-btn:active { background: rgba(99,102,241,.25); }

  /* ── ENERGIE SLIDER ── */
  .energy-bar-wrap { padding: 10px 16px 12px; background: var(--surface); border-bottom: 1px solid var(--border); }
  .energy-bar-label { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
  .energy-label-text { font-size: 12px; font-weight: 600; color: var(--text-muted); letter-spacing: .04em; text-transform: uppercase; }
  .energy-label-val { font-family: 'DM Mono', monospace; font-size: 12px; color: var(--accent); font-weight: 500; }
  .energy-track {
    position: relative; height: 8px; border-radius: 8px;
    background: linear-gradient(to right, #6ee7b7, #fbbf24, #ef4444);
    cursor: pointer;
  }
  .energy-range-fill {
    position: absolute; top: 0; height: 100%; border-radius: 8px;
    background: rgba(0,0,0,.25);
    pointer-events: none;
  }
  .energy-thumb {
    position: absolute; top: 50%; transform: translate(-50%, -50%);
    width: 22px; height: 22px; border-radius: 50%;
    background: var(--surface); border: 2.5px solid var(--accent);
    box-shadow: 0 2px 6px rgba(0,0,0,.25); cursor: grab; touch-action: none;
    transition: transform .1s, box-shadow .1s;
    z-index: 2;
  }
  .energy-thumb:active { transform: translate(-50%, -50%) scale(1.15); box-shadow: 0 3px 10px rgba(0,0,0,.35); }
  .energy-active .energy-track { outline: 2px solid var(--accent); outline-offset: 2px; }
  .energy-emojis { display: flex; justify-content: space-between; font-size: 14px; margin-top: 4px; opacity: .6; }

  /* ── WAT NU OVERLAY ── */
  #watNuOverlay {
    display: none; position: fixed; inset: 0; z-index: 600;
    background: #0a0a0a; flex-direction: column;
  }
  #watNuOverlay.open { display: flex; }

  .wn-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 16px 12px; flex-shrink: 0;
  }
  .wn-title {
    font-size: 13px; font-weight: 600; letter-spacing: .08em;
    text-transform: uppercase; color: rgba(255,255,255,.35);
  }
  .wn-close {
    background: rgba(255,255,255,.08); border: none; border-radius: 50%;
    width: 40px; height: 40px; cursor: pointer; display: grid; place-items: center;
    color: rgba(255,255,255,.5); font-size: 16px;
  }
  .wn-cards {
    flex: 1; display: flex; flex-direction: column;
    gap: 2px; overflow: hidden; padding: 0 0 16px;
  }
  .wn-card {
    flex: 1; display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    padding: 10px 20px; cursor: pointer; position: relative;
    transition: filter .15s;
    border-left: 4px solid transparent;
    min-height: 0;
  }
  .wn-card:active { filter: brightness(1.15); }
  .wn-rank {
    font-family: 'DM Mono', monospace; font-size: 11px; font-weight: 500;
    letter-spacing: .1em; text-transform: uppercase;
    margin-bottom: 4px; opacity: .5;
  }
  .wn-keyword {
    font-family: 'DM Sans', sans-serif; font-weight: 700;
    color: #fff; line-height: 1.0; text-align: center;
    word-break: break-word; width: 100%;
  }
  .wn-why {
    font-size: 11px; margin-top: 6px; opacity: .5;
    font-family: 'DM Mono', monospace; text-align: center; color: #fff;
  }
  .wn-meta {
    display: flex; gap: 8px; margin-top: 5px; flex-wrap: wrap; justify-content: center;
  }
  .wn-pill {
    font-family: 'DM Mono', monospace; font-size: 10px;
    padding: 2px 8px; border-radius: 5px;
    background: rgba(255,255,255,.08); color: rgba(255,255,255,.45);
  }
  .wn-card-divider { height: 1px; background: rgba(255,255,255,.06); flex-shrink: 0; }
  .wn-empty {
    flex: 1; display: flex; align-items: center; justify-content: center;
    color: rgba(255,255,255,.3); font-size: 15px; text-align: center; padding: 40px;
  }

  /* ── SET LOG / STATS ── */
  #setOverlay { display: none; position: fixed; inset: 0; z-index: 400; background: var(--bg); flex-direction: column; }
  #setOverlay.open { display: flex; }
  .set-header { display: flex; align-items: center; justify-content: space-between; padding: 16px; background: var(--surface); border-bottom: 1px solid var(--border); }
  .set-header-left { display: flex; align-items: center; gap: 10px; }
  .set-title { font-size: 17px; font-weight: 600; }
  .set-close { background: none; border: none; font-size: 22px; cursor: pointer; color: var(--text-muted); }
  .set-tabs { display: flex; border-bottom: 1px solid var(--border); background: var(--surface); }
  .set-tab { flex: 1; padding: 10px; text-align: center; font-size: 13px; font-weight: 500; cursor: pointer; border-bottom: 2.5px solid transparent; color: var(--text-muted); transition: all .15s; }
  .set-tab.active { border-bottom-color: var(--accent); color: var(--accent); }
  .set-body { flex: 1; overflow-y: auto; padding: 16px 14px 60px; }

  /* log items */
  .log-item { display: flex; align-items: flex-start; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--border); }
  .log-item:last-child { border-bottom: none; }
  .log-num { font-family: 'DM Mono', monospace; font-size: 11px; color: var(--text-muted); min-width: 24px; padding-top: 2px; }
  .log-time { font-family: 'DM Mono', monospace; font-size: 11px; color: var(--text-muted); min-width: 48px; padding-top: 2px; }
  .log-info { flex: 1; min-width: 0; }
  .log-title { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .log-artist { font-size: 12px; color: var(--text-muted); }
  .log-pills { display: flex; gap: 6px; margin-top: 4px; flex-wrap: wrap; }
  .log-pill { font-family: 'DM Mono', monospace; font-size: 10px; padding: 2px 6px; border-radius: 5px; background: var(--surface2); color: var(--text-muted); }
  .log-remove { background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 16px; padding: 0 4px; flex-shrink: 0; }

  /* stats */
  .stat-card { background: var(--surface); border-radius: 12px; padding: 14px 16px; margin-bottom: 10px; border: 1.5px solid var(--border); }
  .stat-card-title { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 8px; }
  .stat-big { font-size: 32px; font-weight: 700; font-family: 'DM Mono', monospace; color: var(--text); }
  .stat-sub { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
  .stat-row { display: flex; gap: 10px; margin-bottom: 10px; }
  .stat-row .stat-card { flex: 1; margin-bottom: 0; }

  /* mini chart */
  .mini-chart { width: 100%; height: 80px; position: relative; margin-top: 4px; }
  .mini-chart svg { width: 100%; height: 100%; }
  .chart-line { fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
  .chart-line.energy { stroke: #f59e0b; }
  .chart-area { fill: var(--accent); opacity: .12; }
  .chart-area.energy { fill: #f59e0b; }
  .chart-dot { fill: var(--accent); }
  .chart-dot.energy { fill: #f59e0b; }

  /* genre bar */
  .genre-bar-wrap { margin-top: 6px; }
  .genre-bar-row { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
  .genre-bar-label { font-size: 12px; min-width: 80px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text); }
  .genre-bar-track { flex: 1; height: 8px; background: var(--surface2); border-radius: 4px; overflow: hidden; }
  .genre-bar-fill { height: 100%; background: var(--accent); border-radius: 4px; transition: width .4s; }
  .genre-bar-count { font-family: 'DM Mono', monospace; font-size: 11px; color: var(--text-muted); min-width: 20px; text-align: right; }

  /* export / actions */
  .set-actions { display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
  .set-action-btn { padding: 9px 16px; border-radius: 10px; font-size: 13px; font-weight: 600; border: 1.5px solid var(--border); background: none; cursor: pointer; color: var(--text); font-family: 'DM Sans', sans-serif; transition: all .15s; display: flex; align-items: center; gap: 6px; }
  .set-action-btn.primary { background: var(--accent); color: #fff; border-color: var(--accent); }
  .set-action-btn:active { opacity: .8; }

  /* log badge on header */
  .log-badge { background: var(--accent2); color: #fff; border-radius: 50%; width: 18px; height: 18px; font-size: 11px; display: grid; place-items: center; font-family: 'DM Mono', monospace; }

  /* confirmed indicator in DJ view */
  .dj-logged-indicator {
    position: absolute; top: 12px; left: 50%; transform: translateX(-50%);
    background: rgba(45,106,79,.8); color: #fff; border-radius: 20px;
    padding: 4px 14px; font-size: 12px; font-weight: 500;
    opacity: 0; transition: opacity .3s; pointer-events: none;
  }
  .dj-logged-indicator.show { opacity: 1; }