/* ==============================
   LIGHT THEME FIXES
============================== */

body.theme-light {
  background: #ffffff;
  color: #000000;
}

/* Footer fixes */
body.theme-light .site-footer {
  background: #f2f2f2;
  border-top: 2px solid var(--color-accent);
  box-shadow: none;
}

body.theme-light .footer-section h3,
body.theme-light .footer-section p,
body.theme-light .footer-bottom {
  color: #000000;
  text-shadow: none;
}

/* Theme buttons in footer */
body.theme-light .theme-footer .theme-label {
  color: #000;
}

body.theme-light .theme-footer .theme-btn {
  background: #fff;
  color: #000;
  border: 1px solid var(--color-accent);
}

body.theme-light .theme-footer .theme-btn:hover {
  background: var(--color-accent);
  color: #fff;
}

body.theme-light h1,
body.theme-light h2,
body.theme-light .site-title {
  text-shadow: none;
}

/* ==============================
   LIGHT THEME — CONTENT AREAS
============================== */

/* Cards / surfaces */
body.theme-light .card {
  background: #f5f5f7;
  color: #111;
  box-shadow: 0 2px 12px rgba(0,0,0,0.08);
}

/* Score pills */
body.theme-light .score-pill {
  background: #fff;
  color: #d1348a;
  border-color: rgba(209,52,138,0.4);
}
body.theme-light .score-pill.hated {
  background: #fff;
  color: #c0392b;
  border-color: rgba(192,57,43,0.4);
}

/* Utility text classes */
body.theme-light .text-truncate-bold {
  color: #111;
}
body.theme-light .link-title {
  color: #d1348a;
}
body.theme-light .empty-state {
  color: #666;
}

/* Genre pills */
body.theme-light .genre-pill {
  color: #333;
  background: rgba(255,105,180,0.06);
  border-color: rgba(255,105,180,0.3);
}
body.theme-light .genre-pill:hover {
  background: rgba(255,105,180,0.14);
  color: #d1348a;
}

/* Modern / music cards (Explore, What to Listen, etc.) */
body.theme-light .modern-card,
body.theme-light .what-to-listen-card,
body.theme-light .modern-discovery-card,
body.theme-light .trending-card {
  background: #fff !important;
  border-color: rgba(255,105,180,0.15) !important;
  color: #111;
}
body.theme-light .modern-card:hover,
body.theme-light .what-to-listen-card:hover,
body.theme-light .modern-discovery-card:hover,
body.theme-light .trending-card:hover {
  box-shadow: 0 8px 25px rgba(255,105,180,0.2);
  border-color: rgba(255,105,180,0.35) !important;
}
/* Text inside what-to-listen / explore cards */
body.theme-light .what-to-listen-card [style*="color:#ffd9f7"],
body.theme-light .modern-card [style*="color:#ffd9f7"] {
  color: #111 !important;
}
body.theme-light .what-to-listen-card [style*="color:rgba(255,255,255"],
body.theme-light .modern-card [style*="color:rgba(255,255,255"] {
  color: rgba(0,0,0,0.6) !important;
}

/* Music CTA button */
body.theme-light .music-cta-btn:hover {
  color: #d1348a;
  background: rgba(255,105,180,0.1);
}

/* Community card on home */
body.theme-light .community-card {
  background: #fff;
  border: 1px solid #e8e8e8;
  box-shadow: 0 2px 12px rgba(0,0,0,0.07);
}
body.theme-light .community-card .title {
  color: #d1348a;
  text-shadow: none;
}
body.theme-light .community-card .stat-label {
  color: #555;
}
body.theme-light .community-card .stat-value {
  color: #111;
}
body.theme-light .community-card .stat-row {
  border-bottom-color: rgba(0,0,0,0.06);
}
body.theme-light .community-card .browse-btn {
  color: #d1348a;
  border-color: rgba(255,105,180,0.25);
}
body.theme-light .community-card .browse-btn:hover {
  background: rgba(255,105,180,0.08);
}

