:root{color-scheme:dark;--bg:#101215;--panel:#191d23;--border:#303640;--text:#f0f2f5;--muted:#a8b2bf;--accent:#b9f36b;--ink:#152307;--red:#ff9199}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font:16px/1.55 system-ui,-apple-system,"Segoe UI",sans-serif}a{color:var(--accent);text-decoration:none}a:hover{text-decoration:underline}button,input,select,textarea{font:inherit}button,.button{display:inline-flex;justify-content:center;align-items:center;gap:.5rem;border:1px solid transparent;border-radius:8px;padding:.7rem 1rem;background:var(--accent);color:var(--ink);font-weight:650;cursor:pointer;text-decoration:none;line-height:1.35}button:hover,.button:hover{filter:brightness(1.07);text-decoration:none}button:disabled{opacity:.5;cursor:wait}.quiet{background:#252c34;color:var(--text);border-color:var(--border)}.danger{color:var(--red)}input,select,textarea{width:100%;padding:.7rem .85rem;border:1px solid #414a57;border-radius:7px;background:#101419;color:var(--text)}input[type=checkbox]{width:19px;height:19px;accent-color:var(--accent);flex-shrink:0}input[type=file]{font-size:.9rem}textarea{resize:vertical}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible,textarea:focus-visible{outline:3px solid var(--accent);outline-offset:3px}h1,h2,h3,p{margin-top:0}h1{font-size:clamp(1.85rem,3vw,2.65rem);line-height:1.18;letter-spacing:-.035em;margin-bottom:1rem}h2{font-size:1.35rem;line-height:1.3;margin-bottom:1rem}h3{font-size:1.1rem}small,.small{font-size:.875rem;color:var(--muted)}.muted{color:var(--muted)}.eyebrow{font-size:.78rem;font-weight:750;letter-spacing:.13em;color:var(--accent);margin-bottom:.8rem}.site-header{min-height:82px;border-bottom:1px solid var(--border);padding:1rem max(24px,calc((100vw - 1440px)/2));display:flex;align-items:center;justify-content:space-between;gap:1.5rem}.brand{font-size:1.15rem;letter-spacing:-.03em;color:var(--text);white-space:nowrap}.brand strong{color:var(--accent)}nav{display:flex;align-items:center;gap:1.2rem;flex-wrap:wrap}nav>a{font-size:.9rem;color:var(--text)}nav button{font-size:.875rem;padding:.45rem .65rem}main{max-width:1488px;margin:auto;padding:2.6rem 24px 2rem;min-height:calc(100vh - 160px)}footer{max-width:1488px;padding:1.4rem 24px;margin:auto;color:var(--muted);font-size:.85rem;border-top:1px solid var(--border)}.page-heading,.section-heading{display:flex;align-items:center;justify-content:space-between;gap:2rem;margin-bottom:1.5rem}.page-heading p:last-child{margin-bottom:0}.page-heading>.field{min-width:200px}.panel{background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:1.5rem;margin-bottom:1.5rem}.columns{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem}.columns .panel{min-width:0}.field{display:flex;flex-direction:column;gap:.45rem}.field label{font-size:.875rem;font-weight:600}.grow{flex:1}.stack{display:flex;flex-direction:column;gap:1rem}.search-row{display:flex;gap:1rem;align-items:flex-end}.search-box{display:flex;position:relative}.search-box input{padding-right:3rem}.search-box button{position:absolute;right:4px;top:4px;bottom:4px;padding:.2rem .6rem;background:transparent;border:0;color:var(--muted)}.actions{display:flex;gap:.75rem;align-items:center;margin-top:1.2rem}.wrap{flex-wrap:wrap}.actions form{margin:0}.genre-section{margin-bottom:1.7rem}.chips{display:flex;flex-wrap:wrap;gap:.5rem}.chip{padding:.4rem .7rem;border-radius:6px;background:#1e252d;color:var(--text);border:1px solid var(--border);font-size:.875rem;font-weight:500}.chip span{color:var(--muted);font-size:.8rem}.chip:hover{border-color:var(--accent)}details summary{cursor:pointer;color:var(--muted);font-size:.9rem;margin:.8rem 0}details[open]>summary{margin-bottom:1rem}.table-wrap{width:100%;overflow-x:auto}table{width:100%;border-collapse:collapse;text-align:left;font-size:.9rem}th{font-size:.8rem;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);font-weight:600;padding:.85rem .65rem;border-bottom:1px solid #434c58;white-space:nowrap}td{padding:1rem .65rem;border-bottom:1px solid var(--border);vertical-align:middle}td:first-child{min-width:180px}.track-title{border:0;background:none;padding:0;text-align:left;display:block;font-size:.95rem;color:var(--text);font-weight:650}.track-title:hover{color:var(--accent)}.track-artist{color:var(--muted);margin-top:4px;font-size:.85rem}.request-hint{font-size:.75rem;color:var(--muted)}tr:hover td{background:#20262d}.result-bar{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin-top:.8rem}.result-bar p{font-size:.875rem;color:var(--muted);margin:0}.copy-options{position:relative;flex-shrink:0}.copy-options>div{position:absolute;z-index:2;right:0;padding:1rem;background:#252c34;border:1px solid var(--border);min-width:175px;box-shadow:0 8px 30px #0008}.copy-options label{display:flex;align-items:center;gap:.6rem;font-size:.875rem;margin:.3rem 0}.pager{display:flex;gap:.6rem;justify-content:center;align-items:center;margin-top:1.5rem;flex-wrap:wrap}.pager label{display:flex;align-items:center;gap:.5rem}.pager input{width:80px}.pager button{font-size:.85rem}.badge{display:inline-flex;padding:.4rem .7rem;border-radius:6px;background:#29323b;color:#d5dce5;font-size:.82rem;white-space:nowrap}.good{background:#243921;color:#c7f4a6}.pending{background:#3d331e;color:#f4d38e}.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-bottom:1.5rem}.stats>div{border-left:3px solid var(--accent);background:var(--panel);padding:1rem 1.4rem}.stats strong{display:block;font-size:2rem;line-height:1.2}.stats span{color:var(--muted);font-size:.875rem}.genre-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:.6rem;margin:1rem 0 1.5rem}.genre-choice{display:flex;gap:.7rem;align-items:center;background:#11161c;border:1px solid var(--border);border-radius:7px;padding:.65rem .8rem;font-size:.9rem}.genre-choice span{flex:1}.genre-choice small{white-space:nowrap}.steps{padding-left:1.3rem;color:var(--muted);font-size:.95rem}.steps li{padding:.35rem 0}.device{display:flex;justify-content:space-between;align-items:center;gap:1rem;border-top:1px solid var(--border);padding:1rem 0}.separated{margin-top:1.5rem;padding-top:1rem;border-top:1px solid var(--border)}.auth{max-width:580px;margin:2rem auto}.auth h1{font-size:2rem}.narrow{max-width:500px}.empty{text-align:center;padding:2rem;color:var(--muted)}.notice{padding:1rem 1.2rem;border:1px solid #4e5966;border-radius:8px;background:#232c35;margin-bottom:1.5rem}.notice.success{background:#203324;border-color:#416742}.notice.error{background:#3a2025;border-color:#8e454d}.error-text{color:var(--red)}.tabs{display:flex;gap:.5rem;flex-wrap:wrap}.wish-card{padding:1.1rem 0;border-top:1px solid var(--border);display:flex;justify-content:space-between;gap:1.5rem;align-items:center}.wish-card h3{margin:0 0 .25rem}.wish-card p{margin:.25rem 0}.wish-card .actions{margin-top:0}.wish-card .actions button{font-size:.85rem;padding:.5rem .7rem}.wish-note{color:#d9dfeb;white-space:pre-wrap;overflow-wrap:anywhere}.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);max-width:calc(100vw - 32px);background:#d6f8ad;color:var(--ink);padding:1rem 1.3rem;border-radius:9px;box-shadow:0 6px 35px #0008;z-index:20}.source-dot{display:inline-block;width:12px;height:12px;border-radius:3px;margin-right:6px}.source-dot.red{background:#ed646e}.source-dot.yellow{background:#e6c24d}.source-dot.green{background:#77b96a}dialog{color:var(--text);background:var(--panel);border:1px solid #56616f;border-radius:14px;padding:2rem;max-width:540px;width:calc(100% - 32px);box-shadow:0 20px 100px #0008}dialog::backdrop{background:#060a10b8}dialog h2{font-size:1.7rem;letter-spacing:-.025em}dialog h3{margin-bottom:.4rem}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}[hidden]{display:none!important}@media(max-width:900px){.site-header{flex-direction:column;align-items:flex-start;gap:.9rem}nav{gap:.7rem}.columns{grid-template-columns:1fr}.page-heading{align-items:flex-start}.wish-card{align-items:flex-start;flex-direction:column}}@media(max-width:600px){main{padding:1.5rem 14px}.site-header{padding:1rem 14px}.panel{padding:1rem}.page-heading,.section-heading{flex-direction:column;gap:1rem}.page-heading>.field{width:100%}.search-row{flex-wrap:wrap}.search-row .grow{flex-basis:100%}.search-row>.field:not(.grow){flex:1}.stats{gap:.5rem}.stats>div{padding:.7rem}.stats strong{font-size:1.55rem}.stats span{font-size:.8rem}.result-bar{align-items:flex-start}.auth{margin:.5rem auto}dialog{padding:1.3rem}.wish-card .actions{flex-wrap:wrap}.genre-grid{grid-template-columns:1fr}}

.websource-editor{display:grid;grid-template-columns:minmax(320px,440px) minmax(0,1fr);gap:1.5rem;align-items:start}.websource-checks{display:grid;grid-template-columns:1fr 1fr;gap:.7rem;margin:1rem 0 1.4rem}.websource-checks label{display:flex;align-items:center;gap:.6rem;font-size:.9rem}.websource-pair{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin:1rem 0}.websource-colors{display:grid;grid-template-columns:repeat(3,1fr);gap:.8rem}.websource-colors input{height:44px;padding:4px;cursor:pointer}.websource-colors label{font-size:.8rem}.websource-preview-column{position:sticky;top:1.5rem}.websource-preview-panel .section-heading{gap:1rem}.websource-preview-panel .section-heading h2{margin:0}.websource-preview-panel select{max-width:210px}.websource-preview-surface{background-color:#30363e;background-image:linear-gradient(45deg,#22282f 25%,transparent 25%),linear-gradient(-45deg,#22282f 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#22282f 75%),linear-gradient(-45deg,transparent 75%,#22282f 75%);background-size:32px 32px;background-position:0 0,0 16px,16px -16px,-16px 0;border:1px solid #48525e;border-radius:8px;overflow:hidden}.websource-preview-surface iframe{display:block;width:100%;height:500px;border:0}.websource-preview-panel>p{margin:1rem 0 0}.websource-entry{display:flex;align-items:center;justify-content:space-between;gap:1.5rem}.websource-entry p{margin:0}@media(max-width:1000px){.websource-editor{grid-template-columns:1fr}.websource-preview-column{position:static}.websource-entry{align-items:flex-start;flex-direction:column}}@media(max-width:450px){.websource-checks{grid-template-columns:1fr}.websource-colors{grid-template-columns:1fr 1fr}.websource-pair{grid-template-columns:1fr}.websource-preview-surface iframe{height:450px}}
