html[data-design="new"] {
  --bg: #0e0a13;
  --primary: #8e44ee;
  --primary-glow: rgba(142, 68, 238, 0.3);
  --accent: #b22ce9;
  --accent-glow: rgba(178, 44, 233, 0.25);
}
html[data-design="new"] body {
  background: linear-gradient(135deg, #0e0a13 0%, #1a1421 50%, #140e1b 100%);
}
html[data-design="new"] .site-loader {
  background: radial-gradient(circle at center, rgba(142, 68, 238, 0.18), rgba(14, 10, 19, 0.96) 45%, rgb(6, 5, 9) 100%);
}
html[data-design="new"] .loader-art {
  filter: drop-shadow(0 0 28px rgba(165, 74, 255, 0.315));
}
html[data-design="new"] .loader-progress-fill {
  background: linear-gradient(90deg, #892dee, #d4a4ff, #eed9ff);
}
html[data-design="new"] .page {
  background: rgba(20, 14, 27, 0.7);
  box-shadow: 0 50px 150px rgba(0,0,0,0.8),
        inset 0 1px 0 rgba(255,255,255,0.05),
        0 0 150px rgba(142, 68, 238, 0.068),
        inset 0 0 100px rgba(142, 68, 238, 0.023);
}
html[data-design="new"] .topbar {
  background: #110c17;
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  html[data-design="new"] .topbar::before {
    background: rgba(17, 12, 23, 0.42);
  }
}
html[data-design="new"] .nav-item:hover {
  background: rgba(142, 68, 238, 0.15);
  border-color: rgba(142, 68, 238, 0.18);
}
html[data-design="new"] .nav-item.active {
  background: rgba(142, 68, 238, 0.25);
  border-color: rgba(142, 68, 238, 0.3);
  box-shadow: 0 0 20px rgba(142, 68, 238, 0.09);
}
html[data-design="new"] .nav-plus-sign {
  background: linear-gradient(135deg, #9b35f6 0%, #b22ce9 100%);
  -webkit-background-clip: text;
  background-clip: text;
}
html[data-design="new"] .dropdown-menu {
  background: rgba(9, 8, 10, 0.95);
}
html[data-design="new"] .lang-btn {
  border: 1.5px solid rgba(142, 68, 238, 0.3);
  background: linear-gradient(135deg, rgba(142, 68, 238, 0.15) 0%, rgba(178, 44, 233, 0.1) 100%);
}
html[data-design="new"] .lang-btn:hover {
  background: linear-gradient(135deg, rgba(142, 68, 238, 0.3) 0%, rgba(178, 44, 233, 0.2) 100%);
  border-color: rgba(142, 68, 238, 0.48);
  box-shadow: 0 0 20px rgba(142, 68, 238, 0.158);
}
html[data-design="new"] .profile-btn {
  border: 1.5px solid rgba(142, 68, 238, 0.3);
  background: linear-gradient(135deg, rgba(142, 68, 238, 0.15) 0%, rgba(178, 44, 233, 0.1) 100%);
}
html[data-design="new"] .profile-btn:hover {
  background: linear-gradient(135deg, rgba(142, 68, 238, 0.3) 0%, rgba(178, 44, 233, 0.2) 100%);
  border-color: rgba(142, 68, 238, 0.48);
  box-shadow: 0 0 20px rgba(142, 68, 238, 0.158);
}
html[data-design="new"] .profile-avatar {
  background: linear-gradient(135deg, rgba(142, 68, 238, 0.3) 0%, rgba(178, 44, 233, 0.2) 100%);
  border: 1.5px solid rgba(142, 68, 238, 0.3);
}
html[data-design="new"] .profile-btn:hover .profile-avatar {
  box-shadow: 0 0 12px rgba(142, 68, 238, 0.18);
}
html[data-design="new"] .menu-toggle {
  border: 1px solid rgba(142, 68, 238, 0.24);
  background: rgba(142, 68, 238, 0.1);
}
html[data-design="new"] .menu-toggle:hover {
  background: rgba(142, 68, 238, 0.18);
  border-color: rgba(142, 68, 238, 0.36);
  box-shadow: 0 0 12px rgba(142, 68, 238, 0.09);
}
html[data-design="new"] .adv-hero {
  background: linear-gradient(135deg, rgba(142, 68, 238, 0.15) 0%, rgba(178, 44, 233, 0.08) 100%);
  border: 1px solid rgba(142, 68, 238, 0.18);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 0 40px rgba(142, 68, 238, 0.045);
}
html[data-design="new"] .adv-hero h1 {
  background: linear-gradient(135deg, #ffffff 0%, #ece0ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
}
html[data-design="new"] .adv-btn:hover {
  border-color: rgba(142, 68, 238, 0.36);
  background: rgba(142, 68, 238, 0.14);
}
html[data-design="new"] .adv-btn.primary {
  border-color: rgba(142, 68, 238, 0.42);
  background: linear-gradient(135deg, rgba(142, 68, 238, 0.35) 0%, rgba(178, 44, 233, 0.25) 100%);
}
html[data-design="new"] .adv-btn.primary:hover {
  border-color: rgba(142, 68, 238, 0.54);
  background: linear-gradient(135deg, rgba(142, 68, 238, 0.5) 0%, rgba(178, 44, 233, 0.35) 100%);
  box-shadow: 0 8px 24px rgba(142, 68, 238, 0.126);
}
html[data-design="new"] .adv-stat {
  background: linear-gradient(135deg, rgba(142, 68, 238, 0.1) 0%, rgba(178, 44, 233, 0.05) 100%);
  border: 1px solid rgba(142, 68, 238, 0.132);
}
html[data-design="new"] .adv-stat-big {
  background: linear-gradient(135deg, rgba(142, 68, 238, 0.16) 0%, rgba(178, 44, 233, 0.08) 100%);
  border: 1px solid rgba(142, 68, 238, 0.192);
}
html[data-design="new"] .adv-stat-big-value {
  background: linear-gradient(135deg, #ffffff 0%, #e9d8ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
}
html[data-design="new"] .adv-card {
  background: linear-gradient(135deg, rgba(142, 68, 238, 0.06) 0%, rgba(178, 44, 233, 0.03) 100%);
  border: 1px solid rgba(142, 68, 238, 0.12);
}
html[data-design="new"] .adv-card:hover {
  background: linear-gradient(135deg, rgba(142, 68, 238, 0.15) 0%, rgba(178, 44, 233, 0.08) 100%);
  border-color: rgba(142, 68, 238, 0.36);
  box-shadow: 0 8px 24px rgba(142, 68, 238, 0.09);
}
html[data-design="new"] .adv-card.featured {
  border-color: rgba(142, 68, 238, 0.3);
  background: linear-gradient(135deg, rgba(142, 68, 238, 0.16) 0%, rgba(178, 44, 233, 0.08) 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 0 30px rgba(142, 68, 238, 0.054);
}
html[data-design="new"] .adv-card.featured:hover {
  border-color: rgba(142, 68, 238, 0.51);
  box-shadow: 0 10px 28px rgba(142, 68, 238, 0.126);
}
html[data-design="new"] .adv-term {
  background: linear-gradient(135deg, rgba(142, 68, 238, 0.06) 0%, rgba(178, 44, 233, 0.03) 100%);
  border: 1px solid rgba(142, 68, 238, 0.12);
}
html[data-design="new"] .adv-term:hover {
  border-color: rgba(142, 68, 238, 0.36);
  box-shadow: 0 8px 24px rgba(142, 68, 238, 0.09);
}
html[data-design="new"] .adv-term.best {
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.14) 0%, rgba(178, 44, 233, 0.05) 100%);
}
html[data-design="new"] .adv-term-badge {
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.9) 0%, rgba(178, 44, 233, 0.75) 100%);
}
html[data-design="new"] .adv-chip {
  background: rgba(142, 68, 238, 0.1);
  border: 1px solid rgba(142, 68, 238, 0.18);
}
html[data-design="new"] .adv-chip:hover {
  background: rgba(142, 68, 238, 0.18);
  border-color: rgba(142, 68, 238, 0.36);
}
html[data-design="new"] .adv-cta {
  background: linear-gradient(135deg, rgba(142, 68, 238, 0.15) 0%, rgba(178, 44, 233, 0.08) 100%);
  border: 1px solid rgba(142, 68, 238, 0.18);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 0 40px rgba(142, 68, 238, 0.045);
}
html[data-design="new"] .modal-overlay {
  background: rgba(7, 5, 10, 0.72);
}
html[data-design="new"] .modal-box {
  background: linear-gradient(160deg, #17121f 0%, #16101e 100%);
  border: 1px solid rgba(142, 68, 238, 0.21);
}
html[data-design="new"] .sponsors-list {
  scrollbar-color: rgba(142, 68, 238, 0.5) rgba(255,255,255,0.05);
}
html[data-design="new"] .sponsors-list::-webkit-scrollbar-thumb {
  background: rgba(142, 68, 238, 0.5);
}
html[data-design="new"] .sponsors-list::-webkit-scrollbar-thumb:hover {
  background: rgba(142, 68, 238, 0.75);
}
html[data-design="new"] .sponsor-item:hover {
  background: rgba(142, 68, 238, 0.14);
  border-color: rgba(142, 68, 238, 0.27);
}
html[data-design="new"] .howto-step-num {
  background: linear-gradient(135deg, rgba(142, 68, 238, 0.35) 0%, rgba(178, 44, 233, 0.25) 100%);
  border: 1px solid rgba(142, 68, 238, 0.3);
}
html[data-design="new"] .modal-btn.primary {
  border-color: rgba(142, 68, 238, 0.42);
  background: linear-gradient(135deg, rgba(142, 68, 238, 0.35) 0%, rgba(178, 44, 233, 0.25) 100%);
}
html[data-design="new"] .toast {
  background: linear-gradient(160deg, #17121f 0%, #16101e 100%);
  border: 1px solid rgba(142, 68, 238, 0.24);
}
html[data-design="new"] .toast.info {
  border-color: rgba(142, 68, 238, 0.33);
}
@media (max-width: 1000px) {
  html[data-design="new"] .nav.mobile-open {
    background: rgba(9, 7, 11, 0.35);
  }
  html[data-design="new"] .nav.left.mobile-open .nav-close {
    border: 1px solid rgba(142, 68, 238, 0.24);
    background: rgba(142, 68, 238, 0.12);
  }
  html[data-design="new"] .nav-item:hover {
    background: rgba(142, 68, 238, 0.12);
  }
  html[data-design="new"] .nav-item.active {
    background: rgba(142, 68, 238, 0.16);
  }
}

html[data-design="new"] {
  --grad-1: linear-gradient(135deg, #8e44ee 0%, #9b35f6 52%, #b22ce9 100%);
  --grad-2: linear-gradient(135deg, #4e11e3 0%, #8e44ee 55%, #973cf4 100%);
  --grad-3: linear-gradient(135deg, #c251f1 0%, #fb7185 45%, #fbbf24 100%);
  --bg: #0e0a13;
}
html[data-design="new"] body {
  background: linear-gradient(135deg, #0e0a13 0%, #1a1421 50%, #140e1b 100%);
}
html[data-design="new"] .site-loader {
  background: radial-gradient(circle at center, rgba(var(--tone-rgb), 0.18), rgba(14, 10, 19, 0.96) 45%, rgb(6, 5, 9) 100%);
}
html[data-design="new"] .loader-art {
  filter: drop-shadow(0 0 28px rgba(165, 74, 255, 0.315));
}
html[data-design="new"] .loader-progress-fill {
  background: linear-gradient(90deg, #892dee, #d4a4ff, #eed9ff);
}
html[data-design="new"] .page {
  background: rgba(20, 14, 27, 0.7);
}
html[data-design="new"] .topbar {
  background: #110c17;
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  html[data-design="new"] .topbar::before {
    background: rgba(17, 12, 23, 0.42);
  }
}
html[data-design="new"] .nav-plus-sign {
  background: linear-gradient(135deg, #9b35f6 0%, #b22ce9 100%);
  -webkit-background-clip: text;
  background-clip: text;
}
html[data-design="new"] .dropdown-menu {
  background: rgba(9, 8, 10, 0.95);
}
html[data-design="new"] .author-banner {
  background: linear-gradient(120deg, rgba(var(--tone-rgb), 0.4), rgba(var(--tone-2-rgb), 0.28) 55%, rgba(193, 139, 250, 0.35));
  background-size: cover;
  background-position: center;
}
html[data-design="new"] .author-banner::after {
  background: linear-gradient(180deg, rgba(14, 10, 19, 0) 35%, rgba(14, 10, 19, 0.6) 100%);
}
html[data-design="new"] .author-avatar {
  background: linear-gradient(135deg, #c18bfa 0%, #c251f1 100%);
  border: 4px solid rgba(20, 14, 27, 0.552);
  background-size: cover;
  background-position: center;
}
html[data-design="new"] .author-edit-btn {
  color: #e7e5eb;
}
html[data-design="new"] .author-follow-btn {
  color: #e7e5eb;
}
html[data-design="new"] .author-name {
  background: linear-gradient(135deg, #ffffff 0%, #ece0ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
}
html[data-design="new"] .author-badge.staff-badge {
  background: linear-gradient(135deg, rgba(126, 44, 225, 0.55), rgba(135, 25, 231, 0.55) 55%, rgba(152, 33, 199, 0.55));
  border-color: rgba(219, 180, 254, 0.42);
  box-shadow: 0 0 18px rgba(135, 25, 231, 0.203);
}
html[data-design="new"] .author-mod-btn {
  background: rgba(12, 8, 16, 0.55);
}
html[data-design="new"] .author-contact {
  background: rgba(12, 8, 16, 0.55);
}
html[data-design="new"] .track-cover {
  background: linear-gradient(135deg, #c18bfa 0%, #c251f1 100%);
}
html[data-design="new"] .track-cover.c1 {
  background: linear-gradient(135deg, #c18bfa 0%, #c251f1 100%);
}
html[data-design="new"] .track-cover.c2 {
  background: linear-gradient(135deg, #823ef9 0%, #34d399 100%);
}
html[data-design="new"] .track-cover.c4 {
  background: linear-gradient(135deg, #b22ce9 0%, #9b35f6 100%);
}
html[data-design="new"] .track-name {
  background: linear-gradient(135deg, #ffffff 0%, #ece0ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
}
html[data-design="new"] .modal-overlay {
  background: rgba(7, 5, 10, 0.72);
}
html[data-design="new"] .modal-box {
  background: linear-gradient(160deg, #17121f 0%, #16101e 100%);
}
html[data-design="new"] .toast {
  background: linear-gradient(160deg, #17121f 0%, #16101e 100%);
}
@media (max-width: 1000px) {
  html[data-design="new"] .nav.mobile-open {
    background: rgba(9, 7, 11, 0.35);
  }
}
html[data-design="new"] .sound-cover.tone-0 {
  background: linear-gradient(135deg, #c18bfa 0%, #c251f1 100%);
}
html[data-design="new"] .sound-cover.tone-1 {
  background: linear-gradient(135deg, #823ef9 0%, #34d399 100%);
}
html[data-design="new"] .sound-cover.tone-3 {
  background: linear-gradient(135deg, #b22ce9 0%, #9b35f6 100%);
}
html[data-design="new"] .sound-cover.tone-4 {
  background: linear-gradient(135deg, #4e11e3 0%, #6e1ef5 100%);
}
html[data-design="new"] .sound-cover.tone-6 {
  background: linear-gradient(135deg, #4ade80 0%, #4c0dd2 100%);
}
html[data-design="new"] .sound-cover.tone-7 {
  background: linear-gradient(135deg, #9e5df6 0%, #4e11e3 100%);
}
html[data-design="new"] .profile-page-bg {
  background: #0e0a13;
}
@media (max-width: 820px), (pointer: coarse) {
  html[data-design="new"].live-bg .topbar::before {
    background: rgba(17, 12, 23, 0.88);
  }
  html[data-design="new"].live-bg .track-row, html[data-design="new"].live-bg .author-stat-card, html[data-design="new"].live-bg .mini-badge, html[data-design="new"].live-bg .comments-panel {
    background-color: rgba(11, 8, 15, 0.66);
  }
}
html[data-design="new"].author-themed body {
  background: linear-gradient(135deg, rgba(var(--tone-rgb), 0.2) 0%, rgba(var(--tone-2-rgb), 0.07) 100%),
        #09080b;
}
html[data-design="new"].author-themed .profile-page-bg {
  background: #060507;
}
html[data-design="new"].author-themed .page {
  background: linear-gradient(180deg, rgba(var(--tone-rgb), 0.08) 0%, rgba(var(--tone-2-rgb), 0.03) 100%),
        rgba(9, 8, 10, 0.72);
}
html[data-design="new"].author-themed .topbar::before {
  background: linear-gradient(rgba(var(--tone-rgb), 0.07), rgba(var(--tone-rgb), 0.07)),
        rgba(9, 8, 10, 0.45);
}
html[data-design="new"] a.author-badge.premium-badge:hover, html[data-design="new"] a.author-badge.premium-badge:focus-visible {
  box-shadow: 0 6px 18px rgba(155, 53, 246, 0.203);
}

html[data-design="new"] .lcp {
  border: 1px solid rgba(158, 93, 246, 0.21);
  background: #16111e;
}
html[data-design="new"] .lcp-hue {
  background: linear-gradient(to right, #ff0000, #ffff00, #00ff00, #3d00e6, #6500e6, #8e00e6, #ff0000);
}
html[data-design="new"] .lcp-sv:focus-visible, html[data-design="new"] .lcp-hue:focus-visible, html[data-design="new"] .lcp-hex:focus-visible, html[data-design="new"] .lcp-done:focus-visible, html[data-design="new"] .lcp-swatch:focus-visible {
  outline: 2px solid rgba(221, 199, 254, 0.6);
}
html[data-design="new"] .lcp-hex:focus {
  border-color: rgba(158, 93, 246, 0.48);
}
html[data-design="new"] .lcp-done {
  background: linear-gradient(135deg, #8e44ee 0%, #9b35f6 100%);
}

html[data-design="new"] .cm-sort {
  background: rgba(10, 7, 14, 0.35);
}
html[data-design="new"] .cm-btn-main {
  background: var(--grad-1, linear-gradient(135deg, #8e44ee 0%, #9b35f6 52%, #b22ce9 100%));
  box-shadow: 0 6px 16px rgba(155, 53, 246, 0.113);
}
html[data-design="new"] .cm-ava {
  background: linear-gradient(135deg, rgb(var(--cm-tone)) 0%, #b22ce9 100%);
  background-size: cover;
  background-position: center;
}
html[data-design="new"] .cm-field {
  background: rgba(10, 7, 14, 0.5);
}
html[data-design="new"] .cm-owner {
  background: var(--grad-1, linear-gradient(135deg, #8e44ee 0%, #9b35f6 52%, #b22ce9 100%));
}
html[data-design="new"] .cm-loved {
  background: rgba(178, 44, 233, 0.14);
  color: #eecffb;
}
html[data-design="new"] .cm-menu {
  background: #181220;
}
html[data-design="new"] .cm-inline textarea {
  background: rgba(10, 7, 14, 0.5);
}
html[data-design="new"] .comments-panel button:focus-visible, html[data-design="new"] .comments-panel a:focus-visible {
  outline: 2px solid rgba(215, 181, 253, 0.54);
}

html[data-design="new"] {
  --grad-1: linear-gradient(135deg, #8e44ee 0%, #9b35f6 52%, #b22ce9 100%);
  --grad-2: linear-gradient(135deg, #4e11e3 0%, #8e44ee 55%, #973cf4 100%);
  --grad-3: linear-gradient(135deg, #c251f1 0%, #fb7185 45%, #fbbf24 100%);
  --bg: #0e0a13;
  --primary: #8e44ee;
  --accent: #b22ce9;
}
html[data-design="new"] body {
  background: linear-gradient(135deg, #0e0a13 0%, #1a1421 50%, #140e1b 100%);
}
html[data-design="new"] .site-loader {
  background: radial-gradient(circle at center, rgba(var(--tone-rgb), 0.18), rgba(14, 10, 19, 0.96) 45%, rgb(6, 5, 9) 100%);
}
html[data-design="new"] .loader-art {
  filter: drop-shadow(0 0 28px rgba(165, 74, 255, 0.315));
}
html[data-design="new"] .loader-progress-fill {
  background: linear-gradient(90deg, #892dee, #d4a4ff, #eed9ff);
}
html[data-design="new"] .page {
  background: rgba(20, 14, 27, 0.7);
}
html[data-design="new"] .topbar {
  background: #110c17;
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  html[data-design="new"] .topbar::before {
    background: rgba(17, 12, 23, 0.42);
  }
}
html[data-design="new"] .nav-plus-sign {
  background: linear-gradient(135deg, #9b35f6 0%, #b22ce9 100%);
  -webkit-background-clip: text;
  background-clip: text;
}
html[data-design="new"] .dropdown-menu {
  background: rgba(9, 8, 10, 0.95);
}
html[data-design="new"] .favs-header h1 {
  background: linear-gradient(135deg, #ffffff 0%, #ece0ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
}
html[data-design="new"] .ep-savebar {
  background: rgba(17, 12, 23, 0.94);
}
html[data-design="new"] .author-banner {
  background: linear-gradient(120deg, rgba(var(--tone-rgb), 0.4), rgba(var(--tone-2-rgb), 0.28) 55%, rgba(193, 139, 250, 0.35));
  background-size: cover;
  background-position: center;
}
html[data-design="new"] .author-banner::after {
  background: linear-gradient(180deg, rgba(14, 10, 19, 0) 35%, rgba(14, 10, 19, 0.6) 100%);
}
html[data-design="new"] .author-avatar {
  background: linear-gradient(135deg, #c18bfa 0%, #c251f1 100%);
  border: 4px solid rgba(20, 14, 27, 0.552);
  background-size: cover;
  background-position: center;
}
html[data-design="new"] .author-name {
  background: linear-gradient(135deg, #ffffff 0%, #ece0ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
}
html[data-design="new"] .avatar-editor-face {
  background: linear-gradient(135deg, #c18bfa 0%, #c251f1 100%);
  background-size: cover;
  background-position: center;
}
html[data-design="new"] .track-cover {
  background: linear-gradient(135deg, #c18bfa 0%, #c251f1 100%);
}
html[data-design="new"] .track-cover.c1 {
  background: linear-gradient(135deg, #c18bfa 0%, #c251f1 100%);
}
html[data-design="new"] .track-cover.c2 {
  background: linear-gradient(135deg, #823ef9 0%, #34d399 100%);
}
html[data-design="new"] .track-cover.c4 {
  background: linear-gradient(135deg, #b22ce9 0%, #9b35f6 100%);
}
html[data-design="new"] .track-uploader {
  background: rgba(12, 8, 16, 0.55);
}
html[data-design="new"] .uploader-avatar {
  background: linear-gradient(135deg, #c18bfa 0%, #c251f1 100%);
  background-size: cover;
  background-position: center;
}
html[data-design="new"] .track-name {
  background: linear-gradient(135deg, #ffffff 0%, #ece0ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
}
html[data-design="new"] .modal-overlay {
  background: rgba(7, 5, 10, 0.72);
}
html[data-design="new"] .modal-box {
  background: linear-gradient(160deg, #17121f 0%, #16101e 100%);
}
html[data-design="new"] .toast {
  background: linear-gradient(160deg, #17121f 0%, #16101e 100%);
}
@media (max-width: 1000px) {
  html[data-design="new"] .nav.mobile-open {
    background: rgba(9, 7, 11, 0.35);
  }
}
html[data-design="new"] .ep-tryon {
  --try-a: #9b35f6;
  --try-b: #b22ce9;
  background: rgba(14, 10, 19, 0.45);
}
html[data-design="new"] .ep-tryon-ava {
  border: 3px solid rgba(14, 10, 19, 0.552);
}
html[data-design="new"] .ep-tryon-pill {
  background: linear-gradient(135deg, #861feb, #9821c7);
}
html[data-design="new"] .ep-tryon-swatch[aria-pressed="true"] {
  box-shadow: 0 0 0 2px rgba(155, 53, 246, 0.27);
}
html[data-design="new"] .ep-premium-fields textarea {
  background: rgba(14, 10, 19, 0.5);
}
html[data-design="new"] .ep-slider input[type="range"]::-moz-range-thumb {
  background: #8e44ee;
}
html[data-design="new"] .ep-stage {
  background: linear-gradient(135deg, #0e0a13 0%, #1a1421 50%, #140e1b 100%);
}
html[data-design="new"] .ep-stage.has-bg {
  background: #0e0a13;
}
html[data-design="new"] .ep-stage.toned {
  background: linear-gradient(135deg, rgba(var(--tone-rgb), 0.2) 0%, rgba(var(--tone-2-rgb), 0.07) 100%), #09080b;
}
html[data-design="new"] .ep-stage.toned.has-bg {
  background: #060507;
}
html[data-design="new"] .ep-stage.has-bg .author-header {
  background: rgba(14, 10, 19, 0.55);
}
html[data-design="new"] .ep-stage.toned .author-header {
  background: linear-gradient(135deg, rgba(var(--tone-rgb), 0.16) 0%, rgba(var(--tone-2-rgb), 0.06) 100%),
        rgba(9, 8, 10, 0.55);
}
html[data-design="new"] .ep-stage-track {
  background: linear-gradient(135deg, rgba(var(--tone-rgb), 0.06) 0%, rgba(var(--tone-2-rgb), 0.03) 100%), rgba(9, 8, 10, 0.35);
}
html[data-design="new"] .ep-select option {
  background: #16101f;
  color: #f5eeff;
}

html[data-design="new"] {
  --grad-1: linear-gradient(135deg, #8e44ee 0%, #9b35f6 52%, #b22ce9 100%);
  --grad-2: linear-gradient(135deg, #4e11e3 0%, #8e44ee 55%, #973cf4 100%);
  --grad-3: linear-gradient(135deg, #c251f1 0%, #fb7185 45%, #fbbf24 100%);
  --bg: #0e0a13;
  --primary: #8e44ee;
  --primary-glow: rgba(142, 68, 238, 0.3);
  --accent: #b22ce9;
  --accent-glow: rgba(178, 44, 233, 0.25);
}
html[data-design="new"] body {
  background: linear-gradient(135deg, #0e0a13 0%, #1a1421 50%, #140e1b 100%);
}
html[data-design="new"] .site-loader {
  background: radial-gradient(circle at center, rgba(142, 68, 238, 0.18), rgba(14, 10, 19, 0.96) 45%, rgb(6, 5, 9) 100%);
}
html[data-design="new"] .loader-art {
  filter: drop-shadow(0 0 28px rgba(165, 74, 255, 0.315));
}
html[data-design="new"] .loader-progress-fill {
  background: linear-gradient(90deg, #892dee, #d4a4ff, #eed9ff);
}
html[data-design="new"] .page {
  background: rgba(20, 14, 27, 0.7);
  box-shadow: 0 50px 150px rgba(0,0,0,0.8),
        inset 0 1px 0 rgba(255,255,255,0.05),
        0 0 150px rgba(142, 68, 238, 0.068),
        inset 0 0 100px rgba(142, 68, 238, 0.023);
}
html[data-design="new"] .topbar {
  background: #110c17;
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  html[data-design="new"] .topbar::before {
    background: rgba(17, 12, 23, 0.42);
  }
}
html[data-design="new"] .nav-item:hover {
  background: rgba(142, 68, 238, 0.15);
  border-color: rgba(142, 68, 238, 0.18);
}
html[data-design="new"] .nav-item.active {
  background: rgba(142, 68, 238, 0.25);
  border-color: rgba(142, 68, 238, 0.3);
  box-shadow: 0 0 20px rgba(142, 68, 238, 0.09);
}
html[data-design="new"] .nav-plus-sign {
  background: linear-gradient(135deg, #9b35f6 0%, #b22ce9 100%);
  -webkit-background-clip: text;
  background-clip: text;
}
html[data-design="new"] .dropdown-menu {
  background: rgba(9, 8, 10, 0.95);
}
html[data-design="new"] .lang-btn {
  border: 1.5px solid rgba(142, 68, 238, 0.3);
  background: linear-gradient(135deg, rgba(142, 68, 238, 0.15) 0%, rgba(178, 44, 233, 0.1) 100%);
}
html[data-design="new"] .lang-btn:hover {
  background: linear-gradient(135deg, rgba(142, 68, 238, 0.3) 0%, rgba(178, 44, 233, 0.2) 100%);
  border-color: rgba(142, 68, 238, 0.48);
  box-shadow: 0 0 20px rgba(142, 68, 238, 0.158);
}
html[data-design="new"] .profile-btn {
  border: 1.5px solid rgba(142, 68, 238, 0.3);
  background: linear-gradient(135deg, rgba(142, 68, 238, 0.15) 0%, rgba(178, 44, 233, 0.1) 100%);
}
html[data-design="new"] .profile-btn:hover {
  background: linear-gradient(135deg, rgba(142, 68, 238, 0.3) 0%, rgba(178, 44, 233, 0.2) 100%);
  border-color: rgba(142, 68, 238, 0.48);
  box-shadow: 0 0 20px rgba(142, 68, 238, 0.158);
}
html[data-design="new"] .profile-avatar {
  background: linear-gradient(135deg, rgba(142, 68, 238, 0.3) 0%, rgba(178, 44, 233, 0.2) 100%);
  border: 1.5px solid rgba(142, 68, 238, 0.3);
}
html[data-design="new"] .profile-btn:hover .profile-avatar {
  box-shadow: 0 0 12px rgba(142, 68, 238, 0.18);
}
html[data-design="new"] .menu-toggle {
  border: 1px solid rgba(142, 68, 238, 0.24);
  background: rgba(142, 68, 238, 0.1);
}
html[data-design="new"] .menu-toggle:hover {
  background: rgba(142, 68, 238, 0.18);
  border-color: rgba(142, 68, 238, 0.36);
  box-shadow: 0 0 12px rgba(142, 68, 238, 0.09);
}
html[data-design="new"] .favs-header {
  background: linear-gradient(135deg, rgba(142, 68, 238, 0.12) 0%, rgba(178, 44, 233, 0.06) 100%);
  border: 1px solid rgba(142, 68, 238, 0.18);
}
html[data-design="new"] .favs-header h1 {
  background: linear-gradient(135deg, #ffffff 0%, #ece0ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
}
html[data-design="new"] .favs-login-gate {
  background: rgba(142, 68, 238, 0.08);
  border: 1px solid rgba(142, 68, 238, 0.15);
}
html[data-design="new"] .favs-login-btn {
  border: 1.5px solid rgba(142, 68, 238, 0.42);
  background: linear-gradient(135deg, rgba(142, 68, 238, 0.35) 0%, rgba(178, 44, 233, 0.25) 100%);
}
html[data-design="new"] .favs-login-btn:hover {
  box-shadow: 0 8px 24px rgba(142, 68, 238, 0.135);
}
html[data-design="new"] .chip {
  background: rgba(142, 68, 238, 0.1);
  border: 1px solid rgba(142, 68, 238, 0.18);
}
html[data-design="new"] .chip:hover {
  background: rgba(142, 68, 238, 0.2);
  border-color: rgba(142, 68, 238, 0.36);
}
html[data-design="new"] .chip.active {
  background: rgba(142, 68, 238, 0.3);
  border-color: rgba(142, 68, 238, 0.48);
  box-shadow: 0 0 15px rgba(142, 68, 238, 0.135);
}
html[data-design="new"] .list-panel {
  background: rgba(142, 68, 238, 0.08);
  border: 1px solid rgba(142, 68, 238, 0.15);
  box-shadow: 0 0 50px rgba(142, 68, 238, 0.09), inset 0 1px 0 rgba(255,255,255,0.1);
}
html[data-design="new"] .track-row {
  background: linear-gradient(135deg, rgba(142, 68, 238, 0.06) 0%, rgba(178, 44, 233, 0.03) 100%);
  border: 1px solid rgba(142, 68, 238, 0.12);
}
html[data-design="new"] .track-row.skeleton {
  background: linear-gradient(100deg,
        rgba(142, 68, 238, 0.06) 30%,
        rgba(142, 68, 238, 0.16) 50%,
        rgba(142, 68, 238, 0.06) 70%);
  background-size: 250% 100%;
}
html[data-design="new"] .track-row:hover {
  background: linear-gradient(135deg, rgba(142, 68, 238, 0.15) 0%, rgba(178, 44, 233, 0.08) 100%);
  border-color: rgba(142, 68, 238, 0.36);
  box-shadow: 0 8px 32px rgba(142, 68, 238, 0.113), inset 0 1px 0 rgba(255,255,255,0.1);
}
html[data-design="new"] .track-row:hover .track-cover {
  box-shadow: 0 0 30px rgba(142, 68, 238, 0.18);
}
html[data-design="new"] .track-cover {
  background: linear-gradient(135deg, #c18bfa 0%, #c251f1 100%);
}
html[data-design="new"] .track-cover.c1 {
  background: linear-gradient(135deg, #c18bfa 0%, #c251f1 100%);
}
html[data-design="new"] .track-cover.c2 {
  background: linear-gradient(135deg, #823ef9 0%, #34d399 100%);
}
html[data-design="new"] .track-cover.c4 {
  background: linear-gradient(135deg, #b22ce9 0%, #9b35f6 100%);
}
html[data-design="new"] .track-uploader {
  background: rgba(12, 8, 16, 0.55);
}
html[data-design="new"] .track-uploader:hover {
  background: rgba(142, 68, 238, 0.4);
  border-color: rgba(142, 68, 238, 0.42);
}
html[data-design="new"] .uploader-avatar {
  background: linear-gradient(135deg, #c18bfa 0%, #c251f1 100%);
  background-size: cover;
  background-position: center;
}
html[data-design="new"] .track-name {
  background: linear-gradient(135deg, #ffffff 0%, #ece0ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
}
html[data-design="new"] .track-tag {
  background: linear-gradient(135deg, rgba(142, 68, 238, 0.22) 0%, rgba(178, 44, 233, 0.16) 100%);
  border: 1px solid rgba(142, 68, 238, 0.252);
}
html[data-design="new"] .track-button {
  border: 1.5px solid rgba(142, 68, 238, 0.36);
  background: linear-gradient(135deg, rgba(142, 68, 238, 0.2) 0%, rgba(178, 44, 233, 0.15) 100%);
}
html[data-design="new"] .track-button:hover {
  background: linear-gradient(135deg, rgba(142, 68, 238, 0.4) 0%, rgba(178, 44, 233, 0.3) 100%);
  border-color: rgba(142, 68, 238, 0.54);
  box-shadow: 0 0 25px rgba(142, 68, 238, 0.18), inset 0 1px 0 rgba(255,255,255,0.15);
}
html[data-design="new"] .report-button {
  background: linear-gradient(135deg, rgba(248, 113, 113, 0.14) 0%, rgba(178, 44, 233, 0.1) 100%);
}
html[data-design="new"] .report-button:hover {
  background: linear-gradient(135deg, rgba(248, 113, 113, 0.3) 0%, rgba(178, 44, 233, 0.2) 100%);
}
html[data-design="new"] .play-inline-button {
  background: linear-gradient(135deg, rgba(52, 211, 153, 0.16) 0%, rgba(142, 68, 238, 0.1) 100%);
}
html[data-design="new"] .play-inline-button:hover {
  background: linear-gradient(135deg, rgba(52, 211, 153, 0.32) 0%, rgba(142, 68, 238, 0.2) 100%);
}
html[data-design="new"] .modal-overlay {
  background: rgba(7, 5, 10, 0.72);
}
html[data-design="new"] .modal-box {
  background: linear-gradient(160deg, #17121f 0%, #16101e 100%);
  border: 1px solid rgba(142, 68, 238, 0.21);
}
html[data-design="new"] .sponsors-list {
  scrollbar-color: rgba(142, 68, 238, 0.5) rgba(255,255,255,0.05);
}
html[data-design="new"] .sponsors-list::-webkit-scrollbar-thumb {
  background: rgba(142, 68, 238, 0.5);
}
html[data-design="new"] .sponsors-list::-webkit-scrollbar-thumb:hover {
  background: rgba(142, 68, 238, 0.75);
}
html[data-design="new"] .sponsor-item:hover {
  background: rgba(142, 68, 238, 0.14);
  border-color: rgba(142, 68, 238, 0.27);
}
html[data-design="new"] .howto-step-num {
  background: linear-gradient(135deg, rgba(142, 68, 238, 0.35) 0%, rgba(178, 44, 233, 0.25) 100%);
  border: 1px solid rgba(142, 68, 238, 0.3);
}
html[data-design="new"] .modal-btn.primary {
  border-color: rgba(142, 68, 238, 0.42);
  background: linear-gradient(135deg, rgba(142, 68, 238, 0.35) 0%, rgba(178, 44, 233, 0.25) 100%);
}
html[data-design="new"] .toast {
  background: linear-gradient(160deg, #17121f 0%, #16101e 100%);
  border: 1px solid rgba(142, 68, 238, 0.24);
}
html[data-design="new"] .toast.info {
  border-color: rgba(142, 68, 238, 0.33);
}
html[data-design="new"] .page-btn {
  border: 1px solid rgba(142, 68, 238, 0.18);
  background: rgba(142, 68, 238, 0.1);
}
html[data-design="new"] .page-btn:hover:not(:disabled) {
  background: rgba(142, 68, 238, 0.25);
  border-color: rgba(142, 68, 238, 0.36);
}
@media (max-width: 1000px) {
  html[data-design="new"] .nav.mobile-open {
    background: rgba(9, 7, 11, 0.35);
  }
  html[data-design="new"] .nav.left.mobile-open .nav-close {
    border: 1px solid rgba(142, 68, 238, 0.24);
    background: rgba(142, 68, 238, 0.12);
  }
  html[data-design="new"] .nav-item:hover {
    background: rgba(142, 68, 238, 0.12);
  }
  html[data-design="new"] .nav-item.active {
    background: rgba(142, 68, 238, 0.16);
  }
}
html[data-design="new"] .track-button.sound-action.active {
  background: rgba(142, 68, 238, 0.32);
  border-color: rgba(142, 68, 238, 0.51);
}
html[data-design="new"] .sound-cover.tone-0 {
  background: linear-gradient(135deg, #c18bfa 0%, #c251f1 100%);
}
html[data-design="new"] .sound-cover.tone-1 {
  background: linear-gradient(135deg, #823ef9 0%, #34d399 100%);
}
html[data-design="new"] .sound-cover.tone-3 {
  background: linear-gradient(135deg, #b22ce9 0%, #9b35f6 100%);
}
html[data-design="new"] .sound-cover.tone-4 {
  background: linear-gradient(135deg, #4e11e3 0%, #6e1ef5 100%);
}
html[data-design="new"] .sound-cover.tone-6 {
  background: linear-gradient(135deg, #4ade80 0%, #4c0dd2 100%);
}
html[data-design="new"] .sound-cover.tone-7 {
  background: linear-gradient(135deg, #9e5df6 0%, #4e11e3 100%);
}

html[data-design="new"] {
  --bg: #0e0a13;
  --primary: #8e44ee;
  --primary-glow: rgba(142, 68, 238, 0.3);
  --accent: #b22ce9;
  --accent-glow: rgba(178, 44, 233, 0.25);
}
html[data-design="new"] body {
  background: linear-gradient(135deg, #0e0a13 0%, #1a1421 50%, #140e1b 100%);
}
html[data-design="new"] .site-loader {
  background: radial-gradient(circle at center, rgba(142, 68, 238, 0.18), rgba(14, 10, 19, 0.96) 45%, rgb(6, 5, 9) 100%);
}
html[data-design="new"] .loader-art {
  filter: drop-shadow(0 0 28px rgba(165, 74, 255, 0.315));
}
html[data-design="new"] .loader-progress-fill {
  background: linear-gradient(90deg, #892dee, #d4a4ff, #eed9ff);
}
html[data-design="new"] .page {
  background: rgba(20, 14, 27, 0.7);
  box-shadow: 0 50px 150px rgba(0,0,0,0.8),
        inset 0 1px 0 rgba(255,255,255,0.05),
        0 0 150px rgba(142, 68, 238, 0.068),
        inset 0 0 100px rgba(142, 68, 238, 0.023);
}
html[data-design="new"] .topbar {
  background: #110c17;
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  html[data-design="new"] .topbar::before {
    background: rgba(17, 12, 23, 0.42);
  }
}
html[data-design="new"] .nav-item:hover {
  background: rgba(142, 68, 238, 0.15);
  border-color: rgba(142, 68, 238, 0.18);
}
html[data-design="new"] .nav-item.active {
  background: rgba(142, 68, 238, 0.25);
  border-color: rgba(142, 68, 238, 0.3);
  box-shadow: 0 0 20px rgba(142, 68, 238, 0.09);
}
html[data-design="new"] .nav-plus-sign {
  background: linear-gradient(135deg, #9b35f6 0%, #b22ce9 100%);
  -webkit-background-clip: text;
  background-clip: text;
}
html[data-design="new"] .dropdown-menu {
  background: rgba(9, 8, 10, 0.95);
}
html[data-design="new"] .lang-btn {
  border: 1.5px solid rgba(142, 68, 238, 0.3);
  background: linear-gradient(135deg, rgba(142, 68, 238, 0.15) 0%, rgba(178, 44, 233, 0.1) 100%);
}
html[data-design="new"] .lang-btn:hover {
  background: linear-gradient(135deg, rgba(142, 68, 238, 0.3) 0%, rgba(178, 44, 233, 0.2) 100%);
  border-color: rgba(142, 68, 238, 0.48);
  box-shadow: 0 0 20px rgba(142, 68, 238, 0.158);
}
html[data-design="new"] .profile-btn {
  border: 1.5px solid rgba(142, 68, 238, 0.3);
  background: linear-gradient(135deg, rgba(142, 68, 238, 0.15) 0%, rgba(178, 44, 233, 0.1) 100%);
}
html[data-design="new"] .profile-btn:hover {
  background: linear-gradient(135deg, rgba(142, 68, 238, 0.3) 0%, rgba(178, 44, 233, 0.2) 100%);
  border-color: rgba(142, 68, 238, 0.48);
  box-shadow: 0 0 20px rgba(142, 68, 238, 0.158);
}
html[data-design="new"] .profile-avatar {
  background: linear-gradient(135deg, rgba(142, 68, 238, 0.3) 0%, rgba(178, 44, 233, 0.2) 100%);
  border: 1.5px solid rgba(142, 68, 238, 0.3);
}
html[data-design="new"] .profile-btn:hover .profile-avatar {
  box-shadow: 0 0 12px rgba(142, 68, 238, 0.18);
}
html[data-design="new"] .menu-toggle {
  border: 1px solid rgba(142, 68, 238, 0.24);
  background: rgba(142, 68, 238, 0.1);
}
html[data-design="new"] .menu-toggle:hover {
  background: rgba(142, 68, 238, 0.18);
  border-color: rgba(142, 68, 238, 0.36);
  box-shadow: 0 0 12px rgba(142, 68, 238, 0.09);
}
html[data-design="new"] .modal-overlay {
  background: rgba(7, 5, 10, 0.72);
}
html[data-design="new"] .modal-box {
  background: linear-gradient(160deg, #17121f 0%, #16101e 100%);
  border: 1px solid rgba(142, 68, 238, 0.21);
}
html[data-design="new"] .sponsors-list {
  scrollbar-color: rgba(142, 68, 238, 0.5) rgba(255,255,255,0.05);
}
html[data-design="new"] .sponsors-list::-webkit-scrollbar-thumb {
  background: rgba(142, 68, 238, 0.5);
}
html[data-design="new"] .sponsors-list::-webkit-scrollbar-thumb:hover {
  background: rgba(142, 68, 238, 0.75);
}
html[data-design="new"] .sponsor-item:hover {
  background: rgba(142, 68, 238, 0.14);
  border-color: rgba(142, 68, 238, 0.27);
}
html[data-design="new"] .howto-step-num {
  background: linear-gradient(135deg, rgba(142, 68, 238, 0.35) 0%, rgba(178, 44, 233, 0.25) 100%);
  border: 1px solid rgba(142, 68, 238, 0.3);
}
html[data-design="new"] .modal-btn.primary {
  border-color: rgba(142, 68, 238, 0.42);
  background: linear-gradient(135deg, rgba(142, 68, 238, 0.35) 0%, rgba(178, 44, 233, 0.25) 100%);
}
html[data-design="new"] .toast {
  background: linear-gradient(160deg, #17121f 0%, #16101e 100%);
  border: 1px solid rgba(142, 68, 238, 0.24);
}
html[data-design="new"] .toast.info {
  border-color: rgba(142, 68, 238, 0.33);
}
@media (max-width: 1000px) {
  html[data-design="new"] .nav.mobile-open {
    background: rgba(9, 7, 11, 0.35);
  }
  html[data-design="new"] .nav.left.mobile-open .nav-close {
    border: 1px solid rgba(142, 68, 238, 0.24);
    background: rgba(142, 68, 238, 0.12);
  }
  html[data-design="new"] .nav-item:hover {
    background: rgba(142, 68, 238, 0.12);
  }
  html[data-design="new"] .nav-item.active {
    background: rgba(142, 68, 238, 0.16);
  }
}
html[data-design="new"] .groups-panel {
  border: 1px solid rgba(142, 68, 238, 0.15);
  background: rgba(142, 68, 238, 0.06);
}
html[data-design="new"] .group-card {
  border: 1px solid rgba(142, 68, 238, 0.15);
  background: radial-gradient(120% 80% at 0% 0%, rgba(142, 68, 238, 0.14) 0%, rgba(142, 68, 238, 0) 55%),
        rgba(142, 68, 238, 0.05);
}
html[data-design="new"] .group-card.is-focused {
  border-color: rgba(193, 139, 250, 0.48);
  box-shadow: 0 0 0 4px rgba(151, 60, 244, 0.081);
}
html[data-design="new"] .group-ava {
  background: linear-gradient(135deg, #8e44ee 0%, #9b35f6 52%, #b22ce9 100%);
}
html[data-design="new"] .group-card-title a {
  color: #d7b5fd;
}
html[data-design="new"] .group-seg {
  background: rgba(10, 7, 14, 0.38);
}
html[data-design="new"] .group-seg button.on {
  background: rgba(142, 68, 238, 0.34);
  box-shadow: inset 0 0 0 1px rgba(158, 93, 246, 0.27);
}
html[data-design="new"] .group-welcome textarea {
  border: 1px solid rgba(158, 93, 246, 0.21);
  background: rgba(10, 7, 14, 0.5);
}
html[data-design="new"] .group-welcome textarea:focus {
  border-color: rgba(193, 139, 250, 0.48);
}

html[data-design="new"] {
  --grad-1: linear-gradient(135deg, #8e44ee 0%, #9b35f6 52%, #b22ce9 100%);
  --grad-2: linear-gradient(135deg, #4e11e3 0%, #8e44ee 55%, #973cf4 100%);
  --grad-3: linear-gradient(135deg, #c251f1 0%, #fb7185 45%, #fbbf24 100%);
  --bg: #0e0a13;
  --primary: #8e44ee;
  --primary-glow: rgba(142, 68, 238, 0.3);
  --accent: #b22ce9;
  --accent-glow: rgba(178, 44, 233, 0.25);
}
html[data-design="new"] body {
  background: linear-gradient(135deg, #0e0a13 0%, #1a1421 50%, #140e1b 100%);
}
html[data-design="new"] .site-loader {
  background: radial-gradient(circle at center, rgba(142, 68, 238, 0.18), rgba(14, 10, 19, 0.96) 45%, rgb(6, 5, 9) 100%);
}
html[data-design="new"] .loader-art {
  filter: drop-shadow(0 0 28px rgba(165, 74, 255, 0.315));
}
html[data-design="new"] .loader-progress-fill {
  background: linear-gradient(90deg, #892dee, #d4a4ff, #eed9ff);
}
html[data-design="new"] .page {
  background: rgba(20, 14, 27, 0.7);
  box-shadow: 0 50px 150px rgba(0,0,0,0.8),
        inset 0 1px 0 rgba(255,255,255,0.05),
        0 0 150px rgba(142, 68, 238, 0.068),
        inset 0 0 100px rgba(142, 68, 238, 0.023);
}
html[data-design="new"] .topbar {
  background: #110c17;
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  html[data-design="new"] .topbar::before {
    background: rgba(17, 12, 23, 0.42);
  }
}
html[data-design="new"] .nav-item:hover {
  background: rgba(142, 68, 238, 0.15);
  border-color: rgba(142, 68, 238, 0.18);
}
html[data-design="new"] .nav-item.active {
  background: rgba(142, 68, 238, 0.25);
  border-color: rgba(142, 68, 238, 0.3);
  box-shadow: 0 0 20px rgba(142, 68, 238, 0.09);
}
html[data-design="new"] .nav-plus-sign {
  background: linear-gradient(135deg, #9b35f6 0%, #b22ce9 100%);
  -webkit-background-clip: text;
  background-clip: text;
}
html[data-design="new"] .dropdown-menu {
  background: rgba(9, 8, 10, 0.95);
}
html[data-design="new"] .search-btn {
  border: 1px solid rgba(142, 68, 238, 0.18);
  background: rgba(142, 68, 238, 0.1);
}
html[data-design="new"] .search-btn:hover {
  background: rgba(142, 68, 238, 0.25);
  border-color: rgba(142, 68, 238, 0.36);
  box-shadow: 0 0 15px rgba(142, 68, 238, 0.135);
}
html[data-design="new"] .lang-btn {
  border: 1.5px solid rgba(142, 68, 238, 0.3);
  background: linear-gradient(135deg, rgba(142, 68, 238, 0.15) 0%, rgba(178, 44, 233, 0.1) 100%);
}
html[data-design="new"] .lang-btn:hover {
  background: linear-gradient(135deg, rgba(142, 68, 238, 0.3) 0%, rgba(178, 44, 233, 0.2) 100%);
  border-color: rgba(142, 68, 238, 0.48);
  box-shadow: 0 0 20px rgba(142, 68, 238, 0.158);
}
html[data-design="new"] .profile-btn {
  border: 1.5px solid rgba(142, 68, 238, 0.3);
  background: linear-gradient(135deg, rgba(142, 68, 238, 0.15) 0%, rgba(178, 44, 233, 0.1) 100%);
}
html[data-design="new"] .profile-btn:hover {
  background: linear-gradient(135deg, rgba(142, 68, 238, 0.3) 0%, rgba(178, 44, 233, 0.2) 100%);
  border-color: rgba(142, 68, 238, 0.48);
  box-shadow: 0 0 20px rgba(142, 68, 238, 0.158);
}
html[data-design="new"] .profile-avatar {
  background: linear-gradient(135deg, rgba(142, 68, 238, 0.3) 0%, rgba(178, 44, 233, 0.2) 100%);
  border: 1.5px solid rgba(142, 68, 238, 0.3);
}
html[data-design="new"] .profile-btn:hover .profile-avatar {
  box-shadow: 0 0 12px rgba(142, 68, 238, 0.18);
}
html[data-design="new"] .menu-toggle {
  border: 1px solid rgba(142, 68, 238, 0.24);
  background: rgba(142, 68, 238, 0.1);
}
html[data-design="new"] .menu-toggle:hover {
  background: rgba(142, 68, 238, 0.18);
  border-color: rgba(142, 68, 238, 0.36);
  box-shadow: 0 0 12px rgba(142, 68, 238, 0.09);
}
html[data-design="new"] .chip {
  background: rgba(142, 68, 238, 0.1);
  border: 1px solid rgba(142, 68, 238, 0.18);
}
html[data-design="new"] .chip:hover {
  background: rgba(142, 68, 238, 0.2);
  border-color: rgba(142, 68, 238, 0.36);
}
html[data-design="new"] .chip.active {
  background: rgba(142, 68, 238, 0.3);
  border-color: rgba(142, 68, 238, 0.48);
  box-shadow: 0 0 15px rgba(142, 68, 238, 0.135);
}
html[data-design="new"] .top-authors-see-all {
  border: 1px solid rgba(142, 68, 238, 0.15);
}
html[data-design="new"] .top-authors-see-all:hover {
  background: rgba(142, 68, 238, 0.12);
  border-color: rgba(142, 68, 238, 0.3);
}
html[data-design="new"] .top-author-row:hover {
  background: rgba(142, 68, 238, 0.12);
  border-color: rgba(142, 68, 238, 0.24);
}
html[data-design="new"] .top-author-avatar {
  background: linear-gradient(135deg, #c18bfa 0%, #c251f1 100%);
  background-size: cover;
  background-position: center;
}
html[data-design="new"] .hero {
  background: linear-gradient(135deg, rgba(142, 68, 238, 0.15) 0%, rgba(178, 44, 233, 0.08) 100%);
  border: 1px solid rgba(142, 68, 238, 0.18);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 0 40px rgba(142, 68, 238, 0.045);
}
html[data-design="new"] a.stat-pill:hover {
  background: rgba(142, 68, 238, 0.16);
  border-color: rgba(142, 68, 238, 0.39);
}
html[data-design="new"] .hero-visual {
  background: radial-gradient(120% 110% at 18% 0%, rgba(142, 68, 238, 0.22) 0%, transparent 56%),
        radial-gradient(120% 110% at 86% 100%, rgba(178, 44, 233, 0.18) 0%, transparent 56%),
        linear-gradient(160deg, rgba(142, 68, 238, 0.08) 0%, rgba(178, 44, 233, 0.04) 100%);
  border: 1px solid rgba(142, 68, 238, 0.168);
}
html[data-design="new"] .hero-disc {
  background: radial-gradient(circle at 50% 45%,
        rgba(142, 68, 238, 0.32) 0%, rgba(178, 44, 233, 0.16) 58%, transparent 74%);
  box-shadow: 0 0 45px rgba(142, 68, 238, 0.099), inset 0 0 30px rgba(255, 255, 255, 0.05);
}
html[data-design="new"] .hero-equalizer span {
  background: linear-gradient(180deg, #c9a5fc 0%, #b22ce9 100%);
  box-shadow: 0 0 12px rgba(158, 93, 246, 0.203);
}
html[data-design="new"] .hero-pulse {
  border: 1px solid rgba(201, 165, 252, 0.24);
}
html[data-design="new"] .hero-drop {
  border: 1px solid rgba(178, 44, 233, 0.27);
  background: linear-gradient(135deg, rgba(178, 44, 233, 0.16) 0%, rgba(142, 68, 238, 0.12) 100%);
  box-shadow: 0 0 26px rgba(178, 44, 233, 0.081);
}
html[data-design="new"] .hero-drop.is-claimed {
  background: linear-gradient(135deg, rgba(52, 211, 153, 0.14) 0%, rgba(142, 68, 238, 0.1) 100%);
}
html[data-design="new"] .hero-drop-icon {
  background: rgba(14, 10, 19, 0.55);
}
html[data-design="new"] .hero-drop-btn {
  background: linear-gradient(135deg, #8e44ee 0%, #b22ce9 100%);
}
html[data-design="new"] .hero-drop-btn:hover {
  box-shadow: 0 0 22px rgba(178, 44, 233, 0.18);
}
html[data-design="new"] .kind-chip:hover {
  background: rgba(142, 68, 238, 0.15);
}
html[data-design="new"] .kind-chip.active {
  background: rgba(142, 68, 238, 0.3);
  border-color: rgba(142, 68, 238, 0.45);
  box-shadow: 0 0 14px rgba(142, 68, 238, 0.126);
}
html[data-design="new"] .list-panel {
  background: rgba(142, 68, 238, 0.08);
  border: 1px solid rgba(142, 68, 238, 0.15);
  box-shadow: 0 0 50px rgba(142, 68, 238, 0.09), inset 0 1px 0 rgba(255,255,255,0.1);
}
html[data-design="new"] .track-row {
  background: linear-gradient(135deg, rgba(142, 68, 238, 0.06) 0%, rgba(178, 44, 233, 0.03) 100%);
  border: 1px solid rgba(142, 68, 238, 0.12);
}
html[data-design="new"] .track-row.skeleton {
  background: linear-gradient(100deg,
        rgba(142, 68, 238, 0.06) 30%,
        rgba(142, 68, 238, 0.16) 50%,
        rgba(142, 68, 238, 0.06) 70%);
  background-size: 250% 100%;
}
html[data-design="new"] .track-row::before {
  background: linear-gradient(90deg, transparent 0%, rgba(142, 68, 238, 0.1) 50%, transparent 100%);
}
html[data-design="new"] .track-row:hover {
  background: linear-gradient(135deg, rgba(142, 68, 238, 0.15) 0%, rgba(178, 44, 233, 0.08) 100%);
  border-color: rgba(142, 68, 238, 0.36);
  box-shadow: 0 8px 32px rgba(142, 68, 238, 0.113), inset 0 1px 0 rgba(255,255,255,0.1);
}
html[data-design="new"] .track-row:hover .track-cover {
  box-shadow: 0 0 30px rgba(142, 68, 238, 0.18);
}
html[data-design="new"] .track-cover {
  background: linear-gradient(135deg, #c18bfa 0%, #c251f1 100%);
}
html[data-design="new"] .track-cover.c1 {
  background: linear-gradient(135deg, #c18bfa 0%, #c251f1 100%);
}
html[data-design="new"] .track-cover.c2 {
  background: linear-gradient(135deg, #823ef9 0%, #34d399 100%);
}
html[data-design="new"] .track-cover.c4 {
  background: linear-gradient(135deg, #b22ce9 0%, #9b35f6 100%);
}
html[data-design="new"] .sound-cover.tone-0 {
  background: linear-gradient(135deg, #c18bfa 0%, #c251f1 100%);
}
html[data-design="new"] .sound-cover.tone-1 {
  background: linear-gradient(135deg, #823ef9 0%, #34d399 100%);
}
html[data-design="new"] .sound-cover.tone-3 {
  background: linear-gradient(135deg, #b22ce9 0%, #9b35f6 100%);
}
html[data-design="new"] .sound-cover.tone-4 {
  background: linear-gradient(135deg, #4e11e3 0%, #6e1ef5 100%);
}
html[data-design="new"] .sound-cover.tone-6 {
  background: linear-gradient(135deg, #4ade80 0%, #4c0dd2 100%);
}
html[data-design="new"] .sound-cover.tone-7 {
  background: linear-gradient(135deg, #9e5df6 0%, #4e11e3 100%);
}
html[data-design="new"] .track-uploader {
  background: rgba(12, 8, 16, 0.55);
}
html[data-design="new"] .track-uploader:hover {
  background: rgba(142, 68, 238, 0.4);
  border-color: rgba(142, 68, 238, 0.42);
}
html[data-design="new"] .uploader-avatar {
  background: linear-gradient(135deg, #c18bfa 0%, #c251f1 100%);
  background-size: cover;
  background-position: center;
}
html[data-design="new"] .track-name {
  background: linear-gradient(135deg, #ffffff 0%, #ece0ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
}
html[data-design="new"] .track-tag {
  background: linear-gradient(135deg, rgba(142, 68, 238, 0.2) 0%, rgba(178, 44, 233, 0.15) 100%);
  border: 1px solid rgba(142, 68, 238, 0.24);
}
html[data-design="new"] .track-row:hover .track-tag {
  background: linear-gradient(135deg, rgba(142, 68, 238, 0.4) 0%, rgba(178, 44, 233, 0.3) 100%);
  border-color: rgba(142, 68, 238, 0.48);
  box-shadow: 0 0 15px rgba(142, 68, 238, 0.113);
}
html[data-design="new"] .track-button {
  border: 1.5px solid rgba(142, 68, 238, 0.36);
  background: linear-gradient(135deg, rgba(142, 68, 238, 0.2) 0%, rgba(178, 44, 233, 0.15) 100%);
}
html[data-design="new"] .track-button:hover {
  background: linear-gradient(135deg, rgba(142, 68, 238, 0.4) 0%, rgba(178, 44, 233, 0.3) 100%);
  border-color: rgba(142, 68, 238, 0.54);
  box-shadow: 0 0 25px rgba(142, 68, 238, 0.18), inset 0 1px 0 rgba(255,255,255,0.15);
}
html[data-design="new"] .report-button {
  background: linear-gradient(135deg, rgba(248, 113, 113, 0.14) 0%, rgba(178, 44, 233, 0.1) 100%);
}
html[data-design="new"] .report-button:hover {
  background: linear-gradient(135deg, rgba(248, 113, 113, 0.3) 0%, rgba(178, 44, 233, 0.2) 100%);
}
html[data-design="new"] .play-inline-button {
  background: linear-gradient(135deg, rgba(52, 211, 153, 0.16) 0%, rgba(142, 68, 238, 0.1) 100%);
}
html[data-design="new"] .play-inline-button:hover {
  background: linear-gradient(135deg, rgba(52, 211, 153, 0.32) 0%, rgba(142, 68, 238, 0.2) 100%);
}
html[data-design="new"] .modal-overlay {
  background: rgba(7, 5, 10, 0.72);
}
html[data-design="new"] .modal-box {
  background: linear-gradient(160deg, #17121f 0%, #16101e 100%);
  border: 1px solid rgba(142, 68, 238, 0.21);
}
html[data-design="new"] .sponsors-list {
  scrollbar-color: rgba(142, 68, 238, 0.5) rgba(255,255,255,0.05);
}
html[data-design="new"] .sponsors-list::-webkit-scrollbar-thumb {
  background: rgba(142, 68, 238, 0.5);
}
html[data-design="new"] .sponsors-list::-webkit-scrollbar-thumb:hover {
  background: rgba(142, 68, 238, 0.75);
}
html[data-design="new"] .sponsor-item:hover {
  background: rgba(142, 68, 238, 0.14);
  border-color: rgba(142, 68, 238, 0.27);
}
html[data-design="new"] .howto-step-num {
  background: linear-gradient(135deg, rgba(142, 68, 238, 0.35) 0%, rgba(178, 44, 233, 0.25) 100%);
  border: 1px solid rgba(142, 68, 238, 0.3);
}
html[data-design="new"] .modal-btn.primary {
  border-color: rgba(142, 68, 238, 0.42);
  background: linear-gradient(135deg, rgba(142, 68, 238, 0.35) 0%, rgba(178, 44, 233, 0.25) 100%);
}
html[data-design="new"] .toast {
  background: linear-gradient(160deg, #17121f 0%, #16101e 100%);
  border: 1px solid rgba(142, 68, 238, 0.24);
}
html[data-design="new"] .toast.info {
  border-color: rgba(142, 68, 238, 0.33);
}
@media (max-width: 1000px) {
  html[data-design="new"] .nav.mobile-open {
    background: rgba(9, 7, 11, 0.35);
  }
  html[data-design="new"] .nav.left.mobile-open .nav-close {
    border: 1px solid rgba(142, 68, 238, 0.24);
    background: rgba(142, 68, 238, 0.12);
  }
  html[data-design="new"] .nav-item:hover {
    background: rgba(142, 68, 238, 0.12);
  }
  html[data-design="new"] .nav-item.active {
    background: rgba(142, 68, 238, 0.16);
  }
}

html[data-design="new"] {
  --bg: #0e0a13;
  --primary: #8e44ee;
  --primary-glow: rgba(142, 68, 238, 0.3);
  --accent: #b22ce9;
  --accent-glow: rgba(178, 44, 233, 0.25);
}
html[data-design="new"] body {
  background: linear-gradient(135deg, #0e0a13 0%, #1a1421 50%, #140e1b 100%);
}
html[data-design="new"] .site-loader {
  background: radial-gradient(circle at center, rgba(142, 68, 238, 0.18), rgba(14, 10, 19, 0.96) 45%, rgb(6, 5, 9) 100%);
}
html[data-design="new"] .loader-art {
  filter: drop-shadow(0 0 28px rgba(165, 74, 255, 0.315));
}
html[data-design="new"] .loader-progress-fill {
  background: linear-gradient(90deg, #892dee, #d4a4ff, #eed9ff);
}
html[data-design="new"] .page {
  background: rgba(20, 14, 27, 0.7);
  box-shadow: 0 50px 150px rgba(0,0,0,0.8),
        inset 0 1px 0 rgba(255,255,255,0.05),
        0 0 150px rgba(142, 68, 238, 0.068),
        inset 0 0 100px rgba(142, 68, 238, 0.023);
}
html[data-design="new"] .topbar {
  background: #110c17;
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  html[data-design="new"] .topbar::before {
    background: rgba(17, 12, 23, 0.42);
  }
}
html[data-design="new"] .nav-item:hover {
  background: rgba(142, 68, 238, 0.15);
  border-color: rgba(142, 68, 238, 0.18);
}
html[data-design="new"] .nav-item.active {
  background: rgba(142, 68, 238, 0.25);
  border-color: rgba(142, 68, 238, 0.3);
  box-shadow: 0 0 20px rgba(142, 68, 238, 0.09);
}
html[data-design="new"] .nav-plus-sign {
  background: linear-gradient(135deg, #9b35f6 0%, #b22ce9 100%);
  -webkit-background-clip: text;
  background-clip: text;
}
html[data-design="new"] .dropdown-menu {
  background: rgba(9, 8, 10, 0.95);
}
html[data-design="new"] .lang-btn {
  border: 1.5px solid rgba(142, 68, 238, 0.3);
  background: linear-gradient(135deg, rgba(142, 68, 238, 0.15) 0%, rgba(178, 44, 233, 0.1) 100%);
}
html[data-design="new"] .lang-btn:hover {
  background: linear-gradient(135deg, rgba(142, 68, 238, 0.3) 0%, rgba(178, 44, 233, 0.2) 100%);
  border-color: rgba(142, 68, 238, 0.48);
  box-shadow: 0 0 20px rgba(142, 68, 238, 0.158);
}
html[data-design="new"] .profile-btn {
  border: 1.5px solid rgba(142, 68, 238, 0.3);
  background: linear-gradient(135deg, rgba(142, 68, 238, 0.15) 0%, rgba(178, 44, 233, 0.1) 100%);
}
html[data-design="new"] .profile-btn:hover {
  background: linear-gradient(135deg, rgba(142, 68, 238, 0.3) 0%, rgba(178, 44, 233, 0.2) 100%);
  border-color: rgba(142, 68, 238, 0.48);
  box-shadow: 0 0 20px rgba(142, 68, 238, 0.158);
}
html[data-design="new"] .profile-avatar {
  background: linear-gradient(135deg, rgba(142, 68, 238, 0.3) 0%, rgba(178, 44, 233, 0.2) 100%);
  border: 1.5px solid rgba(142, 68, 238, 0.3);
}
html[data-design="new"] .profile-btn:hover .profile-avatar {
  box-shadow: 0 0 12px rgba(142, 68, 238, 0.18);
}
html[data-design="new"] .menu-toggle {
  border: 1px solid rgba(142, 68, 238, 0.24);
  background: rgba(142, 68, 238, 0.1);
}
html[data-design="new"] .menu-toggle:hover {
  background: rgba(142, 68, 238, 0.18);
  border-color: rgba(142, 68, 238, 0.36);
  box-shadow: 0 0 12px rgba(142, 68, 238, 0.09);
}
html[data-design="new"] .invite-head {
  background: linear-gradient(135deg, rgba(142, 68, 238, 0.12) 0%, rgba(178, 44, 233, 0.06) 100%);
  border: 1px solid rgba(142, 68, 238, 0.18);
}
html[data-design="new"] .invite-panel {
  border: 1px solid rgba(142, 68, 238, 0.12);
  background: linear-gradient(135deg, rgba(142, 68, 238, 0.06), rgba(178, 44, 233, 0.03));
}
html[data-design="new"] .invite-link-card {
  border: 1px solid rgba(142, 68, 238, 0.12);
  background: linear-gradient(135deg, rgba(142, 68, 238, 0.06), rgba(178, 44, 233, 0.03));
}
html[data-design="new"] .invite-link-card:hover {
  border-color: rgba(142, 68, 238, 0.36);
  box-shadow: 0 8px 24px rgba(142, 68, 238, 0.09);
}
html[data-design="new"] .invite-link-input:focus {
  border-color: rgba(142, 68, 238, 0.36);
}
html[data-design="new"] .invite-share {
  color: #c9a5fc;
}
html[data-design="new"] .invite-stat {
  border: 1px solid rgba(142, 68, 238, 0.12);
  background: linear-gradient(135deg, rgba(142, 68, 238, 0.06), rgba(178, 44, 233, 0.03));
}
html[data-design="new"] .invite-stat.is-main {
  border-color: rgba(142, 68, 238, 0.27);
  background: linear-gradient(135deg, rgba(142, 68, 238, 0.16), rgba(178, 44, 233, 0.07));
}
html[data-design="new"] .modal-overlay {
  background: rgba(7, 5, 10, 0.72);
}
html[data-design="new"] .modal-box {
  background: linear-gradient(160deg, #17121f 0%, #16101e 100%);
  border: 1px solid rgba(142, 68, 238, 0.21);
}
html[data-design="new"] .sponsors-list {
  scrollbar-color: rgba(142, 68, 238, 0.5) rgba(255,255,255,0.05);
}
html[data-design="new"] .sponsors-list::-webkit-scrollbar-thumb {
  background: rgba(142, 68, 238, 0.5);
}
html[data-design="new"] .sponsors-list::-webkit-scrollbar-thumb:hover {
  background: rgba(142, 68, 238, 0.75);
}
html[data-design="new"] .sponsor-item:hover {
  background: rgba(142, 68, 238, 0.14);
  border-color: rgba(142, 68, 238, 0.27);
}
html[data-design="new"] .howto-step-num {
  background: linear-gradient(135deg, rgba(142, 68, 238, 0.35) 0%, rgba(178, 44, 233, 0.25) 100%);
  border: 1px solid rgba(142, 68, 238, 0.3);
}
html[data-design="new"] .modal-btn.primary {
  border-color: rgba(142, 68, 238, 0.42);
  background: linear-gradient(135deg, rgba(142, 68, 238, 0.35) 0%, rgba(178, 44, 233, 0.25) 100%);
}
html[data-design="new"] .toast {
  background: linear-gradient(160deg, #17121f 0%, #16101e 100%);
  border: 1px solid rgba(142, 68, 238, 0.24);
}
html[data-design="new"] .toast.info {
  border-color: rgba(142, 68, 238, 0.33);
}
@media (max-width: 1000px) {
  html[data-design="new"] .nav.mobile-open {
    background: rgba(9, 7, 11, 0.35);
  }
  html[data-design="new"] .nav.left.mobile-open .nav-close {
    border: 1px solid rgba(142, 68, 238, 0.24);
    background: rgba(142, 68, 238, 0.12);
  }
  html[data-design="new"] .nav-item:hover {
    background: rgba(142, 68, 238, 0.12);
  }
  html[data-design="new"] .nav-item.active {
    background: rgba(142, 68, 238, 0.16);
  }
}

html[data-design="new"] {
  --grad-1: linear-gradient(135deg, #8e44ee 0%, #9b35f6 52%, #b22ce9 100%);
  --grad-2: linear-gradient(135deg, #4e11e3 0%, #8e44ee 55%, #973cf4 100%);
  --grad-3: linear-gradient(135deg, #c251f1 0%, #fb7185 45%, #fbbf24 100%);
  --bg: #0e0a13;
  --primary: #8e44ee;
  --primary-glow: rgba(142, 68, 238, 0.3);
  --accent: #b22ce9;
  --accent-glow: rgba(178, 44, 233, 0.25);
}
html[data-design="new"] body {
  background: linear-gradient(135deg, #0e0a13 0%, #1a1421 50%, #140e1b 100%);
}
html[data-design="new"] .site-loader {
  background: radial-gradient(circle at center, rgba(142, 68, 238, 0.18), rgba(14, 10, 19, 0.96) 45%, rgb(6, 5, 9) 100%);
}
html[data-design="new"] .loader-art {
  filter: drop-shadow(0 0 28px rgba(165, 74, 255, 0.315));
}
html[data-design="new"] .loader-progress-fill {
  background: linear-gradient(90deg, #892dee, #d4a4ff, #eed9ff);
}
html[data-design="new"] .page {
  background: rgba(20, 14, 27, 0.7);
  box-shadow: 0 50px 150px rgba(0,0,0,0.8),
        inset 0 1px 0 rgba(255,255,255,0.05),
        0 0 150px rgba(142, 68, 238, 0.068),
        inset 0 0 100px rgba(142, 68, 238, 0.023);
}
html[data-design="new"] .topbar {
  background: #110c17;
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  html[data-design="new"] .topbar::before {
    background: rgba(17, 12, 23, 0.42);
  }
}
html[data-design="new"] .nav-item:hover {
  background: rgba(142, 68, 238, 0.15);
  border-color: rgba(142, 68, 238, 0.18);
}
html[data-design="new"] .nav-item.active {
  background: rgba(142, 68, 238, 0.25);
  border-color: rgba(142, 68, 238, 0.3);
  box-shadow: 0 0 20px rgba(142, 68, 238, 0.09);
}
html[data-design="new"] .nav-plus-sign {
  background: linear-gradient(135deg, #9b35f6 0%, #b22ce9 100%);
  -webkit-background-clip: text;
  background-clip: text;
}
html[data-design="new"] .dropdown-menu {
  background: rgba(9, 8, 10, 0.95);
}
html[data-design="new"] .lang-btn {
  border: 1.5px solid rgba(142, 68, 238, 0.3);
  background: linear-gradient(135deg, rgba(142, 68, 238, 0.15) 0%, rgba(178, 44, 233, 0.1) 100%);
}
html[data-design="new"] .lang-btn:hover {
  background: linear-gradient(135deg, rgba(142, 68, 238, 0.3) 0%, rgba(178, 44, 233, 0.2) 100%);
  border-color: rgba(142, 68, 238, 0.48);
  box-shadow: 0 0 20px rgba(142, 68, 238, 0.158);
}
html[data-design="new"] .profile-btn {
  border: 1.5px solid rgba(142, 68, 238, 0.3);
  background: linear-gradient(135deg, rgba(142, 68, 238, 0.15) 0%, rgba(178, 44, 233, 0.1) 100%);
}
html[data-design="new"] .profile-btn:hover {
  background: linear-gradient(135deg, rgba(142, 68, 238, 0.3) 0%, rgba(178, 44, 233, 0.2) 100%);
  border-color: rgba(142, 68, 238, 0.48);
  box-shadow: 0 0 20px rgba(142, 68, 238, 0.158);
}
html[data-design="new"] .profile-avatar {
  background: linear-gradient(135deg, rgba(142, 68, 238, 0.3) 0%, rgba(178, 44, 233, 0.2) 100%);
  border: 1.5px solid rgba(142, 68, 238, 0.3);
}
html[data-design="new"] .profile-btn:hover .profile-avatar {
  box-shadow: 0 0 12px rgba(142, 68, 238, 0.18);
}
html[data-design="new"] .menu-toggle {
  border: 1px solid rgba(142, 68, 238, 0.24);
  background: rgba(142, 68, 238, 0.1);
}
html[data-design="new"] .menu-toggle:hover {
  background: rgba(142, 68, 238, 0.18);
  border-color: rgba(142, 68, 238, 0.36);
  box-shadow: 0 0 12px rgba(142, 68, 238, 0.09);
}
html[data-design="new"] .library-search {
  border: 1px solid rgba(158, 93, 246, 0.21);
  background: rgba(10, 7, 14, 0.45);
}
html[data-design="new"] .library-search:hover {
  border-color: rgba(158, 93, 246, 0.33);
}
html[data-design="new"] .library-search:focus-within {
  border-color: rgba(193, 139, 250, 0.51);
  background: rgba(10, 7, 14, 0.6);
  box-shadow: 0 0 0 4px rgba(151, 60, 244, 0.072);
}
html[data-design="new"] .library-search:focus-within .library-search-icon {
  color: #d7b5fd;
}
html[data-design="new"] .library-search-group .ai-open-btn {
  box-shadow: 0 8px 22px rgba(155, 53, 246, 0.126);
}
html[data-design="new"] .chip {
  background: rgba(142, 68, 238, 0.1);
  border: 1px solid rgba(142, 68, 238, 0.18);
}
html[data-design="new"] .chip:hover {
  background: rgba(142, 68, 238, 0.2);
  border-color: rgba(142, 68, 238, 0.36);
}
html[data-design="new"] .chip.active {
  background: rgba(142, 68, 238, 0.3);
  border-color: rgba(142, 68, 238, 0.48);
  box-shadow: 0 0 15px rgba(142, 68, 238, 0.135);
}
html[data-design="new"] .seg {
  background: rgba(10, 7, 14, 0.38);
}
html[data-design="new"] .seg .chip.active {
  background: rgba(142, 68, 238, 0.34);
  box-shadow: inset 0 0 0 1px rgba(158, 93, 246, 0.27);
}
html[data-design="new"] .lib-pop-btn {
  background: rgba(10, 7, 14, 0.38);
}
html[data-design="new"] .lib-pop-btn:hover, html[data-design="new"] .lib-pop.open .lib-pop-btn {
  border-color: rgba(158, 93, 246, 0.33);
}
html[data-design="new"] .lib-pop.has-value .lib-pop-btn {
  border-color: rgba(158, 93, 246, 0.48);
  background: rgba(142, 68, 238, 0.26);
}
html[data-design="new"] .lib-pop-value {
  color: #ddc7fe;
}
html[data-design="new"] .lib-pop-panel {
  background: #171120;
}
html[data-design="new"] .lib-scroll-btn {
  background: #20172b;
}
html[data-design="new"] .lib-scroll-btn:hover {
  background: #412666;
}
html[data-design="new"] .lib-active-chip {
  border: 1px solid rgba(158, 93, 246, 0.36);
  background: rgba(142, 68, 238, 0.2);
}
html[data-design="new"] .lib-active-chip:hover {
  background: rgba(142, 68, 238, 0.34);
}
html[data-design="new"] .library-tab:hover {
  background: rgba(142, 68, 238, 0.15);
}
html[data-design="new"] .library-tab.active {
  background: rgba(142, 68, 238, 0.3);
  border-color: rgba(142, 68, 238, 0.48);
  box-shadow: 0 0 15px rgba(142, 68, 238, 0.135);
}
html[data-design="new"] .track-button.sound-action.active {
  background: rgba(142, 68, 238, 0.32);
  border-color: rgba(142, 68, 238, 0.51);
}
html[data-design="new"] .list-panel {
  background: rgba(142, 68, 238, 0.08);
  border: 1px solid rgba(142, 68, 238, 0.15);
  box-shadow: 0 0 50px rgba(142, 68, 238, 0.09), inset 0 1px 0 rgba(255,255,255,0.1);
}
html[data-design="new"] .artist-card {
  border: 1px solid rgba(142, 68, 238, 0.096);
  background: linear-gradient(160deg, rgba(142, 68, 238, 0.07) 0%, rgba(178, 44, 233, 0.025) 100%);
}
html[data-design="new"] .artist-card:hover, html[data-design="new"] .artist-card:focus-visible {
  border-color: rgba(158, 93, 246, 0.3);
  background: linear-gradient(160deg, rgba(142, 68, 238, 0.14) 0%, rgba(178, 44, 233, 0.06) 100%);
  box-shadow: 0 12px 30px rgba(16, 12, 22, 0.203);
}
html[data-design="new"] .artist-card:hover .artist-card-cover, html[data-design="new"] .artist-card:focus-visible .artist-card-cover {
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.45), 0 0 0 3px rgba(158, 93, 246, 0.248);
}
html[data-design="new"] .artist-card-likes {
  color: #e1a8f9;
}
html[data-design="new"] .artist-hero {
  background: radial-gradient(120% 160% at 0% 0%, rgba(var(--artist-tint), 0.34) 0%, rgba(var(--artist-tint), 0.1) 45%, transparent 75%),
        linear-gradient(135deg, rgba(142, 68, 238, 0.08) 0%, rgba(178, 44, 233, 0.04) 100%);
}
html[data-design="new"] .artist-play {
  box-shadow: 0 8px 22px rgba(155, 53, 246, 0.158);
}
html[data-design="new"] .artist-play:hover:not(:disabled), html[data-design="new"] .artist-play:focus-visible {
  box-shadow: 0 10px 28px rgba(155, 53, 246, 0.225);
}
html[data-design="new"] .artist-partner:hover, html[data-design="new"] .artist-partner:focus-visible {
  border-color: rgba(158, 93, 246, 0.3);
  background: rgba(142, 68, 238, 0.14);
}
html[data-design="new"] .track-row {
  background: linear-gradient(135deg, rgba(142, 68, 238, 0.06) 0%, rgba(178, 44, 233, 0.03) 100%);
  border: 1px solid rgba(142, 68, 238, 0.12);
}
html[data-design="new"] .track-row.skeleton {
  background: linear-gradient(100deg,
        rgba(142, 68, 238, 0.06) 30%,
        rgba(142, 68, 238, 0.16) 50%,
        rgba(142, 68, 238, 0.06) 70%);
  background-size: 250% 100%;
}
html[data-design="new"] .track-row:hover {
  background: linear-gradient(135deg, rgba(142, 68, 238, 0.15) 0%, rgba(178, 44, 233, 0.08) 100%);
  border-color: rgba(142, 68, 238, 0.36);
  box-shadow: 0 8px 32px rgba(142, 68, 238, 0.113), inset 0 1px 0 rgba(255,255,255,0.1);
}
html[data-design="new"] .track-row:hover .track-cover {
  box-shadow: 0 0 30px rgba(142, 68, 238, 0.18);
}
html[data-design="new"] .track-cover {
  background: linear-gradient(135deg, #c18bfa 0%, #c251f1 100%);
}
html[data-design="new"] .track-cover.c1 {
  background: linear-gradient(135deg, #c18bfa 0%, #c251f1 100%);
}
html[data-design="new"] .track-cover.c2 {
  background: linear-gradient(135deg, #823ef9 0%, #34d399 100%);
}
html[data-design="new"] .track-cover.c4 {
  background: linear-gradient(135deg, #b22ce9 0%, #9b35f6 100%);
}
html[data-design="new"] .track-uploader {
  background: rgba(12, 8, 16, 0.55);
}
html[data-design="new"] .track-uploader:hover {
  background: rgba(142, 68, 238, 0.4);
  border-color: rgba(142, 68, 238, 0.42);
}
html[data-design="new"] .uploader-avatar {
  background: linear-gradient(135deg, #c18bfa 0%, #c251f1 100%);
  background-size: cover;
  background-position: center;
}
html[data-design="new"] .track-name {
  background: linear-gradient(135deg, #ffffff 0%, #ece0ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
}
html[data-design="new"] .track-lyric {
  color: rgba(215, 181, 253, 0.85);
}
html[data-design="new"] .track-tag.track-genre {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.22) 0%, rgba(142, 68, 238, 0.14) 100%);
}
html[data-design="new"] .track-tag {
  background: linear-gradient(135deg, rgba(142, 68, 238, 0.22) 0%, rgba(178, 44, 233, 0.16) 100%);
  border: 1px solid rgba(142, 68, 238, 0.252);
}
html[data-design="new"] .track-button {
  border: 1.5px solid rgba(142, 68, 238, 0.36);
  background: linear-gradient(135deg, rgba(142, 68, 238, 0.2) 0%, rgba(178, 44, 233, 0.15) 100%);
}
html[data-design="new"] .track-button:hover {
  background: linear-gradient(135deg, rgba(142, 68, 238, 0.4) 0%, rgba(178, 44, 233, 0.3) 100%);
  border-color: rgba(142, 68, 238, 0.54);
  box-shadow: 0 0 25px rgba(142, 68, 238, 0.18), inset 0 1px 0 rgba(255,255,255,0.15);
}
html[data-design="new"] .report-button {
  background: linear-gradient(135deg, rgba(248, 113, 113, 0.14) 0%, rgba(178, 44, 233, 0.1) 100%);
}
html[data-design="new"] .report-button:hover {
  background: linear-gradient(135deg, rgba(248, 113, 113, 0.3) 0%, rgba(178, 44, 233, 0.2) 100%);
}
html[data-design="new"] .play-inline-button {
  background: linear-gradient(135deg, rgba(52, 211, 153, 0.16) 0%, rgba(142, 68, 238, 0.1) 100%);
}
html[data-design="new"] .play-inline-button:hover {
  background: linear-gradient(135deg, rgba(52, 211, 153, 0.32) 0%, rgba(142, 68, 238, 0.2) 100%);
}
html[data-design="new"] .modal-overlay {
  background: rgba(7, 5, 10, 0.72);
}
html[data-design="new"] .modal-box {
  background: linear-gradient(160deg, #17121f 0%, #16101e 100%);
  border: 1px solid rgba(142, 68, 238, 0.21);
}
html[data-design="new"] .sponsors-list {
  scrollbar-color: rgba(142, 68, 238, 0.5) rgba(255,255,255,0.05);
}
html[data-design="new"] .sponsors-list::-webkit-scrollbar-thumb {
  background: rgba(142, 68, 238, 0.5);
}
html[data-design="new"] .sponsors-list::-webkit-scrollbar-thumb:hover {
  background: rgba(142, 68, 238, 0.75);
}
html[data-design="new"] .sponsor-item:hover {
  background: rgba(142, 68, 238, 0.14);
  border-color: rgba(142, 68, 238, 0.27);
}
html[data-design="new"] .howto-step-num {
  background: linear-gradient(135deg, rgba(142, 68, 238, 0.35) 0%, rgba(178, 44, 233, 0.25) 100%);
  border: 1px solid rgba(142, 68, 238, 0.3);
}
html[data-design="new"] .modal-btn.primary {
  border-color: rgba(142, 68, 238, 0.42);
  background: linear-gradient(135deg, rgba(142, 68, 238, 0.35) 0%, rgba(178, 44, 233, 0.25) 100%);
}
html[data-design="new"] .toast {
  background: linear-gradient(160deg, #17121f 0%, #16101e 100%);
  border: 1px solid rgba(142, 68, 238, 0.24);
}
html[data-design="new"] .toast.info {
  border-color: rgba(142, 68, 238, 0.33);
}
html[data-design="new"] .search-hint {
  border: 1px solid rgba(142, 68, 238, 0.21);
  background: rgba(142, 68, 238, 0.12);
}
html[data-design="new"] .page-btn {
  border: 1px solid rgba(142, 68, 238, 0.18);
  background: rgba(142, 68, 238, 0.1);
}
html[data-design="new"] .page-btn:hover:not(:disabled) {
  background: rgba(142, 68, 238, 0.25);
  border-color: rgba(142, 68, 238, 0.36);
}
@media (max-width: 1000px) {
  html[data-design="new"] .nav.mobile-open {
    background: rgba(9, 7, 11, 0.35);
  }
  html[data-design="new"] .nav.left.mobile-open .nav-close {
    border: 1px solid rgba(142, 68, 238, 0.24);
    background: rgba(142, 68, 238, 0.12);
  }
  html[data-design="new"] .nav-item:hover {
    background: rgba(142, 68, 238, 0.12);
  }
  html[data-design="new"] .nav-item.active {
    background: rgba(142, 68, 238, 0.16);
  }
}
html[data-design="new"] .sound-cover.tone-0 {
  background: linear-gradient(135deg, #c18bfa 0%, #c251f1 100%);
}
html[data-design="new"] .sound-cover.tone-1 {
  background: linear-gradient(135deg, #823ef9 0%, #34d399 100%);
}
html[data-design="new"] .sound-cover.tone-3 {
  background: linear-gradient(135deg, #b22ce9 0%, #9b35f6 100%);
}
html[data-design="new"] .sound-cover.tone-4 {
  background: linear-gradient(135deg, #4e11e3 0%, #6e1ef5 100%);
}
html[data-design="new"] .sound-cover.tone-6 {
  background: linear-gradient(135deg, #4ade80 0%, #4c0dd2 100%);
}
html[data-design="new"] .sound-cover.tone-7 {
  background: linear-gradient(135deg, #9e5df6 0%, #4e11e3 100%);
}
html[data-design="new"] .order-hint {
  border: 1px solid rgba(155, 53, 246, 0.21);
  background: linear-gradient(135deg, rgba(142, 68, 238, 0.12) 0%, rgba(178, 44, 233, 0.08) 100%);
}
html[data-design="new"] .order-hint-btn {
  box-shadow: 0 8px 24px rgba(155, 53, 246, 0.135);
}

html[data-design="new"] .auth-tab.is-active {
  background: linear-gradient(135deg, var(--primary), #973cf4);
}
html[data-design="new"] .auth-submit {
  background: linear-gradient(135deg, var(--primary), #973cf4);
}
html[data-design="new"] .auth-notice-info {
  background: rgba(142, 68, 238, 0.12);
  border: 1px solid rgba(142, 68, 238, 0.192);
  color: #ddc7fe;
}
html[data-design="new"] .auth-provider-ds {
  --brand: #9b5af2;
  --brand-line: rgba(135, 57, 240, 0.45);
  --brand-fill: rgba(135, 57, 240, 0.12);
  --brand-fill-hover: rgba(135, 57, 240, 0.2);
}
html[data-design="new"] .auth-captcha-reload:hover {
  border-color: rgba(142, 68, 238, 0.36);
}

html[data-design="new"] {
  --grad-1: linear-gradient(135deg, #8e44ee 0%, #9b35f6 52%, #b22ce9 100%);
  --grad-2: linear-gradient(135deg, #4e11e3 0%, #8e44ee 55%, #973cf4 100%);
  --grad-3: linear-gradient(135deg, #c251f1 0%, #fb7185 45%, #fbbf24 100%);
  --bg: #0e0a13;
  --primary: #8e44ee;
  --primary-glow: rgba(142, 68, 238, 0.3);
  --accent: #b22ce9;
  --accent-glow: rgba(178, 44, 233, 0.25);
}
html[data-design="new"] body {
  background: linear-gradient(135deg, #0e0a13 0%, #1a1421 50%, #140e1b 100%);
}
html[data-design="new"] .site-loader {
  background: radial-gradient(circle at center, rgba(142, 68, 238, 0.18), rgba(14, 10, 19, 0.96) 45%, rgb(6, 5, 9) 100%);
}
html[data-design="new"] .loader-art {
  filter: drop-shadow(0 0 28px rgba(165, 74, 255, 0.315));
}
html[data-design="new"] .loader-progress-fill {
  background: linear-gradient(90deg, #892dee, #d4a4ff, #eed9ff);
}
html[data-design="new"] .page {
  background: rgba(20, 14, 27, 0.7);
  box-shadow: 0 50px 150px rgba(0,0,0,0.8),
        inset 0 1px 0 rgba(255,255,255,0.05),
        0 0 150px rgba(142, 68, 238, 0.068),
        inset 0 0 100px rgba(142, 68, 238, 0.023);
}
html[data-design="new"] .topbar {
  background: #110c17;
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  html[data-design="new"] .topbar::before {
    background: rgba(17, 12, 23, 0.42);
  }
}
html[data-design="new"] .nav-item:hover {
  background: rgba(142, 68, 238, 0.15);
  border-color: rgba(142, 68, 238, 0.18);
}
html[data-design="new"] .nav-item.active {
  background: rgba(142, 68, 238, 0.25);
  border-color: rgba(142, 68, 238, 0.3);
  box-shadow: 0 0 20px rgba(142, 68, 238, 0.09);
}
html[data-design="new"] .nav-plus-sign {
  background: linear-gradient(135deg, #9b35f6 0%, #b22ce9 100%);
  -webkit-background-clip: text;
  background-clip: text;
}
html[data-design="new"] .dropdown-menu {
  background: rgba(9, 8, 10, 0.95);
}
html[data-design="new"] .lang-btn {
  border: 1.5px solid rgba(142, 68, 238, 0.3);
  background: linear-gradient(135deg, rgba(142, 68, 238, 0.15) 0%, rgba(178, 44, 233, 0.1) 100%);
}
html[data-design="new"] .lang-btn:hover {
  background: linear-gradient(135deg, rgba(142, 68, 238, 0.3) 0%, rgba(178, 44, 233, 0.2) 100%);
  border-color: rgba(142, 68, 238, 0.48);
  box-shadow: 0 0 20px rgba(142, 68, 238, 0.158);
}
html[data-design="new"] .profile-btn {
  border: 1.5px solid rgba(142, 68, 238, 0.3);
  background: linear-gradient(135deg, rgba(142, 68, 238, 0.15) 0%, rgba(178, 44, 233, 0.1) 100%);
}
html[data-design="new"] .profile-btn:hover {
  background: linear-gradient(135deg, rgba(142, 68, 238, 0.3) 0%, rgba(178, 44, 233, 0.2) 100%);
  border-color: rgba(142, 68, 238, 0.48);
  box-shadow: 0 0 20px rgba(142, 68, 238, 0.158);
}
html[data-design="new"] .profile-avatar {
  background: linear-gradient(135deg, rgba(142, 68, 238, 0.3) 0%, rgba(178, 44, 233, 0.2) 100%);
  border: 1.5px solid rgba(142, 68, 238, 0.3);
}
html[data-design="new"] .profile-btn:hover .profile-avatar {
  box-shadow: 0 0 12px rgba(142, 68, 238, 0.18);
}
html[data-design="new"] .menu-toggle {
  border: 1px solid rgba(142, 68, 238, 0.24);
  background: rgba(142, 68, 238, 0.1);
}
html[data-design="new"] .menu-toggle:hover {
  background: rgba(142, 68, 238, 0.18);
  border-color: rgba(142, 68, 238, 0.36);
  box-shadow: 0 0 12px rgba(142, 68, 238, 0.09);
}
html[data-design="new"] .modal-overlay {
  background: rgba(7, 5, 10, 0.72);
}
html[data-design="new"] .modal-box {
  background: linear-gradient(160deg, #17121f 0%, #16101e 100%);
  border: 1px solid rgba(142, 68, 238, 0.21);
}
html[data-design="new"] .sponsors-list {
  scrollbar-color: rgba(142, 68, 238, 0.5) rgba(255,255,255,0.05);
}
html[data-design="new"] .sponsors-list::-webkit-scrollbar-thumb {
  background: rgba(142, 68, 238, 0.5);
}
html[data-design="new"] .sponsors-list::-webkit-scrollbar-thumb:hover {
  background: rgba(142, 68, 238, 0.75);
}
html[data-design="new"] .sponsor-item:hover {
  background: rgba(142, 68, 238, 0.14);
  border-color: rgba(142, 68, 238, 0.27);
}
html[data-design="new"] .howto-step-num {
  background: linear-gradient(135deg, rgba(142, 68, 238, 0.35) 0%, rgba(178, 44, 233, 0.25) 100%);
  border: 1px solid rgba(142, 68, 238, 0.3);
}
html[data-design="new"] .modal-btn.primary {
  border-color: rgba(142, 68, 238, 0.42);
  background: linear-gradient(135deg, rgba(142, 68, 238, 0.35) 0%, rgba(178, 44, 233, 0.25) 100%);
}
html[data-design="new"] .toast {
  background: linear-gradient(160deg, #17121f 0%, #16101e 100%);
  border: 1px solid rgba(142, 68, 238, 0.24);
}
html[data-design="new"] .toast.info {
  border-color: rgba(142, 68, 238, 0.33);
}
@media (max-width: 1000px) {
  html[data-design="new"] .nav.mobile-open {
    background: rgba(9, 7, 11, 0.35);
  }
  html[data-design="new"] .nav.left.mobile-open .nav-close {
    border: 1px solid rgba(142, 68, 238, 0.24);
    background: rgba(142, 68, 238, 0.12);
  }
  html[data-design="new"] .nav-item:hover {
    background: rgba(142, 68, 238, 0.12);
  }
  html[data-design="new"] .nav-item.active {
    background: rgba(142, 68, 238, 0.16);
  }
}
html[data-design="new"] .od-shell {
  --od-panel: rgba(20, 14, 27, 0.72);
  --od-line: rgba(193, 148, 255, 0.14);
  --od-line-strong: rgba(193, 148, 255, 0.26);
}
html[data-design="new"] .od-intro {
  background: radial-gradient(60% 120% at 100% 0%, rgba(178, 44, 233, 0.14) 0%, transparent 60%),
        radial-gradient(50% 120% at 0% 100%, rgba(142, 68, 238, 0.16) 0%, transparent 60%),
        var(--od-panel);
}
html[data-design="new"] .od-howto span {
  background: rgba(155, 53, 246, 0.18);
  border: 1px solid rgba(155, 53, 246, 0.27);
  color: #ebd5ff;
}
html[data-design="new"] .od-btn:hover {
  background: rgba(142, 68, 238, 0.14);
  border-color: rgba(158, 93, 246, 0.33);
}
html[data-design="new"] .od-btn:focus-visible {
  outline: 2px solid rgba(221, 199, 254, 0.6);
}
html[data-design="new"] .od-btn-primary {
  box-shadow: 0 8px 24px rgba(155, 53, 246, 0.126);
}
html[data-design="new"] .od-btn-primary:hover {
  box-shadow: 0 10px 30px rgba(155, 53, 246, 0.18);
}
html[data-design="new"] .od-tabs {
  background: rgba(14, 10, 19, 0.5);
}
html[data-design="new"] .od-tab.active {
  background: linear-gradient(135deg, rgba(142, 68, 238, 0.55) 0%, rgba(155, 53, 246, 0.45) 100%);
  box-shadow: inset 0 0 0 1px rgba(215, 181, 253, 0.158), 0 4px 14px rgba(142, 68, 238, 0.113);
}
html[data-design="new"] .od-tab-badge {
  background: #b22ce9;
  box-shadow: 0 0 0 2px rgba(14, 10, 19, 0.36);
}
html[data-design="new"] .od-panel.od-misses {
  border-color: rgba(78, 17, 227, 0.168);
}
html[data-design="new"] .od-miss {
  background: rgba(78, 17, 227, 0.06);
}
html[data-design="new"] .od-miss:hover {
  border-color: rgba(78, 17, 227, 0.36);
}
html[data-design="new"] .od-miss svg {
  color: #7845f8;
}
html[data-design="new"] .od-miss-count {
  background: rgba(78, 17, 227, 0.16);
  color: #bea5fc;
}
html[data-design="new"] .od-card:focus-visible {
  outline: 2px solid rgba(221, 199, 254, 0.6);
}
html[data-design="new"] .od-card-price {
  color: #f9f3ff;
}
html[data-design="new"] .od-kind-other {
  color: #ddd4ea;
}
html[data-design="new"] .od-status-in_progress {
  background: rgba(142, 68, 238, 0.22);
  color: #ddc7fe;
}
html[data-design="new"] .od-status-delivered {
  background: rgba(78, 17, 227, 0.16);
  color: #bea5fc;
}
html[data-design="new"] .od-maker {
  background: radial-gradient(120% 80% at 0% 0%, rgba(142, 68, 238, 0.1) 0%, transparent 60%),
        var(--od-panel);
}
html[data-design="new"] .od-ava-lg {
  box-shadow: 0 0 0 2px rgba(158, 93, 246, 0.158);
}
html[data-design="new"] .od-field input, html[data-design="new"] .od-field textarea, html[data-design="new"] .od-field select, html[data-design="new"] .od-chat-form textarea, html[data-design="new"] .od-ask textarea {
  background: rgba(12, 8, 16, 0.6);
}
html[data-design="new"] .od-field input:focus, html[data-design="new"] .od-field textarea:focus, html[data-design="new"] .od-field select:focus, html[data-design="new"] .od-chat-form textarea:focus, html[data-design="new"] .od-ask textarea:focus {
  border-color: rgba(155, 53, 246, 0.42);
  box-shadow: 0 0 0 3px rgba(155, 53, 246, 0.081);
}
html[data-design="new"] .od-field select option {
  background: #15101d;
}
html[data-design="new"] .od-field input[type="range"] {
  accent-color: #9b35f6;
}
html[data-design="new"] .od-check input {
  accent-color: #9b35f6;
}
html[data-design="new"] .od-kind-pick input:checked + span {
  border-color: rgba(155, 53, 246, 0.48);
  background: rgba(155, 53, 246, 0.14);
}
html[data-design="new"] .od-kind-pick input:focus-visible + span {
  outline: 2px solid rgba(221, 199, 254, 0.6);
}
html[data-design="new"] .od-steps li.done::after {
  background: linear-gradient(90deg, #9b35f6, #8e44ee);
}
html[data-design="new"] .od-steps i {
  background: rgba(14, 10, 19, 0.8);
}
html[data-design="new"] .od-steps li.next i {
  border-color: rgba(155, 53, 246, 0.42);
  color: #ebd5ff;
  box-shadow: 0 0 0 4px rgba(155, 53, 246, 0.068);
}
html[data-design="new"] .od-pay {
  border-color: rgba(155, 53, 246, 0.24);
  background: radial-gradient(90% 120% at 100% 0%, rgba(155, 53, 246, 0.12) 0%, transparent 60%), var(--od-panel);
}
html[data-design="new"] .od-method:hover {
  background: rgba(142, 68, 238, 0.12);
}
html[data-design="new"] .od-method:focus-visible {
  outline: 2px solid rgba(221, 199, 254, 0.6);
}
html[data-design="new"] .od-offer-deal strong {
  color: #f9f3ff;
}
html[data-design="new"] .od-offer-note {
  background: rgba(12, 8, 16, 0.45);
}
html[data-design="new"] .od-code-row {
  background: rgba(12, 8, 16, 0.5);
}
html[data-design="new"] .od-code {
  color: #f9f3ff;
}
html[data-design="new"] .od-link {
  color: #ddc7fe;
}
html[data-design="new"] .od-msg.own {
  background: rgba(142, 68, 238, 0.24);
  border-color: rgba(158, 93, 246, 0.24);
}
html[data-design="new"] .od-msg-event::before {
  background: #9b35f6;
  box-shadow: 0 0 0 3px rgba(155, 53, 246, 0.081);
}
html[data-design="new"] .od-msg-event + .od-msg-event::after {
  background: rgba(155, 53, 246, 0.3);
}
html[data-design="new"] .od-balance {
  background: radial-gradient(90% 120% at 100% 0%, rgba(178, 44, 233, 0.28) 0%, transparent 55%),
        radial-gradient(90% 120% at 0% 100%, rgba(142, 68, 238, 0.32) 0%, transparent 60%),
        #1a1323;
  border-color: rgba(155, 53, 246, 0.27);
  box-shadow: 0 16px 40px rgba(90, 29, 149, 0.113);
}
html[data-design="new"] .od-entry-main a {
  color: #ddc7fe;
}
html[data-design="new"] .od-payout-sending {
  color: #bea5fc;
}
@media (max-width: 760px) {
  html[data-design="new"] .od-howto li, html[data-design="new"] .od-howto li + li {
    background: rgba(12, 8, 16, 0.35);
  }
}

html[data-design="new"] {
  --grad-1: linear-gradient(135deg, #8e44ee 0%, #9b35f6 52%, #b22ce9 100%);
  --grad-2: linear-gradient(135deg, #4e11e3 0%, #8e44ee 55%, #973cf4 100%);
  --grad-3: linear-gradient(135deg, #c251f1 0%, #fb7185 45%, #fbbf24 100%);
  --bg: #0e0a13;
  --primary: #8e44ee;
  --primary-glow: rgba(142, 68, 238, 0.3);
  --accent: #b22ce9;
  --accent-glow: rgba(178, 44, 233, 0.25);
}
html[data-design="new"] body {
  background: linear-gradient(135deg, #0e0a13 0%, #1a1421 50%, #140e1b 100%);
}
html[data-design="new"] .site-loader {
  background: radial-gradient(circle at center, rgba(142, 68, 238, 0.18), rgba(14, 10, 19, 0.96) 45%, rgb(6, 5, 9) 100%);
}
html[data-design="new"] .loader-art {
  filter: drop-shadow(0 0 28px rgba(165, 74, 255, 0.315));
}
html[data-design="new"] .loader-progress-fill {
  background: linear-gradient(90deg, #892dee, #d4a4ff, #eed9ff);
}
html[data-design="new"] .page {
  background: rgba(20, 14, 27, 0.7);
  box-shadow: 0 50px 150px rgba(0,0,0,0.8),
        inset 0 1px 0 rgba(255,255,255,0.05),
        0 0 150px rgba(142, 68, 238, 0.068),
        inset 0 0 100px rgba(142, 68, 238, 0.023);
}
html[data-design="new"] .topbar {
  background: #110c17;
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  html[data-design="new"] .topbar::before {
    background: rgba(17, 12, 23, 0.42);
  }
}
html[data-design="new"] .nav-item:hover {
  background: rgba(142, 68, 238, 0.15);
  border-color: rgba(142, 68, 238, 0.18);
}
html[data-design="new"] .nav-item.active {
  background: rgba(142, 68, 238, 0.25);
  border-color: rgba(142, 68, 238, 0.3);
  box-shadow: 0 0 20px rgba(142, 68, 238, 0.09);
}
html[data-design="new"] .nav-plus-sign {
  background: linear-gradient(135deg, #9b35f6 0%, #b22ce9 100%);
  -webkit-background-clip: text;
  background-clip: text;
}
html[data-design="new"] .dropdown-menu {
  background: rgba(9, 8, 10, 0.95);
}
html[data-design="new"] .lang-btn {
  border: 1.5px solid rgba(142, 68, 238, 0.3);
  background: linear-gradient(135deg, rgba(142, 68, 238, 0.15) 0%, rgba(178, 44, 233, 0.1) 100%);
}
html[data-design="new"] .lang-btn:hover {
  background: linear-gradient(135deg, rgba(142, 68, 238, 0.3) 0%, rgba(178, 44, 233, 0.2) 100%);
  border-color: rgba(142, 68, 238, 0.48);
  box-shadow: 0 0 20px rgba(142, 68, 238, 0.158);
}
html[data-design="new"] .profile-btn {
  border: 1.5px solid rgba(142, 68, 238, 0.3);
  background: linear-gradient(135deg, rgba(142, 68, 238, 0.15) 0%, rgba(178, 44, 233, 0.1) 100%);
}
html[data-design="new"] .profile-btn:hover {
  background: linear-gradient(135deg, rgba(142, 68, 238, 0.3) 0%, rgba(178, 44, 233, 0.2) 100%);
  border-color: rgba(142, 68, 238, 0.48);
  box-shadow: 0 0 20px rgba(142, 68, 238, 0.158);
}
html[data-design="new"] .profile-avatar {
  background: linear-gradient(135deg, rgba(142, 68, 238, 0.3) 0%, rgba(178, 44, 233, 0.2) 100%);
  border: 1.5px solid rgba(142, 68, 238, 0.3);
}
html[data-design="new"] .profile-btn:hover .profile-avatar {
  box-shadow: 0 0 12px rgba(142, 68, 238, 0.18);
}
html[data-design="new"] .menu-toggle {
  border: 1px solid rgba(142, 68, 238, 0.24);
  background: rgba(142, 68, 238, 0.1);
}
html[data-design="new"] .menu-toggle:hover {
  background: rgba(142, 68, 238, 0.18);
  border-color: rgba(142, 68, 238, 0.36);
  box-shadow: 0 0 12px rgba(142, 68, 238, 0.09);
}
html[data-design="new"] .modal-overlay {
  background: rgba(7, 5, 10, 0.72);
}
html[data-design="new"] .modal-box {
  background: linear-gradient(160deg, #17121f 0%, #16101e 100%);
  border: 1px solid rgba(142, 68, 238, 0.21);
}
html[data-design="new"] .sponsors-list {
  scrollbar-color: rgba(142, 68, 238, 0.5) rgba(255,255,255,0.05);
}
html[data-design="new"] .sponsors-list::-webkit-scrollbar-thumb {
  background: rgba(142, 68, 238, 0.5);
}
html[data-design="new"] .sponsors-list::-webkit-scrollbar-thumb:hover {
  background: rgba(142, 68, 238, 0.75);
}
html[data-design="new"] .sponsor-item:hover {
  background: rgba(142, 68, 238, 0.14);
  border-color: rgba(142, 68, 238, 0.27);
}
html[data-design="new"] .howto-step-num {
  background: linear-gradient(135deg, rgba(142, 68, 238, 0.35) 0%, rgba(178, 44, 233, 0.25) 100%);
  border: 1px solid rgba(142, 68, 238, 0.3);
}
html[data-design="new"] .modal-btn.primary {
  border-color: rgba(142, 68, 238, 0.42);
  background: linear-gradient(135deg, rgba(142, 68, 238, 0.35) 0%, rgba(178, 44, 233, 0.25) 100%);
}
html[data-design="new"] .toast {
  background: linear-gradient(160deg, #17121f 0%, #16101e 100%);
  border: 1px solid rgba(142, 68, 238, 0.24);
}
html[data-design="new"] .toast.info {
  border-color: rgba(142, 68, 238, 0.33);
}
@media (max-width: 1000px) {
  html[data-design="new"] .nav.mobile-open {
    background: rgba(9, 7, 11, 0.35);
  }
  html[data-design="new"] .nav.left.mobile-open .nav-close {
    border: 1px solid rgba(142, 68, 238, 0.24);
    background: rgba(142, 68, 238, 0.12);
  }
  html[data-design="new"] .nav-item:hover {
    background: rgba(142, 68, 238, 0.12);
  }
  html[data-design="new"] .nav-item.active {
    background: rgba(142, 68, 238, 0.16);
  }
}
html[data-design="new"] .pl-hero {
  background: radial-gradient(90% 120% at 100% 0%, rgba(155, 53, 246, 0.16) 0%, transparent 60%),
        linear-gradient(135deg, rgba(142, 68, 238, 0.15) 0%, rgba(178, 44, 233, 0.08) 100%);
  border: 1px solid rgba(142, 68, 238, 0.18);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 0 40px rgba(142, 68, 238, 0.045);
}
html[data-design="new"] .pl-hero::after {
  background: radial-gradient(28% 34% at 12% 18%, rgba(178, 44, 233, 0.22) 0%, transparent 70%),
        radial-gradient(30% 36% at 88% 82%, rgba(245, 158, 11, 0.14) 0%, transparent 70%),
        radial-gradient(34% 40% at 62% 8%, rgba(142, 68, 238, 0.26) 0%, transparent 70%);
}
html[data-design="new"] .pl-brand-cat {
  background: linear-gradient(135deg, #c9a5fc 0%, #c251f1 55%, #fbbf24 100%);
  box-shadow: 0 10px 30px rgba(178, 44, 233, 0.158), 0 0 0 6px rgba(255, 255, 255, 0.04);
}
html[data-design="new"] .pl-cat-pill {
  box-shadow: 0 4px 14px rgba(155, 53, 246, 0.158);
}
html[data-design="new"] .pl-title {
  background: linear-gradient(135deg, #ffffff 0%, #ece0ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
}
html[data-design="new"] .pl-plan {
  background: linear-gradient(rgba(15, 11, 20, 0.94), rgba(15, 11, 20, 0.94)) padding-box,
        linear-gradient(135deg, rgba(158, 93, 246, 0.75) 0%, rgba(178, 44, 233, 0.55) 55%, rgba(251, 191, 36, 0.45) 100%) border-box;
  box-shadow: 0 22px 50px rgba(0, 0, 0, 0.35), 0 0 42px rgba(155, 53, 246, 0.072);
}
html[data-design="new"] .pl-seg-btn[aria-pressed="true"] {
  background: linear-gradient(135deg, rgba(142, 68, 238, 0.75), rgba(178, 44, 233, 0.6));
}
html[data-design="new"] .pl-gift-ava {
  background: linear-gradient(135deg, #9e5df6, #b22ce9) center / cover no-repeat;
}
html[data-design="new"] .pl-banner {
  border: 1px solid rgba(142, 68, 238, 0.27);
  background: rgba(142, 68, 238, 0.14);
}
html[data-design="new"] .pl-btn {
  border: 1.5px solid rgba(142, 68, 238, 0.42);
  background: linear-gradient(135deg, rgba(142, 68, 238, 0.35) 0%, rgba(178, 44, 233, 0.25) 100%);
}
html[data-design="new"] .pl-btn:hover {
  box-shadow: 0 8px 24px rgba(142, 68, 238, 0.135);
}
html[data-design="new"] .pl-btn:focus-visible {
  outline: 2px solid rgba(221, 199, 254, 0.6);
}
html[data-design="new"] .pl-btn-primary {
  box-shadow: 0 8px 26px rgba(155, 53, 246, 0.144);
}
html[data-design="new"] .pl-btn-primary:hover {
  box-shadow: 0 10px 30px rgba(155, 53, 246, 0.189);
}
html[data-design="new"] .pl-btn-ghost:hover {
  background: rgba(142, 68, 238, 0.14);
  border-color: rgba(142, 68, 238, 0.33);
}
html[data-design="new"] .pl-method:hover {
  border-color: rgba(158, 93, 246, 0.36);
  background: rgba(142, 68, 238, 0.12);
  box-shadow: 0 8px 24px rgba(142, 68, 238, 0.09);
}
html[data-design="new"] .pl-method:focus-visible {
  outline: 2px solid rgba(221, 199, 254, 0.6);
}
html[data-design="new"] .pl-method.is-busy {
  border-color: rgba(158, 93, 246, 0.42);
  background: rgba(142, 68, 238, 0.16);
}
html[data-design="new"] .pl-methods-list .pl-method:hover {
  background: rgba(142, 68, 238, 0.1);
}
html[data-design="new"] .pl-methods-list .pl-method:active {
  background: rgba(142, 68, 238, 0.16);
}
html[data-design="new"] .pl-methods-list .pl-method.is-busy {
  background: rgba(142, 68, 238, 0.16);
}
html[data-design="new"] .pl-coin {
  box-shadow: 0 0 0 2px rgba(24, 17, 32, 0.45);
}
html[data-design="new"] .pl-preview {
  background: radial-gradient(120% 70% at 100% 0%, rgba(var(--pv-rgb), 0.34) 0%, transparent 62%),
        radial-gradient(90% 60% at 0% 100%, rgba(var(--pv-rgb), 0.16) 0%, transparent 70%),
        linear-gradient(160deg, #120d18 0%, #0b080f 100%);
}
html[data-design="new"] .pv-banner {
  background: radial-gradient(circle at 18% 130%, rgba(255, 255, 255, 0.32) 0%, transparent 42%),
        radial-gradient(circle at 84% 18%, #fde68a 0%, transparent 34%),
        linear-gradient(120deg, #861feb 0%, #b22ce9 55%, #f59e0b 100%);
}
html[data-design="new"] .pv-ava {
  border: 3px solid rgba(13, 9, 18, 0.6);
  background: linear-gradient(135deg, rgb(var(--pv-rgb)) 0%, #b22ce9 100%);
  background-size: cover;
  background-position: center;
}
html[data-design="new"] .pv-name {
  background: linear-gradient(90deg, #eecffb 0%, #c251f1 45%, #d7b5fd 100%);
  -webkit-background-clip: text;
  background-clip: text;
}
html[data-design="new"] .pv-track-art::before {
  background: radial-gradient(circle at 80% 30%, #fbbf24 0%, transparent 34%),
        radial-gradient(circle at 62% 92%, #b22ce9 0%, transparent 42%),
        linear-gradient(120deg, #1d1628 0%, #861feb 100%);
}
html[data-design="new"] .pv-track-art::after {
  background: linear-gradient(90deg, rgba(14, 10, 19, 0.92) 0%, rgba(14, 10, 19, 0.6) 50%, rgba(14, 10, 19, 0.12) 100%);
}
html[data-design="new"] .pv-cover {
  background: linear-gradient(135deg, rgb(var(--pv-rgb)) 0%, #1d1628 100%);
}
html[data-design="new"] .pl-swatch {
  box-shadow: inset 0 0 0 3px rgba(14, 10, 19, 0.405);
}
html[data-design="new"] .pl-swatch:focus-visible {
  outline: 2px solid rgba(221, 199, 254, 0.6);
}
html[data-design="new"] .pl-section {
  background: linear-gradient(135deg, rgba(142, 68, 238, 0.06) 0%, rgba(178, 44, 233, 0.03) 100%);
  border: 1px solid rgba(142, 68, 238, 0.12);
}
html[data-design="new"] .pl-feature {
  background: linear-gradient(180deg, rgba(var(--fc), 0.07) 0%, rgba(14, 10, 19, 0.4) 55%);
}
html[data-design="new"] .pl-example {
  border: 1px solid rgba(155, 53, 246, 0.15);
  background: rgba(14, 10, 19, 0.5);
}
html[data-design="new"] .pl-example:hover, html[data-design="new"] .pl-example:focus-visible {
  border-color: rgba(155, 53, 246, 0.36);
  box-shadow: 0 12px 30px rgba(155, 53, 246, 0.081);
}
html[data-design="new"] .pl-example-banner {
  background: linear-gradient(120deg, #8e44ee, #b22ce9);
  background-repeat: no-repeat;
}
html[data-design="new"] .pl-example-ava {
  border: 3px solid rgba(13, 9, 18, 0.6);
  background: linear-gradient(135deg, #9e5df6, #b22ce9) center / cover no-repeat;
}
html[data-design="new"] .fd {
  background: radial-gradient(80% 90% at 50% 0%, rgba(var(--fc), 0.28) 0%, transparent 70%),
        linear-gradient(160deg, #130e1a 0%, #0c0911 100%);
}
html[data-design="new"] .fd-ai-q {
  background: linear-gradient(135deg, #8e44ee 0%, #9b35f6 100%);
}
html[data-design="new"] .fd-ava {
  background: linear-gradient(135deg, #9e5df6 0%, #b22ce9 100%);
  box-shadow: 0 0 0 2px rgba(13, 9, 18, 0.45);
}
html[data-design="new"] .fd-cover {
  background: linear-gradient(135deg, rgb(var(--fc)) 0%, #1d1628 100%);
}
html[data-design="new"] .fd-avatar-ring::before {
  background: conic-gradient(from 0deg, #611bf7, #9b35f6, #b22ce9, #fbbf24, #611bf7);
}
html[data-design="new"] .fd-avatar-ring img {
  border: 3px solid rgba(13, 9, 18, 0.6);
}
html[data-design="new"] .fd-gif {
  background: #4c0dd2;
  box-shadow: 0 4px 12px rgba(76, 13, 210, 0.203);
}
html[data-design="new"] .fd-banner::before {
  background: radial-gradient(circle at 82% 22%, #fde68a 0%, transparent 34%),
        linear-gradient(120deg, #861feb 0%, #b22ce9 55%, #f59e0b 100%);
}
html[data-design="new"] .fd-row .fd-ava {
  box-shadow: 0 0 0 3px rgba(13, 9, 18, 0.45);
}
html[data-design="new"] .fd-grad-name {
  background: linear-gradient(90deg, #eecffb 0%, #c251f1 40%, #fbbf24 100%);
  -webkit-background-clip: text;
  background-clip: text;
}
html[data-design="new"] .fd-bg-art::before {
  background: radial-gradient(circle at 25% 30%, #f59e0b 0%, transparent 32%),
        radial-gradient(circle at 75% 70%, #b22ce9 0%, transparent 36%),
        radial-gradient(circle at 70% 20%, #8e44ee 0%, transparent 30%),
        #1d1628;
}
html[data-design="new"] .fd-glass {
  background: rgba(12, 9, 17, 0.55);
}
html[data-design="new"] .fd-tabs span.on {
  border: 1px solid rgba(66, 6, 212, 0.48);
  background: rgba(66, 6, 212, 0.3);
}
html[data-design="new"] .fd-tone .fd-track {
  border-color: rgba(66, 6, 212, 0.27);
  background: rgba(66, 6, 212, 0.1);
}
html[data-design="new"] .fd-tone .fd-cover {
  background: linear-gradient(135deg, #4206d4 0%, #1d1628 100%);
}
html[data-design="new"] .fd-track-art::before {
  background: radial-gradient(circle at 80% 30%, #fbbf24 0%, transparent 34%),
        radial-gradient(circle at 62% 92%, #b22ce9 0%, transparent 42%),
        linear-gradient(120deg, #1d1628 0%, #861feb 100%);
}
html[data-design="new"] .fd-track-art::after {
  background: linear-gradient(90deg, rgba(14, 10, 19, 0.9) 0%, rgba(14, 10, 19, 0.45) 55%, rgba(14, 10, 19, 0.05) 100%);
}
html[data-design="new"] .fd-song-card {
  background: radial-gradient(circle at 90% 10%, rgba(var(--fc), 0.35) 0%, transparent 55%),
        rgba(12, 9, 17, 0.8);
}
html[data-design="new"] .c-prop {
  color: #b993fd;
}
html[data-design="new"] .c-val {
  color: #e1a8f9;
}
html[data-design="new"] .fd-rank.silver {
  border: 1px solid rgba(211, 203, 225, 0.24);
  background: linear-gradient(90deg, rgba(211, 203, 225, 0.16) 0%, rgba(211, 203, 225, 0.03) 100%);
}
html[data-design="new"] .fd-rank.silver b {
  color: #e7e2f0;
}
html[data-design="new"] .pl-where {
  border: 1px solid rgba(142, 68, 238, 0.15);
  background: rgba(142, 68, 238, 0.06);
}
html[data-design="new"] .pl-terms > div {
  border-left: 2px solid rgba(158, 93, 246, 0.21);
}
html[data-design="new"] .pl-result-box {
  --pl-result-color: #c9a5fc;
  --pl-result-glow: rgba(142, 68, 238, 0.42);
}
html[data-design="new"] .pl-result-box[data-state="ok"] {
  --pl-result-glow: rgba(155, 53, 246, 0.5);
  border-color: rgba(155, 53, 246, 0.3);
}
html[data-design="new"] .pl-result-close:focus-visible {
  outline: 2px solid rgba(221, 199, 254, 0.6);
}
html[data-design="new"] .pl-result-box[data-state="ok"] .pl-result-mark {
  background: radial-gradient(circle, rgba(155, 53, 246, 0.35) 0%, rgba(142, 68, 238, 0.08) 70%);
}
html[data-design="new"] .pl-result-chip {
  box-shadow: 0 6px 18px rgba(155, 53, 246, 0.158);
}
html[data-design="new"] .pl-result-facts > div {
  background: #17121f;
}

html[data-design="new"] {
  --bg: #0e0a13;
  --primary: #8e44ee;
  --primary-glow: rgba(142, 68, 238, 0.3);
  --accent: #b22ce9;
  --accent-glow: rgba(178, 44, 233, 0.25);
}
html[data-design="new"] body {
  background: linear-gradient(135deg, #0e0a13 0%, #1a1421 50%, #140e1b 100%);
}
html[data-design="new"] .site-loader {
  background: radial-gradient(circle at center, rgba(142, 68, 238, 0.18), rgba(14, 10, 19, 0.96) 45%, rgb(6, 5, 9) 100%);
}
html[data-design="new"] .loader-art {
  filter: drop-shadow(0 0 28px rgba(165, 74, 255, 0.315));
}
html[data-design="new"] .loader-progress-fill {
  background: linear-gradient(90deg, #892dee, #d4a4ff, #eed9ff);
}
html[data-design="new"] .page {
  background: rgba(20, 14, 27, 0.7);
  box-shadow: 0 50px 150px rgba(0,0,0,0.8),
        inset 0 1px 0 rgba(255,255,255,0.05),
        0 0 150px rgba(142, 68, 238, 0.068),
        inset 0 0 100px rgba(142, 68, 238, 0.023);
}
html[data-design="new"] .topbar {
  background: #110c17;
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  html[data-design="new"] .topbar::before {
    background: rgba(17, 12, 23, 0.42);
  }
}
html[data-design="new"] .nav-item:hover {
  background: rgba(142, 68, 238, 0.15);
  border-color: rgba(142, 68, 238, 0.18);
}
html[data-design="new"] .nav-item.active {
  background: rgba(142, 68, 238, 0.25);
  border-color: rgba(142, 68, 238, 0.3);
  box-shadow: 0 0 20px rgba(142, 68, 238, 0.09);
}
html[data-design="new"] .nav-plus-sign {
  background: linear-gradient(135deg, #9b35f6 0%, #b22ce9 100%);
  -webkit-background-clip: text;
  background-clip: text;
}
html[data-design="new"] .dropdown-menu {
  background: rgba(9, 8, 10, 0.95);
}
html[data-design="new"] .lang-btn {
  border: 1.5px solid rgba(142, 68, 238, 0.3);
  background: linear-gradient(135deg, rgba(142, 68, 238, 0.15) 0%, rgba(178, 44, 233, 0.1) 100%);
}
html[data-design="new"] .lang-btn:hover {
  background: linear-gradient(135deg, rgba(142, 68, 238, 0.3) 0%, rgba(178, 44, 233, 0.2) 100%);
  border-color: rgba(142, 68, 238, 0.48);
  box-shadow: 0 0 20px rgba(142, 68, 238, 0.158);
}
html[data-design="new"] .profile-btn {
  border: 1.5px solid rgba(142, 68, 238, 0.3);
  background: linear-gradient(135deg, rgba(142, 68, 238, 0.15) 0%, rgba(178, 44, 233, 0.1) 100%);
}
html[data-design="new"] .profile-btn:hover {
  background: linear-gradient(135deg, rgba(142, 68, 238, 0.3) 0%, rgba(178, 44, 233, 0.2) 100%);
  border-color: rgba(142, 68, 238, 0.48);
  box-shadow: 0 0 20px rgba(142, 68, 238, 0.158);
}
html[data-design="new"] .profile-avatar {
  background: linear-gradient(135deg, rgba(142, 68, 238, 0.3) 0%, rgba(178, 44, 233, 0.2) 100%);
  border: 1.5px solid rgba(142, 68, 238, 0.3);
}
html[data-design="new"] .profile-btn:hover .profile-avatar {
  box-shadow: 0 0 12px rgba(142, 68, 238, 0.18);
}
html[data-design="new"] .menu-toggle {
  border: 1px solid rgba(142, 68, 238, 0.24);
  background: rgba(142, 68, 238, 0.1);
}
html[data-design="new"] .menu-toggle:hover {
  background: rgba(142, 68, 238, 0.18);
  border-color: rgba(142, 68, 238, 0.36);
  box-shadow: 0 0 12px rgba(142, 68, 238, 0.09);
}
html[data-design="new"] .favs-header {
  background: linear-gradient(135deg, rgba(142, 68, 238, 0.12) 0%, rgba(178, 44, 233, 0.06) 100%);
  border: 1px solid rgba(142, 68, 238, 0.18);
}
html[data-design="new"] .favs-header h1 {
  background: linear-gradient(135deg, #ffffff 0%, #ece0ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
}
html[data-design="new"] .favs-login-gate {
  background: rgba(142, 68, 238, 0.08);
  border: 1px solid rgba(142, 68, 238, 0.15);
}
html[data-design="new"] .favs-login-btn {
  border: 1.5px solid rgba(142, 68, 238, 0.42);
  background: linear-gradient(135deg, rgba(142, 68, 238, 0.35) 0%, rgba(178, 44, 233, 0.25) 100%);
}
html[data-design="new"] .favs-login-btn:hover {
  box-shadow: 0 8px 24px rgba(142, 68, 238, 0.135);
}
html[data-design="new"] .settings-side-card {
  background: rgba(142, 68, 238, 0.08);
  border: 1px solid rgba(142, 68, 238, 0.15);
}
html[data-design="new"] .settings-side-avatar {
  background-color: rgba(142, 68, 238, 0.25);
  border: 2px solid rgba(142, 68, 238, 0.3);
}
html[data-design="new"] .settings-side-quicklink:hover {
  background: rgba(142, 68, 238, 0.12);
}
html[data-design="new"] .settings-section {
  background: rgba(142, 68, 238, 0.08);
  border: 1px solid rgba(142, 68, 238, 0.15);
}
html[data-design="new"] .settings-save-btn {
  border: 1.5px solid rgba(142, 68, 238, 0.42);
  background: linear-gradient(135deg, rgba(142, 68, 238, 0.35) 0%, rgba(178, 44, 233, 0.25) 100%);
}
html[data-design="new"] .settings-save-btn:hover {
  box-shadow: 0 8px 24px rgba(142, 68, 238, 0.135);
}
html[data-design="new"] .settings-toggle-btn.active {
  border-color: rgba(142, 68, 238, 0.48);
  background: rgba(142, 68, 238, 0.25);
}
html[data-design="new"] .settings-switch input:checked + .settings-switch-slider {
  background: rgba(142, 68, 238, 0.8);
}
html[data-design="new"] .settings-danger-btn {
  background: linear-gradient(135deg, rgba(248, 113, 113, 0.25) 0%, rgba(178, 44, 233, 0.15) 100%);
}
html[data-design="new"] .settings-badge-chip:hover {
  border-color: rgba(142, 68, 238, 0.36);
}
html[data-design="new"] .settings-badge-chip.active {
  border-color: rgba(142, 68, 238, 0.48);
  background: rgba(142, 68, 238, 0.25);
}
html[data-design="new"] .chip {
  background: rgba(142, 68, 238, 0.1);
  border: 1px solid rgba(142, 68, 238, 0.18);
}
html[data-design="new"] .chip:hover {
  background: rgba(142, 68, 238, 0.2);
  border-color: rgba(142, 68, 238, 0.36);
}
html[data-design="new"] .chip.active {
  background: rgba(142, 68, 238, 0.3);
  border-color: rgba(142, 68, 238, 0.48);
  box-shadow: 0 0 15px rgba(142, 68, 238, 0.135);
}
html[data-design="new"] .list-panel {
  background: rgba(142, 68, 238, 0.08);
  border: 1px solid rgba(142, 68, 238, 0.15);
  box-shadow: 0 0 50px rgba(142, 68, 238, 0.09), inset 0 1px 0 rgba(255,255,255,0.1);
}
html[data-design="new"] .track-row {
  background: linear-gradient(135deg, rgba(142, 68, 238, 0.06) 0%, rgba(178, 44, 233, 0.03) 100%);
  border: 1px solid rgba(142, 68, 238, 0.12);
}
html[data-design="new"] .track-row.skeleton {
  background: linear-gradient(100deg,
        rgba(142, 68, 238, 0.06) 30%,
        rgba(142, 68, 238, 0.16) 50%,
        rgba(142, 68, 238, 0.06) 70%);
  background-size: 250% 100%;
}
html[data-design="new"] .track-row:hover {
  background: linear-gradient(135deg, rgba(142, 68, 238, 0.15) 0%, rgba(178, 44, 233, 0.08) 100%);
  border-color: rgba(142, 68, 238, 0.36);
  box-shadow: 0 8px 32px rgba(142, 68, 238, 0.113), inset 0 1px 0 rgba(255,255,255,0.1);
}
html[data-design="new"] .track-row:hover .track-cover {
  box-shadow: 0 0 30px rgba(142, 68, 238, 0.18);
}
html[data-design="new"] .track-cover {
  background: linear-gradient(135deg, #c18bfa 0%, #c251f1 100%);
}
html[data-design="new"] .track-cover.c1 {
  background: linear-gradient(135deg, #c18bfa 0%, #c251f1 100%);
}
html[data-design="new"] .track-cover.c2 {
  background: linear-gradient(135deg, #823ef9 0%, #34d399 100%);
}
html[data-design="new"] .track-cover.c4 {
  background: linear-gradient(135deg, #b22ce9 0%, #9b35f6 100%);
}
html[data-design="new"] .track-uploader {
  background: rgba(12, 8, 16, 0.55);
}
html[data-design="new"] .track-uploader:hover {
  background: rgba(142, 68, 238, 0.4);
  border-color: rgba(142, 68, 238, 0.42);
}
html[data-design="new"] .uploader-avatar {
  background: linear-gradient(135deg, #c18bfa 0%, #c251f1 100%);
  background-size: cover;
  background-position: center;
}
html[data-design="new"] .track-name {
  background: linear-gradient(135deg, #ffffff 0%, #ece0ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
}
html[data-design="new"] .track-button {
  border: 1.5px solid rgba(142, 68, 238, 0.36);
  background: linear-gradient(135deg, rgba(142, 68, 238, 0.2) 0%, rgba(178, 44, 233, 0.15) 100%);
}
html[data-design="new"] .track-button:hover {
  background: linear-gradient(135deg, rgba(142, 68, 238, 0.4) 0%, rgba(178, 44, 233, 0.3) 100%);
  border-color: rgba(142, 68, 238, 0.54);
  box-shadow: 0 0 25px rgba(142, 68, 238, 0.18), inset 0 1px 0 rgba(255,255,255,0.15);
}
html[data-design="new"] .report-button {
  background: linear-gradient(135deg, rgba(248, 113, 113, 0.14) 0%, rgba(178, 44, 233, 0.1) 100%);
}
html[data-design="new"] .report-button:hover {
  background: linear-gradient(135deg, rgba(248, 113, 113, 0.3) 0%, rgba(178, 44, 233, 0.2) 100%);
}
html[data-design="new"] .play-inline-button {
  background: linear-gradient(135deg, rgba(52, 211, 153, 0.16) 0%, rgba(142, 68, 238, 0.1) 100%);
}
html[data-design="new"] .play-inline-button:hover {
  background: linear-gradient(135deg, rgba(52, 211, 153, 0.32) 0%, rgba(142, 68, 238, 0.2) 100%);
}
html[data-design="new"] .modal-overlay {
  background: rgba(7, 5, 10, 0.72);
}
html[data-design="new"] .modal-box {
  background: linear-gradient(160deg, #17121f 0%, #16101e 100%);
  border: 1px solid rgba(142, 68, 238, 0.21);
}
html[data-design="new"] .sponsors-list {
  scrollbar-color: rgba(142, 68, 238, 0.5) rgba(255,255,255,0.05);
}
html[data-design="new"] .sponsors-list::-webkit-scrollbar-thumb {
  background: rgba(142, 68, 238, 0.5);
}
html[data-design="new"] .sponsors-list::-webkit-scrollbar-thumb:hover {
  background: rgba(142, 68, 238, 0.75);
}
html[data-design="new"] .sponsor-item:hover {
  background: rgba(142, 68, 238, 0.14);
  border-color: rgba(142, 68, 238, 0.27);
}
html[data-design="new"] .howto-step-num {
  background: linear-gradient(135deg, rgba(142, 68, 238, 0.35) 0%, rgba(178, 44, 233, 0.25) 100%);
  border: 1px solid rgba(142, 68, 238, 0.3);
}
html[data-design="new"] .modal-btn.primary {
  border-color: rgba(142, 68, 238, 0.42);
  background: linear-gradient(135deg, rgba(142, 68, 238, 0.35) 0%, rgba(178, 44, 233, 0.25) 100%);
}
html[data-design="new"] .toast {
  background: linear-gradient(160deg, #17121f 0%, #16101e 100%);
  border: 1px solid rgba(142, 68, 238, 0.24);
}
html[data-design="new"] .toast.info {
  border-color: rgba(142, 68, 238, 0.33);
}
html[data-design="new"] .page-btn {
  border: 1px solid rgba(142, 68, 238, 0.18);
  background: rgba(142, 68, 238, 0.1);
}
html[data-design="new"] .page-btn:hover:not(:disabled) {
  background: rgba(142, 68, 238, 0.25);
  border-color: rgba(142, 68, 238, 0.36);
}
@media (max-width: 1000px) {
  html[data-design="new"] .nav.mobile-open {
    background: rgba(9, 7, 11, 0.35);
  }
  html[data-design="new"] .nav.left.mobile-open .nav-close {
    border: 1px solid rgba(142, 68, 238, 0.24);
    background: rgba(142, 68, 238, 0.12);
  }
  html[data-design="new"] .nav-item:hover {
    background: rgba(142, 68, 238, 0.12);
  }
  html[data-design="new"] .nav-item.active {
    background: rgba(142, 68, 238, 0.16);
  }
}
html[data-design="new"] .sec-hint a {
  color: #ddc7fe;
}
html[data-design="new"] .sec-link-ds {
  --brand: #9b5af2;
}
html[data-design="new"] .merge-overlay {
  background: rgba(6, 5, 9, 0.72);
}
html[data-design="new"] .merge-card {
  background: #16101e;
  border: 1px solid rgba(142, 68, 238, 0.21);
}
html[data-design="new"] .merge-list {
  background: rgba(14, 10, 19, 0.6);
}
html[data-design="new"] .settings-link-btn {
  border: 1px solid rgba(158, 93, 246, 0.3);
  background: rgba(142, 68, 238, 0.18);
}
html[data-design="new"] .settings-link-btn:hover {
  background: rgba(142, 68, 238, 0.3);
}

html[data-design="new"] {
  --grad-1: linear-gradient(135deg, #8e44ee 0%, #9b35f6 52%, #b22ce9 100%);
  --grad-2: linear-gradient(135deg, #4e11e3 0%, #8e44ee 55%, #973cf4 100%);
  --grad-3: linear-gradient(135deg, #c251f1 0%, #fb7185 45%, #fbbf24 100%);
  --bg: #0e0a13;
  --primary: #8e44ee;
  --primary-glow: rgba(142, 68, 238, 0.3);
  --accent: #b22ce9;
  --accent-glow: rgba(178, 44, 233, 0.25);
}
html[data-design="new"] body {
  background: linear-gradient(135deg, #0e0a13 0%, #1a1421 50%, #140e1b 100%);
}
html[data-design="new"] .site-loader {
  background: radial-gradient(circle at center, rgba(142, 68, 238, 0.18), rgba(14, 10, 19, 0.96) 45%, rgb(6, 5, 9) 100%);
}
html[data-design="new"] .loader-art {
  filter: drop-shadow(0 0 28px rgba(165, 74, 255, 0.315));
}
html[data-design="new"] .loader-progress-fill {
  background: linear-gradient(90deg, #892dee, #d4a4ff, #eed9ff);
}
html[data-design="new"] .page {
  background: rgba(20, 14, 27, 0.7);
  box-shadow: 0 50px 150px rgba(0,0,0,0.8),
        inset 0 1px 0 rgba(255,255,255,0.05),
        0 0 150px rgba(142, 68, 238, 0.068),
        inset 0 0 100px rgba(142, 68, 238, 0.023);
}
html[data-design="new"] .topbar {
  background: #110c17;
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  html[data-design="new"] .topbar::before {
    background: rgba(17, 12, 23, 0.42);
  }
}
html[data-design="new"] .nav-item:hover {
  background: rgba(142, 68, 238, 0.15);
  border-color: rgba(142, 68, 238, 0.18);
}
html[data-design="new"] .nav-item.active {
  background: rgba(142, 68, 238, 0.25);
  border-color: rgba(142, 68, 238, 0.3);
  box-shadow: 0 0 20px rgba(142, 68, 238, 0.09);
}
html[data-design="new"] .nav-plus-sign {
  background: linear-gradient(135deg, #9b35f6 0%, #b22ce9 100%);
  -webkit-background-clip: text;
  background-clip: text;
}
html[data-design="new"] .dropdown-menu {
  background: rgba(9, 8, 10, 0.95);
}
html[data-design="new"] .lang-btn {
  border: 1.5px solid rgba(142, 68, 238, 0.3);
  background: linear-gradient(135deg, rgba(142, 68, 238, 0.15) 0%, rgba(178, 44, 233, 0.1) 100%);
}
html[data-design="new"] .lang-btn:hover {
  background: linear-gradient(135deg, rgba(142, 68, 238, 0.3) 0%, rgba(178, 44, 233, 0.2) 100%);
  border-color: rgba(142, 68, 238, 0.48);
  box-shadow: 0 0 20px rgba(142, 68, 238, 0.158);
}
html[data-design="new"] .profile-btn {
  border: 1.5px solid rgba(142, 68, 238, 0.3);
  background: linear-gradient(135deg, rgba(142, 68, 238, 0.15) 0%, rgba(178, 44, 233, 0.1) 100%);
}
html[data-design="new"] .profile-btn:hover {
  background: linear-gradient(135deg, rgba(142, 68, 238, 0.3) 0%, rgba(178, 44, 233, 0.2) 100%);
  border-color: rgba(142, 68, 238, 0.48);
  box-shadow: 0 0 20px rgba(142, 68, 238, 0.158);
}
html[data-design="new"] .profile-avatar {
  background: linear-gradient(135deg, rgba(142, 68, 238, 0.3) 0%, rgba(178, 44, 233, 0.2) 100%);
  border: 1.5px solid rgba(142, 68, 238, 0.3);
}
html[data-design="new"] .profile-btn:hover .profile-avatar {
  box-shadow: 0 0 12px rgba(142, 68, 238, 0.18);
}
html[data-design="new"] .menu-toggle {
  border: 1px solid rgba(142, 68, 238, 0.24);
  background: rgba(142, 68, 238, 0.1);
}
html[data-design="new"] .menu-toggle:hover {
  background: rgba(142, 68, 238, 0.18);
  border-color: rgba(142, 68, 238, 0.36);
  box-shadow: 0 0 12px rgba(142, 68, 238, 0.09);
}
html[data-design="new"] .song-card {
  background: linear-gradient(135deg, rgba(142, 68, 238, 0.1) 0%, rgba(178, 44, 233, 0.05) 100%);
  border: 1px solid rgba(142, 68, 238, 0.18);
}
html[data-design="new"] .song-title {
  background: linear-gradient(135deg, #ffffff 0%, #ece0ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
}
html[data-design="new"] .song-co-authors a {
  color: #c9a5fc;
}
html[data-design="new"] .song-uploader:hover {
  background: rgba(142, 68, 238, 0.16);
  border-color: rgba(142, 68, 238, 0.3);
}
html[data-design="new"] .song-uploader .uploader-avatar {
  background: linear-gradient(135deg, #c18bfa 0%, #c251f1 100%);
  background-size: cover;
  background-position: center;
}
html[data-design="new"] .song-tag {
  background: linear-gradient(135deg, rgba(142, 68, 238, 0.22) 0%, rgba(178, 44, 233, 0.16) 100%);
  border: 1px solid rgba(142, 68, 238, 0.252);
}
html[data-design="new"] .song-genre {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.22) 0%, rgba(142, 68, 238, 0.14) 100%);
}
html[data-design="new"] .tag-chip:hover {
  border-color: rgba(142, 68, 238, 0.36);
}
html[data-design="new"] .tag-chip.active {
  border-color: rgba(142, 68, 238, 0.54);
  background: linear-gradient(135deg, rgba(142, 68, 238, 0.35) 0%, rgba(178, 44, 233, 0.25) 100%);
}
html[data-design="new"] .song-id-row:has(.song-id-copy) .song-id-value:hover {
  border-color: rgba(142, 68, 238, 0.42);
  background: rgba(142, 68, 238, 0.14);
}
html[data-design="new"] .like-button.active {
  background: linear-gradient(135deg, rgba(248, 113, 113, 0.28) 0%, rgba(178, 44, 233, 0.2) 100%);
}
html[data-design="new"] .favorite-button.active {
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.28) 0%, rgba(178, 44, 233, 0.15) 100%);
}
html[data-design="new"] .song-listen-btn {
  border-color: rgba(142, 68, 238, 0.42);
  background: linear-gradient(135deg, rgba(142, 68, 238, 0.4) 0%, rgba(178, 44, 233, 0.28) 100%);
}
html[data-design="new"] .song-more-card:hover {
  background: rgba(142, 68, 238, 0.12);
  border-color: rgba(142, 68, 238, 0.24);
}
html[data-design="new"] .song-more-cover {
  background-image: linear-gradient(135deg, #c18bfa 0%, #c251f1 100%);
}
html[data-design="new"] .author-header {
  background: linear-gradient(135deg, rgba(142, 68, 238, 0.1) 0%, rgba(178, 44, 233, 0.05) 100%);
  border: 1px solid rgba(142, 68, 238, 0.18);
}
html[data-design="new"] .author-banner {
  background: linear-gradient(120deg, rgba(142, 68, 238, 0.4), rgba(178, 44, 233, 0.28) 55%, rgba(193, 139, 250, 0.35));
  background-size: cover;
  background-position: center;
}
html[data-design="new"] .author-banner::after {
  background: linear-gradient(180deg, rgba(14, 10, 19, 0) 35%, rgba(14, 10, 19, 0.6) 100%);
}
html[data-design="new"] .author-avatar {
  background: linear-gradient(135deg, #c18bfa 0%, #c251f1 100%);
  border: 4px solid rgba(20, 14, 27, 0.552);
  box-shadow: 0 10px 30px rgba(0,0,0,0.45), 0 0 0 3px rgba(142, 68, 238, 0.203);
  background-size: cover;
  background-position: center;
}
html[data-design="new"] .author-edit-btn {
  color: #e7e5eb;
}
html[data-design="new"] .author-edit-btn:hover {
  background: rgba(142, 68, 238, 0.22);
  border-color: rgba(142, 68, 238, 0.33);
}
html[data-design="new"] .author-name {
  background: linear-gradient(135deg, #ffffff 0%, #ece0ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
}
html[data-design="new"] .author-badge {
  background: rgba(142, 68, 238, 0.25);
  border: 1px solid rgba(142, 68, 238, 0.33);
  box-shadow: 0 0 14px rgba(142, 68, 238, 0.113);
}
html[data-design="new"] .author-stat-card {
  border: 1px solid rgba(142, 68, 238, 0.15);
}
html[data-design="new"] .author-stat-card:hover {
  background: rgba(142, 68, 238, 0.14);
  border-color: rgba(142, 68, 238, 0.33);
  box-shadow: 0 6px 20px rgba(142, 68, 238, 0.09);
}
html[data-design="new"] .mini-badge:hover {
  background: rgba(142, 68, 238, 0.16);
  border-color: rgba(142, 68, 238, 0.3);
}
html[data-design="new"] .mini-badge.active {
  background: rgba(142, 68, 238, 0.22);
  border-color: rgba(142, 68, 238, 0.42);
  box-shadow: 0 0 14px rgba(142, 68, 238, 0.158);
}
html[data-design="new"] .top-track-card {
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.1) 0%, rgba(178, 44, 233, 0.06) 100%);
}
html[data-design="new"] .chip {
  background: rgba(142, 68, 238, 0.1);
  border: 1px solid rgba(142, 68, 238, 0.18);
}
html[data-design="new"] .chip:hover {
  background: rgba(142, 68, 238, 0.2);
  border-color: rgba(142, 68, 238, 0.36);
}
html[data-design="new"] .chip.active {
  background: rgba(142, 68, 238, 0.3);
  border-color: rgba(142, 68, 238, 0.48);
  box-shadow: 0 0 15px rgba(142, 68, 238, 0.135);
}
html[data-design="new"] .list-panel {
  background: rgba(142, 68, 238, 0.08);
  border: 1px solid rgba(142, 68, 238, 0.15);
  box-shadow: 0 0 50px rgba(142, 68, 238, 0.09), inset 0 1px 0 rgba(255,255,255,0.1);
}
html[data-design="new"] .track-row {
  background: linear-gradient(135deg, rgba(142, 68, 238, 0.06) 0%, rgba(178, 44, 233, 0.03) 100%);
  border: 1px solid rgba(142, 68, 238, 0.12);
}
html[data-design="new"] .track-row.skeleton {
  background: linear-gradient(100deg,
        rgba(142, 68, 238, 0.06) 30%,
        rgba(142, 68, 238, 0.16) 50%,
        rgba(142, 68, 238, 0.06) 70%);
  background-size: 250% 100%;
}
html[data-design="new"] .track-row:hover {
  background: linear-gradient(135deg, rgba(142, 68, 238, 0.15) 0%, rgba(178, 44, 233, 0.08) 100%);
  border-color: rgba(142, 68, 238, 0.36);
  box-shadow: 0 8px 32px rgba(142, 68, 238, 0.113), inset 0 1px 0 rgba(255,255,255,0.1);
}
html[data-design="new"] .track-row:hover .track-cover {
  box-shadow: 0 0 30px rgba(142, 68, 238, 0.18);
}
html[data-design="new"] .track-cover {
  background: linear-gradient(135deg, #c18bfa 0%, #c251f1 100%);
}
html[data-design="new"] .track-cover.c1 {
  background: linear-gradient(135deg, #c18bfa 0%, #c251f1 100%);
}
html[data-design="new"] .track-cover.c2 {
  background: linear-gradient(135deg, #823ef9 0%, #34d399 100%);
}
html[data-design="new"] .track-cover.c4 {
  background: linear-gradient(135deg, #b22ce9 0%, #9b35f6 100%);
}
html[data-design="new"] .track-name {
  background: linear-gradient(135deg, #ffffff 0%, #ece0ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
}
html[data-design="new"] .track-button {
  border: 1.5px solid rgba(142, 68, 238, 0.36);
  background: linear-gradient(135deg, rgba(142, 68, 238, 0.2) 0%, rgba(178, 44, 233, 0.15) 100%);
}
html[data-design="new"] .track-button:hover {
  background: linear-gradient(135deg, rgba(142, 68, 238, 0.4) 0%, rgba(178, 44, 233, 0.3) 100%);
  border-color: rgba(142, 68, 238, 0.54);
  box-shadow: 0 0 25px rgba(142, 68, 238, 0.18), inset 0 1px 0 rgba(255,255,255,0.15);
}
html[data-design="new"] .report-button {
  background: linear-gradient(135deg, rgba(248, 113, 113, 0.14) 0%, rgba(178, 44, 233, 0.1) 100%);
}
html[data-design="new"] .report-button:hover {
  background: linear-gradient(135deg, rgba(248, 113, 113, 0.3) 0%, rgba(178, 44, 233, 0.2) 100%);
}
html[data-design="new"] .modal-overlay {
  background: rgba(7, 5, 10, 0.72);
}
html[data-design="new"] .modal-box {
  background: linear-gradient(160deg, #17121f 0%, #16101e 100%);
  border: 1px solid rgba(142, 68, 238, 0.21);
}
html[data-design="new"] .badge-modal-icon {
  background: rgba(142, 68, 238, 0.16);
  border: 1px solid rgba(142, 68, 238, 0.24);
}
html[data-design="new"] .sponsors-list {
  scrollbar-color: rgba(142, 68, 238, 0.5) rgba(255,255,255,0.05);
}
html[data-design="new"] .sponsors-list::-webkit-scrollbar-thumb {
  background: rgba(142, 68, 238, 0.5);
}
html[data-design="new"] .sponsors-list::-webkit-scrollbar-thumb:hover {
  background: rgba(142, 68, 238, 0.75);
}
html[data-design="new"] .sponsor-item:hover {
  background: rgba(142, 68, 238, 0.14);
  border-color: rgba(142, 68, 238, 0.27);
}
html[data-design="new"] .howto-step-num {
  background: linear-gradient(135deg, rgba(142, 68, 238, 0.35) 0%, rgba(178, 44, 233, 0.25) 100%);
  border: 1px solid rgba(142, 68, 238, 0.3);
}
html[data-design="new"] .modal-btn.primary {
  border-color: rgba(142, 68, 238, 0.42);
  background: linear-gradient(135deg, rgba(142, 68, 238, 0.35) 0%, rgba(178, 44, 233, 0.25) 100%);
}
html[data-design="new"] .cs-custom {
  background: conic-gradient(#f43f5e, #eab308, #22c55e, #4206d4, #8e44ee, #9b35f6, #f43f5e);
}
html[data-design="new"] .toast {
  background: linear-gradient(160deg, #17121f 0%, #16101e 100%);
  border: 1px solid rgba(142, 68, 238, 0.24);
}
html[data-design="new"] .toast.info {
  border-color: rgba(142, 68, 238, 0.33);
}
html[data-design="new"] .page-btn {
  border: 1px solid rgba(142, 68, 238, 0.18);
  background: rgba(142, 68, 238, 0.1);
}
html[data-design="new"] .page-btn:hover:not(:disabled) {
  background: rgba(142, 68, 238, 0.25);
  border-color: rgba(142, 68, 238, 0.36);
}
@media (max-width: 1000px) {
  html[data-design="new"] .nav.mobile-open {
    background: rgba(9, 7, 11, 0.35);
  }
  html[data-design="new"] .nav.left.mobile-open .nav-close {
    border: 1px solid rgba(142, 68, 238, 0.24);
    background: rgba(142, 68, 238, 0.12);
  }
  html[data-design="new"] .nav-item:hover {
    background: rgba(142, 68, 238, 0.12);
  }
  html[data-design="new"] .nav-item.active {
    background: rgba(142, 68, 238, 0.16);
  }
}
html[data-design="new"] .song-card-bg::after {
  background: linear-gradient(90deg, rgba(14, 10, 19, 0.9) 0%, rgba(14, 10, 19, 0.66) 48%, rgba(14, 10, 19, 0.42) 100%);
}

html[data-design="new"] {
  --grad-1: linear-gradient(135deg, #8e44ee 0%, #9b35f6 52%, #b22ce9 100%);
  --grad-2: linear-gradient(135deg, #4e11e3 0%, #8e44ee 55%, #973cf4 100%);
  --grad-3: linear-gradient(135deg, #c251f1 0%, #fb7185 45%, #fbbf24 100%);
  --bg: #0e0a13;
  --primary: #8e44ee;
  --primary-glow: rgba(142, 68, 238, 0.3);
  --accent: #b22ce9;
  --accent-glow: rgba(178, 44, 233, 0.25);
}
html[data-design="new"] body {
  background: linear-gradient(135deg, #0e0a13 0%, #1a1421 50%, #140e1b 100%);
}
html[data-design="new"] .site-loader {
  background: radial-gradient(circle at center, rgba(142, 68, 238, 0.18), rgba(14, 10, 19, 0.96) 45%, rgb(6, 5, 9) 100%);
}
html[data-design="new"] .loader-art {
  filter: drop-shadow(0 0 28px rgba(165, 74, 255, 0.315));
}
html[data-design="new"] .loader-progress-fill {
  background: linear-gradient(90deg, #892dee, #d4a4ff, #eed9ff);
}
html[data-design="new"] .page {
  background: rgba(20, 14, 27, 0.7);
  box-shadow: 0 50px 150px rgba(0,0,0,0.8),
        inset 0 1px 0 rgba(255,255,255,0.05),
        0 0 150px rgba(142, 68, 238, 0.068),
        inset 0 0 100px rgba(142, 68, 238, 0.023);
}
html[data-design="new"] .topbar {
  background: #110c17;
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  html[data-design="new"] .topbar::before {
    background: rgba(17, 12, 23, 0.42);
  }
}
html[data-design="new"] .nav-item:hover {
  background: rgba(142, 68, 238, 0.15);
  border-color: rgba(142, 68, 238, 0.18);
}
html[data-design="new"] .nav-item.active {
  background: rgba(142, 68, 238, 0.25);
  border-color: rgba(142, 68, 238, 0.3);
  box-shadow: 0 0 20px rgba(142, 68, 238, 0.09);
}
html[data-design="new"] .nav-plus-sign {
  background: linear-gradient(135deg, #9b35f6 0%, #b22ce9 100%);
  -webkit-background-clip: text;
  background-clip: text;
}
html[data-design="new"] .dropdown-menu {
  background: rgba(9, 8, 10, 0.95);
}
html[data-design="new"] .lang-btn {
  border: 1.5px solid rgba(142, 68, 238, 0.3);
  background: linear-gradient(135deg, rgba(142, 68, 238, 0.15) 0%, rgba(178, 44, 233, 0.1) 100%);
}
html[data-design="new"] .lang-btn:hover {
  background: linear-gradient(135deg, rgba(142, 68, 238, 0.3) 0%, rgba(178, 44, 233, 0.2) 100%);
  border-color: rgba(142, 68, 238, 0.48);
  box-shadow: 0 0 20px rgba(142, 68, 238, 0.158);
}
html[data-design="new"] .profile-btn {
  border: 1.5px solid rgba(142, 68, 238, 0.3);
  background: linear-gradient(135deg, rgba(142, 68, 238, 0.15) 0%, rgba(178, 44, 233, 0.1) 100%);
}
html[data-design="new"] .profile-btn:hover {
  background: linear-gradient(135deg, rgba(142, 68, 238, 0.3) 0%, rgba(178, 44, 233, 0.2) 100%);
  border-color: rgba(142, 68, 238, 0.48);
  box-shadow: 0 0 20px rgba(142, 68, 238, 0.158);
}
html[data-design="new"] .profile-avatar {
  background: linear-gradient(135deg, rgba(142, 68, 238, 0.3) 0%, rgba(178, 44, 233, 0.2) 100%);
  border: 1.5px solid rgba(142, 68, 238, 0.3);
}
html[data-design="new"] .profile-btn:hover .profile-avatar {
  box-shadow: 0 0 12px rgba(142, 68, 238, 0.18);
}
html[data-design="new"] .menu-toggle {
  border: 1px solid rgba(142, 68, 238, 0.24);
  background: rgba(142, 68, 238, 0.1);
}
html[data-design="new"] .menu-toggle:hover {
  background: rgba(142, 68, 238, 0.18);
  border-color: rgba(142, 68, 238, 0.36);
  box-shadow: 0 0 12px rgba(142, 68, 238, 0.09);
}
html[data-design="new"] .top-page-header {
  background: linear-gradient(135deg, rgba(142, 68, 238, 0.12) 0%, rgba(178, 44, 233, 0.06) 100%);
  border: 1px solid rgba(142, 68, 238, 0.18);
}
html[data-design="new"] .top-page-header h1 {
  background: linear-gradient(135deg, #ffffff 0%, #ece0ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
}
html[data-design="new"] .list-panel {
  background: rgba(142, 68, 238, 0.08);
  border: 1px solid rgba(142, 68, 238, 0.15);
  box-shadow: 0 0 50px rgba(142, 68, 238, 0.09), inset 0 1px 0 rgba(255,255,255,0.1);
}
html[data-design="new"] .top-author-card {
  background: linear-gradient(135deg, rgba(142, 68, 238, 0.06) 0%, rgba(178, 44, 233, 0.03) 100%);
  border: 1px solid rgba(142, 68, 238, 0.12);
}
html[data-design="new"] .top-author-card:hover {
  background: linear-gradient(135deg, rgba(142, 68, 238, 0.15) 0%, rgba(178, 44, 233, 0.08) 100%);
  border-color: rgba(142, 68, 238, 0.36);
  box-shadow: 0 8px 24px rgba(142, 68, 238, 0.09);
}
html[data-design="new"] .top-author-card.top-1 {
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.14) 0%, rgba(178, 44, 233, 0.05) 100%);
}
html[data-design="new"] .top-author-card.top-2 {
  border-color: rgba(211, 203, 225, 0.3);
}
html[data-design="new"] .top-author-avatar {
  background: linear-gradient(135deg, #c18bfa 0%, #c251f1 100%);
  background-size: cover;
  background-position: center;
}
html[data-design="new"] .top-author-card.plus-slot {
  border-color: rgba(155, 53, 246, 0.33);
  background: linear-gradient(135deg, rgba(155, 53, 246, 0.14) 0%, rgba(178, 44, 233, 0.08) 100%);
}
html[data-design="new"] .top-plus-note {
  border: 1px solid rgba(155, 53, 246, 0.21);
  background: linear-gradient(135deg, rgba(155, 53, 246, 0.12) 0%, rgba(178, 44, 233, 0.06) 100%);
  color: var(--text-muted, #d3cbe1);
}
html[data-design="new"] .top-plus-note .top-plus-go {
  color: #ebd5ff;
}
html[data-design="new"] .modal-overlay {
  background: rgba(7, 5, 10, 0.72);
}
html[data-design="new"] .modal-box {
  background: linear-gradient(160deg, #17121f 0%, #16101e 100%);
  border: 1px solid rgba(142, 68, 238, 0.21);
}
html[data-design="new"] .sponsors-list {
  scrollbar-color: rgba(142, 68, 238, 0.5) rgba(255,255,255,0.05);
}
html[data-design="new"] .sponsors-list::-webkit-scrollbar-thumb {
  background: rgba(142, 68, 238, 0.5);
}
html[data-design="new"] .sponsors-list::-webkit-scrollbar-thumb:hover {
  background: rgba(142, 68, 238, 0.75);
}
html[data-design="new"] .sponsor-item:hover {
  background: rgba(142, 68, 238, 0.14);
  border-color: rgba(142, 68, 238, 0.27);
}
html[data-design="new"] .howto-step-num {
  background: linear-gradient(135deg, rgba(142, 68, 238, 0.35) 0%, rgba(178, 44, 233, 0.25) 100%);
  border: 1px solid rgba(142, 68, 238, 0.3);
}
html[data-design="new"] .modal-btn.primary {
  border-color: rgba(142, 68, 238, 0.42);
  background: linear-gradient(135deg, rgba(142, 68, 238, 0.35) 0%, rgba(178, 44, 233, 0.25) 100%);
}
html[data-design="new"] .toast {
  background: linear-gradient(160deg, #17121f 0%, #16101e 100%);
  border: 1px solid rgba(142, 68, 238, 0.24);
}
html[data-design="new"] .toast.info {
  border-color: rgba(142, 68, 238, 0.33);
}
@media (max-width: 1000px) {
  html[data-design="new"] .nav.mobile-open {
    background: rgba(9, 7, 11, 0.35);
  }
  html[data-design="new"] .nav.left.mobile-open .nav-close {
    border: 1px solid rgba(142, 68, 238, 0.24);
    background: rgba(142, 68, 238, 0.12);
  }
  html[data-design="new"] .nav-item:hover {
    background: rgba(142, 68, 238, 0.12);
  }
  html[data-design="new"] .nav-item.active {
    background: rgba(142, 68, 238, 0.16);
  }
}
html[data-design="new"] .top-kind-btn:hover {
  background: rgba(142, 68, 238, 0.15);
}
html[data-design="new"] .top-kind-btn.active {
  background: rgba(142, 68, 238, 0.3);
  border-color: rgba(142, 68, 238, 0.48);
  box-shadow: 0 0 15px rgba(142, 68, 238, 0.135);
}
html[data-design="new"] .top-stat-tile {
  background: rgba(142, 68, 238, 0.08);
  border: 1px solid rgba(142, 68, 238, 0.15);
}
html[data-design="new"] .top-stat-value {
  background: linear-gradient(135deg, #ffffff 0%, #ece0ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
}
html[data-design="new"] .top-tab-btn.active {
  background: linear-gradient(135deg, rgba(142, 68, 238, 0.4) 0%, rgba(178, 44, 233, 0.28) 100%);
  box-shadow: 0 0 16px rgba(142, 68, 238, 0.113);
}
html[data-design="new"] .top-show-more-btn {
  border: 1.5px solid rgba(142, 68, 238, 0.3);
  background: rgba(142, 68, 238, 0.12);
}
html[data-design="new"] .top-show-more-btn:hover {
  background: rgba(142, 68, 238, 0.25);
  border-color: rgba(142, 68, 238, 0.48);
}
html[data-design="new"] .my-rank-panel {
  background: rgba(178, 44, 233, 0.06);
  border: 1px solid rgba(178, 44, 233, 0.18);
}
html[data-design="new"] .top-author-card.my-rank {
  border-color: rgba(178, 44, 233, 0.3);
  background: linear-gradient(135deg, rgba(178, 44, 233, 0.14) 0%, rgba(142, 68, 238, 0.06) 100%);
}

html[data-design="new"] {
  --bg: #0e0a13;
  --primary: #8e44ee;
  --primary-glow: rgba(142, 68, 238, 0.3);
  --accent: #b22ce9;
  --accent-glow: rgba(178, 44, 233, 0.25);
}
html[data-design="new"] body {
  background: linear-gradient(135deg, #0e0a13 0%, #1a1421 50%, #140e1b 100%);
}
html[data-design="new"] .site-loader {
  background: radial-gradient(circle at center, rgba(142, 68, 238, 0.18), rgba(14, 10, 19, 0.96) 45%, rgb(6, 5, 9) 100%);
}
html[data-design="new"] .loader-art {
  filter: drop-shadow(0 0 28px rgba(165, 74, 255, 0.315));
}
html[data-design="new"] .loader-progress-fill {
  background: linear-gradient(90deg, #892dee, #d4a4ff, #eed9ff);
}
html[data-design="new"] .page {
  background: rgba(20, 14, 27, 0.7);
  box-shadow: 0 50px 150px rgba(0,0,0,0.8),
        inset 0 1px 0 rgba(255,255,255,0.05),
        0 0 150px rgba(142, 68, 238, 0.068),
        inset 0 0 100px rgba(142, 68, 238, 0.023);
}
html[data-design="new"] .topbar {
  background: #110c17;
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  html[data-design="new"] .topbar::before {
    background: rgba(17, 12, 23, 0.42);
  }
}
html[data-design="new"] .nav-item:hover {
  background: rgba(142, 68, 238, 0.15);
  border-color: rgba(142, 68, 238, 0.18);
}
html[data-design="new"] .nav-item.active {
  background: rgba(142, 68, 238, 0.25);
  border-color: rgba(142, 68, 238, 0.3);
  box-shadow: 0 0 20px rgba(142, 68, 238, 0.09);
}
html[data-design="new"] .nav-plus-sign {
  background: linear-gradient(135deg, #9b35f6 0%, #b22ce9 100%);
  -webkit-background-clip: text;
  background-clip: text;
}
html[data-design="new"] .dropdown-menu {
  background: rgba(9, 8, 10, 0.95);
}
html[data-design="new"] .lang-btn {
  border: 1.5px solid rgba(142, 68, 238, 0.3);
  background: linear-gradient(135deg, rgba(142, 68, 238, 0.15) 0%, rgba(178, 44, 233, 0.1) 100%);
}
html[data-design="new"] .lang-btn:hover {
  background: linear-gradient(135deg, rgba(142, 68, 238, 0.3) 0%, rgba(178, 44, 233, 0.2) 100%);
  border-color: rgba(142, 68, 238, 0.48);
  box-shadow: 0 0 20px rgba(142, 68, 238, 0.158);
}
html[data-design="new"] .profile-btn {
  border: 1.5px solid rgba(142, 68, 238, 0.3);
  background: linear-gradient(135deg, rgba(142, 68, 238, 0.15) 0%, rgba(178, 44, 233, 0.1) 100%);
}
html[data-design="new"] .profile-btn:hover {
  background: linear-gradient(135deg, rgba(142, 68, 238, 0.3) 0%, rgba(178, 44, 233, 0.2) 100%);
  border-color: rgba(142, 68, 238, 0.48);
  box-shadow: 0 0 20px rgba(142, 68, 238, 0.158);
}
html[data-design="new"] .profile-avatar {
  background: linear-gradient(135deg, rgba(142, 68, 238, 0.3) 0%, rgba(178, 44, 233, 0.2) 100%);
  border: 1.5px solid rgba(142, 68, 238, 0.3);
}
html[data-design="new"] .profile-btn:hover .profile-avatar {
  box-shadow: 0 0 12px rgba(142, 68, 238, 0.18);
}
html[data-design="new"] .menu-toggle {
  border: 1px solid rgba(142, 68, 238, 0.24);
  background: rgba(142, 68, 238, 0.1);
}
html[data-design="new"] .menu-toggle:hover {
  background: rgba(142, 68, 238, 0.18);
  border-color: rgba(142, 68, 238, 0.36);
  box-shadow: 0 0 12px rgba(142, 68, 238, 0.09);
}
html[data-design="new"] .modal-overlay {
  background: rgba(7, 5, 10, 0.72);
}
html[data-design="new"] .modal-box {
  background: linear-gradient(160deg, #17121f 0%, #16101e 100%);
  border: 1px solid rgba(142, 68, 238, 0.21);
}
html[data-design="new"] .sponsors-list {
  scrollbar-color: rgba(142, 68, 238, 0.5) rgba(255,255,255,0.05);
}
html[data-design="new"] .sponsors-list::-webkit-scrollbar-thumb {
  background: rgba(142, 68, 238, 0.5);
}
html[data-design="new"] .sponsors-list::-webkit-scrollbar-thumb:hover {
  background: rgba(142, 68, 238, 0.75);
}
html[data-design="new"] .sponsor-item:hover {
  background: rgba(142, 68, 238, 0.14);
  border-color: rgba(142, 68, 238, 0.27);
}
html[data-design="new"] .howto-step-num {
  background: linear-gradient(135deg, rgba(142, 68, 238, 0.35) 0%, rgba(178, 44, 233, 0.25) 100%);
  border: 1px solid rgba(142, 68, 238, 0.3);
}
html[data-design="new"] .modal-btn.primary {
  border-color: rgba(142, 68, 238, 0.42);
  background: linear-gradient(135deg, rgba(142, 68, 238, 0.35) 0%, rgba(178, 44, 233, 0.25) 100%);
}
html[data-design="new"] .toast {
  background: linear-gradient(160deg, #17121f 0%, #16101e 100%);
  border: 1px solid rgba(142, 68, 238, 0.24);
}
html[data-design="new"] .toast.info {
  border-color: rgba(142, 68, 238, 0.33);
}
@media (max-width: 1000px) {
  html[data-design="new"] .nav.mobile-open {
    background: rgba(9, 7, 11, 0.35);
  }
  html[data-design="new"] .nav.left.mobile-open .nav-close {
    border: 1px solid rgba(142, 68, 238, 0.24);
    background: rgba(142, 68, 238, 0.12);
  }
  html[data-design="new"] .nav-item:hover {
    background: rgba(142, 68, 238, 0.12);
  }
  html[data-design="new"] .nav-item.active {
    background: rgba(142, 68, 238, 0.16);
  }
}
html[data-design="new"] .upd-filter {
  background: rgba(10, 7, 14, 0.38);
}
html[data-design="new"] .upd-filter button.on {
  background: rgba(142, 68, 238, 0.34);
  box-shadow: inset 0 0 0 1px rgba(158, 93, 246, 0.27);
}
html[data-design="new"] .upd-entry::before {
  background: rgba(158, 93, 246, 0.18);
}
html[data-design="new"] .upd-fresh {
  background: linear-gradient(135deg, #8e44ee 0%, #9b35f6 52%, #b22ce9 100%);
}
html[data-design="new"] .upd-link {
  color: #d7b5fd;
}
html[data-design="new"] .upd-form {
  border: 1px solid rgba(193, 139, 250, 0.3);
  background: rgba(142, 68, 238, 0.08);
}
html[data-design="new"] .upd-form input[type="text"], html[data-design="new"] .upd-form input[type="date"], html[data-design="new"] .upd-form select, html[data-design="new"] .upd-form textarea {
  border: 1px solid rgba(158, 93, 246, 0.21);
  background: rgba(10, 7, 14, 0.55);
}
html[data-design="new"] .upd-more {
  border: 1px solid rgba(142, 68, 238, 0.18);
  background: rgba(142, 68, 238, 0.08);
}
html[data-design="new"] .upd-tabs {
  background: rgba(10, 7, 14, 0.38);
}
html[data-design="new"] .upd-tabs button.on {
  background: linear-gradient(135deg, rgba(142, 68, 238, 0.55) 0%, rgba(155, 53, 246, 0.45) 100%);
}
html[data-design="new"] .idea-gate {
  border: 1px dashed rgba(158, 93, 246, 0.24);
}
html[data-design="new"] .idea {
  border: 1px solid rgba(142, 68, 238, 0.132);
  background: rgba(142, 68, 238, 0.05);
}
html[data-design="new"] .idea-vote {
  border: 1px solid rgba(158, 93, 246, 0.21);
  background: rgba(10, 7, 14, 0.4);
}
html[data-design="new"] .idea-vote:hover {
  border-color: rgba(193, 139, 250, 0.42);
}
html[data-design="new"] .idea-vote.on {
  border-color: rgba(193, 139, 250, 0.54);
  background: linear-gradient(160deg, rgba(142, 68, 238, 0.5), rgba(155, 53, 246, 0.4));
}
html[data-design="new"] .idea-status.st-planned {
  background: rgba(142, 68, 238, 0.25);
  color: #ddc7fe;
}
html[data-design="new"] .idea-note {
  border-left: 3px solid rgba(193, 139, 250, 0.42);
  background: rgba(193, 139, 250, 0.1);
}
html[data-design="new"] .idea-mod select, html[data-design="new"] .idea-mod textarea {
  border: 1px solid rgba(158, 93, 246, 0.21);
  background: rgba(10, 7, 14, 0.55);
}

html[data-design="new"] .bu-hero {
  background: radial-gradient(120% 140% at 0% 0%, rgba(142, 68, 238, 0.18), transparent 60%),
    radial-gradient(120% 140% at 100% 0%, rgba(178, 44, 233, 0.12), transparent 55%),
    rgba(255, 255, 255, 0.03);
}
html[data-design="new"] .bu-steps li.now {
  background: rgba(142, 68, 238, 0.18);
}
html[data-design="new"] .bu-input-panel.drop {
  background: rgba(142, 68, 238, 0.1);
}
html[data-design="new"] .bu-spin {
  border-top-color: rgba(201, 165, 252, 0.6);
}
html[data-design="new"] .bu-filter.on {
  background: rgba(142, 68, 238, 0.3);
}
html[data-design="new"] .bu-dock {
  background: rgba(16, 12, 22, 0.92);
}
html[data-design="new"] .bu-open {
  color: #c9a5fc;
}

html[data-design="new"] .at-trigger-btn {
  border: 1.5px solid rgba(142, 68, 238, 0.3);
  background: linear-gradient(135deg, rgba(142, 68, 238, 0.15) 0%, rgba(178, 44, 233, 0.1) 100%);
}
html[data-design="new"] .at-trigger-btn:hover {
  background: linear-gradient(135deg, rgba(142, 68, 238, 0.3) 0%, rgba(178, 44, 233, 0.2) 100%);
  border-color: rgba(142, 68, 238, 0.48);
  box-shadow: 0 0 20px rgba(142, 68, 238, 0.158);
}
html[data-design="new"] .at-trigger-icon {
  color: #d7b5fd;
}
html[data-design="new"] .at-trigger-btn:hover .at-trigger-icon {
  color: #dbabfc;
}
html[data-design="new"] .at-overlay {
  background: rgba(7, 5, 10, 0.72);
}
html[data-design="new"] .at-box {
  background: linear-gradient(160deg, #17121f 0%, #16101e 100%);
  border: 1px solid rgba(142, 68, 238, 0.21);
}
html[data-design="new"] .at-field input:focus {
  border-color: rgba(142, 68, 238, 0.6);
}
html[data-design="new"] .at-actions {
  background: #16101e;
}
html[data-design="new"] .at-confirm-actions {
  background: #1b181f;
}
html[data-design="new"] .at-btn.primary {
  border-color: rgba(142, 68, 238, 0.42);
  background: linear-gradient(135deg, rgba(142, 68, 238, 0.35) 0%, rgba(178, 44, 233, 0.25) 100%);
}
html[data-design="new"] .at-toast {
  background: rgba(19, 15, 25, 0.95);
}
html[data-design="new"] .at-kind:hover {
  background: rgba(142, 68, 238, 0.15);
}
html[data-design="new"] .at-kind.active {
  background: rgba(142, 68, 238, 0.3);
  border-color: rgba(142, 68, 238, 0.45);
  box-shadow: 0 0 14px rgba(142, 68, 238, 0.126);
}
html[data-design="new"] .at-plus {
  background: var(--grad-1, linear-gradient(135deg, #8e44ee, #b22ce9));
}
html[data-design="new"] .at-card-preview {
  border: 1px solid rgba(142, 68, 238, 0.12);
  background: linear-gradient(135deg, rgba(142, 68, 238, 0.06) 0%, rgba(178, 44, 233, 0.03) 100%);
}
html[data-design="new"] .at-card-preview:focus-visible {
  box-shadow: 0 0 0 2px rgba(142, 68, 238, 0.27);
}
html[data-design="new"] .at-card-preview.drop-target {
  border-color: rgba(142, 68, 238, 0.54);
  box-shadow: 0 0 0 3px rgba(142, 68, 238, 0.113);
}
html[data-design="new"] .at-card-preview.has-image .at-card-bg::after {
  background: linear-gradient(90deg, rgba(14, 10, 19, 0.9) 0%, rgba(14, 10, 19, 0.66) 48%, rgba(14, 10, 19, 0.42) 100%);
}
html[data-design="new"] .at-card-cover {
  background: var(--grad-1, linear-gradient(135deg, #c18bfa, #c251f1));
}
html[data-design="new"] .at-card-editor .at-card-buttons input[type="text"]:focus {
  border-color: rgba(142, 68, 238, 0.42);
}
html[data-design="new"] .at-card-zoom input[type="range"]::-webkit-slider-thumb {
  background: var(--grad-1, #8e44ee);
}
html[data-design="new"] .at-card-zoom input[type="range"]::-moz-range-thumb {
  background: #973cf4;
}
html[data-design="new"] .at-card-reset {
  color: #c9a5fc;
}

html[data-design="new"] .adv-preview-row {
  background: linear-gradient(135deg, rgba(142, 68, 238, 0.06) 0%, rgba(178, 44, 233, 0.03) 100%);
  border: 1px solid rgba(142, 68, 238, 0.12);
}
html[data-design="new"] .adv-preview-cover {
  background: linear-gradient(135deg, #c18bfa 0%, #c251f1 100%);
}
html[data-design="new"] .adv-preview-badge {
  background: rgba(12, 8, 16, 0.55);
}
html[data-design="new"] .adv-slot-logo {
  background: linear-gradient(135deg, #8e44ee 0%, #b22ce9 100%);
}
html[data-design="new"] .adv-slot-link {
  color: #ddc7fe;
}
html[data-design="new"] .adv-plus {
  background: linear-gradient(135deg, rgba(155, 53, 246, 0.1) 0%, rgba(178, 44, 233, 0.05) 100%);
  border-color: rgba(155, 53, 246, 0.18);
}
html[data-design="new"] .adv-plus-price {
  background: rgba(12, 8, 16, 0.55);
}
html[data-design="new"] .adv-slot-billboard {
  background: linear-gradient(135deg, rgba(142, 68, 238, 0.18) 0%, rgba(178, 44, 233, 0.09) 100%);
  border: 1px solid rgba(142, 68, 238, 0.24);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 0 34px rgba(142, 68, 238, 0.054);
}
html[data-design="new"] .adv-slot-billboard-cover {
  background: linear-gradient(135deg, #8e44ee 0%, #b22ce9 100%);
}
html[data-design="new"] .adv-preview-btn {
  border: 1.5px solid rgba(142, 68, 238, 0.36);
  background: linear-gradient(135deg, rgba(142, 68, 238, 0.2) 0%, rgba(178, 44, 233, 0.15) 100%);
}
html[data-design="new"] a.adv-slot:hover {
  border-color: rgba(142, 68, 238, 0.33);
}

html[data-design="new"] .lylib-announce {
  background: linear-gradient(90deg, var(--primary, #8e44ee) 0%, var(--accent, #b22ce9) 100%);
}

html[data-design="new"] .ai-overlay {
  background: rgba(7, 5, 10, 0.72);
}
html[data-design="new"] .ai-chat {
  border: 1px solid rgba(158, 93, 246, 0.168);
  background: radial-gradient(120% 55% at 50% -12%, rgba(155, 53, 246, 0.2) 0%, rgba(155, 53, 246, 0) 62%),
    linear-gradient(165deg, #191222 0%, #120d19 100%);
}
html[data-design="new"] .ai-avatar {
  background: linear-gradient(135deg, #8e44ee 0%, #9b35f6 52%, #b22ce9 100%);
  box-shadow: 0 6px 18px rgba(155, 53, 246, 0.158);
}
html[data-design="new"] .ai-avatar-lg {
  box-shadow: 0 0 0 8px rgba(155, 53, 246, 0.045), 0 14px 40px rgba(155, 53, 246, 0.18);
}
html[data-design="new"] .ai-suggestion:hover {
  border-color: rgba(193, 139, 250, 0.27);
  background: rgba(193, 139, 250, 0.1);
}
html[data-design="new"] .ai-user {
  background: linear-gradient(135deg, #8e44ee 0%, #973cf4 60%, #9b35f6 100%);
  box-shadow: 0 6px 18px rgba(142, 68, 238, 0.113);
}
html[data-design="new"] .ai-cover {
  background-color: rgba(142, 68, 238, 0.25);
}
html[data-design="new"] .ai-cover-empty {
  background-image: linear-gradient(135deg, rgba(142, 68, 238, 0.55) 0%, rgba(178, 44, 233, 0.45) 100%);
}
html[data-design="new"] .ai-play svg {
  background: rgba(10, 7, 14, 0.78);
}
html[data-design="new"] .ai-play:hover, html[data-design="new"] .ai-play:focus-visible {
  background: rgba(10, 7, 14, 0.45);
}
html[data-design="new"] .ai-play:hover svg, html[data-design="new"] .ai-play:focus-visible svg {
  background: linear-gradient(135deg, #8e44ee 0%, #9b35f6 55%, #b22ce9 100%);
}
html[data-design="new"] .ai-lyric {
  color: rgba(215, 181, 253, 0.9);
}
html[data-design="new"] .ai-copy {
  border: 1px solid rgba(158, 93, 246, 0.228);
  background: rgba(142, 68, 238, 0.14);
}
html[data-design="new"] .ai-copy:hover {
  border-color: rgba(193, 139, 250, 0.42);
  background: rgba(142, 68, 238, 0.26);
}
html[data-design="new"] .ai-more {
  border: 1px solid rgba(193, 139, 250, 0.24);
  background: rgba(193, 139, 250, 0.08);
}
html[data-design="new"] .ai-more:hover {
  background: rgba(193, 139, 250, 0.18);
}
html[data-design="new"] .ai-link {
  border: 1px solid rgba(158, 93, 246, 0.21);
  background: rgba(142, 68, 238, 0.12);
  color: #ece0ff;
}
html[data-design="new"] .ai-link:hover {
  background: rgba(142, 68, 238, 0.22);
}
html[data-design="new"] .ai-text a {
  color: #ddc7fe;
}
html[data-design="new"] .ai-field {
  border: 1px solid rgba(158, 93, 246, 0.18);
}
html[data-design="new"] .ai-field:focus-within {
  border-color: rgba(193, 139, 250, 0.45);
  box-shadow: 0 0 0 4px rgba(151, 60, 244, 0.068);
}
html[data-design="new"] .ai-send {
  background: linear-gradient(135deg, #8e44ee 0%, #9b35f6 55%, #b22ce9 100%);
}
html[data-design="new"] .ai-quota a {
  color: #d7b5fd;
}
html[data-design="new"] .ai-cta {
  background: linear-gradient(135deg, #8e44ee 0%, #9b35f6 55%, #b22ce9 100%);
  box-shadow: 0 8px 20px rgba(155, 53, 246, 0.135);
}
html[data-design="new"] .ai-chat button:focus-visible, html[data-design="new"] .ai-chat a:focus-visible {
  outline: 2px solid rgba(215, 181, 253, 0.54);
}
html[data-design="new"] .ai-entry input {
  border: 1px solid rgba(193, 139, 250, 0.27);
}
html[data-design="new"] .ai-entry button, html[data-design="new"] .ai-open-btn {
  background: linear-gradient(135deg, #8e44ee 0%, #9b35f6 55%, #b22ce9 100%);
}

html[data-design="new"] .ban-notice-overlay {
  background: rgba(8, 6, 11, 0.72);
}
html[data-design="new"] .ban-notice {
  background: linear-gradient(160deg, #16121c 0%, #110e16 100%);
  color: #f5eeff;
}
html[data-design="new"] .ban-notice p {
  color: rgba(245, 238, 255, 0.75);
}
html[data-design="new"] .ban-notice .ban-notice-reason {
  color: #f5eeff;
}
html[data-design="new"] .ban-notice-contact {
  border: 1px solid rgba(142, 68, 238, 0.27);
  background: rgba(142, 68, 238, 0.14);
}
html[data-design="new"] .ban-notice-contact:hover, html[data-design="new"] .ban-notice-contact:focus-visible {
  background: rgba(142, 68, 238, 0.28);
  border-color: rgba(142, 68, 238, 0.48);
}
html[data-design="new"] .ban-notice-contact span {
  color: rgba(245, 238, 255, 0.6);
}
html[data-design="new"] .ban-notice .ban-notice-note {
  color: rgba(245, 238, 255, 0.5);
}
html[data-design="new"] .ban-notice-close {
  color: rgba(245, 238, 255, 0.8);
}

html[data-design="new"] .track-card-bg::after {
  background: linear-gradient(90deg, rgba(14, 10, 19, 0.9) 0%, rgba(14, 10, 19, 0.66) 48%, rgba(14, 10, 19, 0.42) 100%);
}

html[data-design="new"] .lylib-cookie-banner {
  background: rgba(16, 12, 21, 0.97);
}
html[data-design="new"] .lylib-cookie-text a {
  color: var(--primary, #8e44ee);
}
html[data-design="new"] .lylib-cookie-accept {
  background: linear-gradient(135deg, var(--primary, #8e44ee) 0%, var(--accent, #b22ce9) 100%);
}

html[data-design="new"] .footer-brand-name {
  background: linear-gradient(135deg, var(--primary, #8e44ee) 0%, var(--accent, #b22ce9) 100%);
  -webkit-background-clip: text;
  background-clip: text;
}
html[data-design="new"] .footer-bot-link {
  border: 1px solid rgba(142, 68, 238, 0.24);
  background: rgba(142, 68, 238, 0.12);
}
html[data-design="new"] .footer-bot-link:hover {
  background: rgba(142, 68, 238, 0.22);
  border-color: rgba(142, 68, 238, 0.36);
}

html[data-design="new"] .nickname-prompt-overlay {
  background: rgba(8, 6, 11, 0.72);
}
html[data-design="new"] .nickname-prompt {
  background: linear-gradient(160deg, #16121c 0%, #110e16 100%);
  color: #f5eeff;
}
html[data-design="new"] .nickname-prompt p {
  color: rgba(245, 238, 255, 0.75);
}
html[data-design="new"] .nickname-prompt-field:focus-within {
  border-color: rgba(142, 68, 238, 0.48);
}
html[data-design="new"] .nickname-prompt-field span {
  color: rgba(245, 238, 255, 0.5);
}
html[data-design="new"] .nickname-prompt-hint {
  color: rgba(245, 238, 255, 0.55);
}
html[data-design="new"] .nickname-prompt-note {
  color: rgba(245, 238, 255, 0.45);
}
html[data-design="new"] .nickname-prompt-later {
  color: rgba(245, 238, 255, 0.7);
}
html[data-design="new"] .nickname-prompt-save {
  border: 1.5px solid rgba(142, 68, 238, 0.48);
  background: linear-gradient(135deg, rgba(142, 68, 238, 0.5) 0%, rgba(178, 44, 233, 0.35) 100%);
}
html[data-design="new"] .nickname-prompt-required {
  background: rgba(142, 68, 238, 0.14);
  border: 1px solid rgba(142, 68, 238, 0.192);
  color: #f5eeff !important;
}
html[data-design="new"] .nickname-prompt-signout {
  color: rgba(245, 238, 255, 0.5);
}
html[data-design="new"] .nickname-prompt-signout:hover {
  color: rgba(245, 238, 255, 0.85);
}

html[data-design="new"] .lylib-bell {
  border: 1.5px solid rgba(142, 68, 238, 0.3);
  background: linear-gradient(135deg, rgba(142, 68, 238, 0.15) 0%, rgba(178, 44, 233, 0.1) 100%);
}
html[data-design="new"] .lylib-bell:hover {
  border-color: rgba(142, 68, 238, 0.54);
  background: linear-gradient(135deg, rgba(142, 68, 238, 0.3) 0%, rgba(178, 44, 233, 0.2) 100%);
}
html[data-design="new"] .lylib-bell-badge {
  box-shadow: 0 0 0 2px rgba(10, 8, 13, 0.405);
}
html[data-design="new"] .lylib-notif-panel {
  border: 1px solid rgba(142, 68, 238, 0.21);
  background: linear-gradient(160deg, #17121f 0%, #130e19 100%);
  color: #e7e5eb;
}
html[data-design="new"] .lylib-notif-readall {
  color: #c9a5fc;
}
html[data-design="new"] .lylib-notif-readall:hover {
  color: #ddc7fe;
}
html[data-design="new"] a.lylib-notif-item:hover {
  background: rgba(142, 68, 238, 0.12);
}
html[data-design="new"] .lylib-notif-item.unread {
  border-left: 3px solid rgba(142, 68, 238, 0.6);
  background: rgba(142, 68, 238, 0.07);
}

html[data-design="new"] #lylib-player {
  background: linear-gradient(135deg, #130e19 0%, #0c0911 100%);
  border-top: 1px solid rgba(142, 68, 238, 0.21);
}
html[data-design="new"] #lylib-player::after {
  background: linear-gradient(90deg, #892dee, #d4a4ff, #c251f1, #d4a4ff, #892dee);
  background-size: 200% 100%;
}
html[data-design="new"] #lylib-player .lp-cover {
  background-image: linear-gradient(135deg, #c18bfa 0%, #c251f1 100%);
}
html[data-design="new"] #lylib-player.playing .lp-cover {
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4), 0 0 0 2px rgba(142, 68, 238, 0.293), 0 0 22px rgba(142, 68, 238, 0.18);
}
html[data-design="new"] #lylib-player .lp-meta:hover .lp-title {
  color: #e0c4ff;
}
html[data-design="new"] #lylib-player .lp-like.active {
  color: #c251f1;
}
html[data-design="new"] #lylib-player .lp-like.active:hover {
  background: rgba(194, 81, 241, 0.16);
  color: #c251f1;
}
html[data-design="new"] #lylib-player .lp-copy:hover {
  background: rgba(142, 68, 238, 0.22);
  border-color: rgba(142, 68, 238, 0.33);
}
html[data-design="new"] #lylib-player .lp-repeat.active {
  color: #c18bfa;
  background: rgba(193, 139, 250, 0.16);
}
html[data-design="new"] #lylib-player .lp-repeat.active:hover {
  background: rgba(193, 139, 250, 0.24);
  color: #c18bfa;
}
html[data-design="new"] #lylib-player .lp-volume-range::-webkit-slider-thumb {
  background: #d4a4ff;
  box-shadow: 0 0 6px rgba(212, 164, 255, 0.27);
}
html[data-design="new"] #lylib-player .lp-volume-range::-moz-range-thumb {
  background: #d4a4ff;
  box-shadow: 0 0 6px rgba(212, 164, 255, 0.27);
}
html[data-design="new"] #lylib-player .lp-btn.lp-play {
  background: linear-gradient(155deg, #963bf9 0%, #9b35f6 55%, #b22ce9 100%);
  box-shadow: 0 3px 12px rgba(150, 59, 249, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.28);
}
html[data-design="new"] #lylib-player .lp-btn.lp-play:hover {
  background: linear-gradient(155deg, #9d48fa 0%, #a443f8 55%, #b939ed 100%);
}
html[data-design="new"] #lylib-player .lp-progress-fill {
  background: linear-gradient(90deg, #892dee, #d4a4ff, #eed9ff);
  box-shadow: 0 0 10px rgba(212, 164, 255, 0.248);
}
html[data-design="new"] #lylib-player .lp-progress-fill::after {
  box-shadow: 0 0 8px rgba(212, 164, 255, 0.36);
}
@media (min-width: 761px) {
  html[data-design="new"] #lylib-player {
    border: 1px solid rgba(142, 68, 238, 0.21);
    box-shadow: 0 22px 60px rgba(0, 0, 0, 0.6), 0 0 60px rgba(142, 68, 238, 0.072);
  }
}