@charset "UTF-8";
:root{color-scheme:dark;--bg:#111411;--surface:#191d19;--line:#30372f;--text:#f3f5ed;--muted:#a8b1a3;--accent:#d3f581;--ink:#18210d;--danger:#ffb3a7}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased}
.ambient-background{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:0;background:radial-gradient(ellipse at 40% 35%,#b033762b,transparent 55%),radial-gradient(ellipse at 60% 75%,#24afa226,transparent 60%)}
.ambient-background:before{content:"";position:absolute;width:clamp(620px,88vw,1100px);aspect-ratio:1;left:50%;top:50%;border-radius:50%;border:1px solid #5a6b3c66;opacity:.8;transform:translate3d(-50%,-50%,0) rotate(-24deg);background-image:url("vinyl-label.svg?v=2"),radial-gradient(circle,#0b100b 0 18.5%,transparent 18.8%),conic-gradient(from 30deg,transparent 0deg,#e2e9cd24 38deg,transparent 58deg,transparent 180deg,#b8c5a51c 215deg,transparent 240deg),repeating-radial-gradient(circle,#252c237d 0px,#0a0d0a 1px,#111710 2px,#222b2063 3px);background-size:32% 32%,100% 100%,100% 100%,100% 100%;background-position:center;background-repeat:no-repeat;box-shadow:0 0 0 5px #080b08,0 0 90px #c958af10,inset 0 0 35px #000;animation:vinyl-turn 48s linear infinite}
.ambient-background:after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 50% 50%,#11141180 0%,#111411a6 58%,#0b0e0be6 100%)}
@keyframes vinyl-turn{from{transform:translate3d(-50%,-50%,0) rotate(-24deg)}to{transform:translate3d(-50%,-50%,0) rotate(336deg)}}
button,input,a{-webkit-tap-highlight-color:transparent}
button,input{font:inherit}
button,a{touch-action:manipulation}
a{color:inherit}
button{cursor:pointer}
button:disabled{cursor:wait;opacity:.7}
:focus-visible{outline:3px solid var(--accent);outline-offset:5px}
[hidden]{display:none!important}
.page{position:relative;z-index:1;width:min(100% - 32px,900px);margin:0 auto;padding-bottom:16px}
.topbar{height:56px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);gap:16px}
.brand{display:inline-flex;align-items:center;font-size:16px;font-weight:850;letter-spacing:.02em;text-decoration:none}
.brand>span:not(.record){font-weight:450;color:var(--muted)}
.record{width:29px;height:29px;border:1px solid var(--accent);border-radius:50%;display:inline-block;margin-right:11px;position:relative;box-shadow:inset 0 0 0 5px var(--bg),inset 0 0 0 6px #667a40}
.record:after{content:"";position:absolute;inset:11px;background:var(--accent);border-radius:50%}
.home-link{font-size:12px;color:var(--muted);text-decoration:none;white-space:nowrap;padding:12px 0}
.home-link span{margin-left:6px;color:var(--text)}
.hero{padding:18px 0 16px}
h1{font-size:clamp(28px,4vw,38px);font-weight:650;letter-spacing:-.04em;line-height:1.1;margin:0}
h1 span{color:var(--accent)}
.search-box{display:flex;align-items:center;gap:10px;background:#f2f4eb;border-radius:11px;padding:6px 6px 6px 15px;color:var(--ink)}
.search-box:focus-within{outline:2px solid var(--accent);outline-offset:4px}
.search-icon{width:21px;height:21px;flex-shrink:0;color:#5f6a54}
.search-box input{width:100%;min-width:0;border:0;outline:0;color:#1d2517;background:transparent;font-size:16px;height:44px;padding:0}
.search-box input::placeholder{color:#737b6b;opacity:1}
.search-button{border:0;border-radius:8px;min-height:44px;padding:0 20px;background:var(--ink);color:var(--accent);font-size:14px;font-weight:650;white-space:nowrap}
.search-button span{margin-left:13px}
.search-button:hover{background:#2b3b17}
.view-tabs{display:flex;gap:6px;margin:10px 0 4px;border-bottom:1px solid var(--line)}
.view-tabs button{min-height:44px;padding:8px 16px;background:none;border:0;border-bottom:2px solid transparent;color:var(--muted);font-size:13px}
.view-tabs button[aria-selected=true]{border-bottom-color:var(--accent);color:var(--accent)}
.result-heading{display:flex;justify-content:space-between;gap:10px;align-items:baseline;margin:8px 0}
.result-heading h2{font-size:13px;line-height:1.4;font-weight:550;margin:0}
#result-count{font-size:11px;color:var(--muted);white-space:nowrap}
.empty-state{padding:20px 12px;text-align:center;border:1px dashed var(--line);border-radius:10px;grid-column:1/-1}
.empty-state p{font-size:14px;margin:0 0 5px}
.empty-state>span{font-size:12px;color:var(--muted);line-height:1.7}
.track-row{display:flex;gap:10px;align-items:center;border-bottom:1px solid var(--line);padding:8px 0;min-height:60px;min-width:0}
.artwork{width:40px;height:40px;border-radius:6px;background:#272e25;flex:0 0 40px;object-fit:cover;display:grid;place-items:center;color:var(--accent);font-size:20px}
.track-info{flex:1;min-width:0}
.track-info h2,.track-info h3{font-size:13px;line-height:1.25;font-weight:600;margin:0 0 3px;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.track-info p{display:flex;gap:8px;align-items:baseline;font-size:11px;line-height:1.3;margin:0;color:var(--muted);white-space:nowrap}
.track-artist{min-width:0;overflow:hidden;text-overflow:ellipsis}
.track-info a{text-decoration:none}
.track-info a:hover{text-decoration:underline}
.track-bpm,.track-duration{flex-shrink:0;font-size:11px;color:#b5bdaa}
.track-bpm{color:var(--accent);font-variant-numeric:tabular-nums}
.wish-button{min-height:44px;min-width:82px;border:1px solid #d3f58144;border-radius:8px;background:#d3f5810d;color:var(--accent);padding:8px 10px;font-size:12px;font-weight:650;flex-shrink:0;transition:background .15s,color .15s}
.wish-button:hover{background:var(--accent);color:var(--ink)}
.wish-button.done{border-color:var(--line);background:transparent;color:var(--muted);cursor:default;opacity:1}
.feedback{background:#d3f5810b;border:1px solid #d3f58144;border-radius:10px;padding:12px 14px;margin:10px 0;color:var(--accent);font-size:13px;line-height:1.4}
.feedback strong{display:block;font-size:15px;font-weight:600}
.feedback p{color:var(--muted);margin:5px 0 0;font-size:13px}
.feedback.error,.notice{background:#ffb3a708;color:var(--danger);border:1px solid #ffb3a733;border-radius:10px;padding:12px;font-size:13px;line-height:1.5;margin:10px 0;grid-column:1/-1}
#verification{display:flex;justify-content:center;margin-top:16px}
#verification:empty{display:none}
.queue{margin:0}
.queue-tools{display:flex;align-items:center;justify-content:space-between;gap:10px}
.queue-tools h2{font-size:13px;font-weight:550;margin:0}
.queue ul{list-style:none;padding:0;margin:0}
.queue li{padding:8px 0;border-bottom:1px solid var(--line);font-size:13px;min-width:0;overflow-wrap:anywhere}
.queue li span{display:block;color:var(--muted);font-size:12px;margin-top:4px}
.queue p{font-size:13px;color:var(--muted);margin:10px 0}
.sr-only,.bot-field{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
.loading-row{display:flex;gap:10px;align-items:center;height:60px;border-bottom:1px solid var(--line)}
.loading-row i{width:40px;height:40px;background:var(--surface);border-radius:6px}
.loading-row span{flex:1;min-width:20px;height:13px;border-radius:5px;background:var(--surface);animation:pulse 1.2s ease-in-out infinite alternate}
.loading-row b{width:82px;height:40px;background:var(--surface);border-radius:8px}
@keyframes pulse{to{opacity:.35}}
.text-button{font:inherit;font-size:12px;border-radius:8px;min-height:44px;padding:10px 12px;background:transparent;border:1px solid var(--line);color:var(--text)}
.qr-display{text-align:center}
.qr-display img{border:16px solid white;background:white;border-radius:12px;max-width:100%;height:auto}
.qr-display a{color:var(--accent);font-size:24px}
@media(max-width:600px){
 .ambient-background:before{width:760px;opacity:.65}
 .page{width:calc(100% - 24px)}.topbar{height:50px}.brand{font-size:14px}.home-link{font-size:11px}
 .hero{padding:15px 0 14px}
 h1{font-size:30px}
 .search-box{gap:9px;padding-left:13px}.search-icon{width:18px}.search-button{padding:0 15px}.search-button span{display:none}
 .track-row{gap:9px}.artwork{width:36px;height:36px;flex-basis:36px}
 .wish-button{min-width:79px;padding:8px 10px;font-size:11px}.track-duration{display:none}
}
@media(min-width:860px){#results,.queue ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:24px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}