:root {
  color-scheme: light;
  --bg: #f3effb;
  --panel: #ffffff;
  --panel-soft: #f8f5fd;
  --line: #ded6eb;
  --text: #292239;
  --muted: #62566f;
  --purple: #6742ad;
  --purple-strong: #583294;
  --font: Inter, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 28px; }
body { margin: 0; background: radial-gradient(ellipse 750px 620px at 84% 8%, #e6ddf8, transparent 75%), var(--bg); color: var(--text); font-family: var(--font); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; }
button, input, a { -webkit-tap-highlight-color: transparent; }
button, input { font: inherit; }
button, a { touch-action: manipulation; }
button { cursor: pointer; color: inherit; }
a { color: inherit; text-decoration: none; }
svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.wrap { width: min(1180px, calc(100% - 80px)); margin-inline: auto; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--purple); outline-offset: 4px; }
.skip-link { position: fixed; top: -100px; left: 12px; z-index: 20; padding: 12px; background: var(--panel); border: 1px solid var(--purple); }
.skip-link:focus { top: 12px; }
.site-header { min-height: 72px; display: flex; justify-content: space-between; align-items: center; gap: 24px; border-bottom: 1px solid var(--line); }
.brand { display: flex; align-items: center; gap: 12px; font-size: 19px; font-weight: 650; letter-spacing: 1px; }
.brand-avatar { width: 42px; height: 42px; border: 2px solid #9b7aca; border-radius: 50%; object-fit: cover; flex-shrink: 0; box-shadow: 0 3px 12px #6943aa20; }
.brand-subtitle { display: block; font-size: 11px; font-weight: 500; letter-spacing: 1px; color: var(--muted); }
.site-header nav { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--muted); }
.site-header nav a { padding-block: 10px; }
.site-header nav a:hover, .table-footer a:hover, .site-footer>a:hover { color: var(--purple); }
.profile-link { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 10px 12px; border: 1px solid #d5c7e8; border-radius: 8px; background: #fff; color: var(--purple); white-space: nowrap; }
.live-link { background: #6946b6; color: #fff; border-color: #6946b6; }
.site-header nav a.live-link:hover { background: #56369b; color: #fff; }
.original-button { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 1px solid #d5c7e8; border-radius: 8px; background: #fff; color: var(--purple); flex-shrink: 0; }
.original-button:hover { background: var(--panel-soft); border-color: var(--purple); }
.original-button svg { width: 18px; height: 18px; }
.eyebrow { font-size: 12px; letter-spacing: 2px; font-weight: 600; color: var(--muted); margin: 0 0 18px; display: flex; align-items: center; gap: 9px; }
.accent { color: var(--purple); }
.primary-button { display: inline-flex; justify-content: center; align-items: center; gap: 20px; border: 1px solid transparent; border-radius: 9px; background: #6946b6; color: #fff; padding: 12px 22px; font-size: 15px; font-weight: 650; min-height: 48px; transition: background .2s, transform .2s; }
.primary-button:hover { background: #56369b; transform: translateY(-1px); }
.primary-button svg { width: 18px; height: 18px; }
.song-section { padding-top: 20px; padding-bottom: 35px; scroll-margin-top: 22px; }
.section-heading { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: 16px; }
.section-heading h1 { font-size: 28px; letter-spacing: 1px; margin: 0; font-weight: 650; }
.section-hint { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 14px; margin: 0 0 4px; }
.section-hint svg { width: 17px; height: 17px; }
.song-panel { border: 1px solid var(--line); background: var(--panel); border-radius: 14px; overflow: hidden; box-shadow: 0 12px 40px #5c42700a; }
.toolbar { display: flex; gap: 14px; padding: 24px 26px 20px; }
.search-field { flex: 1; min-width: 0; display: flex; align-items: center; gap: 11px; border: 1px solid #c9bdd8; background: var(--panel-soft); border-radius: 8px; padding: 0 15px; min-height: 52px; }
.search-field>svg { color: var(--muted); }
.search-field input { width: 100%; min-width: 0; background: none; border: 0; outline: none; color: var(--text); font-size: 16px; line-height: 26px; padding-block: 10px; }
.search-field:focus-within { border-color: var(--purple); box-shadow: 0 0 0 3px #6742ad20; }
.search-field input::placeholder { color: var(--muted); opacity: 1; }
.search-field kbd { border: 1px solid #c9bdd8; border-radius: 4px; min-width: 24px; text-align: center; color: var(--muted); font-family: inherit; font-size: 14px; }
.random-button { display: flex; align-items: center; justify-content: center; gap: 10px; background: #eee6fb; border: 1px solid #cdbbe7; color: #593891; font-size: 16px; font-weight: 600; padding: 0 22px; border-radius: 8px; min-height: 52px; transition: background .2s; }
.random-button:hover { background: #e2d4f6; }
.random-button:disabled { opacity: .55; cursor: default; }
.filter-bar { display: flex; align-items: center; justify-content: space-between; padding: 0 26px 22px; gap: 16px; }
.category-tabs { display: flex; gap: 8px; flex-wrap: wrap; }
.category { border: 1px solid #ddd3eb; border-radius: 8px; background: #fff; color: var(--muted); white-space: nowrap; padding: 9px 13px; font-size: 15px; line-height: 24px; display: flex; gap: 8px; align-items: center; min-height: 44px; }
.category>span { font-size: 14px; color: var(--muted); font-variant-numeric: tabular-nums; }
.category:hover { color: var(--purple); background: var(--panel-soft); border-color: #b39acf; }
.category.active { background: #6946b6; color: #fff; border-color: #6946b6; }
.category.active>span { color: #fff; }
.result-count { color: var(--muted); font-size: 14px; white-space: nowrap; flex-shrink: 0; margin: 0; }
.song-table { width: 100%; border-spacing: 0; border-collapse: collapse; text-align: left; table-layout: fixed; }
.song-table thead { background: var(--panel-soft); color: var(--muted); font-size: 14px; letter-spacing: .5px; }
.song-table th { height: 48px; font-weight: 500; border-block: 1px solid var(--line); }
.number-col { width: 70px; padding-left: 28px; color: var(--muted); font-size: 14px; font-variant-numeric: tabular-nums; }
.category-col { width: 180px; }
.action-col { width: 76px; }
.song-table tbody tr { border-bottom: 1px solid #eee8f5; transition: background .15s; }
.song-table tbody tr:hover { background: #f8f4fe; }
.song-table td { height: 74px; padding-top: 10px; padding-bottom: 10px; }
.song-title { display: inline-block; max-width: 100%; border: 0; background: none; padding: 8px 18px 8px 0; text-align: left; color: var(--text); font-size: 18px; line-height: 1.6; overflow-wrap: anywhere; }
.song-title:hover { color: var(--purple); }
.category-badge { display: inline-block; max-width: 100%; font-size: 13px; line-height: 24px; padding: 2px 10px; border-radius: 5px; color: #5c4774; background: #f0eafa; border: 1px solid #e0d5ef; white-space: nowrap; }
.badge-pop { color: #5c4774; background: #f0eafa; border-color: #e0d5ef; }
.badge-ancient { color: #6a416c; background: #f7edf7; border-color: #e9d5e8; }
.badge-english { color: #365a85; background: #edf3fb; border-color: #d4e1f2; }
.badge-vocal { color: #7b4265; background: #faeef5; border-color: #edd6e4; }
.copy-song { border: 1px solid #d9cde9; background: #faf7ff; color: #6742ad; border-radius: 8px; height: 42px; width: 42px; display: grid; place-items: center; transition: background .2s, border-color .2s; }
.copy-song svg { height: 18px; width: 18px; }
.copy-song:hover { background: #ede3fa; border-color: var(--purple); }
.table-footer { display: flex; justify-content: space-between; gap: 16px; padding: 18px 27px; font-size: 14px; color: var(--muted); background: var(--panel-soft); }
.table-footer a { color: var(--purple); }
.empty-state { text-align: center; padding: 60px 20px 70px; }
.empty-state>svg { height: 32px; width: 32px; color: var(--purple); margin-bottom: 12px; }
.empty-state h3 { font-weight: 600; font-size: 21px; margin: 0 0 8px; }
.empty-state p { font-size: 16px; color: var(--muted); margin: 0 0 24px; }
.howto { border: 1px solid var(--line); border-radius: 12px; display: flex; justify-content: space-between; align-items: center; gap: 25px; padding: 26px 28px; margin-top: 3px; margin-bottom: 58px; background: #faf8ff; }
.howto>div { display: flex; align-items: center; gap: 13px; }
.small-music { display: grid; place-items: center; width: 40px; height: 40px; flex-shrink: 0; background: #eee5fa; border-radius: 50%; color: var(--purple); }
.howto h2 { font-size: 16px; color: var(--text); font-weight: 600; margin: 0; white-space: nowrap; }
.howto ol { display: flex; gap: 20px; list-style: none; padding: 0; margin: 0; color: var(--muted); font-size: 14px; flex-wrap: wrap; }
.howto li { display: flex; gap: 9px; align-items: center; }
.howto li>span { font-size: 12px; font-weight: 600; color: var(--purple); border: 1px solid #cdbbe4; border-radius: 50%; height: 27px; width: 27px; flex-shrink: 0; display: grid; place-items: center; }
.site-footer { border-top: 1px solid var(--line); padding-block: 27px 32px; display: flex; align-items: center; justify-content: space-between; color: var(--muted); font-size: 14px; gap: 20px; }
.footer-brand { display: flex; align-items: center; gap: 8px; font-size: 15px; color: var(--text); }
.footer-brand svg { width: 18px; height: 18px; color: var(--purple); }
.footer-divider { padding-inline: 9px; color: var(--muted); }
dialog { border: 1px solid #cdbbe4; background: var(--panel); color: var(--text); border-radius: 18px; padding: 36px; max-width: calc(100% - 32px); max-height: calc(100dvh - 32px); overflow: auto; box-shadow: 0 25px 100px #38234f40; }
dialog::backdrop { background: #34234970; backdrop-filter: blur(6px); }
.dialog-close { position: absolute; top: 14px; right: 14px; width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid #d9cde9; border-radius: 50%; color: var(--purple); background: var(--panel-soft); }
.dialog-close:hover { background: #e9def7; }
.dialog-close svg { width: 18px; height: 18px; }
.random-dialog { width: 480px; text-align: center; padding-top: 52px; }
.random-disc { height: 100px; width: 100px; border-radius: 50%; border: 1px solid #d4c6e8; background: repeating-radial-gradient(circle, #eee7f8 0, #eee7f8 3px, #e4d9f2 4px, #eee7f8 5px); margin: 0 auto 25px; display: grid; place-items: center; }
.random-disc>span { width: 39px; height: 39px; display: grid; place-items: center; background: #6946b6; border-radius: 50%; color: #fff; }
.random-disc svg { width: 21px; height: 21px; }
.random-dialog .eyebrow { justify-content: center; font-size: 11px; letter-spacing: 1.5px; margin-bottom: 12px; }
.random-intro { color: var(--muted); font-size: 16px; margin: 0 0 10px; }
.random-dialog h2 { font-size: 28px; font-weight: 600; line-height: 1.5; margin: 0 0 8px; overflow-wrap: anywhere; }
.random-details { color: var(--muted); font-size: 15px; min-height: 24px; margin: 0 0 28px; }
.dialog-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.dialog-actions .primary-button { gap: 9px; padding: 11px 17px; }
.secondary-button { display: flex; align-items: center; justify-content: center; gap: 9px; background: var(--panel-soft); border: 1px solid #cdbbe4; border-radius: 9px; padding: 11px 17px; color: #593891; font-size: 15px; min-height: 48px; }
.secondary-button:hover { background: #ede3fa; }
.secondary-button svg { height: 18px; width: 18px; }
.random-copy-status { min-height: 24px; margin: 16px 0 0; font-size: 15px; color: var(--purple); }
.dialog-footnote { margin: 22px 0 0; font-size: 14px; color: var(--muted); }
.poster-dialog { width: min(1120px, calc(100% - 32px)); padding: 18px; max-height: 90dvh; }
.poster-dialog-heading { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-bottom: 14px; }
.poster-dialog h2 { font-weight: 600; font-size: 18px; margin: 0; }
.poster-dialog .dialog-close { position: static; flex-shrink: 0; }
.poster-dialog>img { display: block; width: 100%; height: auto; border-radius: 8px; }
.copy-dialog { width: 440px; padding-top: 56px; }
.copy-dialog h2 { font-size: 21px; margin: 0 0 14px; }
.copy-dialog p { font-size: 16px; color: var(--muted); }
.copy-dialog input { color: var(--text); background: var(--panel-soft); border: 1px solid var(--purple); border-radius: 8px; width: 100%; padding: 12px; font-size: 16px; }
.toast { position: fixed; bottom: 28px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 10px; background: #fff; border: 1px solid #cdbbe4; color: var(--text); border-radius: 10px; padding: 14px 20px; box-shadow: 0 10px 40px #4c2d7026; z-index: 30; font-size: 15px; max-width: calc(100% - 36px); width: max-content; pointer-events: none; overflow-wrap: anywhere; }
.toast svg { width: 18px; height: 18px; color: var(--purple); }
.toast span { min-width: 0; }
.noscript { padding: 25px; text-align: center; color: var(--text); }

@media (max-width: 1000px) {
  .wrap { width: calc(100% - 48px); }
  .filter-bar { align-items: flex-start; flex-direction: column; }
  .howto { align-items: flex-start; flex-direction: column; }
}
@media (max-width: 760px) {
  .wrap { width: calc(100% - 32px); }
  .site-header { min-height: 64px; gap: 12px; flex-wrap: wrap; padding-block: 8px; }
  .brand { font-size: 17px; gap: 9px; }
  .brand-avatar { width: 38px; height: 38px; }
  .brand-subtitle { font-size: 10px; }
  .site-header nav { gap: 8px; font-size: 14px; }
  .profile-link { padding-inline: 8px; }
  .primary-button { font-size: 16px; }
  .primary-button { padding: 12px 18px; gap: 16px; }
  .song-section { padding-top: 14px; }
  .section-heading { margin-bottom: 12px; align-items: flex-start; flex-direction: column; gap: 4px; }
  .section-heading h1 { font-size: 24px; }
  .section-hint { font-size: 14px; margin: 0; }
  .song-panel { border-radius: 11px; }
  .toolbar { padding: 16px 14px; gap: 10px; flex-wrap: wrap; }
  .search-field { flex-basis: 100%; min-height: 52px; padding-inline: 12px; gap: 9px; }
  .search-field input { font-size: 16px; }
  .search-field kbd { display: none; }
  .random-button { min-height: 48px; font-size: 16px; padding-inline: 18px; }
  .filter-bar { padding: 0 14px 18px; gap: 12px; }
  .category-tabs { gap: 8px; width: 100%; justify-content: flex-start; }
  .category { font-size: 16px; padding: 8px 11px; gap: 7px; line-height: 24px; }
  .category>span { font-size: 14px; }
  .result-count { font-size: 14px; }
  .number-col { display: none; }
  .song-table th:nth-child(2), .song-table td:nth-child(2) { padding-left: 14px; }
  .category-col { width: 108px; }
  .action-col { width: 54px; }
  .song-table th { font-size: 14px; height: 44px; }
  .song-title { font-size: 16px; padding-right: 10px; line-height: 1.65; }
  .song-table td { height: 76px; }
  .category-badge { font-size: 12px; padding: 2px 6px; line-height: 22px; }
  .copy-song { width: 40px; height: 40px; }
  .table-footer { font-size: 14px; padding: 16px 14px; gap: 10px; flex-wrap: wrap; }
  .howto { padding: 22px 18px; gap: 20px; margin-bottom: 32px; }
  .howto ol { flex-direction: column; gap: 15px; font-size: 16px; }
  .howto li { gap: 10px; }
  .howto h2 { font-size: 18px; }
  .site-footer { padding-block: 22px 25px; flex-wrap: wrap; gap: 14px; font-size: 14px; }
  .footer-brand { font-size: 15px; }
  .site-footer>span:nth-child(2) { order: 3; width: 100%; }
  .site-footer>a { margin-left: auto; }
  .random-dialog { padding: 52px 20px 26px; }
  .random-dialog h2 { font-size: 25px; }
  .dialog-actions .primary-button, .secondary-button { font-size: 16px; padding: 11px 13px; }
  .poster-dialog { padding: 12px; border-radius: 12px; }
  .toast { font-size: 16px; bottom: 20px; padding: 12px 15px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *:before, *:after { transition: none !important; animation: none !important; }
}

.load-state { padding: 36px 20px; text-align: center; color: #544969; }
.load-state p { margin: 0 0 16px; }
button:disabled { cursor: wait; opacity: .65; }

.badge-custom { color: #53476d; background: #f1ecf9; border-color: #ded3ef; }
.category { max-width: 100%; overflow-wrap: anywhere; white-space: normal; }
.category-badge { max-width: 100%; overflow-wrap: anywhere; white-space: normal; }