@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Noto+Sans+JP:wght@400;500;600;700;800&display=swap');

:root {
  color-scheme: dark;
  --bg-color: #171313;
  --border-color: #f0e7da;
  --btn-yellow: #c49a62;
  --muted: #b2a49a;
  --line: #40332f;
  --accent: #c49a62;
  --accent-light: #382b24;
  --surface: #211b19;
}

* { box-sizing: border-box; }
html { background: var(--bg-color); }
body {
  background: radial-gradient(ellipse at 50% -18%, #38272a 0, #21191a 40%, var(--bg-color) 78%);
  color: var(--border-color);
  font-family: 'DM Sans', 'Noto Sans JP', sans-serif;
  line-height: 1.65;
}
button, input, select { font: inherit; }
:focus-visible { outline: 2px solid #e0bd8b; outline-offset: 3px; }
a { color: inherit; }

.header {
  padding: 0;
  border-bottom: 1px solid rgba(196,154,98,.28);
  background: rgba(25,20,20,.94);
  backdrop-filter: blur(14px);
}
.header-inner { max-width: 1240px; min-height: 76px; padding: 14px 28px; gap: 28px; }
.logo { color: #f3e8da; font-size: 1.22rem; font-weight: 700; letter-spacing: .035em; }
.logo a { text-decoration: none; }
.logo::before { content: '◉'; color: var(--accent); margin-right: 10px; font-size: 1.1em; }
.header-search-wrapper { max-width: 430px; margin-left: auto; }
.search-icon { left: 17px; color: var(--muted); }
.header-search-input {
  padding: 11px 18px 11px 44px;
  border: 1px solid #4a3b36;
  border-radius: 100px;
  background: #211b1a;
  color: #f1e7da;
  box-shadow: none;
  font-size: .88rem;
  font-weight: 500;
}
.header-search-input::placeholder { color: #9b8d84; }
.header-search-input:focus { border-color: var(--accent); background: #251e1c; box-shadow: 0 0 0 3px rgba(196,154,98,.13); }
.header-nav-links, .header-inner > div:last-child { gap: 22px; }
.header-nav-links a, .header-inner > div:last-child > a:not(.retro-btn) {
  color: #c0b2a7; font-size: .84rem; font-weight: 500; text-decoration: none; white-space: nowrap;
}
.header-nav-links a:hover, .header-inner > div:last-child > a:not(.retro-btn):hover { color: #e1bd8b; }
.main-container { max-width: 1240px; padding: 36px 28px 180px; }
.hero {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column; justify-content: center;
  min-height: 226px; padding: 38px 46px; margin-bottom: 30px;
  border: 1px solid rgba(210,170,122,.28); border-radius: 22px;
  background: linear-gradient(112deg, rgba(35,25,26,.97) 0%, rgba(67,39,43,.94) 57%, rgba(74,48,39,.9) 100%);
  color: #f5eadc; text-align: left;
  box-shadow: inset 0 1px rgba(255,255,255,.035), 0 22px 55px rgba(0,0,0,.18);
}
.hero::before, .hero::after { content: ''; position: absolute; z-index: -1; pointer-events: none; border: 1px solid rgba(220,183,133,.2); border-radius: 50%; }
.hero::before { width: 440px; height: 440px; right: -38px; top: -222px; box-shadow: 0 0 0 28px rgba(220,183,133,.025), 0 0 0 58px rgba(220,183,133,.02); }
.hero::after { width: 270px; height: 270px; right: 142px; top: 92px; border-color: rgba(220,183,133,.12); }
.hero h2 { position: relative; z-index: 1; max-width: 690px; margin: 0 0 13px; color: #f7ebdc; font-size: clamp(1.75rem,3.8vw,2.85rem); line-height: 1.3; letter-spacing: -.035em; font-weight: 700; }
.hero p { position: relative; z-index: 1; max-width: 620px; margin: 0; color: #d0bfb1; font-size: .87rem; }

.tag-accordion { margin-bottom: 25px; overflow: hidden; border: 1px solid var(--line); border-radius: 15px; background: var(--surface); box-shadow: 0 12px 32px rgba(0,0,0,.12); }
.tag-accordion-trigger { padding: 17px 21px; color: #eadfd2; background: var(--surface); font-size: .9rem; font-weight: 600; }
.tag-accordion-trigger:hover { background: #2b2220; }
.trigger-label { gap: 10px; }
.selected-tag-badge { padding: 3px 10px; border: 1px solid rgba(196,154,98,.25); border-radius: 100px; background: var(--accent-light); color: #e2c49c; font-size: .72rem; }
.accordion-arrow { color: #d1ad7d; }
.tag-accordion-body { border-top: 1px solid var(--line); padding: 22px; background: #1d1817; }
.category-grid-container { gap: 28px; }
.category-group { gap: 12px; }
.category-title { color: #b6a79b; font-size: .79rem; }
.category-tag-list { gap: 8px; }
.tag-pill, .tag-label {
  border: 1px solid #50423c; border-radius: 100px; background: #292220;
  color: #d1c3b6; box-shadow: none; font-size: .74rem; font-weight: 500;
  transition: background .2s, color .2s, border-color .2s, transform .2s;
}
.tag-pill { padding: 5px 11px; }
.tag-label { padding: 3px 9px; }
.tag-pill:hover, .tag-label:hover { border-color: #b98c5a; color: #f1d3a7; background: #342820; }
.tag-pill:active { transform: none; box-shadow: none; }
.tag-pill.active, .tag-label.active { border-color: #b99061; background: #493725; color: #f0d7b1; }
.tag-pill .pill-count { color: inherit; opacity: .72; }
.search-status-bar { margin-bottom: 20px; }
.result-count-badge { color: #e7dbce; font-size: 1.02rem; letter-spacing: -.02em; }
.result-count-badge span { color: #d1a56d; }
.sort-select, .clear-filter-btn {
  min-height: 38px; padding: 7px 13px; border: 1px solid #4a3b36; border-radius: 9px;
  background: #241e1c; color: #e1d5c9; box-shadow: none; font-size: .8rem; font-weight: 500;
}
.sort-select:hover, .clear-filter-btn:hover { border-color: #b98c5a; }
.sort-select option { background: #241e1c; color: #e1d5c9; }
.clear-filter-btn:active { transform: none; box-shadow: none; }
.filter-bar { margin-bottom: 24px; padding: 13px 17px; border: 1px solid var(--line); border-radius: 12px; background: #211b19; box-shadow: none; }
.filter-label { color: var(--muted); font-size: .77rem; }
.filter-chip { padding: 4px 10px; border: 1px solid rgba(196,154,98,.18); border-radius: 100px; background: #3b2d25; color: #e5c79f; }
.filter-chip:hover { background: #493625; }
.filter-chip .chip-close { color: #c8ab86; }
.track-grid { grid-template-columns: repeat(auto-fill,minmax(255px,1fr)); gap: 22px; }
.track-card {
  min-width: 0; padding: 11px; border: 1px solid #40332f; border-radius: 17px;
  background: linear-gradient(155deg, #28211f, #211b19 65%); color: #eee3d7;
  box-shadow: 0 10px 30px rgba(0,0,0,.18); transition: transform .22s, box-shadow .22s, border-color .22s;
  animation: track-card-enter .38s ease both; animation-delay: calc(var(--card-index,0) * 35ms);
}
.track-card:hover { transform: translateY(-4px); border-color: #65503e; box-shadow: 0 18px 42px rgba(0,0,0,.27); }
.track-card.is-playing { border-color: #b88c59; box-shadow: 0 0 0 1px rgba(196,154,98,.22), 0 14px 34px rgba(0,0,0,.24); }
@keyframes track-card-enter { from { opacity: 0; translate: 0 8px; } to { opacity: 1; translate: 0 0; } }
.record-stage {
  height: 184px; border: 1px solid rgba(210,170,122,.2); border-radius: 12px;
  background-color: #372629 !important;
  background-image: radial-gradient(ellipse at 72% 18%, rgba(220,184,137,.13), transparent 45%), linear-gradient(140deg, #493137, #252020 75%) !important;
}
.track-card:nth-child(4n+2) .record-stage { background-image: radial-gradient(ellipse at 72% 18%,rgba(198,163,119,.13),transparent 45%),linear-gradient(140deg,#343431,#23201f 75%) !important; }
.track-card:nth-child(4n+3) .record-stage { background-image: radial-gradient(ellipse at 72% 18%,rgba(220,184,137,.12),transparent 45%),linear-gradient(140deg,#47332e,#24201f 75%) !important; }
.track-card:nth-child(4n+4) .record-stage { background-image: radial-gradient(ellipse at 72% 18%,rgba(178,151,166,.13),transparent 45%),linear-gradient(140deg,#38303a,#23201f 75%) !important; }
.screw { display: none; }
.record-disc { width: 84px; height: 84px; border: 1px solid rgba(222,185,138,.36); border-radius: 50%; background: repeating-radial-gradient(circle,transparent 0,transparent 3px,rgba(255,255,255,.035) 4px,transparent 5px), conic-gradient(from 0deg,#100e0f,#33292a 48deg,#151213 96deg,#0d0c0d 180deg,#38292a 230deg,#141112 300deg,#100e0f); box-shadow: 0 18px 28px rgba(0,0,0,.45); transform: rotate(-9deg); transition: transform .30s ease, filter .30s ease; }
.record-stage.has-thumbnail { background-color: #191516 !important; }
.track-thumbnail { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.record-stage.has-thumbnail::before { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg,transparent 48%,rgba(15,11,12,.28)); }
.record-stage.has-thumbnail .record-disc { display: none; }
.record-stage.has-thumbnail .play-icon-overlay { z-index: 2; }
.record-disc::before { content: '♫'; width: auto; height: auto; border: 0; border-radius: 0; background: transparent; color: #d9b47f; font-size: 2.8rem; transform: rotate(9deg); }
.record-stage:hover .record-disc { transform: rotate(0) scale(1.04); filter: brightness(1.12); }
.record-stage.playing .record-disc { animation: disc-spin 15s linear infinite; }
@keyframes disc-spin { to { transform: rotate(351deg); } }
.play-icon-overlay { right: 15px; bottom: 15px; width: 39px; height: 39px; padding: 10px; border: 1px solid rgba(228,195,153,.2); border-radius: 50%; background: rgba(31,25,24,.88); color: #e1bd8b; filter: none; box-shadow: 0 6px 18px rgba(0,0,0,.27); }
.track-info { padding: 15px 8px 0; margin-top: 0; }
.track-title { color: #f0e5d9; font-size: 1rem; font-weight: 600; }
.meta-badge { padding: 0; border: 0; background: none; color: #ad9d91; font-family: inherit; }
.tags { gap: 5px; margin-bottom: 15px; }
.dl-count-badge { margin-right: auto; padding: 0; border: 0; background: none; color: #a99b90; }
.dl-count-badge b { color: #d2c3b7; }
.like-btn, .share-card-btn { padding: 4px 5px; border: 0; background: transparent; color: #b2a49a; box-shadow: none; }
.like-btn:active, .share-card-btn:active { transform: none; box-shadow: none; }
.like-btn.liked, .player-action-btn.liked { border: 0; background: #40272c; color: #df8990; }
.like-pop { animation: like-pop .32s cubic-bezier(.2,.8,.25,1.3); }
@keyframes like-pop { 45% { transform: scale(1.24); } 75% { transform: scale(.94); } }
.share-card-btn:hover { background: #382b24; color: #e3c59d; }
.retro-btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 42px; padding: 9px 17px;
  border: 1px solid #b58a58; border-radius: 9px; background: linear-gradient(135deg,#c7a06c,#ad8050);
  color: #211915; box-shadow: 0 5px 14px rgba(0,0,0,.16); font-size: .84rem; font-weight: 700;
  transition: filter .2s, transform .2s, box-shadow .2s;
}
.retro-btn:hover { background: linear-gradient(135deg,#d2ae7b,#bb8e5d); box-shadow: 0 7px 18px rgba(0,0,0,.23), 0 0 0 1px rgba(239,208,163,.16); transform: translateY(-2px); filter: brightness(1.04); }
.retro-btn:active { transform: translateY(0); box-shadow: none; }
.download-btn { width: 100%; }

.track-title-link { color: inherit; text-decoration: none; }
.track-title-link:hover { color: #dbb47f; }
.track-detail-link { display: inline-block; align-self: flex-start; margin: 0 0 11px; color: #d0a66e; font-size: .75rem; font-weight: 600; text-decoration: none; }
.track-detail-link:hover { color: #ebc994; text-decoration: underline; }
.hidden { display: none !important; }

.detail-main { max-width: 1160px; padding-top: 32px; }
.detail-back { display: inline-block; margin-bottom: 25px; color: #d4ad7b; font-size: .86rem; font-weight: 600; text-decoration: none; }
.detail-back:hover { color: #efd0a3; text-decoration: underline; }
.detail-message { max-width: 760px; padding: 30px; border: 1px solid var(--line); border-radius: 15px; background: var(--surface); color: var(--muted); }
.track-detail { display: grid; grid-template-columns: minmax(230px,.82fr) minmax(0,1.18fr); gap: 40px; align-items: start; }
.detail-art { position: sticky; top: 24px; display: grid; place-items: center; min-height: 430px; border: 1px solid rgba(210,170,122,.2); border-radius: 22px; background: radial-gradient(circle at 76% 17%,rgba(212,177,132,.15),transparent 36%),linear-gradient(145deg,#493136,#282325 60%,#352b2a); }
.detail-art.has-thumbnail { overflow: hidden; background: #191516; }
.detail-thumbnail { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.detail-art span { display: grid; place-items: center; width: 155px; height: 155px; border: 1px solid rgba(222,185,138,.32); border-radius: 42px; background: #191516; color: #d9b47f; box-shadow: 0 28px 45px rgba(0,0,0,.38); font-size: 6rem; transform: rotate(-9deg); }
.detail-content { min-width: 0; padding: 8px 0; }
.detail-eyebrow { margin: 0 0 12px; color: #d1aa75; font-size: .7rem; font-weight: 700; letter-spacing: .18em; }
.detail-content h2 { margin: 0 0 12px; color: #f2e6d9; font-size: clamp(1.75rem,3.5vw,2.8rem); line-height: 1.35; letter-spacing: -.035em; }
.detail-meta { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 17px; color: #b9a99c; font-size: .78rem; }
.detail-tags { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 27px; }
.detail-tags span { padding: 4px 11px; border: 1px solid #50423c; border-radius: 100px; background: #292220; color: #d1c3b6; font-size: .74rem; }
.detail-player-box { padding: 22px; border: 1px solid var(--line); border-radius: 15px; background: var(--surface); }
.detail-player-box label { display: block; margin-bottom: 12px; color: #e8dbce; font-size: .85rem; font-weight: 600; }
.detail-player-box audio { display: block; width: 100%; max-width: 100%; }
.detail-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 17px; }
.detail-actions .retro-btn { min-width: 170px; }
.detail-secondary-btn { padding: 9px 17px; border: 1px solid #51433d; border-radius: 9px; background: #292220; color: #e2d6ca; font-size: .85rem; font-weight: 600; cursor: pointer; }
.detail-secondary-btn { transition: border-color .2s, color .2s, background .2s, transform .2s; }
.detail-secondary-btn:hover { border-color: #b98c5a; color: #e7c493; background: #332821; transform: translateY(-1px); }
.detail-like-btn.liked { border-color: #805159; background: #40272c; color: #df8990; }
.detail-like-btn span[aria-hidden] { margin-right: 4px; }
.detail-text-section { margin-top: 30px; }
.detail-text-section h3 { margin: 0 0 11px; padding-bottom: 10px; border-bottom: 1px solid var(--line); color: #e9ddd0; font-size: 1.05rem; }
.detail-text-section p { margin: 0; color: #c8b9ad; font-size: .9rem; line-height: 1.95; white-space: pre-wrap; overflow-wrap: anywhere; }

.empty-results { grid-column: 1 / -1; display: grid; justify-items: center; gap: 12px; padding: clamp(32px,7vw,64px) 20px; border: 1px dashed #57453b; border-radius: 18px; background: rgba(37,30,28,.75); text-align: center; }
.empty-results-icon { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 16px; background: #382b24; color: #d5ad78; font-size: 1.8rem; }
.empty-results h2 { margin: 0; color: #eee2d6; font-size: 1.15rem; }
.empty-results p { margin: 0 0 6px; color: var(--muted); font-size: .88rem; }
.empty-results .retro-btn { padding: 9px 20px; }
.track-skeleton { min-width: 0; overflow: hidden; padding: 11px; border: 1px solid #40332f; border-radius: 17px; background: #241e1c; box-shadow: 0 10px 30px rgba(0,0,0,.18); }
.skeleton-shimmer { position: relative; overflow: hidden; background: #342b28; }
.skeleton-shimmer::after { position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg,transparent,rgba(215,184,145,.1),transparent); animation: skeleton-shimmer 1.4s ease-in-out infinite; content: ''; }
@keyframes skeleton-shimmer { to { transform: translateX(100%); } }
.skeleton-stage { height: 184px; border-radius: 12px; }
.skeleton-info { display: flex; flex-direction: column; padding: 15px 8px 0; }
.skeleton-line { height: 13px; border-radius: 7px; }
.skeleton-title { width: 72%; height: 17px; margin-bottom: 13px; }
.skeleton-duration { width: 25%; height: 10px; margin-bottom: 16px; }
.skeleton-tags { display: flex; gap: 5px; margin-bottom: 18px; }
.skeleton-tag { width: 48px; height: 21px; border-radius: 100px; }
.skeleton-tag:nth-child(2) { width: 58px; }
.skeleton-tag:nth-child(3) { width: 42px; }
.skeleton-stats { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 14px; }
.skeleton-stat { width: 43px; height: 15px; border-radius: 6px; }
.skeleton-stat:first-child { width: 66px; margin-right: auto; }
.skeleton-download { height: 42px; border-radius: 9px; }
.track-load-error { grid-column: 1 / -1; padding: 24px; color: #e09a94; text-align: center; }

.bottom-player {
  bottom: 18px; max-width: 820px; padding: 15px 20px; border: 1px solid rgba(221,184,135,.28);
  border-radius: 17px; background: rgba(32,25,25,.97); color: #f0e5d9;
  box-shadow: 0 24px 55px rgba(0,0,0,.48); backdrop-filter: blur(18px);
  transition: transform .4s cubic-bezier(.22,.8,.25,1), opacity .3s ease, visibility 0s;
}
.bottom-player.hidden { display: block !important; visibility: hidden; opacity: 0; pointer-events: none; transform: translate(-50%,140%); transition: transform .4s cubic-bezier(.22,.8,.25,1),opacity .3s ease,visibility 0s linear .4s; }
.player-inner { gap: 12px; }
.player-header { border-bottom: 1px solid rgba(221,184,135,.17); padding-bottom: 10px; }
.player-header-left { gap: 11px; }
.now-playing-badge { color: #d6b17e; background: none; font-size: .61rem; letter-spacing: .13em; }
.player-track-title { color: #f0e5d9; font-size: .87rem; }
.player-action-btn { padding: 5px 8px; border: 1px solid rgba(221,184,135,.16); border-radius: 7px; background: rgba(255,255,255,.055); color: #e8d9c9; box-shadow: none; }
.player-action-btn { transition: background .2s, border-color .2s, color .2s, transform .2s; }
.player-action-btn:hover { border-color: rgba(221,184,135,.32); background: rgba(221,184,135,.13); color: #f0d4ac; transform: translateY(-1px); }
.player-action-btn:active { transform: none; box-shadow: none; }
.player-close-btn { color: #bcaa9b; }
.player-close-btn:hover { color: #f0e5d9; }
.controls-left { gap: 8px; }
.player-icon-btn, .player-play-btn { border: 0; box-shadow: none; }
.player-icon-btn { width: 31px; height: 31px; background: transparent; color: #d2c1b2; opacity: 1; }
.player-icon-btn.active { color: #e0bd8b; background: rgba(196,154,98,.12); }
.player-icon-btn:hover { color: #f0d4ac; background: rgba(196,154,98,.13); }
.player-play-btn { transition: transform .2s, filter .2s, box-shadow .2s; }
.player-play-btn:hover { filter: brightness(1.12); transform: scale(1.05); }
.player-icon-btn#player-loop-btn { position: relative; }
.loop-one-badge { position: absolute; right: -2px; bottom: -2px; display: none; min-width: 12px; height: 12px; padding: 0 2px; border-radius: 6px; background: #dfbd8c; color: #231a16; font-size: 8px; font-weight: 800; line-height: 12px; text-align: center; }
.player-icon-btn#player-loop-btn.repeat-one .loop-one-badge { display: block; }
.player-play-btn { width: 39px; height: 39px; background: #c69e68; color: #211915; }
.player-icon-btn:active, .player-play-btn:active { transform: none; box-shadow: none; }
.time-display { color: #c5b5a8; font-family: inherit; font-size: .7rem; font-variant-numeric: tabular-nums; }
.controls-right { width: 115px; }
.player-add-playlist-btn { flex: 0 0 auto; white-space: nowrap; }
.player-add-playlist-btn:disabled { opacity: .5; cursor: default; }
.player-add-playlist-btn.is-added { color: #d6b17e; }
.playlist-toggle-btn { align-items: center; gap: 5px; }
.playlist-count { display: inline-grid; min-width: 17px; height: 17px; place-items: center; border-radius: 50%; background: rgba(221,184,135,.16); color: #e8c99c; font-size: .65rem; }
.playlist-panel { max-height: min(38vh,300px); overflow: auto; padding-top: 12px; border-top: 1px solid rgba(221,184,135,.17); }
.playlist-panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 7px; }
.playlist-panel-heading h2 { margin: 0; color: #e8dbce; font-size: .82rem; }
.playlist-clear-btn,.playlist-item-actions button { border: 0; background: transparent; color: #c2a98d; font: inherit; font-size: .7rem; cursor: pointer; }
.playlist-clear-btn:hover,.playlist-item-actions button:hover:not(:disabled) { color: #f0d4ac; }
.playlist-items { display: grid; gap: 3px; margin: 0; padding: 0; list-style: none; }
.playlist-item { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 5px 7px; border-radius: 7px; background: rgba(255,255,255,.035); }
.playlist-play { flex: 0 0 auto; border: 0; background: transparent; color: #d6b17e; cursor: pointer; }
.playlist-track-title { min-width: 0; overflow: hidden; color: #e4d6c8; font-size: .74rem; text-overflow: ellipsis; white-space: nowrap; }
.playlist-item-actions { display: flex; gap: 4px; margin-left: auto; }
.playlist-item-actions button { min-width: 22px; padding: 2px; font-size: .8rem; }
.playlist-item-actions button:disabled { opacity: .35; cursor: default; }
.playlist-empty { padding: 10px 7px; color: #aa998a; font-size: .73rem; }
.volume-btn { color: #d2c1b2; }
.retro-range { height: 5px; border: 0; border-radius: 100px; background: rgba(255,255,255,.18); }
.retro-range::-webkit-slider-thumb { width: 13px; height: 13px; border: 0; background: #d5ae79; box-shadow: none; }
.retro-range::-moz-range-thumb { width: 13px; height: 13px; border: 0; border-radius: 50%; background: #d5ae79; }

.page-footer { margin-top: 70px; color: #9f9085; font-size: .82rem; text-align: center; }
.page-footer a { margin: 0 8px; color: #d1aa75; font-weight: 600; text-decoration: none; }
.page-footer a:hover { color: #f0d0a4; }
.page-footer p + p { margin-top: 8px; }
.contact-box, .terms-box { max-width: 950px; margin: 0 auto; padding: 38px 44px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); box-shadow: 0 18px 44px rgba(0,0,0,.2); }
.contact-box h2, .terms-box h2 { margin: 32px 0 13px; padding: 0; border: 0; color: #eee1d3; font-size: 1.25rem; }
.contact-box h2:first-child, .terms-box h2:first-child { margin-top: 0; }
.contact-box p, .terms-box p { margin: 0 0 17px; color: #c4b4a7; line-height: 1.9; }
.contact-cards { gap: 15px; margin: 23px 0 35px; }
.contact-card { padding: 23px; border: 1px solid #493a34; border-radius: 14px; background: #28211f; color: #eadfd3; box-shadow: none; transition: transform .2s,border-color .2s,background .2s; }
.contact-card:hover { transform: translateY(-3px); border-color: #987349; background: #302622; }
.contact-card-title { font-size: 1rem; }
.contact-card-desc { color: #b6a69a; }
.contact-card-action { padding: 0; border: 0; background: transparent; color: #d0a66e; box-shadow: none; text-align: left; }
.contact-card-action::after { content: ' ↗'; }
.faq-list, .terms-list { color: #c6b7ab; }
.contact-box a:not(.contact-card):not(.retro-btn), .terms-box a:not(.retro-btn) { color: #dfb982; font-weight: 600; }
.check-badge { padding: 1px 8px; border: 0; border-radius: 100px; font-size: .72rem; }
.badge-ok { background: #263b31; color: #a8d0ae; }
.badge-ng { background: #472b30; color: #e3a0a0; }
.credit-box { padding: 17px 20px; border: 1px solid #544137; border-radius: 10px; background: #2a211d; color: #e0bd8b; font-family: inherit; }

@media (max-width: 760px) {
  .header-inner { padding: 12px 18px; }
  .header-search-wrapper { max-width: none; margin: 3px 0 0; }
  .header-nav-links, .header-inner > div:last-child { gap: 12px; }
  .header-nav-links a, .header-inner > div:last-child > a:not(.retro-btn) { font-size: .75rem; }
  .main-container { padding: 20px 16px 190px; }
  .hero { min-height: 220px; padding: 36px 27px; margin-bottom: 25px; border-radius: 18px; }
  .hero::before { right: -240px; }
  .hero::after { right: -155px; }
  .hero p { font-size: .82rem; }
  .track-grid { grid-template-columns: repeat(auto-fill,minmax(210px,1fr)); gap: 13px; }
  .skeleton-stage { height: 150px; }
  .contact-box, .terms-box { padding: 28px 21px; }
  .track-detail { grid-template-columns: 1fr; gap: 24px; }
  .detail-art { position: static; min-height: 260px; }
  .detail-art span { width: 110px; height: 110px; border-radius: 31px; font-size: 4.3rem; }
  .bottom-player { bottom: 9px; width: calc(100% - 18px); padding: 12px; border-radius: 14px; }
  .controls-right, .now-playing-badge { display: none; }
}
@media (max-width: 490px) {
  .logo { font-size: 1.05rem; }
  .header-nav-links { gap: 9px; }
  .header-nav-links a { font-size: .7rem; }
  .status-controls-right { width: 100%; flex-wrap: wrap; }
  .status-controls-right .sort-select { order: 3; flex: 1 0 100%; min-width: 0; }
  .status-controls-right #reset-all-btn { flex: 1; }
  .track-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
  .track-card, .track-skeleton { padding: 7px; border-radius: 13px; }
  .record-stage, .skeleton-stage { height: 130px; border-radius: 9px; }
  .record-disc { width: 64px; height: 64px; }
  .record-disc::before { font-size: 2.3rem; }
  .track-info { padding: 10px 4px 0; }
  .track-title { font-size: .84rem; }
  .track-stats-row { gap: 2px; }
  .like-btn, .share-card-btn { font-size: .65rem; padding: 3px; }
  .dl-count-badge { font-size: .62rem; }
  .tag-label { font-size: .62rem; padding: 2px 6px; }
  .player-action-btn { padding: 5px; font-size: .64rem; }
  #player-share-btn span { display: none; }
  .playlist-toggle-btn > span:first-child { font-size: 0; }
  .playlist-toggle-btn > span:first-child::before { content: '♫'; font-size: .9rem; }
  .player-controls-row { gap: 9px; }
  .controls-center { gap: 5px; }
  .time-display { font-size: .64rem; min-width: 27px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  .track-card, .track-skeleton { animation-delay: 0s !important; }
}