/* Social feed — stay dark like dark mode */
body.theme-light .feed-item {
  background: linear-gradient(135deg, rgba(15,15,15,0.98), rgba(8,8,8,0.95)) !important;
  border-color: rgba(255,255,255,0.05) !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.25) !important;
  color: #fff;
}
/* Pinned post has inline background — override it */
body.theme-light .feed-item.pinned-post {
  background: linear-gradient(135deg, #1a0a10, #120820) !important;
  border-color: #ff69b4 !important;
}
body.theme-light .feed-item * {
  color: inherit;
}
body.theme-light .post-meta .post-user {
  color: #ffd9f7 !important;
}
body.theme-light .post-meta .post-time {
  color: rgba(255,255,255,0.6) !important;
}
body.theme-light .post-body {
  color: #fff !important;
}
body.theme-light .post-actions button {
  color: #ffd9f7 !important;
  border-color: rgba(255,255,255,0.08) !important;
}
body.theme-light .post-actions button:hover {
  background: rgba(255,105,180,0.12) !important;
  border-color: rgba(255,105,180,0.4) !important;
  color: #ff69b4 !important;
}
body.theme-light .btn-flag {
  color: #ff93d6 !important;
  border-color: rgba(255,105,180,0.3) !important;
}

/* Feed composer — stay dark */
body.theme-light .feed-composer {
  background: linear-gradient(135deg, rgba(15,15,15,0.95), rgba(10,10,10,0.95)) !important;
  border-color: rgba(255,255,255,0.05) !important;
}
body.theme-light .composer-input textarea {
  color: #fff !important;
  border-color: rgba(255,255,255,0.08) !important;
  background: transparent !important;
}
body.theme-light .composer-input textarea::placeholder {
  color: rgba(255,255,255,0.4) !important;
}
body.theme-light .composer-meta select {
  color: #fff !important;
  border-color: rgba(255,255,255,0.08) !important;
  background: transparent !important;
}

/* The composer was refactored to .hybrid-composer / .composer-textarea /
   .composer-visibility-pill, so the .feed-composer/.composer-input/.composer-meta
   overrides above no longer match. The composer stays DARK in light mode, so its
   text must stay LIGHT (without these the textarea text uses --color-text=#000 and
   goes invisible on the dark composer). */
body.theme-light .composer-textarea {
  color: #fff !important;
}
body.theme-light .composer-textarea::placeholder {
  color: rgba(255,255,255,0.4) !important;
}
body.theme-light .char-counter {
  color: rgba(255,255,255,0.6) !important;
}
body.theme-light .composer-visibility-pill {
  color: #fff !important;
}
body.theme-light .composer-visibility-pill option {
  background: #141420 !important;
  color: #fff !important;
}
body.theme-light .composer-nsfw-toggle {
  color: rgba(255,255,255,0.6) !important;
}
body.theme-light .file-input-label {
  color: #ffd9f7 !important;
}
body.theme-light .selected-song-text {
  color: #ffd9f7 !important;
}
/* "Share your music moments" header — inline rgba(255,255,255,0.7) on the dark
   composer; nudge brighter for contrast. */
body.theme-light .hybrid-composer [style*="color:rgba(255,255,255,0.7)"] {
  color: rgba(255,255,255,0.82) !important;
}
/* The attach-a-song box is intentionally light (#fafafa) in light mode; its
   placeholder was still light-on-light and unreadable. */
body.theme-light .song-search-input::placeholder {
  color: rgba(0,0,0,0.45) !important;
}

/* Post-detail comments sit on the LIGHT page background in light mode — the
   class colors #fff / #ffd9f7 are invisible there. */
body.theme-light .pd-comment-text {
  color: #1a1a1a !important;
}
body.theme-light .pd-comment-user {
  color: #c41e7a !important;
}

/* Profile wall comment body — inline color:#ddd on a now-white .comment-item. */
body.theme-light .profile-comment-body {
  color: #222 !important;
}

/* Updates / Requests / Bugs dash boxes intentionally STAY dark (#0d0d0d), so
   their inline #fff title and #888 subtitle must stay LIGHT — the generic
   #fff->#111 / #888->#555 rules elsewhere in this file would otherwise darken
   them into invisibility. Specificity (extra :not chain) beats the generic rule. */
body.theme-light .home-dash-box [style*="color:#fff"]:not(.btn):not(button):not(.gradient-text):not([class*="badge"]) {
  color: #fff !important;
}
body.theme-light .home-dash-box [style*="color:#888"] {
  color: #aaa !important;
}

/* Feed tab buttons */
body.theme-light .feed-tabs > button[data-filter] {
  color: #333;
  border-color: rgba(0,0,0,0.18);
  background: rgba(255,255,255,0.5);
}
body.theme-light .feed-tabs > button[data-filter].active {
  color: #000;
  border-color: transparent;
}
body.theme-light .period-pills button {
  color: #333;
  border-color: rgba(0,0,0,0.15);
  background: rgba(255,255,255,0.5);
}
body.theme-light .period-pills button.active {
  background: rgba(255,105,180,0.25);
  color: #c22882;
  border-color: rgba(255,105,180,0.4);
}
body.theme-light .content-type-pills button {
  color: #333;
  border-color: rgba(0,0,0,0.15);
  background: rgba(255,255,255,0.5);
}
body.theme-light .content-type-pills button.active {
  background: rgba(139,0,255,0.15);
  color: #6b1fb2;
  border-color: rgba(139,0,255,0.4);
}

/* Rating/search inputs on home */
body.theme-light .rating-dropdown,
body.theme-light .song-search-input,
body.theme-light .rating-input {
  color: #222;
  background: #fafafa;
  border-color: rgba(255,105,180,0.3);
}
body.theme-light .rating-creation-container {
  background: #fff;
  border-color: rgba(255,105,180,0.2);
  box-shadow: 0 2px 10px rgba(0,0,0,0.07);
}
body.theme-light .song-search-results {
  background: #fff;
  border-color: rgba(255,105,180,0.3);
  box-shadow: 0 4px 15px rgba(0,0,0,0.12);
}
body.theme-light .song-search-result-item {
  color: #222;
  border-bottom-color: #eee;
}
body.theme-light .song-search-result-item:hover {
  background: rgba(255,105,180,0.07);
}
body.theme-light .song-search-result-item .artist-name {
  color: #666;
}

/* "Why Rate Music?" section cards (home page inline styles) */
body.theme-light [style*="background:rgba(255,255,255,0.03)"],
body.theme-light [style*="background: rgba(255,255,255,0.03)"] {
  background: rgba(0,0,0,0.03) !important;
}
body.theme-light [style*="background:rgba(255,255,255,0.02)"],
body.theme-light [style*="background: rgba(255,255,255,0.02)"] {
  background: rgba(0,0,0,0.02) !important;
}
body.theme-light [style*="background:rgba(10,10,10"],
body.theme-light [style*="background: rgba(10,10,10"] {
  background: #fff !important;
}
body.theme-light [style*="background:rgba(15,15,15"],
body.theme-light [style*="background: rgba(15,15,15"] {
  background: #fff !important;
}
/* background:#111 is intentionally left dark (profile sidebar boxes, badges, etc.) */
body.theme-light [style*="background:#0f0f0f"] {
  background: #fff !important;
}
/* Community Takes review rows use inline background:#0b0b0b — same idea,
   make them white in light mode so the dark text we set elsewhere is readable. */
body.theme-light .review-row[style*="background:#0b0b0b"],
body.theme-light .review-row-link .review-row {
  background: #ffffff !important;
  border-color: rgba(255, 105, 180, 0.25) !important;
}
body.theme-light .review-row-link:hover .review-row {
  background: rgba(255, 105, 180, 0.04) !important;
  border-color: rgba(255, 105, 180, 0.45) !important;
}
/* Username link inside the Community Takes row — inline color:#ffd9f7 would
   otherwise be converted to #111 by the generic rule below, which clashes
   with the readable dark text of the title. Keep it pink for contrast. */
body.theme-light .review-row a[style*="color:#ffd9f7"] {
  color: #c22882 !important;
}
/* EXCEPTION: take cards inside intentionally-dark containers should stay
   dark so they don't look like white islands on a dark card. */
body.theme-light .card-dark-25 .review-row[style*="background:#0f0f0f"],
body.theme-light .card-dark-20 .review-row[style*="background:#0f0f0f"],
body.theme-light .card-dark-25 [style*="background:#0f0f0f"],
body.theme-light .card-dark-20 [style*="background:#0f0f0f"] {
  background: #1a1a1a !important;
  color: #eee !important;
}
/* Text inside take cards that live in a dark container — force white-ish */
body.theme-light .card-dark-25 .review-row,
body.theme-light .card-dark-20 .review-row {
  color: #eee !important;
}
body.theme-light .card-dark-25 .review-row [style*="color:#fff"],
body.theme-light .card-dark-25 .review-row strong,
body.theme-light .card-dark-20 .review-row [style*="color:#fff"],
body.theme-light .card-dark-20 .review-row strong {
  color: #fff !important;
}
body.theme-light .card-dark-25 .review-row .review-content,
body.theme-light .card-dark-20 .review-row .review-content {
  color: #ddd !important;
}

/* Inline text color overrides for light mode */
body.theme-light [style*="color:#ffd9f7"] {
  color: #111 !important;
}
body.theme-light [style*="color:rgba(255,255,255,0.7)"] {
  color: rgba(0,0,0,0.55) !important;
}
body.theme-light [style*="color:rgba(255,255,255,0.6)"] {
  color: rgba(0,0,0,0.5) !important;
}
body.theme-light [style*="color:rgba(255,255,255,0.5)"] {
  color: rgba(0,0,0,0.45) !important;
}
body.theme-light [style*="color:rgba(255,255,255,0.4)"] {
  color: rgba(0,0,0,0.38) !important;
}
body.theme-light [style*="color:#fff"]:not(.btn):not(button):not(.gradient-text):not([class*="badge"]) {
  color: #111 !important;
}

/* Border overrides for dark semi-transparent borders */
body.theme-light [style*="border:1px solid rgba(255,255,255,0.05)"],
body.theme-light [style*="border: 1px solid rgba(255,255,255,0.05)"] {
  border-color: rgba(0,0,0,0.08) !important;
}
body.theme-light [style*="border:1px solid rgba(255,255,255,0.08)"],
body.theme-light [style*="border: 1px solid rgba(255,255,255,0.08)"] {
  border-color: rgba(0,0,0,0.1) !important;
}
body.theme-light [style*="border:1px solid rgba(255,105,180,0.08)"],
body.theme-light [style*="border: 1px solid rgba(255,105,180,0.08)"] {
  border-color: rgba(255,105,180,0.18) !important;
}

/* ==============================
   LIGHT THEME — HOME FEATURES SECTION (locked dark)
============================== */
body.theme-light .features-card {
  background: #111 !important;
  border-color: rgba(255,0,255,0.16) !important;
  box-shadow: 0 8px 30px rgba(0,0,0,0.3);
}
body.theme-light .features-card *,
body.theme-light .features-cta *,
body.theme-light .features-badge * {
  color: inherit;
}
body.theme-light .features-card .left h2 {
  color: #ff8fcf !important;
  text-shadow: 0 0 10px rgba(255,0,255,0.45);
}
body.theme-light .features-card .left p.lead {
  color: #e8dff2 !important;
}
body.theme-light .features-list li {
  color: #f6eaff !important;
}
body.theme-light .features-list li .muted {
  color: #e6d8f1 !important;
}
body.theme-light .features-cta {
  background: linear-gradient(180deg, rgba(255,0,255,0.05), rgba(255,105,180,0.02)) !important;
  border-color: rgba(255,0,255,0.16) !important;
}
body.theme-light .features-cta h4 {
  color: #ffb4dd !important;
}
body.theme-light .features-cta p {
  color: #f0e6f5 !important;
}
body.theme-light .features-cta a.cta-small {
  background: #120005 !important;
  color: #ffd8f6 !important;
  border-color: rgba(255,0,255,0.22) !important;
}
body.theme-light .features-badge {
  background: rgba(0,0,0,0.25) !important;
  border-color: rgba(255,255,255,0.03) !important;
  color: #ffdff8 !important;
}
body.theme-light .features-badge .badge-title {
  color: #ff9fd6 !important;
}
body.theme-light .features-badge .badge-body {
  color: #f0e6f5 !important;
}

/* ==============================
   LIGHT THEME — PINNED POST & FEED ITEMS
============================== */
body.theme-light .feed-item.pinned-post {
  background: linear-gradient(135deg, rgba(255,105,180,0.06), rgba(139,0,255,0.03)) !important;
}
body.theme-light .post-comments {
  border-top-color: rgba(0,0,0,0.07) !important;
}
body.theme-light .post-comments input[type="text"] {
  color: #222 !important;
  border-color: rgba(0,0,0,0.1) !important;
}
body.theme-light .post-comments [style*="background:rgba(255,255,255,0.02)"],
body.theme-light .post-comments [style*="background: rgba(255,255,255,0.02)"] {
  background: rgba(0,0,0,0.02) !important;
  color: #222 !important;
}

/* ==============================
   LIGHT THEME — THUMB / SMALL SURFACE
============================== */
body.theme-light .thumb-44 {
  background: #e8e8e8;
}

/* ==============================
   LIGHT THEME — SETTINGS TABLE
============================== */
body.theme-light .settings-table th,
body.theme-light .settings-table td {
  color: #222;
  border-bottom-color: rgba(0,0,0,0.06);
}

/* ==============================
   LIGHT THEME — DARK CARDS EVERYWHERE
   All the near-transparent dark cards (track-card, modern-card,
   ratings rows, explore cards, etc.) get a solid light surface
   so text is always readable.
============================== */

/* Top Charts: track cards */
body.theme-light .track-card {
  background: #fff !important;
  border-color: rgba(0,0,0,0.07) !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}
body.theme-light .track-card:hover {
  box-shadow: 0 6px 20px rgba(255,105,180,0.15) !important;
}
body.theme-light .song-link-hover {
  color: #c22882;
}
body.theme-light .song-link-hover:hover {
  color: #ff69b4;
  text-shadow: none;
}
body.theme-light .category-btn {
  color: #444;
  border-color: rgba(0,0,0,0.15);
}
body.theme-light .category-btn:hover {
  color: #c22882;
  background: rgba(255,105,180,0.06);
  border-color: rgba(255,105,180,0.3);
}
body.theme-light .category-btn.active {
  background: #111;
  color: #ff69b4;
  border-color: rgba(255,105,180,0.5);
}
body.theme-light .time-filter-btn {
  color: #444;
  background: rgba(255,255,255,0.6);
  border-color: rgba(0,0,0,0.15);
}
body.theme-light .time-filter-btn:hover {
  color: #c22882;
  background: rgba(255,105,180,0.08);
  border-color: rgba(255,105,180,0.4);
}
body.theme-light .time-filter-btn.active {
  background: #111;
  color: #ff69b4;
  border-color: rgba(255,105,180,0.5);
}

/* ── Discover page cards (For You / Trending / Top 100 / etc.) ── */
body.theme-light .discovery-card,
body.theme-light .discovery-card-enhanced {
  background: #ffffff !important;
  border: 1px solid rgba(255, 105, 180, 0.35) !important;
  box-shadow: 0 2px 10px rgba(255, 105, 180, 0.08) !important;
}
body.theme-light .discovery-card:hover,
body.theme-light .discovery-card-enhanced:hover {
  border-color: rgba(255, 105, 180, 0.6) !important;
  box-shadow: 0 6px 18px rgba(255, 105, 180, 0.18) !important;
}
body.theme-light .discovery-card h3,
body.theme-light .discovery-card-enhanced h3 {
  color: #c22882 !important;
  text-shadow: none !important;
}
body.theme-light .discovery-card p,
body.theme-light .discovery-card-enhanced p {
  color: #444 !important;
}

/* ── Roadmap page (coming_soon.html) ── */
body.theme-light .rmap-list,
body.theme-light .rmap-list li {
  color: #222 !important;
}
body.theme-light .rmap-section {
  background: #ffffff !important;
  border: 1px solid rgba(255, 105, 180, 0.2) !important;
  color: #222 !important;
}
body.theme-light .rmap-section-header h3 {
  color: #111 !important;
  text-shadow: none !important;
}
body.theme-light .rmap-tab-btn {
  color: #444 !important;
  background: #ffffff !important;
  border-color: rgba(0, 0, 0, 0.15) !important;
}
body.theme-light .rmap-tab-btn.active {
  background: #111 !important;
  color: #ff69b4 !important;
  border-color: rgba(255, 105, 180, 0.5) !important;
}
/* The roadmap header + subtitle use inline pink/white — force readable */
body.theme-light h1[style*="#ff69b4"][style*="Bubblegum"] {
  text-shadow: none !important;
}
body.theme-light p[style*="rgba(255,255,255"] {
  color: #555 !important;
}

/* ── Community Takes: username, song title, artist ── */
body.theme-light .feed-take-username,
body.theme-light .feed-take-song-username {
  color: #c22882 !important;
}
body.theme-light .feed-take-song-title,
body.theme-light .feed-name-bold {
  color: #111 !important;
}
body.theme-light .feed-take-song-artist {
  color: #555 !important;
}
/* Inline-style avatar usernames / secondary text inside takes cards */
body.theme-light .feed-take-card [style*="color:rgba(255,255,255,0.5)"],
body.theme-light .feed-take-card [style*="color:rgba(255,255,255,0.4)"],
body.theme-light .feed-take-card [style*="color:rgba(255,255,255,0.6)"] {
  color: #555 !important;
}
body.theme-light .feed-take-card [style*="color:#fff"],
body.theme-light .feed-take-card [style*="color:#ffffff"],
body.theme-light .feed-take-card [style*="color:white"] {
  color: #111 !important;
}

/* ── Takes feed page (takes_feed.html) — .tf-* classes ── */
/* Filter pills (Latest, Following, New/Top/Trending, All/Songs/Albums, etc.) */
body.theme-light .tf-pill {
  color: #444 !important;
  background: #ffffff !important;
  border-color: rgba(0, 0, 0, 0.18) !important;
}
body.theme-light .tf-pill:hover {
  color: #c22882 !important;
  border-color: rgba(255, 105, 180, 0.5) !important;
  background: rgba(255, 105, 180, 0.06) !important;
}
body.theme-light .tf-pill.active {
  background: rgba(255, 105, 180, 0.15) !important;
  border-color: #ff69b4 !important;
  color: #c22882 !important;
  box-shadow: 0 0 10px rgba(255, 105, 180, 0.18) !important;
}

/* Take cards */
body.theme-light .tf-card {
  background: #ffffff !important;
  border-color: rgba(255, 105, 180, 0.25) !important;
}
body.theme-light .tf-card:hover {
  border-color: rgba(255, 105, 180, 0.5) !important;
  box-shadow: 0 6px 20px rgba(255, 45, 120, 0.12) !important;
}

/* Author + target text */
body.theme-light .tf-author-name {
  color: #111 !important;
}
body.theme-light .tf-author-name:hover {
  color: #c22882 !important;
}
body.theme-light .tf-username {
  color: #666 !important;
}
body.theme-light .tf-date {
  color: #888 !important;
}
body.theme-light .tf-target-row {
  background: rgba(0, 0, 0, 0.03) !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
}
body.theme-light .tf-target-row:hover {
  background: rgba(255, 105, 180, 0.05) !important;
}
body.theme-light .tf-target-title {
  color: #111 !important;
}
body.theme-light .tf-target-sub {
  color: #555 !important;
}
body.theme-light .tf-content {
  color: #222 !important;
}
body.theme-light .tf-quick {
  color: #c22882 !important;
}

/* ── Reviews / Takes page (reviews.html): compact time/sort/content pills ── */
/* Size reduction applies in BOTH themes — Community Takes pills were too chunky */
.sort-link,
.time-filter-link,
.content-type-link {
  padding: 5px 12px !important;
  font-size: 0.78rem !important;
  font-weight: 600 !important;
  border-radius: 999px !important;
}

/* Light-theme contrast for sort/time/content links */
body.theme-light .sort-link,
body.theme-light .time-filter-link,
body.theme-light .content-type-link {
  color: #444 !important;
  background: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.15) !important;
  text-decoration: none !important;
}
body.theme-light .sort-link:hover,
body.theme-light .time-filter-link:hover,
body.theme-light .content-type-link:hover {
  color: #c22882 !important;
  border-color: rgba(255, 105, 180, 0.45) !important;
  background: rgba(255, 105, 180, 0.06) !important;
}
body.theme-light .sort-link.active,
body.theme-light .time-filter-link.active,
body.theme-light .content-type-link.active {
  background: #111 !important;
  color: #ff69b4 !important;
  border-color: rgba(255, 105, 180, 0.5) !important;
}

