/* Shared interaction and responsive layout rules. */
:root { --panel:#fff; --canvas:#f5f7fb; --ink:#142238; --muted:#52647d; --line:#dce4ef; --accent:#176cdb; }
html.dark { --panel:#171f2e; --canvas:#101724; --ink:#eef3fc; --muted:#a3b1c6; --line:#2c394f; --accent:#4094f7; }
html { scroll-padding-top:130px; }
body { background:var(--canvas); color:var(--ink); -webkit-tap-highlight-color:transparent; }
button,a,input,select { touch-action:manipulation; }
.language-picker[hidden],.language-menu[hidden] { display:none !important; }
.language-picker { position:relative; display:inline-flex; align-items:center; flex:none; width:max-content; }
.app-page .header-tools .language-picker { background:transparent; border:0; }
.language-trigger { display:grid; place-items:center; width:40px; height:40px; padding:0; border:1px solid var(--line); border-radius:12px; background:var(--canvas); color:var(--ink); cursor:pointer; transition:background-color .15s,border-color .15s,color .15s; }
.language-trigger:hover,.language-trigger[aria-expanded="true"] { background:color-mix(in srgb,var(--accent) 10%,var(--canvas)); border-color:var(--accent); }
.language-trigger [data-locale-flag] { font-size:23px; line-height:1; }
.language-menu { position:absolute; z-index:70; top:calc(100% + 8px); right:0; width:250px; max-height:min(68vh,440px); overflow-y:auto; padding:6px; border:1px solid var(--line); border-radius:14px; background:var(--panel); color:var(--ink); box-shadow:0 16px 40px #00000026; }
.language-option { display:flex; align-items:center; gap:11px; width:100%; padding:8px 9px; border:1px solid transparent; border-radius:9px; color:var(--ink); text-align:left; cursor:pointer; transition:background-color .15s,border-color .15s; }
.language-option:hover,.language-option:focus-visible { background:color-mix(in srgb,var(--accent) 9%,var(--panel)); border-color:color-mix(in srgb,var(--accent) 22%,var(--line)); }
.language-option[aria-checked="true"] { background:color-mix(in srgb,var(--accent) 12%,var(--panel)); border-color:color-mix(in srgb,var(--accent) 26%,var(--line)); }
.language-option-flag { display:grid; place-items:center; flex:none; width:32px; height:32px; border-radius:8px; background:var(--canvas); font-size:21px; line-height:1; }
.language-option-copy { flex:1; min-width:0; font-size:14px; font-weight:500; line-height:1.4; }
.language-option-check { visibility:hidden; color:var(--accent); font-size:15px; font-weight:700; }
.language-option[aria-checked="true"] .language-option-check { visibility:visible; }
@media (max-width:767px) { .header-tools .language-picker { width:44px; min-width:44px; height:44px; } .header-tools .language-trigger { width:44px; height:44px; } }
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible { outline:3px solid var(--accent); outline-offset:3px; }
button:disabled { opacity:.5; cursor:not-allowed; }
#app-header { background:var(--panel); border-color:var(--line); }
#app-header > div { gap:20px; }
.app-brand { flex-shrink:0; }
#app-header nav button { min-height:36px; }
.header-tools > * { min-width:36px; min-height:36px; justify-content:center; }
.search-hero > h1 { line-height:1.2; }
.search-hero > p { color:var(--muted); line-height:1.65; }
.search-field { margin-top:24px !important; }
.search-field > div { min-height:56px; border-radius:16px; background:var(--panel); border-color:var(--line); box-shadow:0 4px 18px #00000008; }
#search-input,#url-input { min-width:0; font-size:16px; }
#btn-search { min-height:44px; border-radius:11px; }
.source-filters { padding-top:14px; }
.source-filters > button { min-height:40px; }
.source-filters button[aria-pressed="true"] { box-shadow:0 3px 12px #176cdb30; }
#advanced-filters-panel { text-align:left; border-radius:16px; background:var(--panel); }
#advanced-filters-panel button { min-height:40px; }
#search-empty { padding:42px 22px; background:var(--panel); border-style:solid; border-color:var(--line); }
#search-empty > div { background:#176cdb12; color:var(--accent); }
#search-empty p { color:var(--muted); line-height:1.7; }
#results-count { text-transform:none; letter-spacing:normal; line-height:1.6; color:var(--muted); }
.track-duration { display:none; }
.track-play { min-width:44px; min-height:44px; }
.track-download { min-height:44px; }
.track-actions > button { min-height:44px; }
#pagination-buttons button { min-width:44px; min-height:44px; }
.quality-note { color:var(--muted); font-size:12px; line-height:1.65; }
#select-quality { min-height:48px; font-size:14px; }
#fmt-mp3,#fmt-mp4,#btn-start-url-download { min-height:44px; }
#section-url > div:last-child { border-radius:20px; }
#section-url > div:first-child p { line-height:1.7; }
#url-analyzed-card { min-width:0; }
#url-analyzed-card > div > div:last-child { flex-wrap:wrap; white-space:normal; }
#card-title { flex-basis:100%; }
#card-artist { max-width:100%; }
#url-analyzed-card > div > div:last-child > span:nth-child(3) { display:none; }
/* Compact player; advanced controls stay available on demand. */
#audio-player-bar { position:fixed; bottom:0; left:0; right:0; z-index:40; padding:12px 24px calc(10px + env(safe-area-inset-bottom)); background:var(--panel); border-top:1px solid var(--line); box-shadow:0 -8px 30px #00000018; }
.player-shell { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px 16px; max-width:1104px; margin:auto; }
.player-track { display:flex; gap:12px; align-items:center; min-width:0; }
.player-art { position:relative; display:grid; place-items:center; flex-shrink:0; width:44px; height:44px; border-radius:13px; background:#176cdb18; color:var(--accent); font-size:22px; }
#player-wave:not(.hidden) { position:absolute; inset:0; align-items:center; justify-content:center; background:var(--panel); border-radius:13px; }
.player-copy { min-width:0; }
.player-copy h4 { font-size:14px; font-weight:650; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.player-copy p { color:var(--muted); font-size:12px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; margin-top:3px; }
.player-main-controls { display:flex; align-items:center; gap:8px; }
.player-main-controls button { min-width:44px; height:44px; border-radius:12px; display:flex; gap:6px; justify-content:center; align-items:center; font-size:20px; }
#btn-play-toggle { background:var(--accent); color:#fff; border-radius:50%; }
#player-download-btn { background:#176cdb12; color:var(--accent); padding:0 12px; }
#player-download-btn span { font-size:12px; font-weight:600; }
.player-progress { display:flex; align-items:center; gap:10px; grid-column:1/-1; color:var(--muted); font-size:11px; font-variant-numeric:tabular-nums; }
.player-progress input { flex:1; width:100%; min-width:0; height:24px; background:transparent; accent-color:var(--accent); }
#player-details:not(.hidden) { display:flex; align-items:center; justify-content:center; gap:12px; grid-column:1/-1; padding-top:8px; border-top:1px solid var(--line); }
#player-details button { display:flex; align-items:center; gap:8px; min-height:44px; padding:0 12px; border-radius:10px; background:#176cdb12; font-size:12px; }
#player-volume { min-width:0; width:100px; accent-color:var(--accent); height:32px; }
body.player-visible { padding-bottom:calc(190px + env(safe-area-inset-bottom)); }
body.player-expanded { padding-bottom:calc(250px + env(safe-area-inset-bottom)); }
/* Dialogs sit above the player and scroll within the visible viewport. */
.app-modal { z-index:80 !important; overscroll-behavior:contain; }
.app-modal > div { max-height:calc(100dvh - 40px); overflow-y:auto; overscroll-behavior:contain; background:var(--panel); border-color:var(--line); }
.app-modal button,.app-modal a { min-height:44px; }
.app-modal h3 { padding-right:18px; }
#modal-age h3 { color:var(--ink); }
#cookie-file-input { min-width:0; }
body.dialog-open { overflow:hidden; }
#app-notice { position:fixed; z-index:100; left:50%; transform:translateX(-50%); bottom:calc(22px + env(safe-area-inset-bottom)); width:max-content; max-width:min(520px,calc(100% - 32px)); padding:14px 18px; border-radius:14px; color:var(--ink); background:var(--panel); box-shadow:0 8px 32px #00000030; border:1px solid var(--line); font-size:14px; line-height:1.5; }
body.player-visible #app-notice { bottom:calc(135px + env(safe-area-inset-bottom)); }
body.player-expanded #app-notice { bottom:calc(193px + env(safe-area-inset-bottom)); }
@media (max-width:767px) {
  #app-header > div { height:auto; display:grid; grid-template-columns:1fr auto; gap:12px; padding:12px 16px; padding-top:calc(12px + env(safe-area-inset-top)); }
  .app-brand { gap:9px; }
  .app-brand > span { font-size:18px; }
  #app-header nav { grid-row:2; grid-column:1/-1; width:100%; display:grid; grid-template-columns:1fr 1fr; padding:4px; border-radius:14px; }
  #app-header nav button { justify-content:center; min-height:42px; border-radius:10px; font-size:13px; }
  .header-tools { gap:4px; }
  .header-tools > * { width:40px; height:40px; padding:0; border:0; border-radius:12px; font-size:18px; }
  .header-tools a span,.header-tools #theme-label,#cookie-btn-label,#cookie-indicator { display:none; }
  main { padding:26px 16px !important; }
  .search-hero { text-align:left; padding-top:0; }
  .search-hero h1 { font-size:28px; max-width:290px; letter-spacing:-.8px; }
  .search-hero > p { font-size:14px; padding-top:8px; }
  .search-field > div > i { margin-left:10px; }
  #search-input { padding-left:10px; padding-right:4px; }
  #btn-search { padding:0 14px; font-size:14px; }
  #btn-search > i { display:none; }
  .source-filters { flex-wrap:nowrap; justify-content:flex-start; overflow-x:auto; padding:16px 0 6px; gap:8px; scrollbar-width:thin; scroll-snap-type:x proximity; }
  .source-filters button { flex-shrink:0; white-space:nowrap; scroll-snap-align:start; border-radius:24px; padding:0 14px; font-size:12px; }
  #advanced-filters-panel { padding:16px; }
  #advanced-filters-panel > div { align-items:flex-start; flex-direction:column; gap:8px; }
  #section-search { gap:24px; }
  #search-empty { padding:32px 20px; border-radius:20px; }
  #search-empty h3 { font-size:17px; }
  #search-empty p { font-size:13px; }
  #search-loading { padding:40px 20px; font-size:14px; }
  .results-actions-label { display:none; }
  #results-list { border:0; background:transparent; box-shadow:none; display:flex; flex-direction:column; gap:10px; overflow:visible; }
  .track-card { position:relative; padding:16px !important; display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:start; gap:10px; border:1px solid var(--line) !important; background:var(--panel); border-radius:18px; }
  .track-main { align-items:flex-start; gap:10px; min-width:0; }
  .track-play { width:44px; height:44px; margin-top:2px; border-radius:14px; background:#176cdb14; border:0; color:var(--accent); }
  .track-info { display:flex; flex-direction:column; align-items:flex-start; gap:5px; white-space:normal; overflow:visible; min-width:0; }
  .track-title { font-size:14px; line-height:1.45; width:100%; white-space:normal; overflow-wrap:anywhere; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
  .track-artist { font-size:12px; max-width:100%; width:100%; }
  .track-separator { display:none; }
  .track-badges { display:flex; flex-wrap:wrap; margin:3px 0 0; gap:5px; }
  .track-badges > span { font-size:10px; padding:2px 6px; border:0; letter-spacing:0; }
  .track-badges > span:nth-child(n+3):not(.track-duration) { display:none; }
  .track-duration { display:inline; color:var(--muted); line-height:17px; }
  .track-actions { align-self:start; }
  .track-download { width:44px; height:44px; padding:0; justify-content:center; border-radius:13px; font-size:18px; }
  .track-download > span { display:none; }
  .track-actions button[onclick^="searchTracklist"] { width:44px; height:44px; overflow:hidden; font-size:0; padding:0; justify-content:center; }
  .track-actions button[onclick^="searchTracklist"] i { font-size:18px; }
  #section-url > div:first-child { text-align:left; }
  #section-url h1 { font-size:26px; }
  #section-url > div:first-child p { font-size:14px; padding-top:8px; }
  #section-url > div:last-child { padding:18px; }
  .url-field { flex-wrap:wrap; gap:8px; padding:10px; }
  .url-field > i { margin:0; }
  #url-input { width:calc(100% - 35px); padding:6px 0; }
  .url-field button { min-height:44px; flex:1; justify-content:center; margin:0; font-size:12px; }
  #url-analyzed-card { align-items:flex-start; }
  #select-quality { font-size:16px; }
  #audio-player-bar { padding:12px 16px calc(8px + env(safe-area-inset-bottom)); }
  .player-shell { gap:6px 8px; }
  .player-track { gap:9px; }
  .player-copy h4 { font-size:13px; }
  .player-main-controls { gap:2px; }
  .player-main-controls button { min-width:40px; width:40px; height:44px; }
  #player-download-btn { background:transparent; padding:0; }
  #player-download-btn span { display:none; }
  .player-art { width:36px; height:40px; }
  #player-details:not(.hidden) { gap:8px; }
  #player-details button { padding:0 8px; }
  .app-modal { align-items:flex-end; padding:12px; padding-bottom:calc(12px + env(safe-area-inset-bottom)); }
  .app-modal > div { border-radius:24px; padding:26px 20px 22px; max-height:calc(100dvh - 24px - env(safe-area-inset-bottom)); }
  #modal-cookie > div > div:first-of-type { align-items:flex-start; padding-right:24px; }
  #modal-cookie h3 { font-size:16px; padding:0; }
  #modal-cookie > div > div.space-y-2 > div.flex { flex-wrap:wrap; }
  #modal-speed,#modal-eta { font-size:11px; }
}
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { scroll-behavior:auto !important; transition:none !important; animation:none !important; }
}
/* Admin mobile layout shares the same touch and viewport conventions. */
@media (max-width:767px) {
  #auth-screen { padding:16px; overflow:auto; }
  #auth-screen > div { padding:26px 20px; max-height:calc(100dvh - 32px); overflow:auto; }
  #admin-password-input { font-size:16px; }
  #admin-app > aside { width:100%; border-right:0; border-bottom:1px solid var(--line); }
  #admin-app > aside > div:first-child { padding:16px; }
  #admin-app aside nav { display:flex; overflow:auto; gap:8px; padding-bottom:4px; }
  #admin-app aside nav a { width:auto; flex-shrink:0; min-height:44px; white-space:nowrap; }
  #admin-app aside > div:last-child { padding:12px 16px; display:flex; gap:12px; }
  #admin-app header { min-height:64px; height:auto; padding:12px 16px; gap:12px; flex-wrap:wrap; }
  #admin-app main { padding:20px 16px !important; }
  #admin-app input,#admin-app select { min-height:44px; font-size:16px; min-width:0; }
  #admin-app button { min-height:44px; }
  #admin-app table { min-width:540px; }
}
.retry-search { min-height:44px; margin-top:18px; padding:0 18px; border-radius:12px; background:var(--accent); color:#fff; font-size:14px; }
#btn-search[aria-busy="true"] { opacity:.7; }
#app-notice.hidden { display:none; }
@media (max-width:359px) {
  #app-header > div { padding-left:12px; padding-right:12px; }
  .header-tools > * { width:36px; min-width:36px; }
  .app-brand > span { font-size:16px; }
  .track-card { padding:12px !important; }
  .player-art { display:none; }
}
html body { background:var(--canvas); }
html.dark body { background:var(--canvas); }
.source-heading { display:flex; justify-content:space-between; align-items:center; padding-top:18px; }
.source-heading > span { color:var(--muted); font-size:12px; font-weight:600; }
.source-heading button { min-height:40px; border-radius:12px; }
@media (max-width:767px) {
  .source-filters { padding-top:8px; }
  #modal-close-btn,.app-modal > div > button:first-child { min-width:44px; }
  #player-expand-btn { min-width:44px; width:44px; height:44px; }
}
@media (min-width:768px) {
  .track-info { display:grid; grid-template-columns:minmax(0,1fr); gap:4px; white-space:normal; }
  .track-title { width:100%; }
  .track-artist { max-width:100%; }
  .track-separator { display:none; }
  .track-badges { display:flex; flex-wrap:wrap; margin:4px 0 0; }
  .track-card { padding-top:14px; padding-bottom:14px; }
}
@media (min-width:768px) and (max-width:1023px) {
  .header-tools span { display:none; }
  .header-tools > * { width:40px; height:40px; padding:0; }
  #app-header nav button { white-space:nowrap; }
  .track-badges > span:nth-child(n+3) { display:none; }
}
#search-empty h3 { color:var(--ink); }
html:not(.dark) .track-badges > span { color:#334155; background:#edf2f8; }
#auth-screen #btn-login { min-height:48px; }
.source-filters > button,.source-heading button,#advanced-filters-panel button { min-height:44px; }
@media (max-width:767px) {
  .header-tools > * { min-width:44px; width:44px; height:44px; }
  #app-header nav button { min-height:44px; }
  .player-main-controls button { min-width:44px; width:44px; }
}

.track-card.is-current { background:#176cdb0c; }
.track-card.is-current .track-play { background:var(--accent); color:#fff; }
@media (max-width:767px) { .track-card.is-current { border-color:var(--accent) !important; background:var(--panel); } }

/* Shared footer: natural document flow keeps every link above the player. */
body.app-page { padding-bottom:env(safe-area-inset-bottom); }
body.app-page.player-visible { padding-bottom:calc(190px + env(safe-area-inset-bottom)); }
body.app-page.player-expanded { padding-bottom:calc(250px + env(safe-area-inset-bottom)); }
#app-footer { margin-top:24px; border-top:1px solid var(--line); background:var(--panel); }
.footer-shell { max-width:1152px; margin:0 auto; padding:40px 24px 0; }
.footer-main { display:grid; grid-template-columns:minmax(0,1.6fr) repeat(2,minmax(0,1fr)); gap:48px; padding-bottom:32px; }
.footer-brand { display:inline-flex; gap:12px; align-items:center; color:var(--ink); font-size:21px; font-weight:750; letter-spacing:-.6px; border-radius:10px; }
.footer-logo { display:grid; place-items:center; width:44px; height:44px; border-radius:14px; background:var(--accent); color:#fff; font-size:24px; box-shadow:0 5px 18px #176cdb20; }
.footer-brand-caption { display:block; margin-top:3px; color:var(--muted); font-size:9px; font-weight:650; letter-spacing:2px; }
.footer-intro p { max-width:300px; margin-top:16px; color:var(--muted); font-size:13px; line-height:1.8; }
.footer-nav h2 { margin:0 0 10px; color:var(--ink); font-size:12px; font-weight:700; }
.footer-nav button,.footer-nav a { display:flex; align-items:center; gap:10px; min-height:44px; width:fit-content; max-width:100%; padding:0 4px; margin-left:-4px; border-radius:8px; color:var(--muted); text-align:left; font-size:13px; transition:color .15s; }
.footer-nav i { color:var(--accent); font-size:17px; flex-shrink:0; }
.footer-nav button:hover,.footer-nav a:hover,.footer-top:hover { color:var(--accent); }
.footer-bottom { display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:72px; border-top:1px solid var(--line); color:var(--muted); font-size:11px; }
.footer-note { display:inline-flex; gap:8px; align-items:center; }
.footer-note i { font-size:15px; }
.footer-top { display:flex; align-items:center; gap:10px; min-height:44px; padding:0 8px; margin-right:-8px; border-radius:8px; font-size:12px; }
@media (max-width:767px) {
  #app-footer { margin-top:12px; }
  .footer-shell { padding:28px 16px 0; }
  .footer-main { grid-template-columns:repeat(2,minmax(0,1fr)); gap:26px 16px; padding-bottom:24px; }
  .footer-intro { grid-column:1 / -1; }
  .footer-intro p { max-width:340px; margin-top:12px; }
  .footer-nav button,.footer-nav a { font-size:12px; gap:8px; }
  .footer-bottom { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:0 12px; padding:12px 0; }
  .footer-note { grid-row:2; grid-column:1 / -1; padding-bottom:8px; font-size:10px; }
  .footer-top { grid-column:2; grid-row:1; }
}

/* Admin feature controls. */
.feature-page { color:var(--ink); }
.feature-heading { display:flex; justify-content:space-between; align-items:center; gap:16px; margin-bottom:24px; }
.feature-heading h2 { font-size:24px; font-weight:750; }
.feature-heading p,.feature-help { color:var(--muted); font-size:13px; line-height:1.7; }
.feature-count { padding:8px 12px; background:var(--panel); border:1px solid var(--line); border-radius:12px; font-size:12px; white-space:nowrap; }
.feature-toolbar { display:flex; flex-wrap:wrap; gap:10px; }
.feature-toolbar input { flex:1; min-width:180px; background:var(--panel); color:var(--ink); border:1px solid var(--line); border-radius:12px; padding:12px 16px; }
.feature-toolbar button,.feature-savebar button,.feature-retry { min-height:44px; padding:10px 16px; border:1px solid var(--line); background:var(--panel); border-radius:12px; font-size:13px; }
.feature-help { margin:16px 0 24px; }
.search-visibility-card { border:1px solid var(--line); border-radius:16px; background:var(--panel); padding:20px; margin-bottom:24px; }
.search-visibility-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:18px; }
.search-visibility-heading h3 { font-size:16px; font-weight:700; }
.search-visibility-heading p { color:var(--muted); font-size:12px; line-height:1.6; margin-top:5px; max-width:70ch; }
.search-visibility-badge { white-space:nowrap; border:1px solid var(--line); border-radius:999px; padding:5px 10px; color:var(--muted); font-size:11px; }
.search-visibility-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:10px; }
.search-visibility-item { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:62px; padding:8px 12px; border:1px solid var(--line); border-radius:12px; cursor:pointer; }
.search-visibility-item strong { font-size:13px; font-weight:650; }
.feature-group { border:1px solid var(--line); border-radius:16px; background:var(--panel); margin-bottom:20px; overflow:hidden; }
.feature-group h3 { padding:16px 20px; border-bottom:1px solid var(--line); font-weight:700; font-size:14px; }
.feature-row { display:flex; justify-content:space-between; align-items:center; gap:20px; padding:16px 20px; cursor:pointer; }
.feature-row + .feature-row { border-top:1px solid var(--line); }
.feature-row strong { font-size:14px; font-weight:650; }
.feature-description { display:block; color:var(--muted); font-size:12px; line-height:1.65; margin-top:4px; }
.feature-control { display:flex; gap:12px; align-items:center; position:relative; flex-shrink:0; min-height:44px; font-size:12px; color:var(--muted); }
.feature-control input { position:absolute; right:0; width:48px; height:44px; opacity:0; cursor:pointer; z-index:1; }
.feature-switch { display:block; width:44px; height:26px; border-radius:20px; background:var(--line); padding:3px; transition:background .15s; }
.feature-switch::after { content:''; display:block; width:20px; height:20px; border-radius:50%; background:#fff; box-shadow:0 1px 3px #0003; transition:transform .15s; }
.feature-control input:checked + .feature-switch { background:var(--accent); }
.feature-control input:checked + .feature-switch::after { transform:translateX(18px); }
.feature-control input:focus-visible + .feature-switch { outline:3px solid var(--accent); outline-offset:4px; }
.feature-savebar { display:flex; gap:16px; align-items:center; justify-content:space-between; position:sticky; bottom:0; padding:16px; background:var(--panel); border:1px solid var(--line); border-radius:16px; z-index:10; box-shadow:0 -5px 20px #0001; }
.feature-savebar > span { font-size:12px; color:var(--muted); }
.feature-savebar > div { display:flex; gap:8px; }
#features-save { background:var(--accent); color:white; border-color:var(--accent); }
.feature-savebar button:disabled { opacity:.45; cursor:default; }
.feature-row[hidden],.feature-group[hidden],[data-feature-hidden] { display:none !important; }
#features-unavailable { padding:40px 20px; text-align:center; color:var(--muted); }
@media(max-width:767px) {
  .search-visibility-card { padding:16px; }
  .search-visibility-heading { flex-direction:column; gap:8px; }
  .search-visibility-grid { grid-template-columns:1fr; }
  .feature-heading { align-items:flex-start; }
  .feature-heading h2 { font-size:21px; }
  .feature-row { padding:14px; gap:12px; }
  .feature-control > span:first-child { display:none; }
  .feature-savebar { flex-direction:column; align-items:stretch; margin-bottom:env(safe-area-inset-bottom); }
  .feature-savebar > div { flex-wrap:wrap; }
  .feature-savebar button { flex:1; }
  .feature-toolbar input { width:100%; flex-basis:100%; }
}
.feature-page { padding-bottom:100px; }
.feature-savebar { position:fixed; left:280px; right:24px; bottom:16px; }
@media(max-width:767px) {
  .feature-page { padding-bottom:150px; }
  .feature-savebar { left:16px; right:16px; bottom:calc(12px + env(safe-area-inset-bottom)); }
}

/* One line per result: metadata sits directly before the MP3 action. */
#results-list { display:block; overflow-x:auto; border:1px solid var(--line); border-radius:14px; background:var(--panel); }
.track-card { display:flex; flex-wrap:nowrap; align-items:center; min-width:760px; gap:16px; border:0 !important; border-bottom:1px solid var(--line) !important; border-radius:0; padding:12px 16px !important; white-space:nowrap; }
.track-card:last-child { border-bottom:0 !important; }
.track-main { display:flex; flex:1 1 0; align-items:center; min-width:0; gap:10px; }
.track-info { display:flex; flex-direction:row; align-items:center; gap:8px; overflow:hidden; white-space:nowrap; }
.track-title { display:block; flex:1 1 0; min-width:0; width:auto; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; line-height:1.5; -webkit-line-clamp:unset; font-size:13px; }
.track-artist { flex:0 1 auto; width:auto; max-width:110px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.track-separator { display:inline; }
.track-badges { display:flex; flex-wrap:nowrap; margin:0; gap:6px; }
.track-source-badge { display:inline-flex; }
.track-badges > span:nth-child(n+2) { display:none; }
.track-play { margin:0; flex-shrink:0; width:44px; height:44px; border-radius:12px; }
.track-specs { display:flex; flex:0 0 auto; align-items:center; gap:3px; padding:0; border:0; white-space:nowrap; }
.track-spec { display:block; flex:none; min-width:0; }
.track-spec strong { display:block; color:var(--ink); font-size:12px; font-weight:600; overflow-wrap:normal; white-space:nowrap; font-variant-numeric:tabular-nums; }
.track-info-trigger { min-height:28px; padding:2px 7px; border:1px solid var(--line); border-radius:7px; color:var(--muted); background:var(--panel); font-size:11px; line-height:1.2; font-weight:650; cursor:pointer; }
.track-info-trigger:hover,.track-info-trigger[aria-expanded="true"] { border-color:var(--accent); color:var(--accent); }
.track-info-trigger:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.track-spec-duration { display:inline-flex; align-items:center; min-height:28px; padding:2px 7px; border:1px solid var(--line); border-radius:7px; background:var(--panel); }
.track-spec-duration strong { color:var(--accent); font-size:11px; line-height:1.2; font-weight:700; }
.track-info-popover { position:fixed; z-index:100; width:max-content; max-width:calc(100vw - 16px); padding:6px 9px; border:1px solid var(--line); border-radius:7px; background:var(--panel); color:var(--ink); box-shadow:0 5px 16px #0002; white-space:nowrap; }
.track-info-popover[hidden] { display:none !important; }
.track-info-popover-value { display:block; font-size:12px; font-weight:600; line-height:1.2; font-variant-numeric:tabular-nums; }
.track-actions { align-self:center; flex:none; }
.track-download { width:auto; min-width:72px; min-height:44px; padding:0 12px; border-radius:10px; font-size:12px; }
.track-download > span { display:inline; }
.results-scroll-hint { display:none; }
@media(max-width:767px) {
  .results-scroll-hint { display:block; margin:0 0 10px; color:var(--muted); font-size:11px; }
  .track-card { background:var(--panel); }
  .track-info-trigger,.track-spec-duration { min-height:34px; }
}
@media(min-width:1024px) {
  .track-badges > span:nth-child(2),.track-badges > span:nth-child(3) { display:inline-flex; }
}

/* Search form feedback and compact header when there is only search. */
.search-field { max-width:100% !important; }
.search-field > div { gap:4px; }
#search-input { flex:1 1 0; width:0; }
#search-input::-webkit-search-cancel-button { -webkit-appearance:none; }
#search-input:focus-visible { outline:0; }
.search-field > div:focus-within { border-color:var(--accent); box-shadow:0 0 0 3px #176cdb22; }
#btn-clear-search { flex:none; display:grid; place-items:center; width:44px; height:44px; border-radius:10px; color:var(--muted); }
#btn-clear-search[hidden] { display:none; }
#btn-clear-search:hover { color:var(--ink); background:var(--canvas); }
#search-help { color:var(--muted); font-size:11px; text-align:left; margin:10px 2px 0; }
#search-feedback { color:var(--accent); font-size:12px; text-align:left; line-height:1.6; margin:8px 2px 0; }
#search-feedback:empty { display:none; }
#search-input[aria-invalid="true"] { color:#dc2626; }
#btn-search { min-width:78px; justify-content:center; }
.source-filters { justify-content:flex-start; }
#results-list:focus-visible { outline:3px solid var(--accent); outline-offset:3px; }
@media(max-width:767px) {
  #app-header.single-mode > div { display:flex; align-items:center; justify-content:space-between; gap:8px; }
  #app-header.single-mode .header-tools { margin-left:auto; }
  #btn-search { min-width:64px; padding:0 10px; }
  .search-field > div > i { margin-left:6px; font-size:17px; }
  #search-input { padding-left:6px; }
  #btn-clear-search { width:36px; }
  #search-help { font-size:11px; }
}
.seo-guide { max-width: 960px; margin: 3rem auto 1rem; padding: 1.5rem; border: 1px solid var(--line); border-radius: 1rem; background: var(--panel); line-height: 1.65; }
.seo-page-links { display:flex; flex-wrap:wrap; gap:10px 20px; padding:20px 0; border-top:1px solid var(--footer-line); font-size:12px; color:var(--footer-muted); }
.seo-page-links a:hover { color:var(--footer-accent); }
.seo-guide h2 { font-size: 1.25rem; font-weight: 700; margin: 1.5rem 0 .5rem; }
.seo-guide h2:first-child { margin-top: 0; }
.seo-guide h3 { font-size: 1rem; font-weight: 650; margin-bottom: .4rem; }
.seo-guide p, .seo-guide li { font-size: .9rem; }
.seo-guide-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; margin-top: 1.25rem; }
.seo-guide ol { padding-left: 1.4rem; list-style: decimal; }
.seo-home-faq details { padding:12px 0; border-bottom:1px solid var(--line); }
.seo-home-faq summary { cursor:pointer; font-size:.9rem; font-weight:600; }
.seo-home-faq details p { margin-top:10px; color:var(--muted); }
.seo-home-faq > a { display:inline-block; margin-top:14px; color:var(--accent); font-size:.85rem; text-decoration:underline; }
@media (max-width: 700px) { .seo-guide { padding: 1rem; margin-top: 2rem; } .seo-guide-grid { grid-template-columns: 1fr; } }

/* The currently heard title follows the mix title in results and the player. */
.player-title-line { display:flex; align-items:center; gap:8px; min-width:0; }
.player-title-line h4 { flex:0 1 auto; min-width:0; }
.mix-track-link { display:inline-block; flex:0 1 280px; min-width:90px; max-width:36%; overflow:hidden; white-space:nowrap; color:var(--accent); font-size:12px; font-weight:600; border-radius:4px; text-decoration:none; vertical-align:middle; }
.mix-track-link[hidden] { display:none; }
.mix-track-link:hover { text-decoration:underline; }
.mix-track-link:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.mix-track-ribbon { display:flex; width:max-content; animation:mix-track-scroll 16s linear infinite; }
.mix-track-ribbon > span { flex:none; padding-inline-end:28px; }
.mix-track-link:hover .mix-track-ribbon,.mix-track-link:focus .mix-track-ribbon { animation-play-state:paused; }
@keyframes mix-track-scroll { from { transform:translateX(0); } to { transform:translateX(-50%); } }
@media(prefers-reduced-motion:reduce) {
  .mix-track-ribbon { animation:none; }
  .mix-track-ribbon > span + span { display:none; }
}
@media(max-width:767px) {
  .player-title-line { flex-wrap:wrap; gap:2px; }
  .player-title-line h4 { flex-basis:100%; }
  .player-title-line .mix-track-link { max-width:100%; min-width:0; flex-basis:auto; }
}

.track-title-group { display:flex; align-items:center; flex:1 1 0; min-width:0; gap:8px; }
.track-title-group .track-title { flex:0 1 auto; }
.player-copy { flex:1 1 auto; }
.mix-track-ribbon > span { min-width:var(--mix-track-viewport, 240px); box-sizing:content-box; }

.recognition-status { display:block; margin-top:2px; color:var(--muted); font-size:10px; line-height:1.35; }
.recognition-status[data-state="matched"] { color:var(--accent); }
#player-recognition-toggle { color:var(--muted); background:transparent; }
#player-recognition-toggle[aria-pressed="true"] { color:var(--accent); background:#176cdb12; }