:root { color-scheme:dark; --ink:#f7f5ed; --muted:#aaa99f; --paper:#0b0b0a; --card:#171816; --field:#252622; --accent:#ffe600; --accent-ink:#0b0b0a; --line:#3b3c36; --sticky:#11120ff2; --shadow:#0008; --hero:#12130f; }
:root[data-theme="light"] { color-scheme:light; --ink:#17211d; --muted:#66736c; --paper:#f6f7f3; --card:#fff; --field:#f0f3ef; --accent:#176b4c; --accent-ink:#fff; --line:#dce3dd; --sticky:#f6f7f3f2; --shadow:#17211d18; --hero:#176b4c; }
* { box-sizing:border-box; }
body { margin:0; background:var(--paper); color:var(--ink); font:16px/1.55 system-ui,-apple-system,sans-serif; }
a { color:var(--accent); }
.site-header, main, footer { width:min(1100px,calc(100% - 32px)); margin:auto; }
.site-header { min-height:72px; display:flex; align-items:center; gap:12px; border-bottom:1px solid var(--line); }
.site-header .brand { color:var(--ink); font-weight:800; text-decoration:none; }
.association-logo { display:grid; place-items:center; width:72px; height:44px; flex:0 0 auto; overflow:hidden; }
.association-logo img { display:block; width:72px; height:auto; }
.site-header span { color:var(--muted); font-size:14px; }
.site-header .index-count { margin-left:auto; padding:6px 10px; border-radius:999px; background:#e5ede8; color:var(--accent); font-weight:700; }
.site-header nav { margin-left:8px; }
.home-masthead { width:min(1200px,calc(100% - 32px)); margin:20px auto 0; }
.home-masthead-panel { display:grid; grid-template-columns:170px 150px minmax(0,1fr); grid-template-rows:auto auto; gap:8px 20px; align-items:center; padding:22px 30px 12px; overflow:hidden; background:#080907; border:1px solid #2e302b; border-radius:26px; box-shadow:0 18px 50px #0008; }
.home-masthead-logo { display:grid; place-items:center; align-self:stretch; border-right:1px solid var(--line); }
.home-masthead-logo img { display:block; width:150px; height:auto; }
.home-index-count { display:grid; gap:1px; margin:0; color:var(--ink); line-height:1; text-transform:uppercase; }
.home-index-count strong { color:var(--ink); font-size:32px; font-variant-numeric:tabular-nums; }
.home-index-count span { color:var(--ink); font-size:12px; line-height:1.15; }
.home-masthead h1 { margin:0; color:var(--ink); font-size:clamp(42px,5.7vw,76px); line-height:.92; letter-spacing:-.055em; }
.home-masthead .optional-account-note { grid-column:1 / -1; max-width:none; margin:8px 0 0; text-align:center; font-size:12px; }
.home-menu { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:7px 18px; padding:11px 18px 0; }
.home-menu a { color:var(--accent); font-weight:700; text-underline-offset:4px; }
.home-page main { padding-top:24px; }
main { min-height:calc(100vh - 180px); padding:56px 0; }
.hero { text-align:center; padding:24px 0 52px; }
.hero h1,.detail h1,.guide h1 { font-size:clamp(36px,7vw,68px); line-height:1.02; letter-spacing:-.045em; margin:.25em 0 .55em; }
.eyebrow { color:var(--accent); font-weight:750; text-transform:uppercase; letter-spacing:.08em; font-size:13px; }
.search { display:grid; gap:8px; text-align:left; }
.search-primary { display:grid; grid-template-columns:auto minmax(260px,1fr) auto auto auto; gap:8px; }
.search-filter-disclosure > summary { display:none; }
.search-filters { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:8px; }
@media (min-width:761px) { .search-filter-disclosure:not([open]) > .search-filters { display:grid; } }
.optional-account-note { max-width:920px; margin:14px auto 0; color:var(--muted); font-size:14px; }
input[type=search],select,button,.button { border:0; border-radius:10px; padding:13px 15px; font:inherit; }
input[type=search],select { background:var(--field); color:var(--ink); min-width:0; }
input[type=url],textarea { width:100%; padding:12px 13px; border:1px solid var(--line); border-radius:10px; background:#f8faf8; color:var(--ink); font:inherit; }
.quarantine-dialog { width:min(560px,calc(100% - 28px)); padding:0; color:var(--ink); background:var(--card); border:1px solid var(--line); border-radius:18px; box-shadow:0 24px 80px #000c; }
.quarantine-dialog::backdrop { background:#000b; backdrop-filter:blur(3px); }
.quarantine-dialog form { display:grid; gap:14px; padding:24px; }
.quarantine-dialog h2,.quarantine-dialog p { margin:0; }
.quarantine-dialog label { display:grid; gap:6px; color:var(--muted); font-weight:750; }
.quarantine-dialog textarea { background:var(--field); color:var(--ink); }
.dialog-actions { display:flex; justify-content:flex-end; gap:10px; }
.duration-filter input[type=number] { width:100%; margin-top:4px; padding:9px 10px; border:1px solid var(--line); border-radius:8px; background:#f8faf8; color:var(--ink); font:inherit; }
.duration-filter div label { color:var(--muted); font-size:12px; font-weight:700; }
.search-control { min-width:0; min-height:58px; display:flex; flex-direction:column; justify-content:center; gap:1px; padding:6px 11px; border:1px solid transparent; border-radius:10px; background:var(--field); }
.search-control > span,.source-filter summary > span { display:block; color:var(--muted); font-size:11px; font-weight:750; line-height:1.2; text-transform:uppercase; letter-spacing:.055em; }
.search-control input[type=search],.search-control select { width:100%; height:34px; margin:0; padding:3px 0; background:transparent; border-radius:0; }
.search-control input[type=search] { font-size:17px; }
.search-control select { cursor:pointer; }
.search-submit,.smart-playlist-submit,.search-reset,.search-playlist { min-height:58px; display:grid; place-items:center; padding-inline:20px; }
.search-submit { background:var(--ink); color:var(--paper); border:1px solid var(--ink); }
.smart-playlist-submit { white-space:nowrap; }
.smart-playlist-dialog { width:min(650px,calc(100% - 28px)); padding:0; color:var(--ink); background:var(--card); border:1px solid var(--line); border-radius:18px; box-shadow:0 24px 80px #000c; }
.smart-playlist-dialog::backdrop { background:#000b; backdrop-filter:blur(3px); }
.smart-playlist-content { display:grid; gap:15px; padding:25px; }
.smart-playlist-content h2,.smart-playlist-content p { margin:0; }
.smart-playlist-prompt { display:grid; gap:6px; color:var(--muted); font-weight:750; }
.smart-playlist-prompt input { width:100%; border:1px solid var(--line); background:var(--field); color:var(--ink); }
.smart-playlist-limits { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.smart-playlist-limits label { display:grid; gap:5px; color:var(--muted); font-size:12px; font-weight:750; text-transform:uppercase; letter-spacing:.045em; }
.smart-playlist-limits label span { display:flex; align-items:center; gap:7px; min-height:45px; padding:5px 10px; color:var(--ink); background:var(--field); border:1px solid var(--line); border-radius:9px; font-size:14px; text-transform:none; letter-spacing:normal; }
.smart-playlist-limits input { min-width:0; width:100%; padding:5px 2px; color:var(--ink); background:transparent; border:0; font:700 17px/1.2 system-ui,-apple-system,sans-serif; }
#smart-playlist-status { min-height:52px; padding:13px 15px; border:1px solid var(--line); border-radius:10px; background:var(--field); }
#smart-playlist-status.is-loading { display:flex; align-items:center; gap:11px; color:var(--ink); font-weight:750; }
#smart-playlist-status.is-loading::before { content:""; width:20px; height:20px; flex:0 0 auto; border:3px solid var(--line); border-top-color:var(--accent); border-radius:50%; animation:smart-playlist-spin .8s linear infinite; }
@keyframes smart-playlist-spin { to { transform:rotate(360deg); } }
@media (prefers-reduced-motion:reduce) { #smart-playlist-status.is-loading::before { animation:none; border-color:var(--accent); } }
.smart-playlist-tags { display:flex; flex-wrap:wrap; gap:7px; }
.smart-playlist-tags span { padding:5px 9px; background:var(--field); border:1px solid var(--line); border-radius:999px; font-size:13px; font-weight:700; }
.smart-playlist-note { color:var(--muted); font-size:13px; }
.search-reset { background:transparent!important; color:var(--ink)!important; border:1px solid var(--ink); }
.search-playlist { white-space:nowrap; }
button,.button { background:var(--accent); color:var(--accent-ink); font-weight:750; cursor:pointer; text-decoration:none; display:inline-block; }
.secondary { background:var(--field); color:var(--ink); border:1px solid var(--line); }
button:disabled,.button.disabled { opacity:.42; cursor:default; }
.danger { background:#8d2f2f; }
.result-heading { display:flex; justify-content:space-between; align-items:center; gap:16px; margin:0 0 14px; }
.pagination { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:14px; margin:22px 0; }
.pagination > :last-child { justify-self:end; }
.result-heading h2 { margin:0; }
.result-heading span { color:var(--muted); font-size:13px; }
.selection-toolbar { position:sticky; top:0; z-index:5; background:var(--paper); padding:12px 0; border-bottom:1px solid var(--line); }
.catalog-sticky { position:sticky; top:0; z-index:7; margin-bottom:18px; padding:12px; background:var(--sticky); border:1px solid var(--line); border-radius:16px; box-shadow:0 12px 38px var(--shadow); backdrop-filter:blur(14px); }
.catalog-player-row { display:grid; grid-template-columns:minmax(180px,.7fr) minmax(280px,1.3fr) auto; gap:12px; align-items:center; margin-top:2px; padding:10px 2px 0; border-top:1px solid var(--line); }
.catalog-player-copy { min-width:0; display:grid; line-height:1.25; }
.catalog-player-copy strong,.catalog-player-copy span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.catalog-player-copy span { color:var(--muted); font-size:12px; }
#catalog-player { width:100%; height:42px; }
.catalog-player-transport { min-width:0; display:grid; grid-template-columns:auto minmax(180px,1fr) auto; gap:6px; align-items:center; }
.catalog-player-transport .compact { min-width:40px; height:40px; padding:7px 9px; }
.catalog-pagination { display:flex; align-items:center; gap:7px; white-space:nowrap; }
.catalog-pagination .button { padding:9px 10px; font-size:12px; }
.catalog-pagination strong { color:var(--muted); font-size:12px; }
.catalog-pagination .disabled { opacity:.4; cursor:default; }
.source-filter { position:relative; }
.source-filter summary { cursor:pointer; white-space:nowrap; list-style:none; }
.source-filter summary::-webkit-details-marker { display:none; }
.source-filter summary strong { display:block; margin-top:8px; font-weight:500; }
.source-filter summary strong::before { content:"▸ "; }
.source-filter[open] summary strong::before { content:"▾ "; }
.source-filter div { position:absolute; z-index:10; top:calc(100% + 6px); right:0; min-width:220px; display:grid; gap:7px; padding:12px; background:var(--card); border:1px solid var(--line); border-radius:10px; box-shadow:0 10px 30px #0002; }
.download-actions { display:flex; flex-wrap:wrap; gap:8px; justify-content:flex-end; }
.results { display:grid; gap:10px; }
.track { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:16px; align-items:center; padding:12px 14px; background:var(--card); border:1px solid var(--line); border-radius:14px; }
.track.is-playing,.playlist-item.is-playing { border-color:var(--accent); box-shadow:inset 4px 0 0 var(--accent); }
.track-main { min-width:0; }
.track-title { color:var(--ink); font-size:19px; font-weight:750; text-decoration:none; }
.track p { color:var(--muted); margin:1px 0 5px; }
.artist-link { color:inherit; text-decoration-thickness:1px; text-underline-offset:3px; }
.artist-link:hover,.artist-link:focus-visible { color:var(--accent); }
.creator-heart { display:inline-block; margin-left:5px; font-size:.9em; line-height:1; text-decoration:none; vertical-align:baseline; }
.creator-heart.available { color:#b73939; }
.creator-heart.missing { color:var(--muted); opacity:.45; }
.creator-heart.available:hover,.creator-heart.available:focus-visible { transform:scale(1.12); }
.badges { display:flex; flex-wrap:wrap; gap:7px; }
.badges span,.badges a { font-size:12px; padding:4px 8px; border-radius:999px; background:var(--field); }
.badges a { color:inherit; text-decoration:none; }
.badges a:hover,.badges a:focus-visible { color:var(--accent); text-decoration:underline; }
.badges .cache-indicator,.cache-indicator { display:inline-flex; align-items:center; justify-content:center; min-width:24px; margin:0; padding:4px 8px; color:#7d8882; background:var(--field); border:0; border-radius:999px; font-size:12px; font-weight:900; cursor:pointer; }
.badges .cache-indicator.ready,.cache-indicator.ready { color:var(--accent); }
.badges .cache-indicator.error,.cache-indicator.error { color:#8d2f2f; }
.file-metadata-dialog { width:min(980px,calc(100% - 28px)); max-height:calc(100vh - 40px); padding:0; color:var(--ink); background:var(--card); border:1px solid var(--line); border-radius:18px; box-shadow:0 24px 80px #000c; }
.file-metadata-dialog::backdrop { background:#000b; backdrop-filter:blur(3px); }
.file-metadata-content { display:grid; gap:14px; padding:24px; }
.file-metadata-content h2,.file-metadata-content h3,.file-metadata-content p { margin:0; }
#file-metadata-values { max-height:58vh; overflow:auto; padding:14px; background:var(--field); border:1px solid var(--line); border-radius:10px; }
#file-metadata-values .metadata-section + .metadata-section { margin-top:22px; padding-top:18px; border-top:1px solid var(--line); }
#file-metadata-values h3 { margin:0 0 10px; color:var(--accent); font-size:17px; }
#file-metadata-values h4 { margin:12px 0 6px; font-size:14px; }
#file-metadata-values .metadata-list { width:100%; grid-template-columns:minmax(145px,220px) minmax(0,1fr); gap:7px 16px; margin:0; }
#file-metadata-values .metadata-list dt,#file-metadata-values .metadata-list dd { min-width:0; padding:5px 0; border-bottom:1px solid #ffffff12; }
#file-metadata-values .metadata-list dt { color:var(--muted); }
#file-metadata-values .metadata-list dd { white-space:pre-wrap; overflow-wrap:anywhere; word-break:normal; }
#file-metadata-values .metadata-list .metadata-list { grid-template-columns:minmax(115px,180px) minmax(0,1fr); padding:2px 0 6px; }
#file-metadata-values .metadata-array { display:flex; flex-wrap:wrap; gap:6px; margin:0; padding:0; list-style:none; }
#file-metadata-values .metadata-array li { max-width:100%; padding:4px 7px; overflow-wrap:anywhere; background:#ffffff0b; border:1px solid var(--line); border-radius:6px; }
.track audio,.detail-player { width:100%; margin-top:14px; height:42px; }
.track-actions { display:flex; align-items:center; gap:7px; }
.track-actions button { margin:0; padding:10px 12px; white-space:nowrap; }
.add-to-playlist { margin-top:10px; }
.track-actions .add-to-playlist { margin-top:0; }
.add-to-playlist.in-playlist { background:var(--field); color:var(--muted); border:1px solid var(--line); }
.add-to-playlist.cache-error { background:#fff0ee; color:#8d2f2f; }
.remove-from-playlist { min-width:42px; font-size:20px; line-height:1; }
.remove-from-playlist.is-active { color:var(--accent); border-color:#777322; }

/* Playlist workspace */
.playlist-page { display:grid; gap:22px; }
.playlist-hero { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:32px; align-items:end; padding:34px; overflow:hidden; background:var(--hero); color:var(--ink); border:1px solid #706a16; border-radius:24px; box-shadow:0 22px 50px var(--shadow); position:relative; }
.playlist-hero::after { content:"♫"; position:absolute; right:28%; top:-72px; color:#ffffff12; font-size:240px; line-height:1; transform:rotate(-10deg); pointer-events:none; }
.playlist-hero .eyebrow { color:var(--accent); }
.playlist-hero p { color:var(--muted); }
.playlist-hero h1 { margin:.12em 0 .2em; font-size:clamp(42px,7vw,76px); line-height:.95; letter-spacing:-.055em; }
.playlist-hero p { margin:0; max-width:620px; }
.playlist-totals { display:grid; grid-template-columns:auto auto; gap:0 10px; align-items:baseline; min-width:190px; padding:18px 20px; border:1px solid #ffffff38; border-radius:18px; background:#ffffff14; backdrop-filter:blur(8px); }
.playlist-totals strong { font-size:24px; text-align:right; font-variant-numeric:tabular-nums; }
.playlist-totals span { color:var(--muted); font-size:13px; }
.playlist-actions { position:sticky; top:0; z-index:6; display:grid; gap:10px; padding:12px; background:var(--sticky); border:1px solid var(--line); border-radius:16px; box-shadow:0 12px 38px var(--shadow); backdrop-filter:blur(14px); }
.playlist-playback-controls { display:grid; grid-template-columns:auto minmax(320px,1fr) auto; gap:8px; align-items:stretch; }
.playlist-file-controls { display:flex; flex-wrap:wrap; gap:8px; align-items:stretch; }
.playlist-actions button,.playlist-actions .button { min-height:58px; display:grid; place-items:center; padding:11px 18px; white-space:nowrap; }
.playlist-player-row { display:grid; grid-template-columns:minmax(220px,.7fr) minmax(300px,1.3fr); gap:12px; align-items:center; padding:10px 2px 0; border-top:1px solid var(--line); }
.playlist-player-row .playlist-now-playing { min-width:0; overflow:hidden; padding:0 4px; background:transparent; border:0; border-radius:0; text-overflow:ellipsis; white-space:nowrap; }
.playlist-player-row #playlist-player { height:42px; }
.playlist-player-transport .compact { min-height:40px; min-width:40px; height:40px; padding:7px 9px; }
#download-playlist { margin-left:auto; }
.playlist-portable { display:flex; flex-wrap:wrap; align-items:end; gap:10px; padding:16px; background:var(--card); border:1px solid var(--line); border-radius:16px; }
.playlist-portable > label:first-child { flex:1 1 280px; display:grid; gap:5px; color:var(--muted); font-size:12px; font-weight:750; text-transform:uppercase; letter-spacing:.045em; }
.playlist-portable input[type=text],#playlist-title { width:100%; padding:11px 13px; border:1px solid var(--line); border-radius:10px; background:#f8faf8; color:var(--ink); font:16px/1.3 system-ui,-apple-system,sans-serif; text-transform:none; letter-spacing:normal; }
.playlist-event { padding:16px; background:var(--card); border:1px solid var(--line); border-radius:16px; }
.playlist-event summary { cursor:pointer; color:var(--accent); font-size:17px; font-weight:850; }
.playlist-event > p,.playlist-event > small { color:var(--muted); }
.playlist-event-fields { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin:14px 0 8px; }
.playlist-event-fields label { display:grid; gap:5px; color:var(--muted); font-size:12px; font-weight:750; text-transform:uppercase; letter-spacing:.045em; }
.playlist-event-fields input,.playlist-event-fields select,.playlist-event-fields textarea { width:100%; padding:10px 12px; border:1px solid var(--line); border-radius:9px; background:#f8faf8; color:var(--ink); font:15px/1.35 system-ui,-apple-system,sans-serif; text-transform:none; letter-spacing:normal; }
.playlist-event-fields .event-notes { grid-column:1 / -1; }
.import-button { cursor:pointer; }
.playlist-import-dialog { width:min(560px,calc(100% - 32px)); padding:0; border:0; border-radius:20px; color:var(--ink); box-shadow:0 24px 70px rgba(20,40,30,.24); }
.playlist-import-dialog::backdrop { background:rgba(12,28,20,.48); }
.playlist-import-dialog form { padding:24px; }
.playlist-import-dialog h2 { margin:0 0 8px; }
.playlist-import-dialog-summary { margin:0 0 18px; color:var(--muted); }
.playlist-import-choices { display:grid; gap:10px; }
.playlist-import-choices button { width:100%; }
.playlist-import-choices .quiet { background:transparent; color:var(--muted); border:1px solid var(--line); }
.playlist-import-note { margin:14px 0 0; color:var(--muted); font-size:13px; }
#playlist-import-status { flex-basis:100%; color:var(--accent); font-size:13px; font-weight:650; }
.preview-length { min-height:58px; display:grid; grid-template-columns:auto minmax(90px,1fr) 42px; gap:12px; align-items:center; padding:6px 16px; border-radius:10px; background:#edf2ee; color:var(--accent); font-size:13px; font-weight:700; }
.preview-length input { width:100%; accent-color:var(--accent); }
.preview-length output { text-align:right; font-variant-numeric:tabular-nums; }
.playlist-now-playing { padding:12px 16px; border-left:4px solid var(--accent); background:#e5ede8; border-radius:4px 12px 12px 4px; font-weight:650; }
#playlist-player { width:100%; height:48px; }
.playlist-help { margin:0; color:var(--muted); font-size:13px; }
.playlist-items { display:grid; gap:9px; counter-reset:playlist; }
.playlist-item { display:grid; grid-template-columns:28px 34px minmax(0,1fr) auto; gap:12px; align-items:center; padding:15px 16px; background:var(--card); border:1px solid var(--line); border-radius:15px; box-shadow:0 5px 18px #17211d08; transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease; }
.playlist-item:hover { transform:translateY(-1px); border-color:#b9cbbf; box-shadow:0 9px 24px #17211d12; }
.playlist-item:active { cursor:grabbing; }
.drag-handle { color:#95a39b; cursor:grab; font-size:20px; user-select:none; }
.playlist-position { display:grid; place-items:center; width:32px; height:32px; border-radius:50%; background:#edf2ee; color:var(--accent); font-size:13px; }
.playlist-item-info { min-width:0; }
.playlist-item-info .track-title { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.playlist-item-info p { margin:1px 0 7px; color:var(--muted); }
.playlist-item-actions { display:flex; flex-wrap:wrap; justify-content:flex-end; align-items:center; gap:6px; max-width:290px; }
.playlist-item-actions button.compact { flex:0 0 40px; width:40px; min-width:40px; max-width:40px; height:40px; padding:0; display:grid; place-items:center; }
.playlist-page-body .site-header .index-count { display:none; }
.trash-control { display:flex; align-items:center; justify-content:flex-end; gap:12px; margin:-42px 0 14px; }
.playlist-source { margin-right:5px; font-size:13px; white-space:nowrap; }
.cache-status.ready { color:var(--accent); }
.cache-status.missing { color:#7d8882; }
.cache-status.error { color:#8d2f2f; }
.playlist-empty { padding:64px 24px; text-align:center; background:var(--card); border:1px dashed #aebdb4; border-radius:20px; }
.playlist-empty strong { display:block; font-size:26px; }
.playlist-empty p { color:var(--muted); }
.detail,.guide { max-width:820px; margin:auto; }
.artist { font-size:22px; color:var(--muted); }
.actions { display:flex; flex-wrap:wrap; gap:10px; margin:30px 0; }
.evidence { background:var(--card); border:1px solid var(--line); padding:24px; border-radius:16px; }
.report-panel { margin-top:26px; padding:18px 20px; background:var(--card); border:1px solid var(--line); border-radius:16px; }
.report-panel summary { cursor:pointer; color:#8d2f2f; font-weight:750; }
.report-panel form,.report-form { display:grid; gap:14px; margin-top:18px; }
.report-panel label,.report-form label { display:grid; gap:5px; color:var(--muted); font-size:13px; font-weight:700; }
.report-honeypot { position:absolute!important; left:-10000px!important; width:1px!important; height:1px!important; overflow:hidden!important; }
.report-thanks { text-align:center; }
dl { display:grid; grid-template-columns:180px 1fr; gap:10px 18px; }
dt { font-weight:700; } dd { margin:0; overflow-wrap:anywhere; } code { font-size:12px; }
.notice { background:#fff6d8; border-left:4px solid #d8a720; padding:15px; margin-top:22px; }
.guide { font-size:18px; } .guide h2 { margin-top:36px; }
.guide-more { margin:28px 0; }
.deep-dive { margin-top:64px; padding-top:34px; border-top:1px solid var(--line); scroll-margin-top:24px; }
.deep-dive blockquote { margin:28px 0; padding:18px 22px; border-left:4px solid var(--accent); background:var(--card); }
.credits-page { display:grid; gap:22px; }
.credits-hero { display:grid; grid-template-columns:minmax(0,1fr) 190px; gap:34px; align-items:center; padding:34px; color:white; background:linear-gradient(135deg,#123f31,#176b4c 62%,#3f8f6b); border-radius:24px; box-shadow:0 18px 45px #123f3124; }
.credits-hero .eyebrow { color:#d9efe4; }
.credits-hero h1 { margin:.12em 0 .22em; font-size:clamp(44px,7vw,76px); line-height:.95; letter-spacing:-.055em; }
.credits-intro { max-width:650px; margin:0; color:#e5f3ec; font-size:18px; }
.credits-qr { display:grid; gap:8px; justify-items:center; padding:14px; color:white; text-align:center; text-decoration:none; background:white; border-radius:18px; }
.credits-qr img { display:block; width:150px; height:150px; }
.credits-qr span { color:var(--accent); font-size:12px; font-weight:800; }
.credits-demo-note { padding:15px 18px; background:#fff6d8; border-left:4px solid #d8a720; border-radius:4px 12px 12px 4px; }
.credit-list { display:grid; gap:10px; }
.credit-card { display:grid; grid-template-columns:48px minmax(0,1fr); gap:16px; padding:22px; background:var(--card); border:1px solid var(--line); border-radius:16px; }
.credit-number { margin:3px 0 0; color:var(--accent); font-size:13px; font-weight:850; letter-spacing:.08em; }
.credit-card h2 { margin:0 0 8px; font-size:24px; line-height:1.15; }
.credit-required { margin:0; }
.credit-links { margin:9px 0 0; color:var(--muted); font-size:13px; }
.credits-footer { display:flex; justify-content:space-between; gap:24px; padding:20px 0 0; border-top:1px solid var(--line); }
.credits-footer p { margin:0; }
.admin h1 { font-size:clamp(34px,6vw,58px); margin:.2em 0 .5em; }
.admin h2 { margin-top:42px; }
.admin { font-size:14px; }
.admin > h1 { font-size:clamp(30px,4vw,44px); }
.admin th,.admin td { padding:9px 11px; }
.admin-action { display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin:0 0 18px; }
.admin-action small { color:var(--muted); }
.admin-import { display:grid; grid-template-columns:minmax(280px,1fr) auto; gap:12px 24px; align-items:center; margin:24px 0; padding:18px; background:var(--card); border:1px solid var(--line); border-radius:14px; }
.admin-import h2 { margin:0 0 6px; }
.admin-import p { margin:0; color:var(--muted); }
.admin-import form { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.admin-import input[type=file] { max-width:280px; padding:9px; border:1px solid var(--line); border-radius:9px; background:#f8faf8; }
.import-job-list { grid-column:1 / -1; border-top:1px solid var(--line); padding-top:10px; }
.import-job-list p + p { margin-top:8px; }
.admin-authorization { margin:28px 0; padding:18px; background:var(--card); border:1px solid var(--line); border-radius:14px; }
.admin-authorization > h2 { margin:0 0 6px; }
.admin-authorization > p { color:var(--muted); }
.admin-authorization > form { display:grid; grid-template-columns:repeat(5,minmax(130px,1fr)); gap:10px; align-items:end; margin:16px 0 20px; }
.admin-authorization label { display:grid; gap:4px; color:var(--muted); font-size:12px; font-weight:750; }
.admin-authorization input,.admin-authorization select,.admin-authorization textarea { width:100%; padding:9px; border:1px solid var(--line); border-radius:8px; background:#f8faf8; font:inherit; }
.authorization-conditions { grid-column:span 3; }
.crawler-control { display:grid; grid-template-columns:minmax(240px,1fr) auto; gap:12px 24px; align-items:center; margin:0 0 24px; padding:16px; background:var(--card); border:1px solid var(--line); border-radius:14px; }
.crawler-control > div:first-child { display:flex; flex-wrap:wrap; align-items:center; gap:9px; }
.crawler-control > div:first-child small { flex-basis:100%; color:var(--muted); }
.crawler-control .live-refresh-note { color:#11658d; font-weight:700; }
.crawler-control .admin-action { margin:0; }
.crawler-interval-form { display:flex; align-items:end; gap:6px; }
.crawler-interval-form label { display:grid; gap:3px; color:var(--muted); font-size:11px; font-weight:750; }
.crawler-interval-form input { width:92px; padding:8px; border:1px solid var(--line); border-radius:8px; background:#f8faf8; font:inherit; }
.crawler-control > small { grid-column:1 / -1; color:var(--muted); }
.genre-priority { margin:24px 0; padding:18px; background:var(--card); border:1px solid var(--line); border-radius:14px; }
.genre-priority > summary { color:var(--accent); cursor:pointer; font-size:18px; font-weight:800; }
.genre-priority[open] > summary { margin-bottom:12px; }
.genre-priority p { margin:0 0 14px; color:var(--muted); }
.genre-priority-list { display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:7px; margin:0 0 14px; padding:0; list-style:none; counter-reset:genres; }
.genre-priority-list li { display:flex; align-items:center; min-height:42px; padding:5px 6px; border:1px solid var(--line); border-radius:9px; background:#f8faf8; cursor:grab; counter-increment:genres; }
.genre-priority-list li::before { content:counter(genres); width:24px; color:var(--muted); font-size:11px; font-weight:800; }
.genre-priority-list li.is-dragging { opacity:.45; }
.drag-handle { margin-right:6px; color:var(--muted); letter-spacing:-3px; }
.genre-order-buttons { display:flex; gap:3px; margin-left:auto; }
.genre-order-buttons button { min-width:28px; padding:4px 7px; font-size:12px; }
.row-actions { display:flex; flex-wrap:wrap; gap:6px; }
.row-actions form { margin:0; }
.row-actions button, td form button { padding:8px 10px; font-size:13px; }
.row-actions .source-switch { position:relative; width:64px; height:34px; padding:0; overflow:hidden; border-radius:999px; background:#cfd6d2; color:#536159; transition:background .16s ease; }
.row-actions .source-switch::after { content:""; position:absolute; top:4px; left:4px; width:26px; height:26px; border-radius:50%; background:white; box-shadow:0 2px 6px #17211d33; transition:transform .16s ease; }
.row-actions .source-switch.is-on { background:var(--accent); color:white; }
.row-actions .source-switch.is-on::after { transform:translateX(30px); }
.source-switch .switch-text { position:absolute; right:7px; top:50%; transform:translateY(-50%); font-size:9px; font-weight:850; letter-spacing:.04em; }
.source-switch.is-on .switch-text { left:9px; right:auto; }
.source-switch:focus-visible { outline:3px solid #79b99e; outline-offset:2px; }
.crawl-limit-form { display:flex; align-items:center; gap:5px; }
.crawl-limit-form label { display:grid; gap:3px; color:var(--muted); font-size:11px; font-weight:750; }
.crawl-limit-form input { width:64px; padding:7px 8px; border:1px solid var(--line); border-radius:8px; background:#f8faf8; font:inherit; }
.adapter-requests { display:grid; gap:10px; }
.adapter-requests summary { cursor:pointer; }
.markdown-content { margin-top:18px; overflow-wrap:anywhere; }
.markdown-content { font-size:13px; line-height:1.48; }
.admin .markdown-content h1 { font-size:26px; line-height:1.15; letter-spacing:-.02em; margin:24px 0 16px; }
.admin .markdown-content h2 { font-size:20px; line-height:1.2; margin:28px 0 12px; }
.admin .markdown-content h3 { font-size:16px; line-height:1.25; margin:22px 0 10px; }
.markdown-content pre { overflow:auto; padding:14px; border-radius:10px; background:#f0f3ef; font:13px/1.5 ui-monospace,monospace; }
.markdown-content code { font:13px/1.5 ui-monospace,monospace; }
.markdown-content table { margin:16px 0; }
.markdown-content blockquote { margin-left:0; padding-left:16px; border-left:4px solid var(--line); color:var(--muted); }
.error { color:#8d2f2f; }
.status-badge,.run-result { display:inline-flex; align-items:center; width:max-content; padding:4px 9px; border-radius:999px; font-size:12px; font-weight:800; line-height:1.25; }
.status-badge::before { content:""; width:7px; height:7px; margin-right:6px; border-radius:50%; background:currentColor; }
.status-waiting { background:#e5ede8; color:#176b4c; }
.status-running { background:#dff2ff; color:#11658d; }
.status-running::before { animation:status-pulse 1.2s ease-in-out infinite; }
.status-queued { background:#fff1c9; color:#805d00; }
.status-disabled { background:#eceeed; color:#66736c; }
.status-manual { background:#eee9f7; color:#694c8a; }
.status-note { display:block; margin-top:5px; color:var(--muted); line-height:1.3; }
.run-result { padding:3px 8px; background:#eceeed; color:#66736c; }
.run-success { background:#e5ede8; color:#176b4c; }
.run-failed { background:#f8e4e2; color:#8d2f2f; }
.run-running { background:#dff2ff; color:#11658d; }
.run-error { margin-top:6px; color:#8d2f2f; }
.run-error summary { cursor:pointer; font-size:12px; font-weight:700; }
.run-error small { display:block; max-width:320px; margin-top:4px; overflow-wrap:anywhere; }
.run-imports { margin-top:6px; color:var(--green); }
.run-imports summary { cursor:pointer; font-size:12px; font-weight:800; }
.run-imports ol { max-width:320px; margin:6px 0 0; padding-left:22px; color:var(--text); font-size:12px; }
.run-imports li + li { margin-top:3px; }
@keyframes status-pulse { 50% { opacity:.3; transform:scale(.75); } }
.stat-group { margin:28px 0; }
.stat-group-title { margin:0 0 10px; color:var(--muted); font-size:13px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.stat-privacy-note { margin:-2px 0 12px; color:var(--muted); font-size:13px; }
.inspector-log { margin-top:14px; padding:12px 14px; border:1px solid #ffe60066; border-radius:12px; background:#050505; color:#ffe600; }
.inspector-log > summary { cursor:pointer; color:#ffe600; font-weight:800; }
.inspector-log .table-wrap { background:#050505; border-color:#ffe60055; max-width:100%; }
.inspector-log table { width:100%; min-width:0; table-layout:fixed; }
.inspector-log th,.inspector-log td { padding:9px 8px; font-size:12px; overflow-wrap:anywhere; }
.inspector-log th:nth-child(1) { width:13%; }
.inspector-log th:nth-child(2) { width:23%; }
.inspector-log th:nth-child(3) { width:10%; }
.inspector-log th:nth-child(4) { width:12%; }
.inspector-log th:nth-child(5) { width:12%; }
.inspector-log th:nth-child(6) { width:10%; }
.inspector-log th:nth-child(7) { width:14%; }
.inspector-log th:nth-child(8) { width:6%; }
.inspector-log .inspection-outcome { max-width:100%; white-space:normal; font-size:10px; padding:4px 6px; }
.inspector-log .inspection-review-actions { gap:6px; padding:8px; }
.inspector-log .inspection-review-actions form { min-width:0; }
.inspector-log .inspection-review-actions button { min-width:0; padding:8px 6px; font-size:11px; white-space:normal; overflow-wrap:anywhere; }
.inspector-log table,.inspector-log th,.inspector-log td { color:#ffe600; border-color:#ffe60033; }
.inspector-log th { color:#ffe600; }
.inspection-recording-link { color:#ffe600; text-decoration-color:#ffe60088; }
.inspection-recording-link:hover { color:#fff36a; }
.inspection-outcome { display:inline-block; padding:5px 9px; border:1px solid currentColor; border-radius:999px; font-size:11px; line-height:1.15; letter-spacing:.045em; white-space:nowrap; }
.inspection-outcome.outcome-approved { color:#f4f4ef; }
.inspection-outcome.outcome-review { color:#ffe600; }
.inspection-outcome.outcome-excluded { color:#ff4a4a; }
.inspection-outcome.outcome-pending { color:#ffe600; }
.inspector-log tr.inspection-entry:has(.outcome-approved) > td,
.inspector-log tr.inspection-entry:has(.outcome-approved) a,
.inspector-log tr.inspection-entry:has(.outcome-approved) summary,
.inspector-log tr.inspection-entry:has(.outcome-approved) .inspection-json { color:#f4f4ef; }
.inspector-log tr.inspection-entry:has(.outcome-approved) a { text-decoration-color:#f4f4ef88; }
.inspection-human-decision { display:block; margin-top:7px; color:#fff; font-weight:800; }
.inspector-log-filter { display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; margin:14px 0 10px; }
.inspector-log-filter label { color:var(--muted); font-weight:750; }
.inspector-log-filter select { min-width:210px; border:1px solid var(--line); }
.inspector-log-filter span { color:var(--muted); font-size:12px; }
.inspector-log tr.inspection-doubt { background:#ffe60014; box-shadow:inset 5px 0 #ffe600; }
.inspector-log tr.inspection-excluded { background:#350000; box-shadow:inset 5px 0 #ff3535; }
.inspector-log tr.inspection-excluded td,.inspector-log tr.inspection-excluded a { color:#ff4a4a; }
.inspector-log tr.inspection-doubt > td:first-child,.inspector-log tr.inspection-excluded > td:first-child { padding-left:17px; }
.inspection-json { max-width:560px; max-height:320px; overflow:auto; white-space:pre-wrap; overflow-wrap:anywhere; color:var(--ink); font-size:12px; }
.inspector-log .inspection-json { color:#ffe600; }
.inspection-review-row td { padding:0 0 0 5px; }
.inspection-review-actions { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; margin:0; padding:9px 10px; border-top:1px solid #ffffff40; }
.inspection-review-actions form { margin:0; }
.inspection-review-actions button,.inspection-review-actions .inspection-reject,.inspection-review-actions .inspection-keep,.inspection-review-actions .inspection-approve { width:100%; height:100%; padding:9px 14px; border:1px solid #ffffff14; border-radius:999px; background:var(--field); color:#f4f4ef; font-size:12px; }
.inspection-review-actions button:hover,.inspection-review-actions button:focus-visible { background:#292929; color:#fff; }
.stat-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:10px; margin:0; }
.stat-grid article { min-height:142px; background:var(--card); border:1px solid var(--line); border-radius:14px; padding:18px; display:grid; align-content:space-between; }
.stat-grid-attention article { transition:background-color .2s ease,border-color .2s ease; }
.stat-grid-attention article.has-alert { background:#fbecea; border-color:#efc9c4; }
.stat-grid-attention article.has-alert strong,.stat-grid-attention article.has-alert span { color:#8d2f2f; }
.stat-grid strong { font-size:30px; } .stat-grid span { color:var(--muted); font-size:13px; }
.table-wrap { overflow-x:auto; background:var(--card); border:1px solid var(--line); border-radius:14px; }
table { width:100%; border-collapse:collapse; } th,td { padding:12px 14px; border-bottom:1px solid var(--line); text-align:left; vertical-align:top; } th { font-size:12px; text-transform:uppercase; color:var(--muted); } tr:last-child td { border-bottom:0; }
footer { border-top:1px solid var(--line); padding:24px 0 40px; color:var(--muted); font-size:13px; }
input,select,textarea,dialog { color:var(--ink); }
input[type=url],textarea,.duration-filter input[type=number],.playlist-portable input[type=text],#playlist-title,.playlist-event-fields input,.playlist-event-fields select,.playlist-event-fields textarea,.admin-import input[type=file],.admin-authorization input,.admin-authorization select,.admin-authorization textarea,.crawler-interval-form input,.crawl-limit-form input { background:var(--field); color:var(--ink); }
.playlist-now-playing,.preview-length,.playlist-position { background:var(--field); color:var(--ink); }
.playlist-import-dialog { background:var(--card); }
.playlist-import-dialog::backdrop { background:#000b; }
.playlist-empty { border-color:var(--line); }
.notice,.credits-demo-note { background:#2d290c; color:var(--ink); border-left-color:var(--accent); }
@media (max-width:1100px) { .stat-grid { grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); } .search-filters { grid-template-columns:repeat(4,minmax(0,1fr)); } .home-masthead-panel { grid-template-columns:130px 120px minmax(0,1fr); padding-inline:22px; } .home-masthead-logo img { width:115px; } .home-index-count strong { font-size:27px; } }
@media (max-width:760px) { .site-header { flex-wrap:wrap; padding:12px 0; } .association-logo { width:58px; height:36px; } .association-logo img { width:58px; } .site-header .index-count { order:3; margin-left:0; } .site-header nav { margin-left:auto; } .search-primary { grid-template-columns:1fr 1fr; } .search-query { grid-column:1 / -1; } .search-filter-disclosure > summary { min-height:50px; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 13px; color:var(--ink); background:var(--field); border:1px solid var(--line); border-radius:10px; cursor:pointer; list-style:none; } .search-filter-disclosure > summary::-webkit-details-marker { display:none; } .filter-summary span { color:var(--muted); font-size:11px; font-weight:750; text-transform:uppercase; letter-spacing:.055em; } .filter-summary strong { font-size:14px; } .filter-summary strong::after { content:" ↓"; color:var(--accent); } .search-filter-disclosure[open] .filter-summary strong::after { content:" ↑"; } .search-filter-disclosure:not([open]) > .search-filters { display:none; } .search-filter-disclosure[open] > .search-filters { margin-top:8px; } .search-filters { grid-template-columns:repeat(2,minmax(0,1fr)); } .search-control,.search-submit,.smart-playlist-submit,.search-reset,.search-playlist { min-height:56px; padding-inline:10px; } .sort-control { margin-top:0; border:1px solid var(--line); } .hero { text-align:left; } dl { grid-template-columns:1fr; gap:2px; } dd { margin-bottom:13px; } .result-heading { align-items:flex-start; flex-direction:column; } .download-actions { justify-content:flex-start; } .playlist-hero { grid-template-columns:1fr; padding:25px 22px; } .playlist-totals { width:100%; } .playlist-actions { top:0; } .playlist-playback-controls { grid-template-columns:1fr 1fr; } .playlist-playback-controls .preview-length { grid-column:1 / -1; grid-row:1; } .playlist-file-controls > * { flex:1 1 calc(50% - 8px); } .playlist-player-row { grid-template-columns:1fr; gap:7px; } #back-to-catalog { width:100%; margin-left:0; text-align:center; } .preview-length { width:100%; grid-template-columns:auto 1fr 42px; } .playlist-item { grid-template-columns:24px 30px minmax(0,1fr); align-items:start; } .playlist-item-actions { grid-column:2 / -1; justify-content:flex-start; max-width:none; } .playlist-source { width:100%; } .credits-hero { grid-template-columns:1fr; padding:26px 22px; } .credits-qr { width:180px; } .playlist-import-dialog .dialog-actions,.smart-playlist-dialog .dialog-actions { display:grid; } .crawler-control,.admin-import,.admin-authorization > form { grid-template-columns:1fr; } .crawler-control > small,.import-job-list,.authorization-conditions { grid-column:auto; } }
@media (max-width:760px) { .playlist-event-fields { grid-template-columns:1fr; } .playlist-event-fields .event-notes { grid-column:auto; } }
@media (max-width:760px) { .inspection-review-actions { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:760px) { .catalog-sticky { top:0; } .catalog-player-row { grid-template-columns:1fr; gap:7px; } .catalog-player-transport { grid-template-columns:36px minmax(0,1fr) 36px; } .catalog-player-transport .compact { min-width:36px; padding:6px; } .catalog-pagination { justify-content:space-between; } .catalog-pagination strong { text-align:center; } .track { grid-template-columns:1fr; gap:9px; } .track-actions { justify-content:flex-end; } .track-actions button { padding:9px 10px; font-size:13px; } }
@media (max-width:760px) { .home-masthead { width:min(100% - 20px,1200px); margin-top:10px; } .home-masthead-panel { grid-template-columns:90px 1fr; grid-template-rows:auto auto auto; gap:8px 14px; padding:16px; border-radius:20px; } .home-masthead-logo { border-right:1px solid var(--line); } .home-masthead-logo img { width:82px; } .home-index-count strong { font-size:25px; } .home-masthead h1 { grid-column:1 / -1; font-size:clamp(38px,12vw,58px); margin-top:8px; } .home-masthead .optional-account-note { font-size:11px; text-align:left; } .home-menu { justify-content:flex-start; gap:7px 14px; padding-inline:8px; font-size:14px; } .home-page main { padding-top:18px; } }