/* 2012-style stream skin — youre awesome.com (layout only, not SoundCloud branding) */

body.sc-theme.sc-classic {
  --sc-orange: #ff5500;
  --sc-link: #0066cc;
  --sc-bg: #f2f2f2;
  --sc-header: #333333;
  --sc-card: #ffffff;
  --sc-border: #e1e1e1;
  --sc-border-dark: #cccccc;
  --sc-text: #333333;
  --sc-text-muted: #999999;
  --sc-wave-bg: transparent;
  --sc-wave-top: #2a2a2a;
  --sc-wave-bot: #cfcfcf;
  --sc-wave-played-top: #ff5500;
  --sc-wave-played-bot: rgba(255, 85, 0, 0.42);
  --sc-wave: #404040;
  --sc-wave-played: #ff5500;
  --sc-playbar-h: 48px;
  --sc-header-h: 48px;
  --sans: "Lucida Grande", "Helvetica Neue", Helvetica, Arial, sans-serif;

  font-family: var(--sans);
  font-size: 12px;
  line-height: 1.4;
  color: var(--sc-text);
  background: var(--sc-bg);
  overflow-x: auto;
}

body.sc-theme.sc-classic .l-corners,
body.sc-theme.sc-classic .panel {
  background-image: none;
  border-radius: 0;
  box-shadow: none;
  border: none;
  background: transparent;
}

body.sc-theme.sc-classic .app.sc-app {
  max-width: none;
  padding: 0;
  gap: 0;
  min-height: 100vh;
  padding-bottom: var(--sc-playbar-h);
}

/* ——— Header ——— */
body.sc-theme.sc-classic .sc-classic-header {
  position: sticky;
  top: 0;
  z-index: 400;
  background: linear-gradient(to bottom, #3a3a3a 0%, #2b2b2b 100%);
  border-bottom: 1px solid #1a1a1a;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  height: 48px;
  overflow: visible;
  transition: transform 0.22s ease;
  will-change: transform;
}

body.sc-header-hidden.sc-theme.sc-classic .sc-classic-header {
  transform: translateY(-100%);
  pointer-events: none;
}

body.sc-theme.sc-classic .sc-global-nav-inner {
  max-width: 1240px;
  margin: 0 auto;
  height: 48px;
  padding: 0 12px 0 0;
  display: flex;
  align-items: center;
  gap: 0;
}

body.sc-theme.sc-classic .sc-classic-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  flex-shrink: 0;
  padding-right: 12px;
  height: 48px;
  align-self: stretch;
}

body.sc-theme.sc-classic .sc-logo-mark {
  display: block;
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  align-self: stretch;
  object-fit: cover;
}

body.sc-theme.sc-classic .sc-site-wordmark {
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.02em;
  white-space: nowrap;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.35);
}

body.sc-theme.sc-classic .sc-classic-nav {
  display: flex;
  align-items: stretch;
  flex-shrink: 0;
  margin: 0;
  padding: 0;
  height: 48px;
  align-self: stretch;
}

body.sc-theme.sc-classic .sc-classic-nav a {
  display: flex;
  align-items: center;
  padding: 0 16px;
  color: #999;
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  border-left: 1px solid #444;
  border-right: 1px solid #222;
  align-self: stretch;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);
}

body.sc-theme.sc-classic .sc-classic-nav a:hover {
  color: #ddd;
}

body.sc-theme.sc-classic .sc-classic-nav a.is-active {
  color: #fff;
  background: linear-gradient(to bottom, #1f1f1f 0%, #121212 100%);
  box-shadow:
    inset 0 3px 6px rgba(0, 0, 0, 0.65),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  border-left-color: #333;
  border-right-color: #0a0a0a;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5);
}

body.sc-theme.sc-classic .sc-classic-search {
  flex: 1;
  max-width: 340px;
  position: relative;
  margin: 0 auto;
  align-self: center;
  padding: 0 12px;
  display: flex;
  align-items: center;
  height: 32px;
}

body.sc-theme.sc-classic .sc-global-search-input {
  width: 100%;
  height: 28px;
  box-sizing: border-box;
  border: 1px solid #222;
  border-radius: 4px;
  padding: 0 30px 0 10px;
  font: inherit;
  font-size: 12px;
  line-height: 26px;
  color: #ccc;
  background: #222;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.35);
  vertical-align: middle;
}

body.sc-theme.sc-classic .sc-global-search-input::placeholder {
  color: #777;
}

body.sc-theme.sc-classic .sc-global-search-input:focus {
  outline: none;
  border-color: #444;
  color: #eee;
}

body.sc-theme.sc-classic .sc-search-icon {
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  width: 14px;
  height: 14px;
  pointer-events: none;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
}

body.sc-theme.sc-classic .sc-search-icon svg {
  display: block;
  width: 14px;
  height: 14px;
  opacity: 0.75;
}

body.sc-theme.sc-classic .sc-classic-header-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  flex-shrink: 0;
  align-self: center;
  padding-left: 8px;
}

body.sc-theme.sc-classic .sc-header-more {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

body.sc-theme.sc-classic .sc-header-more a {
  display: flex;
  align-items: center;
  height: 26px;
  padding: 0 9px;
  color: #999;
  text-decoration: none;
  font-size: 11px;
  font-weight: 600;
  border-left: 1px solid #444;
  white-space: nowrap;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.35);
}

body.sc-theme.sc-classic .sc-header-more a:first-child {
  border-left: none;
}

body.sc-theme.sc-classic .sc-header-more a:hover {
  color: #ddd;
}

body.sc-theme.sc-classic .sc-header-more a.is-active {
  color: #fff;
  background: linear-gradient(to bottom, #1f1f1f 0%, #121212 100%);
  box-shadow:
    inset 0 2px 5px rgba(0, 0, 0, 0.65),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  border-left-color: #333;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5);
}

body.sc-theme.sc-classic .sc-global-actions .auth-bar {
  display: flex;
  align-items: center;
}

body.sc-theme.sc-classic .auth-bar .auth-login-btn,
body.sc-theme.sc-classic .auth-bar .btn-ghost.auth-login-btn {
  height: 26px;
  padding: 0 11px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  border: 1px solid #3c45a5;
  border-radius: 3px;
  background: linear-gradient(to bottom, #5865f2 0%, #4752c4 100%);
  color: #fff !important;
  text-decoration: none;
  line-height: 24px;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.35);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.18) inset,
    0 1px 2px rgba(0, 0, 0, 0.25);
}

body.sc-theme.sc-classic .auth-bar .auth-login-btn:hover {
  background: linear-gradient(to bottom, #6873f3 0%, #5059c9 100%);
  color: #fff !important;
}

body.sc-theme.sc-classic .auth-bar .auth-session {
  display: flex;
  align-items: center;
  gap: 6px;
}

body.sc-theme.sc-classic .auth-bar .auth-user-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #ccc;
  font-size: 11px;
}

body.sc-theme.sc-classic .auth-bar .auth-avatar {
  border-radius: 2px;
}

body.sc-theme.sc-classic .sc-header-util {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
  padding-left: 6px;
  border-left: 1px solid #333;
}

body.sc-theme.sc-classic .sc-nav-icon-btn,
body.sc-theme.sc-classic .sc-dark-toggle,
body.sc-theme.sc-classic .sc-nav-settings,
body.sc-theme.sc-classic .mobile-menu-btn {
  color: #aaa;
  border: none;
  background: none;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  padding: 4px 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 2px;
}

body.sc-theme.sc-classic .sc-nav-icon-btn:hover,
body.sc-theme.sc-classic .sc-dark-toggle:hover,
body.sc-theme.sc-classic .sc-nav-settings:hover {
  background: rgba(255, 255, 255, 0.06);
}

body.sc-theme.sc-classic .sc-nav-icon-btn img,
body.sc-theme.sc-classic .sc-dark-toggle img,
body.sc-theme.sc-classic .sc-dark-toggle svg,
body.sc-theme.sc-classic .sc-nav-settings img,
body.sc-theme.sc-classic .mobile-menu-btn img {
  display: block;
  width: 14px;
  height: 14px;
  opacity: 0.85;
}

body.sc-theme.sc-classic .sc-theme-toggle-icon {
  display: block;
  width: 14px;
  height: 14px;
  opacity: 0.85;
}

body.sc-theme.sc-classic .sc-dark-toggle.is-active .sc-theme-toggle-icon {
  opacity: 1;
}

body.sc-theme.sc-classic .sc-more-wrap {
  position: relative;
  display: inline-flex;
}

body.sc-theme.sc-classic .sc-more-menu {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  z-index: 120;
  min-width: 132px;
  padding: 4px 0;
  background: #fff;
  border: 1px solid #ccc;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
}

body.sc-theme.sc-classic a.sc-more-menu-item {
  text-decoration: none;
}

body.sc-theme.sc-classic .sc-more-menu-item {
  display: block;
  width: 100%;
  padding: 6px 12px;
  border: none;
  background: none;
  font-family: var(--sans);
  font-size: 11px;
  color: #333;
  text-align: left;
  cursor: pointer;
}

body.sc-theme.sc-classic .sc-more-menu-item:hover {
  background: #f2f2f2;
  color: #ff5500;
}

body.sc-theme.sc-classic .auth-bar .auth-session-compact {
  display: flex;
  align-items: center;
  gap: 4px;
  max-width: 120px;
}

body.sc-theme.sc-classic .auth-bar .auth-session-compact .auth-user-chip {
  min-width: 0;
}

body.sc-theme.sc-classic .auth-bar .auth-session-compact .auth-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 72px;
}

body.sc-theme.sc-classic .auth-bar .auth-session-compact .auth-role {
  font-size: 9px;
  text-transform: uppercase;
  padding: 1px 4px;
  border-radius: 2px;
  background: #333;
  color: #aaa;
  flex-shrink: 0;
}

body.sc-theme.sc-classic .sc-admin-view {
  background: var(--sc-card);
  border: 1px solid var(--sc-border);
  padding: 12px 16px;
}

body.sc-theme.sc-classic .sc-admin-head {
  margin-bottom: 4px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--sc-border);
}

body.sc-theme.sc-classic .sc-admin-head .sc-you-title {
  font-size: 15px;
  margin: 0;
}

body.sc-theme.sc-classic .sc-admin-sub {
  font-size: 10px;
  margin: 2px 0 0;
}

body.sc-theme.sc-classic .sc-admin-actions {
  padding: 8px 0 12px;
}

body.sc-theme.sc-classic .sc-admin-primary-btn {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  padding: 5px 10px;
  border: 1px solid #ccc;
  border-radius: 2px;
  background: linear-gradient(to bottom, #fefefe, #e6e6e6);
  color: #333;
  cursor: pointer;
}

body.sc-theme.sc-classic .sc-admin-primary-btn:hover {
  border-color: var(--sc-orange);
  color: var(--sc-orange);
}

body.sc-theme.sc-classic .sc-admin-view .submission-review-card {
  background: #fafafa;
  border: 1px solid var(--sc-border);
  padding: 10px;
  margin-bottom: 8px;
}

body.sc-theme.sc-classic .sc-admin-view .submission-review-actions .btn {
  font-size: 10px;
  padding: 4px 8px;
}

body.sc-theme.sc-classic .sc-admin-retry {
  margin-top: 8px;
}

body.sc-theme.sc-classic .sc-nav-settings.is-active {
  background: #000;
}

body.sc-theme.sc-classic .sc-nav-settings.is-active img {
  opacity: 1;
}

body.sc-theme.sc-classic .sc-dark-toggle.is-active img {
  opacity: 1;
}

body.sc-theme.sc-classic .mobile-menu-btn {
  display: none;
}

body.sc-theme.sc-classic .auth-bar .auth-actions .btn {
  height: 24px;
  padding: 0 8px;
  font-size: 10px;
  color: #bbb;
  border-color: #555;
  background: transparent;
}

body.sc-theme.sc-classic .auth-bar .auth-offline {
  font-size: 10px;
  color: #888;
  max-width: 140px;
  line-height: 1.2;
}

/* ——— 3-column layout ——— */
body.sc-theme.sc-classic .sc-classic-layout {
  max-width: 1240px;
  margin: 0 auto;
  padding: 16px;
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr) 260px;
  gap: 20px;
  align-items: start;
  width: 100%;
  box-sizing: border-box;
  overflow: visible;
}

/* Left profile — 2012 SoundCloud sidebar */
body.sc-theme.sc-classic .sc-classic-left {
  background: var(--sc-card);
  border: 1px solid var(--sc-border);
  padding: 0;
  overflow-x: hidden;
  overflow-y: auto;
  min-width: 0;
  max-width: 220px;
  align-self: start;
  position: sticky;
  top: calc(var(--sc-header-h) + 8px);
  max-height: calc(100vh - var(--sc-header-h) - var(--sc-playbar-h) - 16px);
  -webkit-overflow-scrolling: touch;
}

/* Filters + era nav scroll inside sticky sidebar when content is tall */
body.sc-theme.sc-classic .sc-left-sticky {
  position: static;
  z-index: auto;
  max-height: none;
  overflow: visible;
  background: transparent;
}

body.sc-theme.sc-classic .sc-classic-avatar {
  width: 100%;
  height: auto;
  display: block;
  margin: 0;
  border-bottom: 1px solid var(--sc-border);
}

body.sc-theme.sc-classic .sc-classic-left .sc-classic-user,
body.sc-theme.sc-classic .sc-classic-left .sc-classic-realname,
body.sc-theme.sc-classic .sc-classic-left .sc-classic-location,
body.sc-theme.sc-classic .sc-classic-left .sc-classic-profile-stats,
body.sc-theme.sc-classic .sc-classic-left .sc-classic-bio,
body.sc-theme.sc-classic .sc-classic-left .sc-classic-tabs {
  padding-left: 14px;
  padding-right: 14px;
}

body.sc-theme.sc-classic .sc-classic-user {
  margin: 12px 0 2px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
}

