/* Shared visual language for non-home pages */
:root {
  color-scheme: dark;
  --radius: 4px;
  --radius-sm: 3px;
  --radius-xs: 2px;
  --site-glass: linear-gradient(135deg, rgba(214, 132, 220, .075), rgba(18, 14, 21, .82) 38%, rgba(89, 48, 127, .12));
  --site-glass-soft: linear-gradient(135deg, rgba(179, 97, 185, .045), rgba(15, 12, 18, .7) 52%, rgba(89, 48, 127, .075));
  --site-stroke: rgba(231, 197, 234, .12);
  --site-shadow: 0 22px 65px rgba(0, 0, 0, .18), inset 0 1px 0 rgba(255, 255, 255, .03);
  --site-mono: "Cascadia Code", "SFMono-Regular", Consolas, monospace;
  --site-display: "Bahnschrift SemiCondensed", "Arial Narrow", "Segoe UI", sans-serif;
}

body {
  background:
    linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px),
    radial-gradient(circle at 84% 10%, rgba(89,48,127,.105), transparent 25%),
    radial-gradient(circle at 8% 76%, rgba(179,97,185,.035), transparent 25%),
    #09080b;
  background-size: 96px 100%, auto, auto, auto;
  background-attachment: fixed;
}

.navbar {
  background: rgba(9, 8, 11, .93);
  border-bottom-color: rgba(255, 255, 255, .08);
  backdrop-filter: blur(14px) saturate(120%);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
}
.nav-link, .btn-icon { border-radius: 3px; }
.nav-link { color: #8e8791; font-size: .86rem; }
.nav-link:hover { color: #e0dae1; background: rgba(179, 97, 185, .055); }
.nav-link.active {
  color: #e3dce4;
  background: linear-gradient(135deg, rgba(214,132,220,.1), rgba(89,48,127,.13));
}

.btn-icon {
  color: #918a95;
  border-color: rgba(255,255,255,.11);
  background: rgba(255,255,255,.018);
}

.btn-icon:hover {
  color: #e1dbe2;
  border-color: rgba(214,132,220,.32);
  background: rgba(179,97,185,.065);
}

.nav-stats {
  color: #766f79;
  font-family: var(--site-mono);
  font-size: .7rem;
}

/* Packs（宽度已收敛到 common.css 的 --page-max-wide，这里不再重复定义） */
.packs-sidebar {
  width: 202px;
  border-right-color: rgba(255,255,255,.075);
  background: linear-gradient(180deg, rgba(18,14,21,.64), rgba(9,8,11,.38));
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.packs-sidebar-section .sidebar-heading,
.sidebar-filters .filter-block h4,
.sort-group label,
.filter-group label {
  font-family: var(--site-mono);
  font-weight: 500;
  letter-spacing: .1em;
}

.sidebar-nav-item { border-radius: 3px; border: 1px solid transparent; }
.sidebar-nav-item:hover {
  background: rgba(179,97,185,.045);
  border-color: rgba(255,255,255,.055);
}

.sidebar-nav-item.active {
  color: #d786dd;
  background: linear-gradient(110deg, rgba(179,97,185,.12), rgba(89,48,127,.08));
  border-color: rgba(214,132,220,.15);
  box-shadow: inset 2px 0 0 #b361b9;
}

.chip, .tag-chip, .filter-tag, .search-mode-btn {
  border-radius: 2px;
  background: rgba(255,255,255,.016);
  border-color: rgba(255,255,255,.075);
}

.chip:hover, .tag-chip:hover, .search-mode-btn:hover {
  background: rgba(179,97,185,.065);
  border-color: rgba(214,132,220,.28);
}

.chip.active,
.tag-chip.active,
.search-mode-btn.active,
.page-btn.active,
.song-pagination .page-btn.active {
  color: #fff;
  background: linear-gradient(135deg, #75417d, #4d2a5b);
  border-color: #94539d;
}

.packs-main { padding: 28px 28px 64px; }
.controls {
  position: relative;
  z-index: 30;
  padding: 16px;
  border: 1px solid var(--site-stroke);
  border-radius: 3px;
  background: var(--site-glass-soft);
  box-shadow: var(--site-shadow);
  backdrop-filter: blur(18px) saturate(120%);
  -webkit-backdrop-filter: blur(18px) saturate(120%);
}

.search-box,
.sort-group select,
.filter-group select,
.range-input,
.search-mode-btn {
  background: rgba(10,8,12,.54);
  border-color: rgba(255,255,255,.11);
}

.sort-group select,
.filter-group select,
.song-per-page {
  color-scheme: dark;
  -webkit-appearance: none;
  appearance: none;
  padding-right: 28px;
  background-image:
    linear-gradient(45deg, transparent 50%, #827986 50%),
    linear-gradient(135deg, #827986 50%, transparent 50%);
  background-position:
    calc(100% - 13px) calc(50% - 2px),
    calc(100% - 9px) calc(50% - 2px);
  background-size: 4px 4px, 4px 4px;
  background-repeat: no-repeat;
}

.sort-group select option,
.filter-group select option,
.song-per-page option {
  color: #ded8e0;
  background: #151118;
}

.range-input[type="number"] {
  appearance: textfield;
  -moz-appearance: textfield;
}

.range-input[type="number"]::-webkit-inner-spin-button,
.range-input[type="number"]::-webkit-outer-spin-button {
  margin: 0;
  -webkit-appearance: none;
  appearance: none;
}

.search-box { border-radius: 3px; }
.search-box:focus-within,
.range-input:focus,
.sort-group select:focus,
.filter-group select:focus {
  border-color: rgba(214,132,220,.48);
  box-shadow: inset 0 -2px 0 #a958b1;
}

.results-bar {
  margin: 2px 0 7px;
  font-family: var(--site-mono);
  color: #827a85;
}

.site-select {
  position: relative;
  width: 116px;
  flex: 0 0 auto;
}

.site-select-compact { width: 66px; }

.site-select-native {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  clip: rect(0 0 0 0) !important;
}

.site-select-trigger {
  width: 100%;
  min-height: 34px;
  padding: 0 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: #d8d1da;
  background: rgba(10,8,12,.54);
  border: 1px solid rgba(255,255,255,.11);
  border-radius: 2px;
  font: 500 .8rem var(--font);
  cursor: pointer;
  transition: border-color .2s ease, background .2s ease;
}

.site-select-trigger:hover,
.site-select.open .site-select-trigger {
  border-color: rgba(214,132,220,.4);
  background: rgba(179,97,185,.055);
}

.site-select-chevron {
  width: 7px;
  height: 7px;
  flex: 0 0 auto;
  border-right: 1px solid #8f8692;
  border-bottom: 1px solid #8f8692;
  transform: translateY(-2px) rotate(45deg);
  transition: transform .2s ease;
}

.site-select.open .site-select-chevron {
  transform: translateY(2px) rotate(225deg);
}

.site-select-menu {
  position: absolute;
  z-index: 180;
  top: calc(100% + 6px);
  left: 0;
  min-width: 100%;
  width: max-content;
  max-width: 260px;
  max-height: 320px;
  padding: 5px;
  display: none;
  overflow-y: auto;
  border: 1px solid rgba(232,194,235,.15);
  border-radius: 3px;
  background: linear-gradient(145deg, rgba(35,25,39,.96), rgba(13,10,16,.97));
  box-shadow: 0 24px 70px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.035);
  backdrop-filter: blur(20px) saturate(120%);
  -webkit-backdrop-filter: blur(20px) saturate(120%);
}

.site-select.open .site-select-menu {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.site-select-option {
  width: 100%;
  min-height: 32px;
  padding: 6px 10px;
  border: 0;
  border-radius: 2px;
  color: #a9a1ac;
  background: transparent;
  text-align: left;
  white-space: nowrap;
  font: 500 .78rem var(--font);
  cursor: pointer;
}

.site-select-option:hover,
.site-select-option:focus-visible {
  color: #eee8ef;
  outline: 0;
  background: rgba(179,97,185,.08);
}

.site-select-option.active {
  color: #e8c1eb;
  background: linear-gradient(110deg, rgba(179,97,185,.18), rgba(89,48,127,.1));
  box-shadow: inset 2px 0 0 #b361b9;
}

.view-title,
.category-view .view-title,
.series-view .view-title {
  font-family: var(--site-display);
  font-size: 1.55rem;
  font-weight: 500;
  letter-spacing: .025em;
}

.pack-grid { gap: 14px; }
.pack-card {
  border-radius: 3px;
  border-color: var(--site-stroke);
  background: var(--site-glass);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.028), 0 16px 42px rgba(0,0,0,.1);
  backdrop-filter: blur(17px) saturate(115%);
  -webkit-backdrop-filter: blur(17px) saturate(115%);
  transition: transform .3s cubic-bezier(.2,.8,.2,1), border-color .24s ease, box-shadow .3s ease;
}

.pack-card:hover {
  border-color: rgba(214,132,220,.3);
  transform: translateY(-5px);
  box-shadow: 0 28px 68px rgba(11,5,14,.34), inset 0 1px 0 rgba(255,255,255,.045);
}

.pack-card .banner-wrap { border-radius: 2px; background: #121016; }
.pack-card .banner-wrap img {
  filter: saturate(.82) contrast(1.025);
  transition: filter .3s ease, transform .45s ease;
}

.pack-card:hover .banner-wrap img {
  filter: saturate(1) contrast(1.02);
  transform: scale(1.018);
}

.pack-card .pack-name { color: #e5e0e6; font-weight: 600; }
.pack-card .card-meta { color: #98909b; }
.pack-card .card-eval { color: #766f79; }
.pack-card .card-tag {
  border-radius: 2px;
  color: #948c97;
  background: rgba(255,255,255,.024);
  border-color: rgba(255,255,255,.075);
  font-family: var(--site-mono);
  font-size: .66rem;
}

.page-btn,
.song-pagination .page-btn {
  border-radius: 2px;
  background: rgba(15,12,18,.72);
  border-color: rgba(255,255,255,.1);
}

.category-list-item,
.series-maker,
.series-pack-card,
.dan-system,
.dan-version,
.dan-level-header,
.dan-level-body,
.dan-download-btn,
.dan-dl-expand {
  border-radius: 3px;
}

.category-list-item { border: 1px solid transparent; }
.category-list-item:hover {
  color: #d786dd;
  background: rgba(179,97,185,.06);
  border-color: rgba(214,132,220,.13);
  transform: translateX(3px);
}

.series-maker,
.dan-system {
  background: var(--site-glass-soft);
  border-color: var(--site-stroke);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.025);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.dan-version { background: rgba(255,255,255,.025); }

/* Pack detail（宽度/上边距见 pack.css + common.css 变量） */
.detail-back, .detail-fav-btn {
  border-radius: 3px;
  background: rgba(18,14,21,.72);
  border-color: rgba(255,255,255,.11);
}

.detail-back:hover, .detail-fav-btn:hover {
  background: rgba(179,97,185,.065);
  border-color: rgba(214,132,220,.28);
}

.detail-hero {
  border-radius: 3px;
  border-color: rgba(231,197,234,.15);
  box-shadow: 0 28px 78px rgba(0,0,0,.25);
}

.detail-hero-bg::after {
  background:
    linear-gradient(100deg, rgba(8,7,10,.9), rgba(18,12,21,.66) 48%, rgba(55,27,64,.5)),
    linear-gradient(to bottom, rgba(13,17,23,.2), rgba(7,6,9,.84));
  backdrop-filter: blur(2px) saturate(.82);
  -webkit-backdrop-filter: blur(2px) saturate(.82);
}

.detail-title-area h1 {
  max-width: 1000px;
  color: #f0ebf1;
  font-family: var(--site-display);
  font-size: clamp(2rem, 4vw, 3.4rem);
  font-weight: 500;
  letter-spacing: .015em;
  text-shadow: 0 3px 22px rgba(0,0,0,.5);
}

.detail-title-area .detail-maker { color: #b0a6b3; }
.detail-stats { gap: 10px; }
.stat-card {
  border-radius: 3px;
  background: linear-gradient(135deg, rgba(214,132,220,.09), rgba(12,9,14,.58) 55%, rgba(89,48,127,.13));
  border-color: rgba(235,203,237,.14);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035), 0 16px 42px rgba(0,0,0,.13);
  transition: transform .25s ease, border-color .25s ease;
}

.stat-card:hover { transform: translateY(-4px); border-color: rgba(214,132,220,.3); }
.stat-card .stat-value {
  font-family: var(--site-mono);
  font-weight: 500;
  color: #d37bd9;
}

.stat-card .stat-label {
  font-family: var(--site-mono);
  color: #847b87;
}

.detail-eval-section,
.detail-section {
  border-radius: 3px;
  border-color: var(--site-stroke);
  background: var(--site-glass-soft);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.025), 0 16px 48px rgba(0,0,0,.105);
  backdrop-filter: blur(18px) saturate(115%);
  -webkit-backdrop-filter: blur(18px) saturate(115%);
}

.detail-section h2 {
  color: #8c838f;
  font-family: var(--site-mono);
  font-weight: 500;
  letter-spacing: .1em;
}

.detail-info-item,
.detail-text-content,
.song-search-box,
.song-per-page {
  border-radius: 2px;
  background: rgba(255,255,255,.025);
  border-color: rgba(255,255,255,.08);
}

.detail-tag {
  border-radius: 2px;
  background: rgba(255,255,255,.025);
  border-color: rgba(255,255,255,.1);
  font-family: var(--site-mono);
  font-size: .72rem;
}

.detail-link-btn {
  border-radius: 3px;
  background: rgba(255,255,255,.025);
  border-color: rgba(255,255,255,.1);
}

.detail-link-btn:hover {
  background: rgba(179,97,185,.065);
  border-color: rgba(214,132,220,.27);
  transform: translateY(-2px);
}

.detail-link-btn.primary {
  background: linear-gradient(135deg, #74417d, #4d295a);
  border-color: #8d4c96;
}

.song-search-box:focus-within {
  border-color: rgba(214,132,220,.46);
  box-shadow: inset 0 -2px 0 #a958b1;
}

.song-table th {
  background: rgba(179,97,185,.055);
  color: #8f8792;
  font-family: var(--site-mono);
  font-weight: 500;
}

.song-table td { border-bottom-color: rgba(255,255,255,.055); }
.song-table tbody tr:hover,
.song-table tbody tr:hover td { background: rgba(179,97,185,.04); }
.song-list { max-width: 100%; overflow-x: auto; }

/* Documentation（宽度/上边距见 doc.css + common.css 变量；这里只保留皮肤的间距） */
.doc-layout { gap: 22px; }
.doc-sidebar {
  padding: 12px;
  border: 1px solid var(--site-stroke);
  border-radius: 3px;
  background: var(--site-glass-soft);
  box-shadow: var(--site-shadow);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.doc-sidebar-title {
  color: #ddd6df;
  font-family: var(--site-mono);
  font-size: .74rem;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.doc-sidebar-item { border-radius: 2px; }
.doc-sidebar-item:hover,
.doc-sidebar-item.active {
  color: #d786dd;
  background: rgba(179,97,185,.075);
}

.doc-sidebar-item.active { box-shadow: inset 2px 0 0 #b361b9; }
.doc-content {
  padding: clamp(24px, 4vw, 48px);
  border: 1px solid var(--site-stroke);
  border-radius: 3px;
  background: linear-gradient(145deg, rgba(179,97,185,.035), rgba(14,11,17,.74) 30%, rgba(89,48,127,.055));
  box-shadow: var(--site-shadow);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.doc-article { color: #ccc5cf; line-height: 1.9; }
.doc-article h1,
.doc-article h2,
.doc-article h3 {
  color: #eee8ef;
  font-family: var(--site-display);
  font-weight: 500;
  letter-spacing: .015em;
}

.doc-article h1 { font-size: clamp(2rem, 4vw, 3rem); }
.doc-article blockquote {
  border-radius: 0 2px 2px 0;
  background: rgba(179,97,185,.055);
}

.doc-article code {
  border-radius: 2px;
  color: #e0b0e4;
  background: rgba(179,97,185,.085);
}

.doc-article img { border-radius: 3px; }
.doc-article th { background: rgba(179,97,185,.065); }

/* WIP pages */
.placeholder-page {
  position: relative;
  isolation: isolate;
  min-height: calc(100vh - var(--navbar-height)) !important;
  overflow: hidden;
}

.placeholder-page::before,
.placeholder-page::after {
  content: "";
  position: absolute;
  z-index: -1;
  width: min(420px, 60vw);
  height: 220px;
  border: 1px solid rgba(229,178,233,.13);
  border-radius: 3px;
  background: var(--site-glass);
  box-shadow: var(--site-shadow);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  animation: site-placeholder-float 9s ease-in-out infinite;
}

.placeholder-page::before { transform: rotate(4deg); }
.placeholder-page::after {
  opacity: .65;
  transform: rotate(-4deg) translate(24px, 22px);
  animation-delay: -4.5s;
}

.placeholder-page > div {
  color: #e8e1e9;
  font-family: var(--site-display);
  font-weight: 500;
  letter-spacing: .12em;
  opacity: 1 !important;
}

.placeholder-page > p {
  color: #8f8692 !important;
  font-family: var(--site-mono);
  font-size: .78rem !important;
  letter-spacing: .08em;
}

@keyframes site-placeholder-float {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -8px; }
}

/* Light theme */
[data-theme="light"] body {
  background:
    linear-gradient(90deg, rgba(41,31,45,.022) 1px, transparent 1px),
    radial-gradient(circle at 86% 8%, rgba(179,97,185,.065), transparent 25%),
    radial-gradient(circle at 8% 76%, rgba(89,48,127,.025), transparent 25%),
    #f7f6f8;
  background-size: 96px 100%, auto, auto, auto;
}

[data-theme="light"] {
  color-scheme: light;
}

[data-theme="light"] .navbar {
  background: rgba(255,255,255,.86);
  border-bottom-color: rgba(61,45,66,.11);
}

[data-theme="light"] .nav-link { color: #625a66; }
[data-theme="light"] .nav-link:hover,
[data-theme="light"] .nav-link.active { color: #312b34; }
[data-theme="light"] .btn-icon { color: #5d5561; border-color: rgba(61,45,66,.16); }

[data-theme="light"] .packs-sidebar,
[data-theme="light"] .controls,
[data-theme="light"] .pack-card,
[data-theme="light"] .series-maker,
[data-theme="light"] .dan-system,
[data-theme="light"] .detail-eval-section,
[data-theme="light"] .detail-section,
[data-theme="light"] .doc-sidebar,
[data-theme="light"] .doc-content {
  color: #28222b;
  background: linear-gradient(145deg, rgba(255,255,255,.9), rgba(247,243,249,.78) 52%, rgba(226,211,231,.38));
  border-color: rgba(74,52,80,.15);
  box-shadow: 0 18px 55px rgba(64,43,72,.075), inset 0 1px 0 rgba(255,255,255,.8);
}

[data-theme="light"] .packs-sidebar {
  background: rgba(255,255,255,.72);
  border-color: rgba(58,45,63,.11);
  box-shadow: inset -1px 0 0 rgba(255,255,255,.7);
}

[data-theme="light"] .controls {
  background: rgba(255,255,255,.7);
  border-color: rgba(71,53,76,.13);
  box-shadow: 0 15px 42px rgba(64,43,72,.055), inset 0 1px 0 #fff;
}

[data-theme="light"] .pack-card {
  background: rgba(255,255,255,.72);
  border-color: rgba(69,52,74,.15);
  box-shadow: 0 12px 32px rgba(59,43,64,.045), inset 0 1px 0 #fff;
}

[data-theme="light"] .pack-card:hover {
  border-color: rgba(150,83,159,.32);
  box-shadow: 0 24px 58px rgba(74,48,82,.12), inset 0 1px 0 #fff;
}

[data-theme="light"] .pack-card .banner-wrap {
  background: #f0f1f3;
}

[data-theme="light"] .search-box,
[data-theme="light"] .sort-group select,
[data-theme="light"] .filter-group select,
[data-theme="light"] .range-input,
[data-theme="light"] .search-mode-btn,
[data-theme="light"] .page-btn,
[data-theme="light"] .song-pagination .page-btn,
[data-theme="light"] .detail-back,
[data-theme="light"] .detail-fav-btn,
[data-theme="light"] .detail-info-item,
[data-theme="light"] .detail-text-content,
[data-theme="light"] .song-search-box,
[data-theme="light"] .song-per-page,
[data-theme="light"] .detail-link-btn {
  color: #38313b;
  background: rgba(255,255,255,.62);
  border-color: rgba(68,49,73,.17);
}

[data-theme="light"] .sort-group select,
[data-theme="light"] .filter-group select,
[data-theme="light"] .song-per-page {
  color-scheme: light;
  background-image:
    linear-gradient(45deg, transparent 50%, #615766 50%),
    linear-gradient(135deg, #615766 50%, transparent 50%);
}

[data-theme="light"] .sort-group select option,
[data-theme="light"] .filter-group select option,
[data-theme="light"] .song-per-page option {
  color: #332c36;
  background: #f6f2f7;
}

[data-theme="light"] .site-select-trigger {
  color: #39323d;
  background: rgba(255,255,255,.64);
  border-color: rgba(68,49,73,.17);
}

[data-theme="light"] .site-select-trigger:hover,
[data-theme="light"] .site-select.open .site-select-trigger {
  border-color: rgba(139,77,148,.38);
  background: rgba(179,97,185,.055);
}

[data-theme="light"] .site-select-chevron {
  border-color: #675d6b;
}

[data-theme="light"] .site-select-menu {
  border-color: rgba(70,50,75,.15);
  background: linear-gradient(145deg, rgba(255,255,255,.98), rgba(245,240,247,.98));
  box-shadow: 0 22px 60px rgba(70,49,77,.16), inset 0 1px 0 #fff;
}

[data-theme="light"] .site-select-option { color: #5d5461; }
[data-theme="light"] .site-select-option:hover,
[data-theme="light"] .site-select-option:focus-visible {
  color: #2d2630;
  background: rgba(179,97,185,.08);
}

[data-theme="light"] .site-select-option.active {
  color: #713678;
  background: linear-gradient(110deg, rgba(179,97,185,.14), rgba(89,48,127,.055));
}

[data-theme="light"] .pack-card .pack-name,
[data-theme="light"] .detail-section h2,
[data-theme="light"] .doc-sidebar-title,
[data-theme="light"] .doc-article,
[data-theme="light"] .doc-article h1,
[data-theme="light"] .doc-article h2,
[data-theme="light"] .doc-article h3 {
  color: #302a33;
}

[data-theme="light"] .pack-card .card-meta,
[data-theme="light"] .pack-card .card-eval,
[data-theme="light"] .results-bar,
[data-theme="light"] .detail-eval-content,
[data-theme="light"] .detail-info-item .label,
[data-theme="light"] .doc-sidebar-item,
[data-theme="light"] .doc-article blockquote {
  color: #625966;
}

[data-theme="light"] .pack-card .card-tag,
[data-theme="light"] .chip,
[data-theme="light"] .tag-chip,
[data-theme="light"] .filter-tag,
[data-theme="light"] .detail-tag {
  color: #514856;
  background: rgba(255,255,255,.5);
  border-color: rgba(68,49,73,.16);
}

[data-theme="light"] .detail-hero-bg::after {
  background: linear-gradient(100deg, rgba(246,242,248,.92), rgba(239,229,242,.72) 50%, rgba(192,154,201,.5));
}

[data-theme="light"] .detail-title-area h1 {
  color: #211b24;
  text-shadow: 0 2px 16px rgba(255,255,255,.7);
}

[data-theme="light"] .detail-title-area .detail-maker { color: #514956; }
[data-theme="light"] .stat-card {
  background: linear-gradient(135deg, rgba(255,255,255,.76), rgba(240,228,243,.6));
  border-color: rgba(76,52,82,.16);
  box-shadow: 0 14px 38px rgba(67,44,74,.08), inset 0 1px 0 #fff;
}

[data-theme="light"] .stat-card .stat-label { color: #625966; }
[data-theme="light"] .song-table th { color: #5f5663; background: rgba(179,97,185,.08); }
[data-theme="light"] .song-table td { color: #514956; border-bottom-color: rgba(63,46,68,.1); }
[data-theme="light"] .song-title-col { color: #29232c; }
[data-theme="light"] .doc-article code { color: #763b7d; }
[data-theme="light"] .placeholder-page > div { color: #29232d; }
[data-theme="light"] .placeholder-page > p { color: #625966 !important; }

@media (max-width: 1024px) {
  .packs-sidebar.mobile-open {
    background: rgba(14,11,17,.96);
    border-right-color: rgba(255,255,255,.1);
    box-shadow: 20px 0 70px rgba(0,0,0,.38);
  }

  [data-theme="light"] .packs-sidebar.mobile-open {
    background: rgba(250,247,251,.97);
    border-right-color: rgba(63,46,68,.12);
  }
}

@media (max-width: 768px) {
  .navbar .nav-links,
  .navbar .nav-stats { display: none; }
  .navbar .nav-inner { padding-inline: 12px; gap: 8px; }
  .navbar .nav-actions { gap: 6px; }
  .doc-content { padding: 24px 20px; }
  .doc-sidebar { position: static; }
  .packs-main { padding: 18px 12px 48px; }
}

@media (max-width: 600px) {
  .detail-header { padding: 20px 18px 0; }
  .detail-title-area { margin-top: 0; padding: 0; }
  .detail-title-area h1 { font-size: 1.65rem; }
}

@media (prefers-reduced-motion: reduce) {
  .placeholder-page::before,
  .placeholder-page::after { animation: none; }
  .pack-card,
  .stat-card,
  .detail-link-btn,
  .category-list-item { transition: none; }
}