/* FlatPaper music page: shared palette, paper edges, washi tape and ink. */
:root {
  --bg:#f7f3e9; --paper:#fffdf6; --paper-warm:#f8f2e2;
  --ink:#2c3531; --ink-soft:#4a5751; --muted:#8a8678;
  --line:#ece3d0; --dash:#ddd0b5;
  --accent:#4f8862; --accent-soft:#d8e8d2;
  --accent-hover:#417752; --accent-wash:rgba(79,136,98,.1); --accent-line:#b7cdb1;
  --favorite:#b45f56; --favorite-soft:#f5e5de; --radius-control:12px;
  --tape-yellow:rgba(238,201,110,.72); --tape-pink:rgba(232,168,158,.62);
  --tape-green:rgba(143,192,152,.62); --tape-blue:rgba(111,169,217,.58);
  --tape-stripes:repeating-linear-gradient(45deg,rgba(255,255,255,.25) 0 2px,transparent 2px 7px);
  --radius-handdrawn:255px 15px 225px 15px/15px 225px 15px 255px;
  --text-main:var(--ink); --text-sub:var(--muted);
  color-scheme:light;
  font-family:"Noto Sans SC","PingFang SC","Microsoft YaHei",system-ui,-apple-system,"Segoe UI",sans-serif;
}
* { box-sizing:border-box; }
body { margin:0;background:var(--bg);color:var(--ink);font-size:15px;line-height:1.75; }
body::before { content:"";position:fixed;inset:0;pointer-events:none;z-index:-1;opacity:.3;background-image:linear-gradient(rgba(70,50,30,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(70,50,30,.025) 1px,transparent 1px);background-size:18px 18px,22px 22px; }
button,input,select { font:inherit; }
button,a,input,select { -webkit-tap-highlight-color:transparent; }
button { cursor:pointer; }
button:disabled { cursor:default;opacity:.5; }
svg { stroke-linecap:round;stroke-linejoin:round; }
a { color:inherit;text-decoration:none; }
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible { outline:2px dashed var(--accent);outline-offset:4px; }
[hidden] { display:none!important; }
::selection { background:var(--accent-soft); }
.paper-filters { position:absolute;z-index:-1;pointer-events:none; }
.app { width:min(94vw,1300px);margin:auto;padding-bottom:150px; }
header { position:relative;isolation:isolate;display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:72px;margin-top:28px;padding:12px 24px; }
header::before,.station-intro::before,.search-panel::before,.featured-card::before { content:"";position:absolute;inset:0;z-index:-1;border-radius:4px;background:var(--paper);filter:url(#paper-edge);box-shadow:0 2px 6px rgba(82,64,38,.08);pointer-events:none; }
header::after,.station-intro::after,.search-panel::after { content:"";position:absolute;top:-9px;width:70px;height:20px;z-index:1;background-color:var(--tape-yellow);background-image:var(--tape-stripes);pointer-events:none;transform:rotate(2deg); }
header::after { left:25%; }
.logo-area,.header-controls { display:flex;align-items:center;gap:12px; }
.brand-mark { width:40px;height:40px;display:grid;place-items:center;border:1px dashed var(--dash);border-radius:50%;color:var(--ink-soft);flex-shrink:0; }
.brand-mark svg { width:17px;height:17px; }
.blog-name { font-size:21px;font-weight:800; }
.blog-nav { display:flex;gap:12px;align-items:center; }
.blog-nav a { display:flex;align-items:center;gap:7px;padding:2px 9px;font-size:14px;font-weight:650;color:var(--muted);border-radius:var(--radius-handdrawn);white-space:nowrap; }
.blog-nav a[aria-current],.blog-nav a:hover { color:var(--accent);background-color:var(--accent-soft);background-image:var(--tape-stripes); }
.blog-nav svg { width:15px;height:15px; }
.header-controls { gap:14px; }
.mobile-search-link { display:none; }
.lang-toggle { display:flex;gap:3px; }
.lang-btn { border:0;border-radius:var(--radius-handdrawn);padding:3px 7px;background:transparent;color:var(--muted);font-size:12px; }
.lang-btn.active { background-color:var(--accent-soft);background-image:var(--tape-stripes);color:var(--accent); }
.shortcut-hint { display:none; }
.shortcut-toggle-btn { width:36px;height:36px;display:grid;place-items:center;background:transparent;color:var(--muted);border:1px dashed var(--dash);border-radius:50%; }
.shortcut-toggle-btn svg { width:17px;height:17px; }
.station-intro { position:relative;isolation:isolate;margin:26px 0;min-height:176px;display:flex;align-items:center;justify-content:space-between;padding:24px 36px;gap:24px; }
.station-intro::after { left:48%;width:90px;background-color:var(--tape-pink);transform:rotate(-3deg); }
.eyebrow { display:flex;align-items:center;gap:8px;margin:0 0 12px;color:var(--accent);font-size:13px;font-weight:700; }
.eyebrow::before { content:"";width:8px;height:8px;background:#6fa67c;transform:rotate(15deg); }
.station-intro h1 { margin:0 0 10px;font-size:clamp(28px,3vw,36px);font-weight:800;letter-spacing:0;line-height:1.45; }
.station-intro h1 span { background:linear-gradient(transparent 74%,rgba(240,189,77,.37) 74%,rgba(240,189,77,.37) 95%,transparent 95%); }
.intro-description { margin:0;color:var(--ink-soft);font-size:14px; }
.music-sticker { width:225px;flex-shrink:0;transform:rotate(4deg);position:relative; }
.music-sticker svg { display:block;width:100%;filter:drop-shadow(3px 7px 6px rgba(82,64,38,.12)); }
.music-sticker span { position:absolute;left:36px;bottom:12px;font-size:11px;color:#95876c;letter-spacing:.04em; }
.layout { display:grid;grid-template-columns:260px minmax(0,1fr);gap:28px;align-items:start; }
.panel { min-width:0; }
.panel-header { display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:20px; }
.panel-title { display:flex;align-items:center;gap:8px;font-weight:700;font-size:16px; }
.chip { color:var(--muted);font-size:12px; }
.search-panel { position:sticky;isolation:isolate;top:24px;padding:24px 22px; }
.search-panel::after { right:20px;background-color:var(--tape-blue);transform:rotate(6deg); }
#song-search { scroll-margin-top:24px; }
.search-panel .panel-header { display:block;margin-bottom:18px; }
.search-panel .chip { display:block;margin-top:5px;font-size:11px; }
.search-row { display:flex;align-items:center;gap:8px;flex-wrap:wrap; }
.input { width:100%;min-width:0;padding:10px 12px;border:1px solid var(--dash);border-radius:var(--radius-control);color:var(--ink);background:var(--paper);font-size:13px; }
.input::placeholder { color:var(--muted); }
.search-row .btn { width:100%;margin-top:2px; }
.btn { display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:38px;padding:7px 14px;border:1px solid var(--accent);border-radius:var(--radius-control);background:var(--accent);color:#fff;font-size:13px;font-weight:500;line-height:1.4;white-space:nowrap;transition:background-color .18s,border-color .18s,color .18s; }
.btn:hover { background:var(--accent-hover);border-color:var(--accent-hover); }
.btn-secondary { background:var(--paper);color:var(--ink-soft);border-color:var(--line); }
.btn-ghost { background:transparent;color:var(--muted);border-color:transparent; }
.btn-secondary:hover { background:var(--accent-soft);border-color:var(--accent-line);color:var(--accent); }
.btn-ghost:hover { background:var(--accent-wash);border-color:transparent;color:var(--accent); }
.btn-icon { width:34px;height:34px;min-height:34px;padding:7px;border-radius:50%; }
.btn-icon svg { width:17px;height:17px;flex-shrink:0; }
.btn-icon:hover { border-color:transparent; }
.btn-fav-active { color:var(--favorite);background:var(--favorite-soft);border-color:transparent; }
.btn-fav-active svg { fill:currentColor; }
.source-row { display:flex;gap:8px 14px;flex-wrap:wrap;margin:18px 0; }
.source-chip { display:inline-flex;align-items:center;gap:4px;font-size:12px;cursor:pointer; }
input[type="checkbox"],input[type="range"] { accent-color:var(--accent); }
.source-dot { display:inline-block;width:6px;height:6px;border-radius:var(--radius-handdrawn);background:#6fa67c;vertical-align:middle;margin-right:5px; }
.source-chip .source-dot { display:none; }
.limit-row { display:flex;align-items:center;gap:7px;flex-wrap:wrap;font-size:11px;color:var(--muted); }
select { background:var(--paper);color:var(--ink);border:1px solid var(--dash);border-radius:var(--radius-control);padding:6px 8px; }
@supports (appearance:base-select) {
  select,::picker(select) { appearance:base-select; }
  ::picker(select) { margin-top:6px;padding:5px;border:1px dashed var(--dash);border-radius:var(--radius-control);background:var(--paper);color:var(--ink-soft);box-shadow:0 8px 24px rgba(82,64,38,.14);max-height:280px;scrollbar-width:thin;scrollbar-color:var(--dash) transparent; }
  select::picker-icon { color:var(--muted); }
  option { padding:6px 10px;border-radius:8px;font:inherit; }
  option:hover,option:focus,option:checked { background:var(--accent-soft);color:var(--accent); }
  option::checkmark { color:var(--accent); }
}
.limit-row select { padding:3px 5px;font-size:12px; }
.limit-row .btn { flex-basis:100%;margin-top:5px; }
.search-stats { display:flex;justify-content:space-between;gap:8px;margin:16px 0 0;font-size:11px;color:var(--muted); }
.search-results-mini { max-height:calc(100vh - 470px);min-height:0;overflow:auto;margin-top:12px; }
.search-mini-item { display:flex;justify-content:space-between;gap:10px;padding:10px 2px;border-top:1px dashed var(--line);cursor:pointer; }
.search-mini-item:hover,.search-mini-item.playing { color:var(--accent); }
.mini-meta-main { min-width:0; }
.mini-title { font-size:12px;font-weight:600;white-space:nowrap;text-overflow:ellipsis;overflow:hidden; }
.mini-artist,.mini-badge,.mini-source { font-size:11px;color:var(--muted); }
.empty-state { margin:20px 0;padding:34px 24px;border:1px dashed var(--dash);border-radius:var(--radius-control);background:var(--paper);text-align:center;color:var(--muted);font-size:13px;line-height:1.8; }
.mini-artist { white-space:nowrap;text-overflow:ellipsis;overflow:hidden; }
.mini-right { flex-shrink:0;text-align:right; }
.playlist-panel > .panel-header { flex-wrap:wrap;margin:0 0 16px;padding-bottom:14px;border-bottom:1px dashed var(--dash); }
.playlist-tabs { display:flex;flex-wrap:wrap;gap:8px; }
.playlist-tab { border:0;padding:4px 10px;border-radius:var(--radius-handdrawn);color:var(--muted);background:transparent;font-size:13px;font-weight:600;white-space:nowrap; }
.playlist-tab.active { background-color:var(--accent-soft);background-image:var(--tape-stripes);color:var(--accent);transform:rotate(-1deg); }
.playlist-main { min-height:360px; }
.playlist-top-row { display:flex;align-items:center;justify-content:space-between;gap:12px; }
.playlist-info { margin:0;min-width:0;font-size:18px;font-weight:700;line-height:1.6; }
.playmode-row { display:flex;gap:5px;flex-shrink:0; }
.playmode-btn { width:30px;height:30px;padding:0;background:transparent;color:var(--muted);border:1px solid transparent;border-radius:50%;transition:background-color .18s,color .18s; }
.playmode-btn:hover,.playmode-btn.active { background:var(--accent-soft);color:var(--accent); }
.playmode-btn svg { display:block;width:15px;height:15px;margin:auto; }
.featured-filters { position:relative;display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:16px; }
.platform-tabs { display:flex;gap:8px;flex-wrap:wrap; }
.platform-tabs button { position:relative;border:0;border-radius:var(--radius-handdrawn);background:transparent;color:var(--muted);padding:5px 11px;font-size:13px;font-weight:600;white-space:nowrap; }
.platform-tabs button[aria-pressed="true"] { color:var(--accent);background-color:var(--tape-green);background-image:var(--tape-stripes);transform:rotate(-1deg); }
.platform-tabs button:hover { color:var(--accent); }
.category-picker { position:relative;flex-shrink:0;z-index:10; }
.category-trigger { display:flex;align-items:center;justify-content:space-between;gap:16px;min-width:115px;min-height:36px;padding:6px 11px;border:1px solid var(--dash);border-radius:var(--radius-control);background:var(--paper);color:var(--ink-soft);font-size:13px; }
.category-trigger.has-selection { color:var(--accent);background:var(--accent-soft); }
.category-trigger svg { width:15px;height:15px;transition:transform .18s; }
.category-trigger[aria-expanded="true"] svg { transform:rotate(180deg); }
.category-panel { position:absolute;top:calc(100% + 12px);right:0;width:360px;padding:20px;background:var(--paper);border:1px dashed var(--dash);border-radius:var(--radius-control);box-shadow:0 12px 28px rgba(82,64,38,.16);overflow:auto;overscroll-behavior:contain; }
.opens-above .category-panel { top:auto;bottom:calc(100% + 12px); }
.category-heading { display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:15px;font-weight:700;margin-bottom:14px; }
.category-heading button,.modal-close-btn { display:grid;place-items:center;width:32px;height:32px;padding:6px;border:0;color:var(--muted);background:transparent;border-radius:50%;flex-shrink:0; }
.category-heading button:hover,.modal-close-btn:hover { color:var(--accent);background:var(--accent-soft); }
.category-heading svg { width:20px;height:20px; }
.category-panel .input { font-size:12px; }
.category-options { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 10px;margin-top:18px; }
.category-options button { min-height:34px;padding:3px 7px;border:1px solid transparent;border-radius:var(--radius-handdrawn);font-size:12px;font-weight:600;color:var(--ink-soft);background-color:var(--tape-green);background-image:var(--tape-stripes); }
.category-options button:nth-child(3n + 2) { background-color:var(--tape-blue); }
.category-options button:nth-child(3n + 3) { background-color:var(--tape-yellow); }
.category-options button[aria-pressed="true"] { border:1px dashed var(--accent);color:var(--accent);background-color:var(--accent-soft); }
.category-options button:hover { transform:translateY(-1px); }
.category-empty { color:var(--muted);font-size:12px;margin:18px 0 0; }
.featured-update { display:flex;align-items:center;justify-content:space-between;gap:12px;margin:13px 0 18px; }
.featured-status { margin:0;color:var(--muted);font-size:11px;line-height:1.8; }
.refresh-button { display:flex;align-items:center;gap:4px;flex-shrink:0;border:0;background:transparent;color:var(--muted);padding:2px;font-size:11px; }
.refresh-button:hover { color:var(--accent); }
.refresh-button svg { width:13px;height:13px; }
.featured-tools { display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:14px; }
.featured-tools svg { width:16px;height:16px;flex-shrink:0; }
#featured-back,#featured-original { background:transparent;border-color:transparent;color:var(--muted);padding-inline:6px; }
#featured-back:hover,#featured-original:hover { color:var(--accent);background:rgba(79,136,98,.07); }
#featured-back { margin-right:6px; }
#featured-original { margin-left:auto; }
#featured-play { border-color:var(--accent);box-shadow:0 2px 5px rgba(79,136,98,.12); }
#featured-play:hover { background:var(--accent-hover);border-color:var(--accent-hover); }
.featured-description { color:var(--ink-soft);font-size:13px;line-height:1.8;max-height:132px;overflow:auto;white-space:pre-line;margin:0 0 20px; }
.featured-description:empty { display:none; }
.featured-grid { display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px 20px; }
.featured-card { position:relative;isolation:isolate;min-width:0;text-align:left;padding:12px 12px 14px;border:0;background:transparent;color:var(--ink);transition:transform .2s,box-shadow .2s; }
.featured-card:hover { transform:translateY(-4px);box-shadow:0 12px 24px rgba(82,64,38,.09); }
.featured-card:focus-visible { outline-offset:5px; }
.card-cover { position:relative;width:100%;aspect-ratio:1;overflow:hidden;background:var(--paper-warm);border-radius:3px; }
.card-cover img { position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;transition:transform .3s; }
.featured-card:hover img { transform:scale(1.025); }
.cover-missing { display:grid;place-items:center;color:var(--accent); }
.cover-missing svg { width:42px;height:42px; }
.card-open { position:absolute;right:9px;bottom:9px;width:30px;height:30px;display:grid;place-items:center;border:1px dashed var(--dash);border-radius:50%;background:var(--paper);color:var(--accent);opacity:0;transform:translateX(-4px);transition:opacity .2s,transform .2s; }
.featured-card:hover .card-open,.featured-card:focus-visible .card-open { opacity:1;transform:translateX(0); }
.card-open svg { width:15px;height:15px; }
.featured-card strong { display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:14px;line-height:1.65;font-weight:700;min-height:46px;margin:12px 0 8px; }
.card-meta { display:flex;align-items:center;justify-content:space-between;gap:8px;color:var(--muted);font-size:11px; }
.card-source { display:flex;align-items:center;gap:6px;color:var(--ink-soft); }
.card-source::before { content:"";width:5px;height:5px;background:#6fa67c;transform:rotate(15deg); }
.card-tags { display:block;white-space:pre;overflow:hidden;text-overflow:ellipsis;font-size:10px;color:var(--accent);margin-top:7px;min-height:18px; }
.playlist-select-row { flex-direction:column;gap:8px;margin:16px 0; }
.playlist-select-tools,.playlist-file-actions { display:flex;align-items:center;gap:8px;flex-wrap:wrap; }
.playlist-select-tools select { flex:1;min-width:100px; }
#new-playlist-btn { color:var(--accent);background:var(--accent-wash); }
#new-playlist-btn:hover { background:var(--accent-soft); }
#delete-playlist-btn:hover { color:var(--favorite);background:var(--favorite-soft); }
.track-item { display:grid;grid-template-columns:28px minmax(0,1fr) auto;gap:12px;align-items:center;padding:14px 12px;border-bottom:1px dashed var(--dash);cursor:pointer; }
.track-item:hover,.track-item.playing { background:var(--accent-soft); }
.track-index { color:var(--muted);font-size:12px; }
.track-meta-title { font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.track-meta-sub { display:flex;justify-content:space-between;gap:8px;font-size:12px;color:var(--muted);margin-top:3px; }
.track-meta-sub > span:first-child { white-space:nowrap;text-overflow:ellipsis;overflow:hidden; }
.track-meta-sub > span:last-child { white-space:nowrap;flex-shrink:0; }
.track-actions { display:flex;align-items:center;gap:6px; }
.track-actions .btn-icon { width:34px;height:34px;min-height:34px;padding:8px;border:1px solid transparent;border-radius:50%;box-shadow:none;background:transparent;color:var(--muted);transition:background-color .18s,color .18s; }
.track-actions .btn-icon:hover { transform:none;background:var(--paper);color:var(--accent); }
.track-actions svg { width:17px;height:17px;flex-shrink:0;stroke-linecap:round;stroke-linejoin:round; }
.track-actions .track-play { background:var(--accent-wash);color:var(--accent); }
.track-actions .track-play:hover { background:var(--accent);color:var(--paper); }
.track-actions .track-play svg { transform:translateX(1px); }
.track-actions .btn-fav-active,.track-actions .btn-fav-active:hover { background:var(--favorite-soft);color:var(--favorite); }
.track-actions .track-favorite:hover,.track-actions .track-remove:hover { color:var(--favorite); }
.player-panel { position:fixed;bottom:16px;left:3vw;right:3vw;max-width:1300px;margin:auto;z-index:20;padding:16px 24px;background:var(--paper);border:1px dashed var(--dash);border-radius:5px 3px 6px 4px;box-shadow:0 8px 28px rgba(82,64,38,.15); }
.player-panel::before { content:"";position:absolute;left:20%;top:-8px;width:65px;height:18px;background-color:var(--tape-green);background-image:var(--tape-stripes);transform:rotate(-3deg);pointer-events:none; }
.player-panel > .panel-header { display:none; }
.player-top { display:grid;grid-template-columns:58px minmax(0,1fr);gap:16px;align-items:center; }
.cover-wrapper { width:58px;height:58px;border-radius:3px;overflow:hidden;background:var(--accent-soft); }
#cover-img { display:none;width:100%;height:100%;object-fit:cover; }
.cover-placeholder { height:100%;display:flex;align-items:center;justify-content:center;color:var(--accent); }
.cover-placeholder svg { width:24px;height:24px; }
.cover-placeholder > [data-i18n] { display:none; }
.player-main { min-width:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,45%);align-items:center;gap:28px; }
.track-title-row { display:flex;justify-content:space-between;align-items:center;gap:12px;min-width:0; }
.track-text { min-width:0; }
.track-title { font-size:14px;font-weight:700;white-space:nowrap;text-overflow:ellipsis;overflow:hidden; }
.track-artist { color:var(--muted);font-size:12px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden; }
.track-tags { display:flex;align-items:center;gap:6px;margin-top:2px; }
.source-pill,.lossless-pill { color:var(--accent);font-size:10px; }
.player-actions { display:flex;flex-direction:column;align-items:flex-end;gap:5px;flex-shrink:0; }
.player-btn-row { display:flex;gap:5px; }
.player-btn-row .btn { border:0;box-shadow:none;background:transparent;color:var(--muted);font-size:13px; }
.player-btn-row .btn:hover { color:var(--accent);background:var(--accent-soft); }
.player-btn-row .btn-fav-active,.player-btn-row .btn-fav-active:hover { color:var(--favorite);background:var(--favorite-soft); }
.player-btn-row .btn[aria-expanded="true"] { color:var(--accent);background:var(--accent-soft); }
.player-btn-row svg { width:17px;height:17px; }
.status-pill { font-size:10px;color:var(--muted); }
.player-controls { display:flex;flex-direction:column-reverse;gap:5px; }
.control-row { display:flex;justify-content:space-between;align-items:center;gap:24px; }
.control-main,.control-secondary { display:flex;align-items:center;gap:12px; }
.control-main .btn { border:0;box-shadow:none;background:transparent;color:var(--ink-soft); }
.control-main .btn:hover { color:var(--accent);background:var(--accent-soft); }
.control-main .play-btn { width:36px;height:36px;border-radius:50%;color:#fff;background:var(--accent);padding:0; }
.control-main .play-btn:hover { color:#fff;background:var(--accent-hover); }
.control-main svg { width:19px;height:19px; }
.control-main .play-btn svg { width:19px;height:19px; }
.control-secondary { color:var(--muted);gap:8px; }
.control-secondary svg { width:16px;height:16px; }
.volume-slider { width:80px;height:4px; }
.progress-row { display:flex;align-items:center;gap:10px;font-size:10px;color:var(--muted); }
.progress-time { font-variant-numeric:tabular-nums; }
.progress-bar-wrapper { position:relative;flex:1;height:16px;cursor:pointer; }
.progress-bar-wrapper::before { content:"";position:absolute;top:7px;width:100%;height:3px;background:#e6dfcd;border-radius:3px; }
.progress-bar { position:absolute;top:7px;width:100%;height:3px;transform:scaleX(0);transform-origin:left;background:var(--accent);border-radius:3px; }
.progress-handle { position:absolute;top:4px;left:0;width:8px;height:8px;border-radius:50%;background:var(--accent);transform:translateX(-50%); }
.lyrics-container { display:none;position:absolute;right:0;bottom:calc(100% + 14px);width:min(480px,calc(94vw - 32px));height:340px;padding:24px;background:var(--paper);border:1px dashed var(--dash);border-radius:var(--radius-control);box-shadow:0 12px 28px rgba(82,64,38,.14);overflow:auto; }
.lyrics-open .lyrics-container { display:block; }
.lyrics-title-line { font-weight:700;font-size:14px;margin-bottom:18px; }
.lyrics-line { padding:7px 0;font-size:14px;line-height:1.8;color:var(--muted); }
.lyrics-line.active { color:var(--accent);font-weight:700; }
.lyrics-empty { padding:40px 0;font-size:12px;color:var(--muted);text-align:center; }
footer { margin-top:32px;padding-top:20px;border-top:1px dashed var(--dash);font-size:11px;color:var(--muted); }
footer a { text-decoration:underline;text-underline-offset:3px; }
.modal-backdrop { display:none;position:fixed;inset:0;z-index:40;background:rgba(46,36,22,.3);backdrop-filter:blur(3px);align-items:center;justify-content:center;padding:20px; }
.modal-backdrop.show { display:flex; }
.modal { width:min(500px,100%);max-height:85vh;overflow:auto;border:1px dashed var(--dash);border-radius:var(--radius-control);padding:26px;background:var(--paper);box-shadow:0 16px 48px rgba(82,64,38,.14); }
.modal-header,.modal-title-wrap { display:flex;justify-content:space-between;align-items:center;gap:10px;font-weight:700; }
.modal-close-btn svg { width:20px;height:20px; }
.modal-desc { color:var(--muted);font-size:13px;margin:16px 0; }
#playlist-name-input { width:100%;padding:10px;border:1px solid var(--dash);border-radius:var(--radius-control);color:var(--ink);background:var(--paper); }
.modal-actions { display:flex;justify-content:flex-end;gap:8px;margin-top:20px; }
.shortcut-grid { display:grid;grid-template-columns:1fr 1fr;gap:12px; }
.shortcut-card { border:1px dashed var(--dash);border-radius:var(--radius-control);padding:10px;font-size:12px; }
.shortcut-key { margin-top:8px; }
kbd { display:inline-block;margin-right:3px;padding:1px 5px;border:1px solid var(--dash);border-radius:3px;color:var(--muted);font-size:11px; }
.category-panel,.lyrics-container,.modal,.search-results-mini,.featured-description { scrollbar-width:thin;scrollbar-color:var(--dash) transparent; }
#toast { position:fixed;left:50%;bottom:140px;z-index:60;max-width:calc(100vw - 32px);padding:10px 18px;border-radius:4px;background:var(--ink);color:var(--paper);font-size:12px;opacity:0;pointer-events:none;transform:translate(-50%,8px);transition:opacity .2s,transform .2s; }
#toast.show { opacity:1;transform:translate(-50%,0); }
@media (max-width:1100px) {
  .blog-name { font-size:18px; }
  .blog-nav { gap:4px; }
  .layout { grid-template-columns:220px minmax(0,1fr);gap:24px; }
  .search-panel { padding:22px 18px; }
  .station-intro { padding:28px 32px; }
  .music-sticker { width:180px; }
  .playlist-panel > .panel-header { gap:12px; }
  .playlist-tabs { gap:2px; }
  .playlist-tab { font-size:12px;padding:4px 8px; }
  .featured-grid { gap:20px 14px; }
  .featured-card { padding:10px; }
}
@media (min-width:761px) and (max-width:1199px) {
  .featured-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (max-width:850px) {
  .blog-nav a { font-size:12px;padding:2px 7px;gap:4px; }
  .blog-nav svg { display:none; }
  .blog-name { font-size:16px; }
  .platform-tabs { gap:2px; }
  .platform-tabs button { padding:5px 7px;font-size:12px; }
  .featured-card strong { font-size:13px;min-height:43px; }
}
@media (max-width:760px) {
  .app { width:calc(100% - 32px);padding-bottom:184px; }
  header { min-height:68px;margin-top:20px;padding:16px;gap:12px;flex-wrap:wrap; }
  header::after { left:55%;width:54px; }
  .logo-area { gap:9px; }
  .brand-mark { width:30px;height:30px; }
  .brand-mark svg { width:14px;height:14px; }
  .blog-name { font-size:16px; }
  .blog-nav { order:2;width:100%;justify-content:center;gap:14px;border-top:1px dashed var(--line);padding-top:12px; }
  .blog-nav a { font-size:13px;padding:2px 9px; }
  .blog-nav svg { display:block;width:14px;height:14px; }
  .header-controls { margin-left:auto;gap:8px; }
  .lang-btn { font-size:11px;padding:2px 5px; }
  .mobile-search-link { display:inline;font-size:11px;color:var(--muted); }
  .shortcut-toggle-btn { display:none; }
  .station-intro { margin:24px 0 26px;min-height:0;padding:20px 22px;gap:0; }
  .station-intro::after { left:auto;right:25px;width:64px;height:18px; }
  .station-intro h1 { font-size:24px;line-height:1.5;margin-bottom:8px; }
  .station-intro h1 span { display:table; }
  .eyebrow { font-size:11px;margin-bottom:9px; }
  .intro-description { font-size:12px;max-width:22em; }
  .music-sticker { display:none; }
  .layout { display:flex;flex-direction:column;gap:32px; }
  .playlist-panel { order:0;width:100%; }
  .search-panel { order:1;position:relative;top:auto;width:100%;padding:24px 22px; }
  .search-row { flex-wrap:nowrap; }
  .search-row .input { flex:1; }
  .search-row .btn { width:auto;margin:0; }
  .input,#playlist-name-input,.category-panel .input { font-size:16px; }
  .limit-row .btn { flex-basis:auto;margin:0 0 0 auto; }
  .search-results-mini { max-height:280px; }
  .featured-grid { grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 14px; }
  .playlist-panel > .panel-header { margin-bottom:16px;gap:10px; }
  .playlist-panel > .panel-header > .panel-title { display:none; }
  .playlist-tabs { width:100%;justify-content:space-between;gap:3px; }
  .playlist-tab { font-size:12px;padding:5px 8px; }
  .playlist-info { font-size:16px; }
  .featured-filters { gap:10px;margin-top:12px; }
  .platform-tabs button { padding:5px 7px;font-size:12px; }
  .category-picker { position:static; }
  .category-trigger { font-size:12px;min-width:95px;gap:8px;padding:5px 9px; }
  .category-panel { width:100%;left:0;right:0;top:calc(100% + 10px);padding:18px; }
  .opens-above .category-panel { bottom:calc(100% + 10px); }
  .category-options { gap:12px 10px; }
  .category-options button { min-height:36px; }
  .featured-update { margin:10px 0 18px; }
  .featured-tools { gap:8px 6px; }
  .featured-tools .btn { min-height:40px;padding:8px 12px;font-size:12px; }
  #featured-back { width:100%;justify-content:flex-start;margin:0;padding:0;min-height:32px; }
  #featured-original { padding-inline:4px; }
  .featured-card strong { font-size:12px;min-height:40px;margin:10px 0 6px; }
  .card-meta { font-size:10px;gap:3px; }
  .card-tags { font-size:9px; }
  .player-panel { left:12px;right:12px;bottom:max(10px,env(safe-area-inset-bottom));padding:12px 14px; }
  .player-panel::before { left:50%;width:52px;height:15px; }
  .player-top { grid-template-columns:42px minmax(0,1fr);gap:12px;align-items:start; }
  .cover-wrapper { width:42px;height:42px; }
  .player-main { display:block; }
  .track-title-row { min-height:42px; }
  .track-title { font-size:13px; }
  .track-artist { font-size:10px; }
  .track-tags,.status-pill { display:none; }
  .player-btn-row .btn { min-height:28px;width:26px; }
  .player-btn-row svg { width:16px;height:16px; }
  .player-controls { margin:8px 0 0 -54px;gap:5px; }
  .control-row { justify-content:center; }
  .control-secondary { display:none; }
  .control-main { gap:24px; }
  .lyrics-container { width:100%;height:300px; }
  .track-item { gap:7px;padding:12px 3px;grid-template-columns:20px minmax(0,1fr) auto; }
  .track-actions { gap:3px; }
  .track-actions .btn-icon { width:36px;height:36px;min-height:36px; }
  .track-meta-sub { font-size:10px; }
  #toast { bottom:180px; }
}
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { transition:none!important;scroll-behavior:auto!important; }
}
@media (max-width:360px) {
  .blog-name { font-size:14px; }
  .logo-area { gap:7px; }
  .brand-mark { width:26px;height:26px; }
  header { gap:8px; }
  .blog-nav { gap:4px; }
  .blog-nav a { padding-inline:5px;font-size:12px;gap:5px; }
  .platform-tabs button { padding-inline:5px; }
  .playlist-tab { font-size:11px;padding-inline:6px; }
}