body.sc-theme.sc-classic .sc-classic-realname {
  margin: 0 0 2px;
  padding-top: 0;
  color: #888;
  font-size: 11px;
}

body.sc-theme.sc-classic .sc-classic-user-link {
  color: #005580;
  text-decoration: none;
}

body.sc-theme.sc-classic .sc-classic-user-link:hover {
  text-decoration: underline;
}

body.sc-theme.sc-classic .sc-classic-location {
  margin: 0 0 10px;
  color: #999;
  font-size: 11px;
}

body.sc-theme.sc-classic .sc-classic-profile-stats {
  list-style: none;
  margin: 0 0 12px;
  padding-bottom: 0;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: #666;
}

body.sc-theme.sc-classic .sc-classic-profile-stats li {
  display: flex;
  align-items: center;
  gap: 4px;
}

body.sc-theme.sc-classic .sc-classic-profile-stats .sc-stat-divider {
  color: #ccc;
  padding: 0 2px;
}

body.sc-theme.sc-classic .sc-classic-profile-stats strong {
  color: #333;
  font-size: 12px;
  font-weight: 700;
}

body.sc-theme.sc-classic .sc-classic-bio {
  margin: 0 0 12px;
  font-size: 11px;
  line-height: 1.45;
  color: #888;
}

body.sc-theme.sc-classic .sc-classic-tabs {
  display: flex;
  flex-direction: column;
  gap: 0;
  border-top: 1px solid var(--sc-border);
  padding-top: 8px;
  padding-bottom: 10px;
  margin: 0;
}

body.sc-theme.sc-classic .sc-classic-tabs .sc-tab {
  text-align: left;
  padding: 5px 0;
  border: none;
  background: none;
  color: #005580;
  font: inherit;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  cursor: pointer;
}

body.sc-theme.sc-classic .sc-classic-tabs .sc-tab.active {
  color: #111;
  font-weight: 700;
}

body.sc-theme.sc-classic .sc-tab-extra {
  display: none;
}

/* Center feed */
body.sc-theme.sc-classic .sc-classic-feed,
body.sc-theme.sc-classic .sc-stream {
  min-width: 0;
  padding: 0;
  background: transparent;
}

body.sc-theme.sc-classic .timeline-intro,
body.sc-theme.sc-classic .era-header {
  background: transparent;
  border: none;
  padding: 0 0 10px;
  margin: 0;
}

body.sc-theme.sc-classic .timeline-intro h1,
body.sc-theme.sc-classic .era-header h1 {
  font-size: 14px;
  font-weight: 700;
  color: #333;
}

body.sc-theme.sc-classic .timeline-intro .era-timeline,
body.sc-theme.sc-classic .era-section > .era-header,
body.sc-theme.sc-classic .era-view > .era-header:not(.timeline-intro):not(.sc-albums-head):not(.sc-media-head) {
  display: none;
}

body.sc-theme.sc-classic .section-label {
  display: none;
}

body.sc-theme.sc-classic .era-section .section-label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #999;
  margin: 14px 0 8px;
}

body.sc-theme.sc-classic .release-card {
  border: none;
  background: transparent;
  padding: 0;
  margin: 0 0 18px;
}

body.sc-theme.sc-classic .release-card > h2,
body.sc-theme.sc-classic .release-card .release-cover {
  display: none;
}