/* ── Take / review body text (song page Takes area, profile reviews) ── */
body.theme-light .review-content,
body.theme-light .feed-take-content-full {
  color: #222 !important;
}
body.theme-light .feed-take-content-quick,
body.theme-light .feed-take-text,
body.theme-light .feed-take-text-lg {
  color: #c22882 !important;
  text-shadow: none !important;
}
body.theme-light .track-rank-col .app-btn:hover {
  color: #c22882;
}

/* Rank number badge (#1, #2 …) */
body.theme-light .track-rank {
  background: #111 !important;
  color: #ff69b4 !important;
}

/* Ratings list rows outside the dark sidebar boxes */
body.theme-light .ratings-list-row:not(.left-box .ratings-list-row):not(.right-box .ratings-list-row),
body.theme-light .rating-row {
  background: transparent !important;
  color: #111 !important;
}

/* Everything inside dark boxes stays dark — no cascade overrides */
body.theme-light .left-box *,
body.theme-light .right-box *,
body.theme-light .card-dark-20 *,
body.theme-light .card-dark-25 *,
body.theme-light .card-dark-18 *,
body.theme-light .card-dark-cover * {
  color: inherit;
}
/* But don't override elements that have their own intentional colors */
body.theme-light .left-box .ratings-list-row,
body.theme-light .right-box .ratings-list-row {
  background: transparent !important;
}
body.theme-light .left-box [style*="color:#aaa"],
body.theme-light .right-box [style*="color:#aaa"] {
  color: #aaa !important;
}
body.theme-light .left-box [style*="color:rgba(255,255,255"],
body.theme-light .right-box [style*="color:rgba(255,255,255"] {
  color: inherit !important;
}

