/* ---------- 1) Spreadsheet-style CSV viewer ---------- */
    .csv-viewer {
      border: 1px solid #e4defc;
      border-radius: 14px;
      overflow: hidden;
      box-shadow: 0 4px 14px rgba(107, 63, 228, 0.07);
      margin: 28px 0;
      background: #fff;
    }
    .csv-viewer-bar {
      display: flex;
      align-items: center;
      gap: 10px;
      background: linear-gradient(135deg, #6B3FE4 0%, #4A2DB8 100%);
      color: #fff;
      padding: 10px 18px;
      font-size: 0.85rem;
      font-weight: 600;
    }
    .csv-viewer-bar .dots { display: inline-flex; gap: 6px; margin-right: 4px; }
    .csv-viewer-bar .dots i {
      width: 10px; height: 10px; border-radius: 50%;
      background: rgba(255,255,255,0.45); display: inline-block;
    }
    .csv-viewer-bar .meta { margin-left: auto; font-weight: 400; opacity: 0.85; font-size: 0.78rem; }
    .csv-viewer-scroll { overflow-x: auto; }
    .csv-viewer table {
      width: 100%;
      border-collapse: collapse;
      font-size: 0.82rem;
      min-width: 640px;
    }
    .csv-viewer .col-letters th {
      background: #f1eefc;
      color: #8a80b8;
      font-weight: 600;
      text-align: center;
      padding: 5px 10px;
      border-bottom: 1px solid #e4defc;
      border-right: 1px solid #e4defc;
      font-size: 0.72rem;
    }
    .csv-viewer .col-names th {
      background: #fff;
      color: #4A2DB8;
      text-align: left;
      padding: 9px 14px;
      font-weight: 700;
      border-bottom: 2px solid #6B3FE4;
      border-right: 1px solid #f0edff;
      white-space: nowrap;
    }
    .csv-viewer .rn {
      background: #f1eefc;
      color: #8a80b8;
      text-align: center;
      font-weight: 600;
      width: 38px;
      border-right: 1px solid #e4defc;
      font-size: 0.72rem;
    }
    .csv-viewer tbody td {
      padding: 8px 14px;
      border-bottom: 1px solid #f0edff;
      border-right: 1px solid #f7f5ff;
      color: #333;
      white-space: nowrap;
    }
    .csv-viewer tbody tr:nth-child(even) td:not(.rn) { background: #faf9ff; }
    .csv-viewer td.num { color: #b3541e; }
    .csv-viewer td.empty { color: #c9c4df; font-style: italic; }
    .csv-viewer-note {
      padding: 10px 18px;
      background: #faf9ff;
      border-top: 1px solid #ece8ff;
      font-size: 0.8rem;
      color: #6a6390;
      line-height: 1.55;
    }

    /* ---------- 2) Raw text view (shows that CSV is just text) ---------- */
    .csv-raw {
      background: #1e1b2e;
      color: #e6e2ff;
      border-radius: 12px;
      padding: 18px 20px;
      margin: 20px 0;
      overflow-x: auto;
      font-family: 'SFMono-Regular', Consolas, 'Courier New', monospace;
      font-size: 0.82rem;
      line-height: 1.85;
      white-space: pre;
    }
    .csv-raw .lbl {
      display: block;
      color: #9f95d6;
      font-family: 'Segoe UI', sans-serif;
      font-size: 0.72rem;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      margin-bottom: 8px;
      white-space: normal;
    }
    .csv-raw .h  { color: #ffd479; font-weight: 700; }
    .csv-raw .c  { color: #ff7ab6; font-weight: 700; }
    .csv-raw .n  { color: #7fe3b4; }

    /* ---------- 3) Takeout vs PlaylistGo side by side ---------- */
    .compare-csv {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 18px;
      margin: 28px 0;
    }
    .compare-csv .side {
      border-radius: 14px;
      overflow: hidden;
      border: 1px solid #e6e3f3;
      background: #fff;
      box-shadow: 0 3px 12px rgba(0,0,0,0.05);
    }
    .compare-csv .side-head {
      padding: 12px 16px;
      font-weight: 700;
      font-size: 0.9rem;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
    }
    .compare-csv .takeout .side-head { background: #f3f3f6; color: #444; }
    .compare-csv .tag {
      font-size: 0.68rem; font-weight: 700; padding: 3px 9px; border-radius: 20px;
    }
    .compare-csv .takeout .tag { background: #ffe3e3; color: #b3261e; }
    .compare-csv table {
      width: 100%;
      border-collapse: collapse;
      font-size: 0.78rem;
    }
    .compare-csv th {
      text-align: left; padding: 8px 12px; background: #fafafa;
      border-bottom: 1px solid #ececf3; color: #555; white-space: nowrap;
    }
    .compare-csv td {
      padding: 8px 12px; border-bottom: 1px solid #f3f3f8; color: #333; white-space: nowrap;
    }
    .compare-csv .takeout td { color: #777; }
    .compare-csv .side-foot {
      padding: 10px 14px; font-size: 0.78rem; line-height: 1.5;
      border-top: 1px solid #f0f0f6; color: #666; background: #fcfcfe;
    }
    .compare-csv .scroll { overflow-x: auto; }
    @media (max-width: 767px) { .compare-csv { grid-template-columns: 1fr; } }