body.sc-theme.sc-classic .release-card .track-rows {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

body.sc-theme.sc-classic .track-row:not(.sc-track-item) {
  display: none;
}

/* ——— Track card ——— */
body.sc-theme.sc-classic .sc-track-item {
  display: block;
  background: var(--sc-card);
  border: 1px solid var(--sc-border);
  margin-bottom: 16px;
  padding: 12px;
  min-height: 0;
  max-height: none;
  height: auto;
  overflow: visible;
  content-visibility: auto;
  contain-intrinsic-size: auto 132px;
}

body.sc-theme.sc-classic .sc-track-body {
  display: flex;
  align-items: stretch;
  gap: 12px;
}

body.sc-theme.sc-classic .sc-track-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

body.sc-theme.sc-classic .sc-track-head {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 6px;
}

body.sc-theme.sc-classic .sc-track-art {
  width: 124px;
  height: 124px;
  flex-shrink: 0;
  align-self: flex-start;
  background: #eee;
  overflow: hidden;
  border: none;
  padding: 0;
  cursor: pointer;
}

body.sc-theme.sc-classic .sc-track-link {
  border: none;
  background: none;
  padding: 0;
  text-align: left;
  cursor: pointer;
  font: inherit;
}

body.sc-theme.sc-classic .sc-track-art > img:not(.sc-note-fallback) {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

body.sc-theme.sc-classic .sc-track-art-fallback,
body.sc-theme.sc-classic .sc-page-art-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: #eee;
  pointer-events: none;
}

body.sc-theme.sc-classic .sc-track-art-fallback .sc-note-fallback,
body.sc-theme.sc-classic .sc-page-art-fallback .sc-note-fallback {
  width: 44px;
  height: 44px;
  max-width: 55%;
  max-height: 55%;
  opacity: 0.42;
  flex-shrink: 0;
}

body.sc-theme.sc-classic .sc-track-titles {
  flex: 1;
  min-width: 0;
}

body.sc-theme.sc-classic .sc-track-user {
  display: block;
  color: var(--sc-text-muted);
  font-size: 12px;
  text-decoration: none;
  margin-bottom: 2px;
}

body.sc-theme.sc-classic .sc-track-title-line {
  display: block;
  color: #333;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
  min-width: 0;
  text-align: left;
}

body.sc-theme.sc-classic .sc-track-title-inner {
  display: inline-block;
  white-space: nowrap;
  max-width: none;
  text-overflow: ellipsis;
  overflow: hidden;
}

body.sc-theme.sc-classic .sc-track-title-line:not(:has(.sc-track-title-inner.sc-track-title--marquee)) {
  text-overflow: ellipsis;
}

@media (prefers-reduced-motion: no-preference) {
  body.sc-theme.sc-classic .sc-track-title-inner.sc-track-title--marquee {
    text-overflow: clip;
    overflow: visible;
    animation: sc-track-title-marquee 10s linear infinite;
  }

  @keyframes sc-track-title-marquee {
    0%,
    12% {
      transform: translateX(0);
    }
    45%,
    55% {
      transform: translateX(calc(-1 * var(--marquee-end, 0px)));
    }
    88%,
    100% {
      transform: translateX(0);
    }
  }
}

body.sc-theme.sc-classic .sc-track-title-line:hover {
  text-decoration: underline;
}

body.sc-theme.sc-classic .sc-track-age {
  flex-shrink: 0;
  font-size: 11px;
  color: var(--sc-text-muted);
}

body.sc-theme.sc-classic .sc-wave-shell {
  background: var(--sc-wave-bg);
  border: none;
  padding: 4px 0;
  margin-bottom: 12px;
  min-height: 0;
  width: 100%;
  box-sizing: border-box;
  position: relative;
}

body.sc-theme.sc-classic .sc-wave {
  position: relative;
  width: 100%;
  height: 58px;
  cursor: crosshair;
  overflow: hidden;
  user-select: none;
}

body.sc-theme.sc-classic .sc-wave-bars {
  display: flex;
  align-items: stretch;
  justify-content: stretch;
  width: 100%;
  height: 100%;
  gap: 0;
}

body.sc-theme.sc-classic .sc-wave-col {
  flex: 1 1 0;
  min-width: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
}

body.sc-theme.sc-classic .sc-wave-bar {
  display: block;
  width: 100%;
  flex-shrink: 0;
}

body.sc-theme.sc-classic .sc-wave-bar-top {
  background: var(--sc-wave-top);
}

body.sc-theme.sc-classic .sc-wave-bar-bot {
  background: var(--sc-wave-bot);
}

body.sc-theme.sc-classic .sc-wave-played-wrap .sc-wave-bar-top {
  background: var(--sc-wave-played-top);
}

body.sc-theme.sc-classic .sc-wave-played-wrap .sc-wave-bar-bot {
  background: var(--sc-wave-played-bot);
}

body.sc-theme.sc-classic .sc-wave-played-wrap {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0%;
  overflow: hidden;
  pointer-events: none;
  transition: width 0.1s linear;
}

body.sc-theme.sc-classic .sc-wave.is-dragging .sc-wave-played-wrap {
  transition: none;
}

body.sc-theme.sc-classic .sc-wave-played-wrap > .sc-wave-bars {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  max-width: none;
}

body.sc-theme.sc-classic .sc-track-footer {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 4px;
  padding-top: 2px;
}

body.sc-theme.sc-classic .sc-track-play {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  border: none;
  border-radius: 50%;
  background: var(--sc-orange);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

body.sc-theme.sc-classic .sc-track-play img,
body.sc-theme.sc-classic .sc-page-play img {
  width: 10px;
  height: 10px;
  margin-left: 1px;
  display: block;
}

body.sc-theme.sc-classic .sc-page-play img {
  width: 12px;
  height: 12px;
  margin-left: 2px;
}

body.sc-theme.sc-classic .sc-track-social {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}

body.sc-theme.sc-classic .sc-social-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 24px;
  padding: 0 8px;
  border: 1px solid #bbb;
  border-radius: 2px;
  background: linear-gradient(to bottom, #fefefe 0%, #e6e6e6 100%);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8) inset, 0 1px 1px rgba(0, 0, 0, 0.08);
  color: #555;
  font-size: 11px;
  cursor: pointer;
  font-family: inherit;
}

body.sc-theme.sc-classic .sc-social-btn:hover {
  background: linear-gradient(to bottom, #fff 0%, #eee 100%);
}

body.sc-theme.sc-classic .sc-social-btn.is-liked {
  color: var(--sc-orange);
  border-color: #e88;
}

body.sc-theme.sc-classic .sc-track-stats {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  color: var(--sc-text-muted);
}

body.sc-theme.sc-classic .sc-stat-item {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

body.sc-theme.sc-classic .sc-social-btn img {
  width: 14px;
  height: 14px;
  opacity: 0.75;
}

body.sc-theme.sc-classic .sc-social-like.is-liked {
  color: var(--sc-orange);
  border-color: #ffb899;
  background: linear-gradient(to bottom, #fff5ef, #ffe8dc);
}

body.sc-theme.sc-classic .sc-track-stats {
  margin-left: auto;
  display: flex;
  gap: 10px;
  font-size: 11px;
  color: var(--sc-text-muted);
}

body.sc-theme.sc-classic .sc-track-stats span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

body.sc-theme.sc-classic .sc-stat-plays img,
body.sc-theme.sc-classic .sc-stat-comments img {
  width: 12px;
  height: 12px;
  opacity: 0.65;
}

body.sc-theme.sc-classic .track-group {
  border: none;
  background: transparent;
  margin: 0;
  padding: 0;
  min-height: 0;
  max-height: none;
  overflow: visible;
}

body.sc-theme.sc-classic .track-rows {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Right sidebar */
body.sc-theme.sc-classic .sc-classic-right {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

body.sc-theme.sc-classic .sc-classic-widget {
  background: var(--sc-card);
  border: 1px solid var(--sc-border);
  padding: 12px;
  text-align: center;
}

body.sc-theme.sc-classic .sc-likes-panel .sc-likes-head-title {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--sc-text);
  text-transform: none;
  letter-spacing: 0;
}

body.sc-theme.sc-classic .sc-likes-head-icon {
  flex-shrink: 0;
  display: block;
}

body.sc-theme.sc-classic .sc-likes-panel .sc-likes-head {
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid #f0f0f0;
}

body.sc-theme.sc-classic .sc-aside-section {
  background: var(--sc-card);
  border: 1px solid var(--sc-border);
  padding: 12px;
}

body.sc-theme.sc-classic .sc-aside-section-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

body.sc-theme.sc-classic .sc-aside-section-title {
  font-size: 11px;
  font-weight: 700;
  color: var(--sc-text-muted);
  text-transform: uppercase;
}

body.sc-theme.sc-classic .sc-aside-link {
  border: none;
  background: none;
  color: var(--sc-link);
  font: inherit;
  font-size: 11px;
  cursor: default;
}

body.sc-theme.sc-classic .sc-recent-covers {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
}

body.sc-theme.sc-classic .sc-recent-cover {
  display: block;
  aspect-ratio: 1;
  overflow: hidden;
  background: #eee;
  border: none;
  padding: 0;
  cursor: pointer;
}

body.sc-theme.sc-classic .sc-recent-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

body.sc-theme.sc-classic .sc-likes-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

body.sc-theme.sc-classic .sc-like-link {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
  text-align: left;
  font: inherit;
}

body.sc-theme.sc-classic .sc-like-link img,
body.sc-theme.sc-classic .sc-like-art-fallback {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  object-fit: cover;
  background: #eee;
}

body.sc-theme.sc-classic .sc-like-art-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
}

body.sc-theme.sc-classic .sc-like-art-fallback .sc-note-fallback {
  width: 16px;
  height: 16px;
  opacity: 0.55;
}

body.sc-theme.sc-classic .sc-like-meta {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

body.sc-theme.sc-classic .sc-like-user {
  font-size: 10px;
  color: var(--sc-text-muted);
}

body.sc-theme.sc-classic .sc-like-title {
  font-size: 11px;
  color: var(--sc-link);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

body.sc-theme.sc-classic .sc-like-empty {
  font-size: 11px;
  color: var(--sc-text-muted);
}

body.sc-theme.sc-classic .sc-aside .sidebar-nav-sticky {
  display: none;
}

body.sc-theme.sc-classic .sc-aside .library-tools-wrap.sc-filters,
body.sc-theme.sc-classic .sc-aside #era-nav,
body.sc-theme.sc-classic .sc-aside #era-sidebar-label,
body.sc-theme.sc-classic .sc-aside #sidebar-era-divider {
  display: none !important;
}

/* Left sidebar filters — visible, 2012 light styling */
body.sc-theme.sc-classic .sc-classic-left .sc-left-filters {
  display: block;
  margin: 0;
  border: none;
  border-top: 1px solid var(--sc-border);
  border-radius: 0;
  background: transparent;
}

body.sc-theme.sc-classic .sc-classic-left .sc-left-era-divider,
body.sc-theme.sc-classic .sc-classic-left .sc-left-era-label,
body.sc-theme.sc-classic .sc-left-era-nav {
  min-width: 0;
  max-width: 100%;
  padding-left: 14px;
  padding-right: 14px;
}

body.sc-theme.sc-classic .sc-left-era-divider {
  margin: 0 14px;
  border-top: 1px solid var(--sc-border);
}

body.sc-theme.sc-classic .sc-left-era-label {
  padding-top: 4px;
  margin: 0 0 6px;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #666;
}

body.sc-theme.sc-classic .sc-left-filters .library-select {
  max-width: 100%;
}

body.sc-theme.sc-classic .sc-classic-left .sc-left-filters .library-tools-summary {
  padding: 10px 14px;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  color: #666;
  cursor: pointer;
  list-style: none;
}

body.sc-theme.sc-classic .sc-classic-left .sc-left-filters .library-tools {
  padding: 0 14px 14px;
  gap: 8px;
  background: transparent !important;
}

body.sc-theme.sc-classic .sc-classic-left .sc-left-filters .library-tools-label {
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 0.06em;
  color: #999;
  text-transform: uppercase;
}

body.sc-theme.sc-classic .sc-classic-left .sc-left-filters .library-search,
body.sc-theme.sc-classic .sc-classic-left .sc-left-filters .library-select {
  width: 100%;
  font-family: var(--sans) !important;
  font-size: 11px !important;
  color: #333 !important;
  background: #fff !important;
  border: 1px solid #ccc !important;
  border-radius: 2px;
  padding: 5px 7px;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.06);
}

body.sc-theme.sc-classic .sc-classic-left .sc-left-filters .library-filter-check {
  font-family: var(--sans);
  font-size: 11px;
  color: #333;
}

body.sc-theme.sc-classic .sc-classic-left .sc-left-filters .library-quick-jumps {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  position: relative;
  z-index: 3;
  margin-top: 2px;
}

body.sc-theme.sc-classic .sc-classic-left .sc-left-filters .sort-toggle-btn,
body.sc-theme.sc-classic .sc-classic-left .sc-left-filters .quick-jump {
  font-family: var(--sans) !important;
  font-size: 10px !important;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #333 !important;
  border: 1px solid #ccc !important;
  background: linear-gradient(to bottom, #fafafa, #e8e8e8) !important;
  padding: 6px 8px;
  min-height: 28px;
  border-radius: 2px;
  cursor: pointer;
  position: relative;
  z-index: 3;
  pointer-events: auto;
  touch-action: manipulation;
}

body.sc-theme.sc-classic .sc-classic-left .sc-left-filters .sort-toggle-btn.active,
body.sc-theme.sc-classic .sc-classic-left .sc-left-filters .quick-jump.active {
  background: #ddd !important;
  color: #111 !important;
  font-weight: 700;
  border-color: var(--sc-orange) !important;
  box-shadow: inset 0 0 0 1px var(--sc-orange);
}

body.sc-theme.sc-classic .sc-classic-left .sc-left-filters .sort-toggle-btn:hover,
body.sc-theme.sc-classic .sc-classic-left .sc-left-filters .quick-jump:hover {
  background: linear-gradient(to bottom, #fff, #eee) !important;
  color: #111 !important;
}

body.sc-theme.sc-classic .library-tools-wrap.sc-filters {
  border: 1px solid var(--sc-border);
  background: #fff;
  margin-bottom: 10px;
}

body.sc-theme.sc-classic .library-tools-wrap.sc-filters .library-tools-summary {
  padding: 8px 10px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  color: #666;
  cursor: pointer;
}

body.sc-theme.sc-classic .library-tools-wrap .library-tools {
  padding: 0 10px 10px;
}

body.sc-theme.sc-classic .library-tools-label {
  font-size: 10px;
  color: #999;
  text-transform: uppercase;
}

body.sc-theme.sc-classic .library-search,
body.sc-theme.sc-classic .library-select {
  width: 100%;
  font-size: 11px;
  border: 1px solid #ccc;
  padding: 4px 6px;
  border-radius: 2px;
}

body.sc-theme.sc-classic .sort-toggle-btn,
body.sc-theme.sc-classic .quick-jump {
  font-size: 10px;
  border: 1px solid #ccc;
  background: linear-gradient(to bottom, #fafafa, #e8e8e8);
  padding: 3px 8px;
  border-radius: 2px;
  cursor: pointer;
}

body.sc-theme.sc-classic .sort-toggle-btn.active {
  background: #ddd;
  font-weight: 700;
}

body.sc-theme.sc-classic .era-nav .era-tab {
  display: block;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  text-align: left;
  border: none;
  background: none;
  padding: 7px 0;
  font-family: var(--sans);
  font-size: 11px;
  color: #005580;
  cursor: pointer;
  white-space: normal;
  overflow: hidden;
  border-radius: 0;
  transition: color 0.12s ease;
}

body.sc-theme.sc-classic .era-nav .era-tab:hover {
  color: #003344;
}

body.sc-theme.sc-classic .era-nav .era-tab-label {
  display: block;
  font-weight: 700;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #005580;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.sc-theme.sc-classic .era-nav .era-tab-when {
  display: block;
  font-size: 10px;
  line-height: 1.35;
  color: #888;
  font-weight: 400;
  word-break: break-word;
  overflow-wrap: anywhere;
  margin-top: 2px;
}

body.sc-theme.sc-classic .era-nav .era-tab.active {
  color: var(--sc-orange);
}

body.sc-theme.sc-classic .era-nav .era-tab.active .era-tab-label {
  color: var(--sc-orange);
}

body.sc-theme.sc-classic .era-nav .era-tab.active .era-tab-when {
  color: #999;
}

body.sc-theme.sc-classic .sidebar-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  color: #999;
  margin: 8px 0 4px;
}

body.sc-theme.sc-classic:not(.library-view) .sc-classic-left,
body.sc-theme.sc-classic:not(.library-view) .sc-classic-right {
  display: none;
}

body.sc-theme.sc-classic:not(.library-view) .sc-classic-layout {
  grid-template-columns: 1fr;
}

/* Playbar — thin 2012-style status bar */
body.sc-theme.sc-classic .sc-playbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 500;
  height: var(--sc-playbar-h);
  background: #333;
  color: #ccc;
  box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.2);
}

body.sc-theme.sc-classic .sc-playbar-top {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 3px;
  background: #444;
}

body.sc-theme.sc-classic .sc-playbar-top .sc-playbar-seek-fill {
  height: 100%;
  width: 0%;
  background: var(--sc-orange);
  pointer-events: none;
}

body.sc-theme.sc-classic .sc-playbar-top .sc-playbar-seek {
  position: absolute;
  inset: -4px 0;
  width: 100%;
  height: auto;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

body.sc-theme.sc-classic .sc-playbar-inner {
  display: flex;
  align-items: center;
  height: 100%;
  padding: 0 16px;
  gap: 10px;
  font-size: 12px;
  box-sizing: border-box;
}

body.sc-theme.sc-classic .sc-playbar-transport {
  display: flex;
  align-items: center;
  gap: 3px;
  flex-shrink: 0;
}

body.sc-theme.sc-classic .sc-playbar-transport .sc-playbar-ctrl {
  width: 26px;
  height: 26px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  border: 1px solid #555;
  border-radius: 2px;
  background: linear-gradient(to bottom, #444, #333);
  color: #ddd;
}

body.sc-theme.sc-classic .sc-playbar-transport .sc-playbar-ctrl img,
body.sc-theme.sc-classic .sc-playbar-vol-btn img,
body.sc-theme.sc-classic .sc-playbar-ctrl.sc-pb-queue img {
  display: block;
  width: 14px;
  height: 14px;
  opacity: 1;
}

body.sc-theme.sc-classic .sc-playbar-transport .sc-playbar-ctrl.is-on img {
  opacity: 1;
  filter: brightness(0) saturate(100%) invert(48%) sepia(79%) saturate(2476%) hue-rotate(1deg) brightness(103%) contrast(105%);
}

body.sc-theme.sc-classic .sc-playbar-transport .sc-pb-play {
  width: 32px;
  height: 32px;
  color: #fff;
  background: linear-gradient(to bottom, #f60, #e44);
  border-color: #c44;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

body.sc-theme.sc-classic .sc-playbar-transport .sc-pb-play img {
  width: 12px;
  height: 12px;
  filter: brightness(0) invert(1);
}

body.sc-theme.sc-classic .sc-playbar-transport .sc-playbar-ctrl.is-on {
  border-color: var(--sc-orange);
  box-shadow: inset 0 0 0 1px rgba(255, 85, 0, 0.35);
}

body.sc-theme.sc-classic .sc-playbar-vol input[type="range"] {
  width: 64px;
  height: 4px;
  margin: 0;
  padding: 0;
  align-self: center;
  accent-color: var(--sc-orange);
  vertical-align: middle;
}

body.sc-theme.sc-classic .sc-queue-panel {
  position: absolute;
  right: 8px;
  bottom: calc(var(--sc-playbar-h) + 2px);
  width: 280px;
  max-height: 260px;
  overflow: auto;
  background: #fff;
  border: 1px solid #ccc;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  padding: 8px;
  z-index: 510;
}

body.sc-theme.sc-classic .sc-queue-label {
  margin: 0 0 6px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  color: #999;
}

body.sc-theme.sc-classic .sc-queue-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

body.sc-theme.sc-classic .sc-queue-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  text-align: left;
  border: none;
  background: none;
  padding: 5px 4px;
  font-size: 11px;
  color: #333;
  cursor: pointer;
  border-radius: 2px;
}

body.sc-theme.sc-classic .sc-queue-item:hover {
  background: #f5f5f5;
}

body.sc-theme.sc-classic .sc-queue-art {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  background: #eee;
  border: 1px solid #ddd;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

body.sc-theme.sc-classic .sc-queue-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

body.sc-theme.sc-classic .sc-queue-meta {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #005580;
}

body.sc-theme.sc-classic .sc-queue-empty {
  font-size: 11px;
  color: #999;
}

body.sc-theme.sc-classic .sc-playbar-spacer {
  flex: 0 0 0;
  width: 0;
  min-width: 0;
  overflow: hidden;
}

body.sc-theme.sc-classic .sc-playbar-inner > .sc-playbar-vol {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
}

body.sc-theme.sc-classic #sc-pb-dur {
  margin-left: auto;
}

body.sc-theme.sc-classic .sc-playbar-time {
  font-size: 11px;
  color: #aaa;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
  min-width: 2.5em;
}

body.sc-theme.sc-classic .sc-playbar-now {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 0;
  min-width: 0;
}

body.sc-theme.sc-classic .sc-playbar-art {
  width: 32px;
  height: 32px;
  background: #555;
  overflow: hidden;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

body.sc-theme.sc-classic .sc-playbar-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

body.sc-theme.sc-classic .sc-playbar-art .sc-pb-art-fallback {
  width: 14px;
  height: 14px;
  opacity: 0.75;
  filter: brightness(0) invert(1);
}

body.sc-theme.sc-classic .sc-playbar-title {
  border: none;
  background: none;
  padding: 0;
  font-size: 11px;
  color: #ddd;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
  max-width: 100%;
}

body.sc-theme.sc-classic .sc-playbar-title-inner {
  display: inline-block;
  white-space: nowrap;
  max-width: none;
  text-overflow: ellipsis;
  overflow: hidden;
}

body.sc-theme.sc-classic .sc-playbar-title:not(:has(.sc-playbar-title-inner.sc-playbar-title--marquee)) {
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.sc-theme.sc-classic .sc-playbar-title:hover {
  color: #fff;
  text-decoration: underline;
}

body.sc-theme.sc-classic .sc-playbar-vol-btn {
  border: none;
  background: none;
  cursor: pointer;
  padding: 0 2px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
}

body.sc-theme.sc-classic .sc-playbar-vol-btn img {
  width: 14px;
  height: 14px;
  opacity: 0.85;
  filter: brightness(0) invert(0.75);
}

body.sc-theme.sc-classic .sc-playbar-ctrl.sc-pb-queue {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  margin-left: 4px;
  flex-shrink: 0;
  border: 1px solid #555;
  border-radius: 2px;
  background: linear-gradient(to bottom, #444, #333);
}

body.sc-theme.sc-classic .sc-playbar-ctrl.sc-pb-queue img {
  width: 14px;
  height: 14px;
  opacity: 0.85;
  filter: brightness(0) invert(0.75);
}

body.sc-theme.sc-classic .sc-playbar-vol-btn {
  border: none;
  background: transparent;
  color: #ccc;
  cursor: pointer;
  font-size: 14px;
}

body.sc-theme.sc-classic .player-dock {
  display: none !important;
}

/* Mobile bottom nav — hidden on desktop, shown in mobile breakpoint below */
body.sc-theme.sc-classic .mobile-nav.sc-mobile-nav {
  display: none !important;
}

body.sc-theme.sc-classic .sc-footer {
  max-width: 1240px;
  margin: 0 auto;
  padding: 20px 16px 60px;
  font-size: 11px;
  color: #999;
  text-align: center;
}

body.sc-theme.sc-classic .sc-footer-memory {
  margin: 0 0 6px;
  font-size: 11px;
  color: #777;
  letter-spacing: 0.02em;
}

body.sc-theme.sc-classic .sc-footer-main {
  margin: 0;
  font-size: 10px;
  color: #aaa;
}

body.sc-theme.sc-classic .sc-footer-main a {
  color: #005580;
  text-decoration: none;
}

body.sc-theme.sc-classic .sc-footer-main a:hover {
  text-decoration: underline;
}

body.sc-theme.sc-classic .sc-page-credits {
  margin-top: 14px;
}

body.sc-theme.sc-classic .sc-page-credits-list {
  margin: 0 0 16px;
  padding-left: 18px;
  font-size: 12px;
  line-height: 1.5;
  color: #333;
}

body.sc-theme.sc-classic .sc-page-credits-list li + li {
  margin-top: 4px;
}

/* Track page (2012 single-track view) */
@supports (view-transition-name: none) {
  @media (prefers-reduced-motion: no-preference) {
    ::view-transition-group(*) {
      animation-duration: 0.4s;
      animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
    }

    ::view-transition-old(root),
    ::view-transition-new(root) {
      animation-duration: 0.32s;
    }

    ::view-transition-old(sc-track-main),
    ::view-transition-new(sc-track-main) {
      animation: sc-main-fade 0.32s ease both;
    }
  }
}

@keyframes sc-main-fade {
  from {
    opacity: 0.92;
  }
  to {
    opacity: 1;
  }
}

body.sc-theme.sc-classic .sc-track-page-view {
  background: var(--sc-card);
  border: 1px solid var(--sc-border);
  padding: 16px;
}

body.sc-theme.sc-classic .sc-page-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 12px;
}

body.sc-theme.sc-classic .sc-page-play {
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  border: none;
  border-radius: 50%;
  background: var(--sc-orange);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

body.sc-theme.sc-classic .sc-page-titles {
  flex: 1;
  min-width: 0;
}

body.sc-theme.sc-classic .sc-page-user {
  display: block;
  color: var(--sc-text-muted);
  font-size: 12px;
  margin-bottom: 4px;
}

body.sc-theme.sc-classic .sc-page-title {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  color: var(--sc-link);
  line-height: 1.2;
}

body.sc-theme.sc-classic .sc-page-age {
  flex-shrink: 0;
  font-size: 11px;
  color: var(--sc-text-muted);
}

body.sc-theme.sc-classic .sc-page-wave-shell {
  position: relative;
  min-height: 120px;
}

body.sc-theme.sc-classic .sc-page-wave {
  height: 80px;
}

body.sc-theme.sc-classic .sc-page-time {
  position: absolute;
  bottom: 6px;
  font-size: 10px;
  color: #333;
  background: rgba(255, 255, 255, 0.85);
  padding: 1px 4px;
  border-radius: 2px;
  pointer-events: none;
}

body.sc-theme.sc-classic .sc-page-time-cur {
  left: 8px;
}

body.sc-theme.sc-classic .sc-page-time-dur {
  right: 8px;
}

body.sc-theme.sc-classic .sc-page-comment-bar {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 8px 0;
  border-top: 1px solid var(--sc-border);
  border-bottom: 1px solid var(--sc-border);
  margin-bottom: 0;
}

body.sc-theme.sc-classic .sc-page-comment-main {
  flex: 1;
  min-width: 0;
}

body.sc-theme.sc-classic .sc-page-comment-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

body.sc-theme.sc-classic .sc-page-comment-field {
  flex: 1;
  min-width: 120px;
  height: 26px;
  padding: 0 8px;
  border: 1px solid #ccc;
  border-radius: 3px;
  font-size: 11px;
  background: #fff;
}

body.sc-theme.sc-classic .sc-page-comment-submit {
  height: 26px;
  padding: 0 10px;
  border: 1px solid #c44;
  border-radius: 3px;
  background: linear-gradient(to bottom, #f60, #e44);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
}

body.sc-theme.sc-classic .sc-page-comment-submit:disabled {
  opacity: 0.6;
  cursor: default;
}

body.sc-theme.sc-classic .sc-page-comment-status {
  flex: 1 1 100%;
  margin: 0;
  font-size: 10px;
  color: #666;
}

body.sc-theme.sc-classic .sc-page-comment-status.is-error {
  color: #c33;
}

body.sc-theme.sc-classic .sc-page-comment-status.is-ok {
  color: #393;
}

body.sc-theme.sc-classic .sc-page-comment-gate {
  margin: 0;
  font-size: 11px;
  color: var(--sc-text-muted);
  line-height: 26px;
}

body.sc-theme.sc-classic .sc-page-comment-gate a {
  color: #f50;
  text-decoration: none;
  font-weight: 600;
}

body.sc-theme.sc-classic .sc-page-comment-gate a:hover {
  text-decoration: underline;
}

body.sc-theme.sc-classic .sc-page-comment-avatar {
  width: 24px;
  height: 24px;
  object-fit: cover;
  border-radius: 2px;
  flex-shrink: 0;
}

body.sc-theme.sc-classic .sc-page-comments-list {
  padding: 0 0 12px;
  border-bottom: 1px solid var(--sc-border);
  margin-bottom: 10px;
}

body.sc-theme.sc-classic .sc-comments-head {
  padding: 10px 0 6px;
  border-bottom: 1px solid var(--sc-border);
  margin-bottom: 4px;
}

body.sc-theme.sc-classic .sc-comments-title {
  margin: 0;
  font-size: 11px;
  font-weight: 700;
  color: #666;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

body.sc-theme.sc-classic .sc-comment-item {
  display: flex;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid #f0f0f0;
}

body.sc-theme.sc-classic .sc-comment-item:last-child {
  border-bottom: none;
}

body.sc-theme.sc-classic .sc-comment-avatar {
  width: 30px;
  height: 30px;
  border-radius: 2px;
  object-fit: cover;
  flex-shrink: 0;
}

body.sc-theme.sc-classic .sc-comment-avatar-fallback {
  width: 30px;
  height: 30px;
  border-radius: 2px;
  background: #ddd;
  flex-shrink: 0;
}

body.sc-theme.sc-classic .sc-comment-body-wrap {
  min-width: 0;
  flex: 1;
}

body.sc-theme.sc-classic .sc-comment-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px;
  margin-bottom: 3px;
}

body.sc-theme.sc-classic .sc-comment-author {
  font-size: 11px;
  font-weight: 700;
  color: var(--sc-orange);
}

body.sc-theme.sc-classic .sc-comment-time {
  font-size: 10px;
  color: #999;
}

body.sc-theme.sc-classic .sc-comment-time::before {
  content: "·";
  margin-right: 4px;
  color: #ccc;
}

body.sc-theme.sc-classic .sc-comment-text {
  margin: 0;
  font-size: 12px;
  line-height: 1.45;
  color: #333;
  word-break: break-word;
}

body.sc-theme.sc-classic .sc-comments-empty,
body.sc-theme.sc-classic .sc-comments-loading {
  margin: 0;
  font-size: 11px;
  color: var(--sc-text-muted);
}

body.sc-theme.sc-classic .sc-page-plays {
  font-size: 11px;
  color: var(--sc-text-muted);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

body.sc-theme.sc-classic .sc-page-actions {
  margin-bottom: 16px;
}

body.sc-theme.sc-classic .sc-page-body {
  display: grid;
  grid-template-columns: 140px minmax(0, 1fr);
  gap: 16px;
}

body.sc-theme.sc-classic .sc-page-art {
  background: #eee;
  overflow: hidden;
}

body.sc-theme.sc-classic .sc-page-art > img:not(.sc-note-fallback) {
  width: 100%;
  display: block;
  aspect-ratio: 1;
  object-fit: cover;
}

body.sc-theme.sc-classic .sc-page-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 12px;
}

body.sc-theme.sc-classic .sc-page-tag {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 2px;
  border: 1px solid #ccc;
  background: linear-gradient(to bottom, #fafafa 0%, #ececec 100%);
  color: #555;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: lowercase;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

body.sc-theme.sc-classic .sc-page-desc h2,
body.sc-theme.sc-classic .sc-page-credits h2,
body.sc-theme.sc-classic .sc-page-lyrics h2,
body.sc-theme.sc-classic .sc-page-downloads h2,
body.sc-theme.sc-classic .sc-page-versions h2 {
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 700;
  color: #666;
  text-transform: uppercase;
}

body.sc-theme.sc-classic .sc-page-versions {
  margin-bottom: 16px;
}

body.sc-theme.sc-classic .sc-page-versions-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid var(--sc-border);
  border-radius: 2px;
  overflow: hidden;
}

body.sc-theme.sc-classic .sc-page-version-item + .sc-page-version-item {
  border-top: 1px solid var(--sc-border);
}

body.sc-theme.sc-classic .sc-page-version-btn {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  gap: 2px 12px;
  align-items: center;
  padding: 10px 12px;
  border: none;
  background: #fff;
  color: var(--sc-text);
  text-align: left;
  cursor: pointer;
  font: inherit;
}

body.sc-theme.sc-classic .sc-page-version-item.is-active .sc-page-version-btn {
  background: #fff8f3;
}

body.sc-theme.sc-classic .sc-page-version-btn:hover:not(:disabled) {
  background: #fff3eb;
}

body.sc-theme.sc-classic .sc-page-version-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

body.sc-theme.sc-classic .sc-page-version-label {
  grid-column: 1;
  grid-row: 1;
  font-size: 13px;
  font-weight: 600;
  color: var(--sc-link);
}

body.sc-theme.sc-classic .sc-page-version-item.is-active .sc-page-version-label {
  color: var(--sc-orange);
}

body.sc-theme.sc-classic .sc-page-version-meta {
  grid-column: 2;
  grid-row: 1;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #999;
  text-transform: uppercase;
}

body.sc-theme.sc-classic .sc-page-version-note {
  grid-column: 1 / -1;
  grid-row: 2;
  font-size: 11px;
  color: var(--sc-text-muted);
}

body.sc-theme.sc-classic .sc-page-desc p,
body.sc-theme.sc-classic .sc-page-lyrics pre {
  margin: 0 0 16px;
  font-size: 12px;
  line-height: 1.5;
  color: #333;
  white-space: pre-wrap;
}

body.sc-theme.sc-classic .sc-page-lyrics pre {
  font-family: inherit;
}

body.sc-theme.sc-classic .sc-page-dl-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

body.sc-theme.sc-classic .sc-page-dl-list a {
  color: var(--sc-link);
  font-size: 12px;
}

body.sc-theme.sc-classic .sc-page-dl-item {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--sc-border);
}

body.sc-theme.sc-classic .sc-page-dl-meta {
  min-width: 0;
  flex: 1;
}

body.sc-theme.sc-classic .sc-page-dl-name {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: #333;
}

body.sc-theme.sc-classic .sc-page-dl-file {
  display: block;
  font-size: 10px;
  color: #888;
  word-break: break-all;
}

body.sc-theme.sc-classic .sc-page-dl-quality {
  display: block;
  font-size: 11px;
  color: #666;
  margin-top: 2px;
}

body.sc-theme.sc-classic .sc-page-dl-btn {
  flex-shrink: 0;
  font-size: 11px;
  padding: 4px 8px;
  border: 1px solid #bbb;
  border-radius: 2px;
  background: linear-gradient(to bottom, #fefefe, #e6e6e6);
  color: #555;
  text-decoration: none;
}

body.sc-theme.sc-classic .sc-you-view,
body.sc-theme.sc-classic .sc-explore-view {
  background: #fff;
  border: 1px solid var(--sc-border);
  padding: 16px;
}

body.sc-theme.sc-classic .sc-you-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin: 16px 0;
  padding: 12px 0;
  border-top: 1px solid var(--sc-border);
  border-bottom: 1px solid var(--sc-border);
}

body.sc-theme.sc-classic .sc-you-stat {
  min-width: 80px;
}

body.sc-theme.sc-classic .sc-you-stat strong {
  display: block;
  font-size: 18px;
  color: var(--sc-text);
}

body.sc-theme.sc-classic .sc-you-stat span {
  font-size: 10px;
  color: var(--sc-text-muted);
  text-transform: uppercase;
}

body.sc-theme.sc-classic .sc-you-section h2,
body.sc-theme.sc-classic .sc-explore-block h1,
body.sc-theme.sc-classic .sc-explore-block h2 {
  font-size: 12px;
  text-transform: uppercase;
  color: #666;
  margin: 0 0 8px;
}

body.sc-theme.sc-classic .sc-you-likes {
  list-style: none;
  margin: 0;
  padding: 0;
}

body.sc-theme.sc-classic .sc-you-like-row {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  border: none;
  background: none;
  padding: 6px 0;
  cursor: pointer;
  text-align: left;
  font: inherit;
}

body.sc-theme.sc-classic .sc-you-like-art {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  background: #eee;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

body.sc-theme.sc-classic .sc-you-like-art > img:not(.sc-note-fallback) {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

body.sc-theme.sc-classic .sc-you-like-art .sc-note-fallback {
  width: 16px;
  height: 16px;
  opacity: 0.55;
}

body.sc-theme.sc-classic .sc-you-like-title {
  display: block;
  font-size: 12px;
  color: #005580;
}

body.sc-theme.sc-classic .sc-explore-links ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

body.sc-theme.sc-classic .sc-explore-link {
  border: none;
  background: none;
  color: #005580;
  font: inherit;
  font-size: 12px;
  cursor: pointer;
  padding: 4px 0;
}

/* Explore / About — full page in 2012 card style */
body.sc-theme.sc-classic .sc-explore-about.about-view {
  background: var(--sc-card);
  border: 1px solid var(--sc-border);
  padding: 0;
}

body.sc-theme.sc-classic .sc-explore-about .about-header,
body.sc-theme.sc-classic .sc-explore-about .about-section,
body.sc-theme.sc-classic .sc-explore-about .about-photos {
  border: none;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
  padding: 16px;
  margin: 0;
  border-bottom: 1px solid var(--sc-border);
}

body.sc-theme.sc-classic .sc-explore-about .about-header h1 {
  font-family: var(--sans);
  font-size: 20px;
  font-weight: 700;
  color: var(--sc-text);
  margin: 0 0 6px;
}

body.sc-theme.sc-classic .sc-explore-about .about-dates,
body.sc-theme.sc-classic .sc-explore-about .about-tagline {
  font-family: var(--sans);
  font-size: 12px;
  color: #666;
  margin: 0 0 4px;
}

body.sc-theme.sc-classic .sc-explore-about .about-section h2 {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #999;
  margin: 0 0 8px;
}

body.sc-theme.sc-classic .sc-explore-about .about-section p {
  font-family: var(--sans);
  font-size: 12px;
  line-height: 1.55;
  color: var(--sc-text);
  margin: 0 0 8px;
}

body.sc-theme.sc-classic .sc-explore-about .about-photos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 12px;
}

body.sc-theme.sc-classic .sc-explore-about .about-photo img {
  width: 100%;
  height: auto;
  display: block;
  border: 1px solid var(--sc-border);
}

body.sc-theme.sc-classic .sc-explore-about .about-external a {
  color: var(--sc-link);
}

/* Albums & EPs */
body.sc-theme.sc-classic .sc-albums-view,
body.sc-theme.sc-classic .sc-media-view {
  padding: 0;
}

body.sc-theme.sc-classic .sc-albums-head,
body.sc-theme.sc-classic .sc-media-head {
  margin-bottom: 14px;
}

body.sc-theme.sc-classic .sc-albums-head h1,
body.sc-theme.sc-classic .sc-media-head h1 {
  font-size: 14px;
  font-weight: 700;
  color: #333;
  margin: 0 0 4px;
}

body.sc-theme.sc-classic .sc-albums-head p,
body.sc-theme.sc-classic .sc-media-head p {
  font-size: 12px;
  color: var(--sc-text-muted);
  margin: 0;
}

body.sc-theme.sc-classic .sc-albums-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

body.sc-theme.sc-classic .sc-release-card {
  background: var(--sc-card);
  border: 1px solid var(--sc-border);
  padding: 12px;
}

body.sc-theme.sc-classic .sc-release-head {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--sc-border);
}

body.sc-theme.sc-classic .sc-release-art {
  width: 80px;
  height: 80px;
  flex-shrink: 0;
  background: #eee;
  overflow: hidden;
}

body.sc-theme.sc-classic .sc-release-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

body.sc-theme.sc-classic .sc-release-meta {
  flex: 1;
  min-width: 0;
}

body.sc-theme.sc-classic .sc-release-type {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--sc-text-muted);
  margin-bottom: 2px;
}

body.sc-theme.sc-classic .sc-release-title {
  font-size: 15px;
  font-weight: 700;
  color: #333;
  margin: 0 0 4px;
}

body.sc-theme.sc-classic .sc-release-era,
body.sc-theme.sc-classic .sc-release-date {
  display: block;
  font-size: 11px;
  color: var(--sc-text-muted);
}

body.sc-theme.sc-classic .sc-release-tracks {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

body.sc-theme.sc-classic .sc-release-tracks .sc-track-item {
  border: none;
  border-top: 1px solid var(--sc-border);
  margin: 0;
  padding: 16px 0 6px;
  background: transparent;
}

body.sc-theme.sc-classic .sc-release-tracks .sc-track-item:first-child {
  border-top: none;
  padding-top: 4px;
}

body.sc-theme.sc-classic .sc-era-release {
  margin-bottom: 16px;
}

body.sc-theme.sc-classic .sc-albums-empty,
body.sc-theme.sc-classic .sc-media-msg {
  font-size: 13px;
  color: var(--sc-text-muted);
  padding: 16px;
  background: var(--sc-card);
  border: 1px solid var(--sc-border);
}

body.sc-theme.sc-classic .sc-media-wip {
  text-align: center;
  padding: 40px 20px;
  background: var(--sc-card);
  border: 1px solid var(--sc-border);
}

body.sc-theme.sc-classic .sc-media-wip-face {
  font-size: 28px;
  margin: 0 0 8px;
  color: #999;
}

body.sc-theme.sc-classic .sc-media-wip p {
  font-size: 13px;
  color: var(--sc-text-muted);
  margin: 0;
  max-width: 360px;
  margin-inline: auto;
  line-height: 1.5;
}

@media (max-width: 960px) {
  body.sc-theme.sc-classic {
    --sc-mobile-nav-h: 50px;
    --sc-bottom-stack: var(--sc-mobile-nav-h);
  }

  body.sc-theme.sc-classic:has(.sc-playbar:not([hidden])) {
    --sc-bottom-stack: calc(var(--sc-playbar-h) + var(--sc-mobile-nav-h));
  }

  body.sc-theme.sc-classic .app.sc-app {
    padding-bottom: var(--sc-bottom-stack);
  }

  body.sc-theme.sc-classic .mobile-nav.sc-mobile-nav {
    display: flex !important;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 490;
    height: var(--sc-mobile-nav-h);
    margin: 0;
    padding: 0 4px;
    gap: 0;
    align-items: stretch;
    justify-content: flex-start;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    background: linear-gradient(to bottom, #3a3a3a 0%, #2b2b2b 100%);
    border-top: 1px solid #1a1a1a;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.2);
  }

  body.sc-theme.sc-classic .mobile-nav.sc-mobile-nav::-webkit-scrollbar {
    display: none;
  }

  body.sc-theme.sc-classic:has(.sc-playbar:not([hidden])) .mobile-nav.sc-mobile-nav {
    bottom: var(--sc-playbar-h);
  }

  body.sc-theme.sc-classic .sc-mobile-nav-btn {
    flex: 1 0 auto;
    min-width: 4.5rem;
    max-width: 6.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 8px;
    border: none;
    border-radius: 0;
    background: transparent;
    color: #aaa;
    font: inherit;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    cursor: pointer;
    white-space: nowrap;
  }

  body.sc-theme.sc-classic .sc-mobile-nav-btn.active {
    color: #fff;
    box-shadow: inset 0 -2px 0 var(--sc-orange);
  }

  body.sc-theme.sc-classic .sc-classic-layout {
    grid-template-columns: 1fr;
    padding: 10px;
    gap: 0;
  }

  body.sc-theme.sc-classic .sc-classic-left {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    bottom: var(--sc-bottom-stack, 0);
    width: min(300px, 90vw);
    max-width: none;
    height: auto;
    min-height: 100%;
    max-height: none;
    align-self: auto;
    z-index: 460;
    transform: translateX(-105%);
    transition: transform 0.22s ease;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.18);
    padding-bottom: 12px;
  }

  body.sc-theme.sc-classic.sidebar-open .sc-classic-left {
    transform: translateX(0);
    z-index: 520;
  }

  body.sc-theme.sc-classic .sc-left-sticky {
    position: static;
    max-height: none;
    overflow: visible;
    padding-bottom: calc(var(--sc-playbar-h, 48px) + 16px);
  }

  body.sc-theme.sc-classic.library-view .sc-classic-right {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    margin-top: 12px;
  }

  body.sc-theme.sc-classic.library-view .sc-recent-covers {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 2px;
  }

  body.sc-theme.sc-classic.library-view .sc-recent-cover {
    flex: 0 0 56px;
    width: 56px;
    height: 56px;
  }

  body.sc-theme.sc-classic .sc-classic-nav {
    display: none;
  }

  body.sc-theme.sc-classic .sc-header-more {
    display: none;
  }

  body.sc-theme.sc-classic .sc-site-wordmark {
    display: none;
  }

  body.sc-theme.sc-classic .sc-classic-search {
    max-width: none;
    flex: 1;
    min-width: 0;
    padding: 0 8px;
  }

  body.sc-theme.sc-classic .sc-classic-header-actions {
    gap: 4px;
    padding-left: 4px;
  }

  body.sc-theme.sc-classic .auth-bar .auth-offline {
    display: none;
  }

  body.sc-theme.sc-classic .mobile-menu-btn {
    display: inline-flex !important;
  }

  body.sc-theme.sc-classic.sidebar-open .sidebar-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    min-height: 100%;
    z-index: 515;
    background: rgba(0, 0, 0, 0.45);
    bottom: var(--sc-bottom-stack, 0);
  }

  body.sc-theme.sc-classic .sc-track-item {
    margin-bottom: 10px;
  }

  body.sc-theme.sc-classic .sc-track-body {
    gap: 8px;
  }

  body.sc-theme.sc-classic .sc-track-art {
    width: 72px;
    height: 72px;
  }

  body.sc-theme.sc-classic .sc-track-head {
    flex-wrap: wrap;
    gap: 4px;
  }

  body.sc-theme.sc-classic .sc-track-age {
    margin-left: auto;
  }

  body.sc-theme.sc-classic .sc-track-footer {
    gap: 4px;
  }

  body.sc-theme.sc-classic .sc-social-btn {
    font-size: 10px;
    padding: 4px 6px;
  }

  body.sc-theme.sc-classic .sc-track-stats {
    width: 100%;
    justify-content: flex-end;
    padding-top: 4px;
  }

  body.sc-theme.sc-classic .sc-page-body {
    grid-template-columns: 1fr;
  }

  body.sc-theme.sc-classic .sc-page-head {
    flex-wrap: wrap;
  }

  body.sc-theme.sc-classic .sc-page-age {
    width: 100%;
  }

  body.sc-theme.sc-classic .sc-playbar-inner {
    padding: 0 12px;
    gap: 6px;
  }

  body.sc-theme.sc-classic .sc-playbar-now {
    min-width: 0;
  }

  body.sc-theme.sc-classic .sc-playbar-title {
    max-width: none;
  }

  body.sc-theme.sc-classic .sc-track-art {
    width: 48px;
    height: 48px;
  }

  body.sc-theme.sc-classic .sc-wave {
    height: 48px;
  }
}

@media (max-width: 520px) {
  body.sc-theme.sc-classic .sc-classic-search {
    display: none;
  }

  body.sc-theme.sc-classic .auth-bar .auth-session-compact .auth-name,
  body.sc-theme.sc-classic .auth-bar .auth-session-compact .auth-role {
    display: none;
  }

  body.sc-theme.sc-classic .sc-playbar-time {
    display: none;
  }

  body.sc-theme.sc-classic .sc-playbar-spacer {
    display: none;
  }

  body.sc-theme.sc-classic .sc-playbar-inner > .sc-playbar-vol {
    margin-left: auto;
  }

  body.sc-theme.sc-classic .sc-playbar-vol input[type="range"] {
    width: 48px;
  }

  body.sc-theme.sc-classic .sc-playbar-now {
    min-width: 0;
    overflow: hidden;
  }

  body.sc-theme.sc-classic .sc-playbar-title {
    max-width: 100%;
  }

  body.sc-theme.sc-classic .sc-playbar-title-inner.sc-playbar-title--marquee {
    text-overflow: clip;
    overflow: visible;
    animation: sc-pb-marquee 10s linear infinite;
  }

  @keyframes sc-pb-marquee {
    0%,
    12% {
      transform: translateX(0);
    }
    45%,
    55% {
      transform: translateX(calc(-1 * var(--marquee-end, 0px)));
    }
    88%,
    100% {
      transform: translateX(0);
    }
  }

  body.sc-theme.sc-classic .sc-playbar-ctrl.sc-pb-queue {
    margin-right: 0;
  }

  body.sc-theme.sc-classic .sc-track-social {
    flex-wrap: wrap;
  }

  body.sc-theme.sc-classic .sc-page-comment-form {
    flex-direction: column;
    align-items: stretch;
  }

  body.sc-theme.sc-classic .sc-page-comment-field {
    width: 100%;
  }
}

/* Staff tools + admin pages in SC theme */
body.sc-theme.sc-classic .sc-nav-admin {
  color: #ff5500;
  font-weight: 700;
}

body.sc-theme.sc-classic .sc-nav-admin[hidden] {
  display: none !important;
}

body.sc-theme.sc-classic .library-add-btn {
  margin-left: 8px;
  min-width: 28px;
  height: 28px;
  padding: 0 8px;
  border: 1px solid #ccc;
  border-radius: 2px;
  background: linear-gradient(to bottom, #fafafa, #e8e8e8);
  color: #333;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}

body.sc-theme.sc-classic .timeline-intro-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

body.sc-theme.sc-classic .sc-track-edit,
body.sc-theme.sc-classic .track-edit-btn {
  flex-shrink: 0;
  align-self: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 1px solid #ccc;
  border-radius: 2px;
  background: #fff;
  color: #666;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.12s ease;
}

body.sc-theme.sc-classic .sc-track-item:hover .sc-track-edit,
body.sc-theme.sc-classic .sc-track-item.is-playing .sc-track-edit,
body.sc-theme.sc-classic .sc-track-page-view:hover .sc-track-edit {
  opacity: 1;
}

body.sc-theme.sc-classic .sc-track-edit:hover,
body.sc-theme.sc-classic .track-edit-btn:hover {
  color: #ff5500;
  border-color: #ff5500;
}

body.sc-theme.sc-classic .admin-view,
body.sc-theme.sc-classic .settings-view,
body.sc-theme.sc-classic .hall-view,
body.sc-theme.sc-classic .about-view {
  background: var(--sc-card);
  border: 1px solid var(--sc-border);
  padding: 16px;
}

body.sc-theme.sc-classic .admin-view .btn,
body.sc-theme.sc-classic .settings-view .btn,
body.sc-theme.sc-classic .hall-view .btn {
  font-family: var(--sans);
  font-size: 11px;
}

body.sc-theme.sc-classic .auth-bar .btn,
body.sc-theme.sc-classic .auth-bar .auth-login-btn {
  font-family: var(--sans);
  font-size: 11px;
}

body.sc-theme.sc-classic .auth-bar .btn:not(.auth-login-btn) {
  color: #ddd;
  border: 1px solid #555;
  background: #444;
  padding: 4px 8px;
  border-radius: 2px;
  text-decoration: none;
}

body.sc-theme.sc-classic .auth-bar .auth-session {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

body.sc-theme.sc-classic .auth-bar .auth-name {
  color: #ddd;
  font-size: 11px;
}

body.sc-theme.sc-classic .auth-bar .auth-plays {
  color: #999;
  font-size: 10px;
}

body.sc-theme.sc-classic .skel-modal-panel {
  font-family: var(--sans);
  background: #fff;
  border: 1px solid var(--sc-border);
  border-radius: 0;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.25);
}

body.sc-theme.sc-classic .skel-modal-title {
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 700;
  color: #333;
  letter-spacing: normal;
  text-transform: none;
}

body.sc-theme.sc-classic .skel-bulk-modal {
  width: min(480px, 100%);
  font-family: var(--sans);
  font-size: 12px;
  line-height: 1.4;
  color: var(--sc-text);
}

body.sc-theme.sc-classic .skel-bulk-modal .skel-modal-title {
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: normal;
  text-transform: none;
  color: #333;
}

body.sc-theme.sc-classic .skel-bulk-modal .sc-settings-hint {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: normal;
  text-transform: none;
}

body.sc-theme.sc-classic .skel-bulk-modal .skel-bulk-legend {
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #666;
}

body.sc-theme.sc-classic .skel-bulk-modal .skel-bulk-check,
body.sc-theme.sc-classic .skel-bulk-modal .skel-bulk-radio,
body.sc-theme.sc-classic .skel-bulk-modal .library-filter-check {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
}

body.sc-theme.sc-classic .skel-bulk-modal .skel-bulk-sub {
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 400;
}

body.sc-theme.sc-classic .skel-bulk-modal .skel-bulk-estimate {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: normal;
  text-transform: none;
  margin: 12px 0;
  padding: 8px 10px;
  background: #f5f5f5;
  border: 1px solid #ddd;
  color: #333;
}

body.sc-theme.sc-classic .skel-bulk-modal .skel-bulk-warn {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
}

body.sc-theme.sc-classic .skel-bulk-modal .skel-bulk-btn {
  font-family: var(--sans);
}

body.sc-theme.sc-classic .skel-bulk-fieldset {
  border: 0;
  margin: 0 0 12px;
  padding: 0;
}

body.sc-theme.sc-classic .skel-bulk-legend {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #666;
  margin-bottom: 6px;
}

body.sc-theme.sc-classic .skel-bulk-checks {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 160px;
  overflow-y: auto;
}

body.sc-theme.sc-classic .skel-bulk-check,
body.sc-theme.sc-classic .skel-bulk-radio {
  display: block;
  font-size: 12px;
  margin: 4px 0;
}

body.sc-theme.sc-classic .skel-bulk-sub {
  color: #999;
  font-size: 10px;
}

body.sc-theme.sc-classic .skel-bulk-estimate {
  margin: 12px 0;
  padding: 8px 10px;
  background: #f5f5f5;
  border: 1px solid #ddd;
  font-size: 12px;
  font-weight: 600;
  color: #333;
}

body.sc-theme.sc-classic .skel-bulk-warn {
  margin: 0 0 10px;
  font-size: 11px;
  color: #c44;
}

body.sc-theme.sc-classic .skel-bulk-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

body.sc-theme.sc-classic .skel-bulk-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 14px;
  border: 1px solid #ccc;
  border-radius: 2px;
  background: linear-gradient(to bottom, #fff 0%, #f0f0f0 100%);
  color: #333;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  cursor: pointer;
  box-shadow: inset 0 1px 0 #fff;
}

body.sc-theme.sc-classic .skel-bulk-btn-sm {
  padding: 4px 8px;
  min-width: 28px;
  min-height: 28px;
}

body.sc-theme.sc-classic .skel-bulk-btn-primary {
  border-color: #cc4400;
  background: linear-gradient(to bottom, #ff7722 0%, #ff5500 100%);
  color: #fff;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

body.sc-theme.sc-classic .skel-bulk-btn-primary:hover {
  filter: brightness(1.06);
}

body.sc-theme.sc-classic .skel-bulk-btn-cancel {
  background: linear-gradient(to bottom, #fafafa 0%, #e8e8e8 100%);
}

body.sc-theme.sc-classic .skel-bulk-btn-cancel:hover {
  border-color: #f50;
  color: #f50;
}

body.sc-theme.sc-classic .skel-modal-close.skel-bulk-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  margin: 0;
}

body.sc-theme.sc-classic .library-download-box {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid #e5e5e5;
}

body.sc-theme.sc-classic .sc-bulk-dl-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #ccc;
  background: linear-gradient(to bottom, #fff 0%, #f0f0f0 100%);
  font-size: 11px;
  font-weight: 700;
  color: #333;
  cursor: pointer;
}

body.sc-theme.sc-classic .sc-bulk-dl-btn:hover {
  border-color: #f50;
  color: #f50;
}

body.sc-theme.sc-classic .drive-bulk-archive-list {
  margin: 8px 0 12px;
  padding-left: 18px;
  font-size: 11px;
  color: #555;
  max-height: 140px;
  overflow-y: auto;
}

body.sc-theme.sc-classic .admin-form label,
body.sc-theme.sc-classic .admin-form input,
body.sc-theme.sc-classic .admin-form textarea,
body.sc-theme.sc-classic .admin-form select {
  font-family: var(--sans);
  font-size: 12px;
}

/* ——— Dark mode (2012 SC skin, not flat modern) ——— */
body.sc-theme.sc-classic.dark-mode {
  --sc-bg: #161616;
  --sc-card: #242424;
  --sc-border: #3a3a3a;
  --sc-border-dark: #4a4a4a;
  --sc-text: #e6e6e6;
  --sc-text-muted: #9a9a9a;
  --sc-link: #6eb6ff;
  --sc-wave-top: #d8d8d8;
  --sc-wave-bot: #555555;
  --sc-wave-played-bot: rgba(255, 85, 0, 0.48);
}

body.sc-theme.sc-classic.dark-mode .sc-classic-left,
body.sc-theme.sc-classic.dark-mode .timeline-intro,
body.sc-theme.sc-classic.dark-mode .era-header,
body.sc-theme.sc-classic.dark-mode .library-tools,
body.sc-theme.sc-classic.dark-mode .sc-playbar {
  background: var(--sc-card);
  border-color: var(--sc-border);
}

body.sc-theme.sc-classic.dark-mode .sc-track-title-line,
body.sc-theme.sc-classic.dark-mode .sc-page-title,
body.sc-theme.sc-classic.dark-mode .sc-release-title,
body.sc-theme.sc-classic.dark-mode .era-header h1,
body.sc-theme.sc-classic.dark-mode .timeline-intro h1,
body.sc-theme.sc-classic.dark-mode .sc-you-title,
body.sc-theme.sc-classic.dark-mode .sc-explore-title {
  color: var(--sc-text);
}

body.sc-theme.sc-classic.dark-mode .sc-track-art-fallback,
body.sc-theme.sc-classic.dark-mode .sc-page-art-fallback,
body.sc-theme.sc-classic.dark-mode .sc-you-like-art,
body.sc-theme.sc-classic.dark-mode .sc-like-art-fallback {
  background: #1a1a1a;
}

body.sc-theme.sc-classic.dark-mode .sc-track-art-fallback .sc-note-fallback,
body.sc-theme.sc-classic.dark-mode .sc-page-art-fallback .sc-note-fallback {
  filter: brightness(1.35);
  opacity: 0.5;
}

body.sc-theme.sc-classic.dark-mode .sc-track-art,
body.sc-theme.sc-classic.dark-mode .sc-release-art,
body.sc-theme.sc-classic.dark-mode .sc-page-art {
  background: #1a1a1a;
}

body.sc-theme.sc-classic.dark-mode .sc-social-btn {
  border: 1px solid #555;
  background: linear-gradient(to bottom, #3a3a3a 0%, #2a2a2a 100%);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.07) inset,
    0 1px 2px rgba(0, 0, 0, 0.35);
  color: #ccc;
}

body.sc-theme.sc-classic.dark-mode .sc-social-btn:hover {
  background: linear-gradient(to bottom, #444 0%, #333 100%);
  color: #eee;
}

body.sc-theme.sc-classic.dark-mode .sc-social-btn img,
body.sc-theme.sc-classic.red-mode .sc-social-btn img {
  filter: brightness(0) invert(1);
  opacity: 0.9;
}

body.sc-theme.sc-classic.dark-mode .sc-stat-plays img,
body.sc-theme.sc-classic.dark-mode .sc-stat-likes img,
body.sc-theme.sc-classic.dark-mode .sc-stat-comments img,
body.sc-theme.sc-classic.dark-mode .sc-page-plays img,
body.sc-theme.sc-classic.dark-mode .sc-likes-head-icon,
body.sc-theme.sc-classic.red-mode .sc-stat-plays img,
body.sc-theme.sc-classic.red-mode .sc-stat-likes img,
body.sc-theme.sc-classic.red-mode .sc-stat-comments img,
body.sc-theme.sc-classic.red-mode .sc-page-plays img,
body.sc-theme.sc-classic.red-mode .sc-likes-head-icon {
  filter: brightness(0) invert(1);
  opacity: 0.75;
}

body.sc-theme.sc-classic.dark-mode .library-search,
body.sc-theme.sc-classic.dark-mode .library-select,
body.sc-theme.sc-classic.dark-mode .sc-comment-input,
body.sc-theme.sc-classic.dark-mode .admin-form input,
body.sc-theme.sc-classic.dark-mode .admin-form textarea,
body.sc-theme.sc-classic.dark-mode .admin-form select {
  background: #1a1a1a;
  border-color: #444;
  color: #ddd;
}

body.sc-theme.sc-classic.dark-mode .sort-toggle-btn {
  background: linear-gradient(to bottom, #333 0%, #252525 100%);
  border-color: #555;
  color: #bbb;
}

body.sc-theme.sc-classic.dark-mode .sort-toggle-btn.active {
  background: linear-gradient(to bottom, #1f1f1f 0%, #121212 100%);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.55);
  color: #fff;
  border-color: #444;
}

body.sc-theme.sc-classic.dark-mode .quick-jump {
  background: linear-gradient(to bottom, #333 0%, #252525 100%);
  border-color: #555;
  color: #bbb;
}

body.sc-theme.sc-classic.dark-mode .quick-jump:hover,
body.sc-theme.sc-classic.dark-mode .quick-jump.active {
  background: linear-gradient(to bottom, #444 0%, #333 100%);
  color: #fff;
}

/* Left sidebar filters — dark / ruby (override light !important rules) */
body.sc-theme.sc-classic.dark-mode .sc-classic-left .library-tools-wrap.sc-filters,
body.sc-theme.sc-classic.dark-mode .sc-classic-left .sc-left-filters.library-tools-wrap,
body.sc-theme.sc-classic.red-mode .sc-classic-left .library-tools-wrap.sc-filters,
body.sc-theme.sc-classic.red-mode .sc-classic-left .sc-left-filters.library-tools-wrap {
  background: transparent !important;
  border: none !important;
  border-top: 1px solid var(--sc-border) !important;
  margin-bottom: 0 !important;
}

body.sc-theme.sc-classic.dark-mode .sc-classic-left .sc-left-filters .library-tools-summary,
body.sc-theme.sc-classic.red-mode .sc-classic-left .sc-left-filters .library-tools-summary {
  background: transparent !important;
  color: var(--sc-text-muted);
}

body.sc-theme.sc-classic.dark-mode .sc-classic-left .sc-left-filters .library-tools-label {
  color: var(--sc-text-muted);
}

body.sc-theme.sc-classic.dark-mode .sc-classic-left .sc-left-filters .library-search,
body.sc-theme.sc-classic.dark-mode .sc-classic-left .sc-left-filters .library-select {
  color: var(--sc-text) !important;
  background: #1a1a1a !important;
  border: 1px solid var(--sc-border-dark) !important;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.35);
}

body.sc-theme.sc-classic.dark-mode .sc-classic-left .sc-left-filters .library-search::placeholder {
  color: var(--sc-text-muted);
}

body.sc-theme.sc-classic.dark-mode .sc-classic-left .sc-left-filters .library-filter-check {
  color: var(--sc-text);
}

body.sc-theme.sc-classic.dark-mode .sc-classic-left .sc-left-filters .sort-toggle-btn,
body.sc-theme.sc-classic.dark-mode .sc-classic-left .sc-left-filters .quick-jump {
  color: #bbb !important;
  border: 1px solid #555 !important;
  background: linear-gradient(to bottom, #333 0%, #252525 100%) !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.07) inset,
    0 1px 2px rgba(0, 0, 0, 0.35);
}

body.sc-theme.sc-classic.dark-mode .sc-classic-left .sc-left-filters .sort-toggle-btn.active,
body.sc-theme.sc-classic.dark-mode .sc-classic-left .sc-left-filters .quick-jump.active {
  background: linear-gradient(to bottom, #1f1f1f 0%, #121212 100%) !important;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.55);
  color: #fff !important;
  font-weight: 700;
  border-color: var(--sc-orange) !important;
}

body.sc-theme.sc-classic.dark-mode .sc-classic-left .sc-left-filters .sort-toggle-btn:hover,
body.sc-theme.sc-classic.dark-mode .sc-classic-left .sc-left-filters .quick-jump:hover {
  background: linear-gradient(to bottom, #444 0%, #333 100%) !important;
  color: #eee !important;
}

body.sc-theme.sc-classic.dark-mode .library-tools-label {
  color: var(--sc-text-muted);
}

body.sc-theme.sc-classic.dark-mode .submit-textarea {
  background: #1a1a1a;
  border-color: #444;
  color: #ddd;
}

body.sc-theme.sc-classic.dark-mode .era-tab {
  color: var(--sc-link);
}

body.sc-theme.sc-classic.dark-mode .era-tab.active {
  color: var(--sc-orange);
}

body.sc-theme.sc-classic.dark-mode .sc-playbar {
  background: linear-gradient(to bottom, #2a2a2a 0%, #1e1e1e 100%);
  border-top-color: #111;
  box-shadow: 0 -1px 0 rgba(255, 255, 255, 0.04) inset;
}

body.sc-theme.sc-classic.dark-mode .sc-playbar-title,
body.sc-theme.sc-classic.dark-mode .sc-playbar-user {
  color: #ddd;
}

body.sc-theme.sc-classic.dark-mode .sc-playbar-seek {
  background: #444;
}

body.sc-theme.sc-classic.dark-mode .sc-more-menu {
  background: #2a2a2a;
  border-color: var(--sc-border);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
}

body.sc-theme.sc-classic.dark-mode .sc-more-menu-item {
  color: var(--sc-text);
}

body.sc-theme.sc-classic.dark-mode .sc-more-menu-item:hover {
  background: #333;
  color: var(--sc-orange);
}

body.sc-theme.sc-classic.dark-mode .sc-admin-view {
  background: var(--sc-card);
  border-color: var(--sc-border);
}

body.sc-theme.sc-classic.dark-mode .sc-admin-view .submission-review-card {
  background: #1e1e1e;
  border-color: var(--sc-border);
}

body.sc-theme.sc-classic.dark-mode .sc-admin-primary-btn {
  background: linear-gradient(to bottom, #3a3a3a, #2a2a2a);
  border-color: var(--sc-border);
  color: var(--sc-text);
}
body.sc-theme.sc-classic.dark-mode .sc-page-desc p,
body.sc-theme.sc-classic.dark-mode .sc-page-credits-list,
body.sc-theme.sc-classic.dark-mode .sc-page-lyrics pre,
body.sc-theme.sc-classic.dark-mode .sc-comment-body,
body.sc-theme.sc-classic.dark-mode .settings-view,
body.sc-theme.sc-classic.dark-mode .hall-view,
body.sc-theme.sc-classic.dark-mode .about-view,
body.sc-theme.sc-classic.dark-mode .admin-view {
  color: var(--sc-text);
}

body.sc-theme.sc-classic.dark-mode .sc-page-desc h2,
body.sc-theme.sc-classic.dark-mode .sc-page-credits h2,
body.sc-theme.sc-classic.dark-mode .sc-page-lyrics h2,
body.sc-theme.sc-classic.dark-mode .sc-page-downloads h2,
body.sc-theme.sc-classic.dark-mode .sc-page-versions h2 {
  color: var(--sc-text-muted);
}

body.sc-theme.sc-classic.dark-mode .sc-page-version-btn {
  background: var(--sc-card);
  color: var(--sc-text);
}

body.sc-theme.sc-classic.dark-mode .sc-page-version-item.is-active .sc-page-version-btn,
body.sc-theme.sc-classic.dark-mode .sc-page-version-btn:hover:not(:disabled) {
  background: #2a221c;
}

body.sc-theme.sc-classic.dark-mode .skel-modal-panel {
  background: #2a2a2a;
  border-color: var(--sc-border);
  color: var(--sc-text);
}

body.sc-theme.sc-classic.dark-mode .skel-modal-title {
  font-family: var(--sans);
  color: var(--sc-text);
  letter-spacing: normal;
  text-transform: none;
}

body.sc-theme.sc-classic.dark-mode .skel-bulk-modal,
body.sc-theme.sc-classic.dark-mode .skel-bulk-modal .skel-modal-title,
body.sc-theme.sc-classic.dark-mode .skel-bulk-modal .sc-settings-hint,
body.sc-theme.sc-classic.dark-mode .skel-bulk-modal .skel-bulk-legend,
body.sc-theme.sc-classic.dark-mode .skel-bulk-modal .skel-bulk-check,
body.sc-theme.sc-classic.dark-mode .skel-bulk-modal .skel-bulk-radio,
body.sc-theme.sc-classic.dark-mode .skel-bulk-modal .library-filter-check,
body.sc-theme.sc-classic.dark-mode .skel-bulk-modal .skel-bulk-estimate,
body.sc-theme.sc-classic.dark-mode .skel-bulk-modal .skel-bulk-warn,
body.sc-theme.sc-classic.dark-mode .skel-bulk-modal .skel-bulk-btn {
  font-family: var(--sans);
  letter-spacing: normal;
}

body.sc-theme.sc-classic.dark-mode .skel-bulk-modal .skel-modal-title {
  color: var(--sc-text);
  text-transform: none;
}

body.sc-theme.sc-classic.dark-mode .skel-bulk-modal .skel-bulk-estimate {
  background: linear-gradient(to bottom, #333 0%, #2a2a2a 100%);
  border-color: var(--sc-border-dark);
  color: var(--sc-text);
  font-weight: 600;
  text-transform: none;
}

body.sc-theme.sc-classic.dark-mode .skel-bulk-legend {
  color: var(--sc-text-muted);
}

body.sc-theme.sc-classic.dark-mode .skel-bulk-check,
body.sc-theme.sc-classic.dark-mode .skel-bulk-radio {
  color: var(--sc-text);
}

body.sc-theme.sc-classic.dark-mode .skel-bulk-sub {
  color: var(--sc-text-muted);
}

body.sc-theme.sc-classic.dark-mode .skel-bulk-estimate {
  background: linear-gradient(to bottom, #333 0%, #2a2a2a 100%);
  border-color: var(--sc-border-dark);
  color: var(--sc-text);
}

body.sc-theme.sc-classic.dark-mode .skel-bulk-warn {
  color: #e88;
}

body.sc-theme.sc-classic.dark-mode .skel-bulk-btn {
  background: linear-gradient(to bottom, #444 0%, #333 100%);
  border-color: var(--sc-border-dark);
  color: var(--sc-text);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

body.sc-theme.sc-classic.dark-mode .skel-bulk-btn-cancel:hover {
  border-color: #f50;
  color: #f50;
  background: linear-gradient(to bottom, #4a4a4a 0%, #383838 100%);
}

body.sc-theme.sc-classic.dark-mode .skel-bulk-btn-primary {
  border-color: #cc4400;
  background: linear-gradient(to bottom, #ff7722 0%, #ff5500 100%);
  color: #fff;
}

body.sc-theme.sc-classic.dark-mode .theme-card {
  background: var(--sc-card);
  border-color: var(--sc-border);
  color: var(--sc-text);
}

body.sc-theme.sc-classic.dark-mode .sc-classic-tabs .sc-tab {
  color: #999;
  border-color: #444;
}

body.sc-theme.sc-classic.dark-mode .sc-classic-tabs .sc-tab.active {
  color: #fff;
  border-color: #555;
  background: linear-gradient(to bottom, #333 0%, #252525 100%);
}

body.sc-theme.sc-classic.dark-mode .section-label {
  color: var(--sc-text-muted);
}

/* Loading status (2012-style) */
body.sc-theme.sc-classic .sc-loading-tag {
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  text-align: center;
  color: var(--sc-text-muted);
  padding: 48px 16px;
  animation: sc-loading-pulse 1.6s ease-in-out infinite;
}

@keyframes sc-loading-pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.55;
  }
}

body.sc-theme.sc-classic .sc-settings-view,
body.sc-theme.sc-classic .sc-fans-view,
body.sc-theme.sc-classic .sc-about-page,
body.sc-theme.sc-classic .sc-hall-page,
body.sc-theme.sc-classic .sc-submit-page,
body.sc-theme.sc-classic .sc-tribute-page {
  background: var(--sc-card);
  border: 1px solid var(--sc-border);
  padding: 16px;
}

/* Page headers — You, Fans, Settings, Submit, Tributes, Admin */
body.sc-theme.sc-classic .sc-you-head {
  margin: 0 0 16px;
  padding: 0 0 12px;
  border-bottom: 1px solid var(--sc-border);
}

body.sc-theme.sc-classic .sc-you-title {
  font-family: var(--sans);
  font-size: 20px;
  font-weight: 700;
  color: var(--sc-text);
  margin: 0 0 4px;
  letter-spacing: 0;
  text-transform: none;
}

body.sc-theme.sc-classic .sc-you-sub {
  font-size: 12px;
  color: var(--sc-text-muted);
  margin: 0;
  line-height: 1.45;
}

/* Inset section panels (2012 card-within-card) */
body.sc-theme.sc-classic .sc-you-section {
  margin-top: 14px;
  padding: 12px;
  border: 1px solid var(--sc-border);
  background: linear-gradient(to bottom, #fefefe 0%, #f6f6f6 100%);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.85) inset;
}

body.sc-theme.sc-classic .sc-fans-view > .sc-you-section:first-of-type,
body.sc-theme.sc-classic .sc-settings-view > .sc-you-section:first-of-type,
body.sc-theme.sc-classic .sc-submit-page > .sc-you-section:first-of-type,
body.sc-theme.sc-classic .sc-tribute-page > .sc-you-section:first-of-type {
  margin-top: 0;
}

body.sc-theme.sc-classic .sc-settings-hint {
  font-size: 11px;
  color: var(--sc-text-muted);
  margin: 0 0 10px;
  line-height: 1.45;
}

body.sc-theme.sc-classic .sc-settings-check {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 12px;
  color: var(--sc-text);
  cursor: pointer;
}

body.sc-theme.sc-classic .sc-theme-picker {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

body.sc-theme.sc-classic .sc-theme-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 10px;
  border: 1px solid var(--sc-border);
  background: linear-gradient(to bottom, #fefefe 0%, #ececec 100%);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.85) inset;
  cursor: pointer;
  text-align: left;
  font: inherit;
}

body.sc-theme.sc-classic .sc-theme-card.is-active {
  border-color: var(--sc-orange);
  box-shadow:
    inset 0 2px 4px rgba(0, 0, 0, 0.12),
    0 0 0 1px var(--sc-orange);
}

body.sc-theme.sc-classic .sc-theme-swatch {
  width: 100%;
  height: 28px;
  border: 1px solid var(--sc-border);
  background: #f2f2f2;
}

body.sc-theme.sc-classic .sc-theme-card-dark .sc-theme-swatch {
  background: linear-gradient(to bottom, #333, #111);
}

body.sc-theme.sc-classic .sc-theme-card-ruby .sc-theme-swatch {
  background: linear-gradient(135deg, #111 40%, #c41e3a 100%);
}

body.sc-theme.sc-classic .sc-theme-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--sc-text);
}

body.sc-theme.sc-classic .sc-theme-note {
  font-size: 10px;
  color: var(--sc-text-muted);
  line-height: 1.3;
}

body.sc-theme.sc-classic .sc-lb-block h2,
body.sc-theme.sc-classic .sc-lb-heading,
body.sc-theme.sc-classic .sc-privacy-section h2 {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--sc-text-muted);
  margin: 0 0 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--sc-border);
}

body.sc-theme.sc-classic .sc-lb-block .leaderboard-list,
body.sc-theme.sc-classic .sc-lb-block .leaderboard-track-stats,
body.sc-theme.sc-classic .sc-lb-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid var(--sc-border-dark);
  background: #fff;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.06);
}

body.sc-theme.sc-classic .sc-lb-block .leaderboard-row,
body.sc-theme.sc-classic .sc-lb-block .leaderboard-track-stat-row,
body.sc-theme.sc-classic .sc-lb-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-top: 1px solid var(--sc-border);
  border-bottom: none;
  font-size: 12px;
  color: var(--sc-text);
  background: linear-gradient(to bottom, #fff 0%, #f9f9f9 100%);
}

body.sc-theme.sc-classic .sc-lb-block .leaderboard-row:nth-child(even),
body.sc-theme.sc-classic .sc-lb-block .leaderboard-track-stat-row:nth-child(even) {
  background: linear-gradient(to bottom, #fafafa 0%, #f2f2f2 100%);
}

body.sc-theme.sc-classic .sc-lb-block .leaderboard-row:first-child,
body.sc-theme.sc-classic .sc-lb-block .leaderboard-track-stat-row:first-child {
  border-top: none;
}

body.sc-theme.sc-classic .sc-lb-block .leaderboard-row:hover,
body.sc-theme.sc-classic .sc-lb-block .leaderboard-track-stat-row:hover {
  background: linear-gradient(to bottom, #fff8f3 0%, #fff0e6 100%);
}

body.sc-theme.sc-classic .sc-lb-block .lb-rank,
body.sc-theme.sc-classic .sc-lb-rank {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  color: var(--sc-orange);
  min-width: 28px;
  flex-shrink: 0;
  text-align: center;
}

body.sc-theme.sc-classic .sc-lb-avatar-wrap {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--sc-border-dark);
  background: #eee;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

body.sc-theme.sc-classic .sc-lb-avatar,
body.sc-theme.sc-classic .sc-lb-block .lb-avatar {
  width: 36px;
  height: 36px;
  border-radius: 0;
  border: none;
  flex-shrink: 0;
  object-fit: cover;
  display: block;
}

body.sc-theme.sc-classic .sc-lb-avatar-fallback {
  background: linear-gradient(135deg, #e8e8e8 0%, #d0d0d0 100%);
}

body.sc-theme.sc-classic .sc-lb-block .lb-name,
body.sc-theme.sc-classic .sc-lb-name {
  font-weight: 700;
  font-size: 12px;
  color: var(--sc-text);
}

body.sc-theme.sc-classic .sc-lb-block .lb-handle,
body.sc-theme.sc-classic .sc-lb-handle {
  font-size: 10px;
  color: var(--sc-text-muted);
  opacity: 1;
}

body.sc-theme.sc-classic .sc-lb-block .lb-identity,
body.sc-theme.sc-classic .sc-lb-identity {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

body.sc-theme.sc-classic .sc-lb-block .lb-track-name,
body.sc-theme.sc-classic .sc-lb-track-name {
  flex: 1;
  min-width: 0;
  font-size: 12px;
  color: var(--sc-link);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.sc-theme.sc-classic .sc-lb-block .lb-count,
body.sc-theme.sc-classic .sc-lb-count {
  flex-shrink: 0;
  font-size: 11px;
  color: var(--sc-text-muted);
  white-space: nowrap;
}

body.sc-theme.sc-classic .sc-lb-count-num {
  font-weight: 700;
  color: var(--sc-text);
}

body.sc-theme.sc-classic .sc-fans-view .leaderboard-error {
  margin-bottom: 10px;
}

body.sc-theme.sc-classic .sc-privacy-section .sc-settings-check {
  margin-top: 4px;
}

body.sc-theme.sc-classic.red-mode {
  --sc-bg: #161616;
  --sc-card: #242424;
  --sc-border: #3a3a3a;
  --sc-border-dark: #4a4a4a;
  --sc-text: #e6e6e6;
  --sc-text-muted: #9a9a9a;
  --sc-orange: #c41e3a;
  --sc-wave-played-top: #c41e3a;
  --sc-wave-played-bot: rgba(196, 30, 58, 0.48);
  --sc-link: #ff6b8a;
  --sc-wave-top: #d8d8d8;
  --sc-wave-bot: #555555;
}

body.sc-theme.sc-classic.red-mode .sc-classic-nav a.is-active,
body.sc-theme.sc-classic.red-mode .sc-header-more a.is-active {
  background: linear-gradient(to bottom, #2a1018 0%, #140810 100%);
}

body.sc-theme.sc-classic.red-mode .sc-track-head.has-edit .sc-track-edit,
body.sc-theme.sc-classic.red-mode .sc-page-head.has-edit .sc-track-edit {
  flex-shrink: 0;
}

body.sc-theme.sc-classic.red-mode .sc-page-head.has-edit .sc-page-age {
  width: auto;
  margin-left: auto;
}

body.sc-theme.sc-classic.dark-mode .sc-track-edit,
body.sc-theme.sc-classic.dark-mode .track-edit-btn {
  background: #333;
  border-color: #555;
  color: #bbb;
}

body.sc-theme.sc-classic.dark-mode .sc-track-edit:hover,
body.sc-theme.sc-classic.dark-mode .track-edit-btn:hover {
  color: var(--sc-orange);
  border-color: var(--sc-orange);
}

body.sc-theme.sc-classic.dark-mode .sc-track-head.has-edit .sc-track-edit,
body.sc-theme.sc-classic.dark-mode .sc-page-head.has-edit .sc-track-edit {
  flex-shrink: 0;
}

body.sc-theme.sc-classic.dark-mode .sc-page-head.has-edit .sc-page-age {
  width: auto;
  margin-left: auto;
}

body.sc-theme.sc-classic.dark-mode .sc-likes-panel .sc-likes-head-title,
body.sc-theme.sc-classic.dark-mode .sc-aside-section-title {
  color: var(--sc-text);
}

body.sc-theme.sc-classic.dark-mode .sc-you-stat strong,
body.sc-theme.sc-classic.dark-mode .sc-you-stat span,
body.sc-theme.sc-classic.dark-mode .sc-settings-check,
body.sc-theme.sc-classic.dark-mode .sc-theme-label {
  color: var(--sc-text);
}

body.sc-theme.sc-classic.dark-mode .sc-classic-profile-stats,
body.sc-theme.sc-classic.red-mode .sc-classic-profile-stats {
  color: var(--sc-text-muted);
}

body.sc-theme.sc-classic.dark-mode .sc-classic-profile-stats strong,
body.sc-theme.sc-classic.red-mode .sc-classic-profile-stats strong {
  color: var(--sc-text) !important;
}

body.sc-theme.sc-classic.dark-mode .sc-classic-profile-stats .sc-stat-divider,
body.sc-theme.sc-classic.red-mode .sc-classic-profile-stats .sc-stat-divider {
  color: var(--sc-border-dark);
}

body.sc-theme.sc-classic.dark-mode .sc-classic-profile-stats img,
body.sc-theme.sc-classic.red-mode .sc-classic-profile-stats img {
  filter: brightness(0) invert(1);
  opacity: 0.75;
}

body.sc-theme.sc-classic.dark-mode .sc-you-stat span,
body.sc-theme.sc-classic.dark-mode .sc-settings-hint,
body.sc-theme.sc-classic.dark-mode .sc-theme-note {
  color: var(--sc-text-muted);
}

body.sc-theme.sc-classic.dark-mode .sc-likes-panel .sc-likes-head {
  border-bottom-color: var(--sc-border);
}

body.sc-theme.sc-classic.dark-mode .sc-theme-card {
  background: linear-gradient(to bottom, #333 0%, #252525 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

body.sc-theme.sc-classic.dark-mode .sc-theme-card-default .sc-theme-swatch {
  background: linear-gradient(to bottom, #444, #2a2a2a);
}

body.sc-theme.sc-classic.dark-mode .sc-you-view,
body.sc-theme.sc-classic.dark-mode .sc-explore-view {
  background: var(--sc-card);
}

body.sc-theme.sc-classic.dark-mode .sc-you-section,
body.sc-theme.sc-classic.red-mode .sc-you-section {
  background: linear-gradient(to bottom, #2e2e2e 0%, #262626 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  border-color: var(--sc-border);
}

body.sc-theme.sc-classic.dark-mode .sc-lb-block .leaderboard-list,
body.sc-theme.sc-classic.dark-mode .sc-lb-block .leaderboard-track-stats,
body.sc-theme.sc-classic.red-mode .sc-lb-block .leaderboard-list,
body.sc-theme.sc-classic.red-mode .sc-lb-block .leaderboard-track-stats {
  background: #1a1a1a;
  border-color: var(--sc-border);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.25);
}

body.sc-theme.sc-classic.dark-mode .sc-lb-block .leaderboard-row,
body.sc-theme.sc-classic.dark-mode .sc-lb-block .leaderboard-track-stat-row,
body.sc-theme.sc-classic.red-mode .sc-lb-block .leaderboard-row,
body.sc-theme.sc-classic.red-mode .sc-lb-block .leaderboard-track-stat-row {
  background: linear-gradient(to bottom, #2a2a2a 0%, #242424 100%);
  border-top-color: var(--sc-border);
}

body.sc-theme.sc-classic.dark-mode .sc-lb-block .leaderboard-row:nth-child(even),
body.sc-theme.sc-classic.dark-mode .sc-lb-block .leaderboard-track-stat-row:nth-child(even),
body.sc-theme.sc-classic.red-mode .sc-lb-block .leaderboard-row:nth-child(even),
body.sc-theme.sc-classic.red-mode .sc-lb-block .leaderboard-track-stat-row:nth-child(even) {
  background: linear-gradient(to bottom, #262626 0%, #1e1e1e 100%);
}

body.sc-theme.sc-classic.dark-mode .sc-lb-block .leaderboard-row:hover,
body.sc-theme.sc-classic.dark-mode .sc-lb-block .leaderboard-track-stat-row:hover {
  background: linear-gradient(to bottom, #332818 0%, #2a2018 100%);
}

body.sc-theme.sc-classic.red-mode .sc-lb-block .leaderboard-row:hover,
body.sc-theme.sc-classic.red-mode .sc-lb-block .leaderboard-track-stat-row:hover {
  background: linear-gradient(to bottom, #2a1518 0%, #1e1012 100%);
}

body.sc-theme.sc-classic.dark-mode .sc-lb-avatar-wrap,
body.sc-theme.sc-classic.red-mode .sc-lb-avatar-wrap {
  background: #1a1a1a;
  border-color: var(--sc-border);
}

body.sc-theme.sc-classic.dark-mode .sc-lb-avatar-fallback,
body.sc-theme.sc-classic.red-mode .sc-lb-avatar-fallback {
  background: linear-gradient(135deg, #333 0%, #222 100%);
}

body.sc-theme.sc-classic.dark-mode .sc-lb-count-num,
body.sc-theme.sc-classic.red-mode .sc-lb-count-num {
  color: var(--sc-text);
}

@media (max-width: 720px) {
  body.sc-theme.sc-classic .sc-theme-picker {
    grid-template-columns: 1fr;
  }
}

/* SC form styles — submit, tribute, admin */
body.sc-theme.sc-classic .sc-form-label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  color: var(--sc-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: 4px;
}

body.sc-theme.sc-classic .sc-form-input,
body.sc-theme.sc-classic .sc-form-textarea {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--sc-border);
  background: linear-gradient(to bottom, #fefefe 0%, #f4f4f4 100%);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.08);
  padding: 7px 8px;
  font: inherit;
  font-size: 12px;
  color: var(--sc-text);
}

body.sc-theme.sc-classic .sc-form-textarea {
  min-height: 88px;
  resize: vertical;
}

body.sc-theme.sc-classic .sc-form-field {
  margin-bottom: 12px;
}

body.sc-theme.sc-classic .sc-form-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

body.sc-theme.sc-classic .sc-form-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 4px;
}

body.sc-theme.sc-classic .sc-form-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 7px 14px;
  border: 1px solid #c44d00;
  border-radius: 2px;
  background: linear-gradient(to bottom, #ff7a1a 0%, #f50 55%, #e64a00 100%);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.35) inset;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  font-family: inherit;
}

body.sc-theme.sc-classic .sc-form-btn:hover {
  background: linear-gradient(to bottom, #ff8a33 0%, #ff6010 55%, #f05000 100%);
}

body.sc-theme.sc-classic .sc-form-btn-ghost {
  border-color: var(--sc-border);
  background: linear-gradient(to bottom, #fefefe 0%, #ececec 100%);
  color: var(--sc-text);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.85) inset;
}

body.sc-theme.sc-classic .sc-form-btn-sm {
  padding: 5px 10px;
  font-size: 11px;
}

body.sc-theme.sc-classic .sc-form-file-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

body.sc-theme.sc-classic .sc-form-file-name {
  font-size: 11px;
  color: var(--sc-text-muted);
}

body.sc-theme.sc-classic .sc-tribute-toolbar {
  margin-bottom: 12px;
}

body.sc-theme.sc-classic .sc-tribute-card {
  padding: 12px 0;
  border-top: 1px solid var(--sc-border);
}

body.sc-theme.sc-classic .sc-tribute-card:first-child {
  border-top: none;
  padding-top: 0;
}

body.sc-theme.sc-classic .sc-tribute-list-wrap h2,
body.sc-theme.sc-classic .sc-submit-compose h2,
body.sc-theme.sc-classic .sc-tribute-compose h2 {
  font-size: 12px;
  text-transform: uppercase;
  color: var(--sc-text-muted);
  margin: 0 0 8px;
}

/* Waveform comment markers */
body.sc-theme.sc-classic .sc-wave-comment-markers {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 3;
}

body.sc-theme.sc-classic .sc-wave-comment-marker {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 20px;
  height: 20px;
  padding: 0;
  border: 2px solid #fff;
  border-radius: 50%;
  background: var(--sc-orange);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
  cursor: pointer;
  pointer-events: auto;
  overflow: hidden;
  line-height: 0;
}

body.sc-theme.sc-classic .sc-wave-comment-marker img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

body.sc-theme.sc-classic .sc-wave-comment-marker-fallback {
  background: var(--sc-orange);
}

body.sc-theme.sc-classic .sc-wave-comment-marker:hover {
  transform: translate(-50%, -50%) scale(1.12);
  z-index: 4;
}

body.sc-theme.sc-classic .sc-comment-at-time {
  border: none;
  background: none;
  padding: 0;
  font: inherit;
  font-size: 10px;
  font-weight: 700;
  color: var(--sc-orange);
  cursor: pointer;
}

body.sc-theme.sc-classic .sc-comment-at-time:hover {
  text-decoration: underline;
}

body.sc-theme.sc-classic .sc-comment-delete {
  margin-left: auto;
  border: none;
  background: none;
  padding: 0;
  font: inherit;
  font-size: 10px;
  color: #999;
  cursor: pointer;
}

body.sc-theme.sc-classic .sc-comment-delete:hover {
  color: #666;
  text-decoration: underline;
}

body.sc-theme.sc-classic .sc-comment-delete:disabled {
  opacity: 0.45;
  cursor: wait;
  text-decoration: none;
}

body.sc-theme.sc-classic .sc-comment-item.is-highlighted {
  background: rgba(255, 85, 0, 0.08);
  border-radius: 2px;
}

body.sc-theme.sc-classic .sc-comment-item.is-removing,
body.sc-theme.sc-classic .sc-you-comment-row.is-removing {
  opacity: 0;
  max-height: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  border-color: transparent !important;
  pointer-events: none;
  transition:
    opacity 0.25s ease,
    max-height 0.25s ease,
    margin 0.25s ease,
    padding 0.25s ease,
    border-color 0.25s ease;
}

body.sc-theme.sc-classic .sc-you-comments {
  list-style: none;
  margin: 0;
  padding: 0;
}

body.sc-theme.sc-classic .sc-you-comment-row {
  padding: 10px 0;
  border-top: 1px solid var(--sc-border);
}

body.sc-theme.sc-classic .sc-you-comment-row:first-child {
  border-top: none;
}

body.sc-theme.sc-classic .sc-you-comment-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 8px;
}

body.sc-theme.sc-classic .sc-you-comment-head .sc-comment-delete {
  margin-left: auto;
}

body.sc-theme.sc-classic .sc-you-comment-track {
  border: none;
  background: none;
  padding: 0;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  color: var(--sc-orange);
  cursor: pointer;
  text-align: left;
}

body.sc-theme.sc-classic .sc-you-comment-track:hover {
  text-decoration: underline;
}

body.sc-theme.sc-classic .sc-you-comment-at {
  font-size: 10px;
  color: var(--sc-text-muted);
  margin-left: 6px;
}

body.sc-theme.sc-classic .sc-you-comment-when {
  display: block;
  font-size: 10px;
  color: #999;
  margin: 2px 0 4px;
}

body.sc-theme.sc-classic .sc-you-comment-body {
  margin: 0;
  font-size: 12px;
  line-height: 1.45;
  color: var(--sc-text);
  word-break: break-word;
}

@media (max-width: 720px) {
  body.sc-theme.sc-classic .sc-form-row {
    grid-template-columns: 1fr;
  }
}