/* Explore / discovery cards with near-transparent dark bg */
body.theme-light .modern-card,
body.theme-light .what-to-listen-card,
body.theme-light .modern-discovery-card,
body.theme-light .trending-card,
body.theme-light .track-card {
  background: #fff !important;
  border-color: rgba(0,0,0,0.07) !important;
}

/* Any article/div that uses the semi-transparent dark inline background
   pattern used throughout (rgba(255,255,255,0.01) etc.) */
body.theme-light [style*="background: linear-gradient(180deg, rgba(255,255,255,0.01)"],
body.theme-light [style*="background:linear-gradient(180deg,rgba(255,255,255,0.01)"] {
  background: #fff !important;
}

/* "Why Rate Music?" and other cards that use the rgba(255,20,147,0.03) surface */
body.theme-light [style*="background:rgba(255,20,147,0.03)"],
body.theme-light [style*="background: rgba(255,20,147,0.03)"] {
  background: rgba(255,105,180,0.04) !important;
}

/* Inline color:#aaa / #888 / #666 secondary text — keep it readable */
body.theme-light [style*="color:#aaa"] {
  color: #555 !important;
}
body.theme-light [style*="color:#888"] {
  color: #555 !important;
}
body.theme-light [style*="color:#666"] {
  color: #444 !important;
}

