*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    :root {
      --bg: #0A0A0F;
      --surface: #111115;
      --border: #1a1a1f;
      --text: #F0F0F0;
      --text-dim: #777;
      --text-muted: #444;
      --accent: #4ECDC4;
      --accent-dim: rgba(78,205,196,0.08);
      --danger: #FF6B6B;
      --spotify: #1DB954;
      --spotify-dim: rgba(29,185,84,0.08);
    }

    body {
      background: var(--bg);
      color: var(--text);
      font-family: 'DM Sans', 'Helvetica Neue', sans-serif;
      min-height: 100vh;
      overflow-x: hidden;
    }

    /* Background orbs */
    body::before, body::after {
      content: '';
      position: fixed;
      border-radius: 50%;
      pointer-events: none;
      z-index: 0;
    }
    body::before {
      top: -300px; right: -300px;
      width: 700px; height: 700px;
      background: radial-gradient(circle, rgba(78,205,196,0.06) 0%, transparent 70%);
    }
    body::after {
      bottom: -400px; left: -300px;
      width: 800px; height: 800px;
      background: radial-gradient(circle, rgba(255,107,107,0.04) 0%, transparent 70%);
    }

    .container {
      max-width: 640px;
      margin: 0 auto;
      padding: 48px 20px 100px;
      position: relative;
      z-index: 1;
    }

    /* ── Typography ── */
    .mono { font-family: 'Space Mono', monospace; }
    .label {
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 2px;
      text-transform: uppercase;
      color: #555;
      display: block;
      margin-bottom: 10px;
    }
    h1 { font-size: 34px; font-weight: 700; line-height: 1.15; }
    h1 span { color: var(--accent); }
    h2 { font-size: 20px; font-weight: 700; }

    /* ── Inputs ── */
    input[type="text"], input[type="password"], textarea {
      width: 100%;
      padding: 10px 14px;
      border-radius: 10px;
      border: 1px solid var(--border);
      background: var(--surface);
      box-sizing: border-box;
      color: var(--text);
      font-size: 13px;
      font-family: inherit;
      outline: none;
      transition: border-color 0.2s;
    }
    input[type="text"]:focus, input[type="password"]:focus, textarea:focus {
      border-color: #333;
    }
    input::placeholder, textarea::placeholder { color: var(--text-muted); }

    .bpm-input {
      width: 80px;
      font-family: 'Space Mono', monospace;
      font-size: 36px;
      font-weight: 700;
      background: transparent;
      border: 1px solid transparent;
      border-radius: 8px;
      text-align: center;
      outline: none;
      padding: 2px 4px;
      -moz-appearance: textfield;
    }
    .bpm-input:hover { border-color: var(--border); }
    .bpm-input:focus { border-color: #444; background: var(--surface); }
    .bpm-input::-webkit-inner-spin-button,
    .bpm-input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

    input[type="range"] {
      -webkit-appearance: none;
      appearance: none;
      width: 100%;
      height: 4px;
      background: #222;
      border-radius: 2px;
      outline: none;
      cursor: pointer;
    }
    input[type="range"]::-webkit-slider-thumb {
      -webkit-appearance: none;
      width: 16px; height: 16px;
      border-radius: 50%;
      background: var(--accent);
      cursor: pointer;
      border: 2px solid var(--bg);
    }

    /* ── Buttons ── */
    .btn {
      border: none;
      border-radius: 10px;
      font-family: inherit;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.2s;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
    }
    .btn:disabled { cursor: default; opacity: 0.5; }

    .btn-primary {
      width: 100%;
      padding: 16px;
      border-radius: 14px;
      background: linear-gradient(135deg, var(--accent) 0%, #45B7D1 100%);
      color: var(--bg);
      font-size: 15px;
      font-weight: 700;
    }
    .btn-primary:disabled { background: #181818; color: #555; }
    .btn-primary:not(:disabled):hover { filter: brightness(1.1); }

    .btn-spotify {
      width: 100%;
      padding: 14px;
      border-radius: 12px;
      background: linear-gradient(135deg, #1DB954, #1ed760);
      color: #000;
      font-size: 14px;
      font-weight: 700;
    }
    .btn-spotify:disabled { background: #222; color: #555; }

    .btn-outline {
      padding: 8px 16px;
      border: 1px solid #333;
      border-radius: 8px;
      background: rgba(255,255,255,0.04);
      color: #aaa;
      font-size: 12px;
    }
    .btn-outline:hover { border-color: #555; color: #ddd; }

    .btn-tag {
      padding: 7px 14px;
      border-radius: 10px;
      border: 1px solid var(--border);
      background: var(--surface);
      color: var(--text-dim);
      font-size: 13px;
    }
    .btn-tag.active {
      border-color: var(--accent);
      background: var(--accent-dim);
      color: var(--accent);
    }
    .btn-genre {
      padding: 6px 14px;
      border-radius: 20px;
      border: 1px solid var(--border);
      background: transparent;
      color: #555;
      font-size: 13px;
      font-weight: 500;
    }
    .btn-genre.active {
      border-color: var(--accent);
      background: var(--accent-dim);
      color: var(--accent);
    }

    .btn-lfm-artist {
      padding: 5px 12px;
      border-radius: 20px;
      border: 1px solid var(--border);
      background: transparent;
      color: #555;
      font-size: 12px;
      font-weight: 500;
      transition: all 0.15s;
    }
    .btn-lfm-artist.active {
      border-color: #ba0d16;
      background: #ba0d1612;
      color: #e8434a;
    }
    .btn-lfm-artist .lfm-plays {
      font-size: 10px;
      opacity: 0.5;
      margin-left: 4px;
      font-family: 'Space Mono', monospace;
    }
    .btn-lfm-artist.active .lfm-plays { opacity: 0.7; }

    .lastfm-panel {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 14px;
      padding: 16px;
      margin-bottom: 28px;
    }
    .lastfm-panel .panel-header {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 14px;
    }
    .lastfm-panel .panel-label {
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 2px;
      text-transform: uppercase;
      color: #ba0d16;
    }
    .lastfm-panel .panel-toggle-all {
      margin-left: auto;
      font-size: 10px;
      color: #666;
      cursor: pointer;
      padding: 2px 8px;
      border: 1px solid var(--border);
      border-radius: 6px;
      background: transparent;
      font-family: inherit;
    }
    .lastfm-panel .panel-toggle-all:hover { border-color: #555; color: #aaa; }

    /* ── Card surfaces ── */
    .card {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 14px;
    }

    /* ── Flex helpers ── */
    .flex { display: flex; }
    .flex-wrap { flex-wrap: wrap; }
    .gap-8 { gap: 8px; }
    .gap-10 { gap: 10px; }
    .gap-12 { gap: 12px; }
    .items-center { align-items: center; }
    .justify-between { justify-content: space-between; }

    /* ── Song card ── */
    .song-row {
      display: flex;
      align-items: center;
      gap: 0;
      transition: opacity 0.2s;
    }
    .song-row.excluded { opacity: 0.35; }
    .song-row.excluded .song-title { text-decoration: line-through; }
    .song-check {
      width: 32px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      cursor: pointer;
      padding: 10px 0 10px 14px;
    }
    .song-check input[type="checkbox"] {
      width: 16px; height: 16px;
      accent-color: var(--accent);
      cursor: pointer;
    }
    .song-card {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 10px 14px 10px 6px;
      border-radius: 10px;
      cursor: pointer;
      transition: background 0.15s;
      text-decoration: none;
      color: inherit;
      flex: 1;
      min-width: 0;
    }
    .song-card:hover { background: rgba(255,255,255,0.05); }
    .song-num {
      width: 38px; height: 38px;
      border-radius: 8px;
      display: flex; align-items: center; justify-content: center;
      font-size: 13px; font-weight: 700;
      flex-shrink: 0;
    }
    .song-title {
      font-size: 14px; font-weight: 600;
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .song-artist {
      font-size: 12px; color: var(--text-dim);
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .song-bpm {
      font-size: 11px; font-weight: 700;
      color: var(--accent);
      background: var(--accent-dim);
      padding: 4px 8px; border-radius: 6px;
      flex-shrink: 0;
      font-variant-numeric: tabular-nums;
    }
    .song-match {
      font-size: 10px; font-weight: 600;
      padding: 3px 6px; border-radius: 4px;
      flex-shrink: 0;
    }
    .song-match.found { color: var(--spotify); background: var(--spotify-dim); }
    .song-match.missing { color: #FF6B6B; background: rgba(255,107,107,0.08); }

    /* ── Spotify panel ── */
    .spotify-panel {
      border-radius: 16px;
      border: 1px solid #1a3a2a;
      background: linear-gradient(135deg, rgba(29,185,84,0.04) 0%, rgba(29,185,84,0.01) 100%);
      padding: 20px;
    }
    .spotify-connected {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 10px 16px;
      border-radius: 12px;
      border: 1px solid var(--spotify);
      background: var(--spotify-dim);
      margin-bottom: 12px;
    }

    /* ── Loading ── */
    .spinner {
      width: 18px; height: 18px;
      border: 2px solid #333;
      border-top-color: var(--accent);
      border-radius: 50%;
      animation: spin 0.8s linear infinite;
    }

    /* ── Alerts ── */
    .alert {
      padding: 12px 16px;
      border-radius: 10px;
      font-size: 13px;
      margin-bottom: 20px;
    }
    .alert-error {
      background: rgba(255,107,107,0.08);
      border: 1px solid rgba(255,107,107,0.15);
      color: var(--danger);
    }
    .alert-success {
      background: var(--spotify-dim);
      border: 1px solid rgba(29,185,84,0.2);
      color: var(--spotify);
    }
    .alert-warning {
      background: rgba(255,230,109,0.08);
      border: 1px solid rgba(255,230,109,0.15);
      color: #FFE66D;
    }

    /* ── Animations ── */
    @keyframes pulse {
      0%, 100% { transform: scale(1); opacity: 0.5; }
      50% { transform: scale(2); opacity: 1; }
    }
    @keyframes fadeSlideIn {
      from { opacity: 0; transform: translateY(14px); }
      to { opacity: 1; transform: translateY(0); }
    }
    @keyframes spin { to { transform: rotate(360deg); } }
    @keyframes shimmer {
      0% { background-position: -200% 0; }
      100% { background-position: 200% 0; }
    }

    .fade-in { animation: fadeSlideIn 0.4s ease both; }
    .skeleton {
      background: linear-gradient(90deg, rgba(255,255,255,0.03) 25%, rgba(255,255,255,0.08) 50%, rgba(255,255,255,0.03) 75%);
      background-size: 200% 100%;
      animation: shimmer 1.5s infinite;
      border-radius: 4px;
    }

    /* ── Scrollbar ── */
    ::-webkit-scrollbar { width: 5px; }
    ::-webkit-scrollbar-track { background: transparent; }
    ::-webkit-scrollbar-thumb { background: #2a2a2a; border-radius: 3px; }

    /* ── Progress bar ── */
    .progress-bar {
      height: 3px;
      background: #222;
      border-radius: 2px;
      overflow: hidden;
      margin: 12px 0;
    }
    .progress-fill {
      height: 100%;
      background: var(--spotify);
      border-radius: 2px;
      transition: width 0.3s ease;
    }

    /* ── Settings panel ── */
    .settings-btn {
      background: none;
      border: 1px solid transparent;
      color: var(--text-dim);
      font-size: 18px;
      cursor: pointer;
      padding: 4px 8px;
      border-radius: 6px;
      transition: all 0.2s;
    }
    .settings-btn:hover { color: var(--text); border-color: var(--border); }
    .settings-overlay {
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,0.6);
      z-index: 1000;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .settings-panel {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 16px;
      padding: 28px;
      width: 90%;
      max-width: 380px;
    }