/* .track-rank badge and any pill that intentionally uses black bg + pink text —
   keep it dark so the badge stays visible and styled */
body.theme-light .track-rank {
  background: #111 !important;
  color: #ff69b4 !important;
}

/* ==============================
   INTENTIONALLY DARK IN ALL THEMES
   These components stay #111 dark regardless of light/neon/dark mode.
   They are designed as dark surfaces and should never go white.
============================== */
body.theme-light .left-box,
body.theme-light .right-box,
body.theme-light .card-dark-20,
body.theme-light .card-dark-25,
body.theme-light .card-dark-18,
body.theme-light .card-dark-cover {
  background: #111 !important;
  color: #fff !important;
}

/* Headings inside dark cards */
body.theme-light .left-box h3,
body.theme-light .right-box h3,
body.theme-light .card-dark-20 h3,
body.theme-light .card-dark-25 h3,
body.theme-light .card-dark-18 h3,
body.theme-light .card-dark-cover h3,
body.theme-light .card-dark-25 h1,
body.theme-light .card-dark-25 h2 {
  color: inherit !important;
}

/* Inputs/textareas inside dark cards stay dark too */
body.theme-light .card-dark-20 textarea,
body.theme-light .card-dark-25 textarea,
body.theme-light .card-dark-18 textarea,
body.theme-light .card-dark-20 input[type="text"],
body.theme-light .card-dark-25 input[type="text"],
body.theme-light .card-dark-18 input[type="text"] {
  background: #1a1a1a !important;
  color: #fff !important;
  border-color: rgba(255,105,180,0.2) !important;
}
body.theme-light .card-dark-20 textarea::placeholder,
body.theme-light .card-dark-25 textarea::placeholder,
body.theme-light .card-dark-18 textarea::placeholder {
  color: rgba(255,255,255,0.4) !important;
}

/* Score pills inside dark cards keep their dark pill style */
body.theme-light .left-box .score-pill,
body.theme-light .right-box .score-pill,
body.theme-light .card-dark-20 .score-pill,
body.theme-light .card-dark-25 .score-pill,
body.theme-light .card-dark-18 .score-pill {
  background: #000 !important;
  color: #ff69b4 !important;
  border-color: rgba(255,105,180,0.5) !important;
}

/* img cover containers that use background:#000 as fallback colour
   (shown behind transparent images) — keep black so covers look right */
body.theme-light img[style*="background:#000"] {
  background: #000 !important;
}