/* Fruit Fly Radio. Original artwork from the approved branding conversation. */
:root{color-scheme:dark;--bg:#080e0b;--panel:#151d18;--line:#354039;--muted:#b0bcb2;--ink:#f4f1e8;--mint:#c6ff00;--accent:#c6ff00;--button-ink:#11180a}
body{background:radial-gradient(ellipse at 50% 0%,#c6ff000a,transparent 55%),var(--bg);color:var(--ink)}
a{color:var(--mint)}
button,input,textarea,select{color:var(--ink);background:var(--panel);border-color:var(--line)}
button:hover{background:color-mix(in srgb,var(--panel),var(--accent) 12%)}
button.primary,#acceptAgreement{background:var(--accent)!important;color:var(--button-ink)!important;border-color:var(--accent);font-weight:800}
button.selected,.genres label:has(input:checked){background:color-mix(in srgb,var(--panel),var(--accent) 12%);color:var(--mint);border-color:var(--mint)}
header{gap:16px}.brand{display:flex;align-items:center;gap:9px;color:var(--ink);text-decoration:none;font-size:17px;line-height:1;letter-spacing:-.5px;font-weight:900;text-transform:uppercase}
.brand img{height:45px;width:45px;object-fit:contain}.brand strong{display:block}.brand em{display:block;font-size:12px;font-style:normal;letter-spacing:4px;color:var(--mint);margin-top:5px}
.brand-wordmark{display:block;width:min(100%,280px);height:150px;object-fit:contain;margin:0 auto 12px}
.location{font-size:9px;letter-spacing:.8px;margin-top:6px;color:var(--muted)}
.record{background:none;box-shadow:none;border-radius:0;width:132px;height:132px;margin-bottom:14px}.record img{width:100%;height:100%;object-fit:contain}.record.playing{animation:none}
.record.playing img{filter:drop-shadow(0 0 14px #c6ff002b)}
.bubble,.drawer,.profile,#tourCard,dialog,#previewPanel{background:var(--panel)!important;color:var(--ink)!important;border-color:var(--line)!important}
.compose textarea,input{background:var(--panel);border-color:var(--line)}
.note,.hint,.genre,small,.muted,#tourCard p{color:var(--muted)}
.eyebrow{color:var(--mint)}progress,progress::-webkit-progress-bar{background:var(--line)}progress::-webkit-progress-value{background:var(--accent)}progress::-moz-progress-bar{background:var(--accent)}
.chat{border-color:var(--line)}.bubble{border:1px solid var(--line);border-radius:12px}.bubble .who{font-weight:650}
.queue-item{border-color:var(--line)}.queue-item button{color:var(--mint)}
#toast{background:var(--accent);color:var(--button-ink)}
:focus-visible{outline:2px solid var(--mint);outline-offset:4px}
dialog a{color:var(--mint)!important}dialog::backdrop{background:#0009}
.mix-brand{display:flex;align-items:center;gap:10px}.mix-brand img{width:48px;height:48px;object-fit:contain}
.mix-art{height:145px;width:145px;object-fit:contain;margin:auto}.player{border-color:var(--line)}
@media(prefers-color-scheme:light){
 :root{color-scheme:light;--bg:#f8f7f2;--panel:#fff;--line:#d4d9ce;--muted:#56614f;--ink:#111a20;--mint:#456600;--accent:#c6ff00}
 body{background:var(--bg)}.record.playing img{filter:none}.overlay{background:#17201466}.player{background:transparent}
}
@media(max-width:600px){header{gap:8px}.brand{font-size:14px}.brand img{height:34px;width:34px}.brand em{font-size:10px}.location{font-size:8px}.nav{gap:5px}.nav button{padding:7px;font-size:11px}.nav a{font-size:11px!important}.record{width:clamp(64px,12dvh,110px);height:clamp(64px,12dvh,110px)}.mix-art{width:110px;height:110px}}
@media(max-width:380px){header{flex-wrap:wrap}.nav{width:100%;justify-content:flex-end}.location{display:none}}

/* Comfortable controls and natural flow on narrow screens. */
.nav button,.nav a,#openDetails,.close,footer a{min-height:44px;min-width:44px}
.nav a,footer a{display:inline-flex;align-items:center;justify-content:center}
footer{align-items:center;flex-wrap:wrap}footer>span:has(a){display:flex;align-items:center;gap:6px}
#requestCredit:empty{display:none}
.compose textarea{line-height:1.4;min-height:72px;padding:10px 12px}
@media(min-width:601px){
 .shell{margin-top:0}.shell>.player{padding:8px 10px 18px}.shell .record{width:102px;height:102px;margin-bottom:10px}
 .shell .transport{margin:14px 0 8px}.shell .timeline{margin:10px auto}.shell .feedback{margin-top:10px}
 .shell .chat{padding-top:16px}.shell .chat-head{margin-bottom:10px}
}
@media(max-width:600px){
 .nav button,.nav a{padding:8px}.nav{flex-wrap:wrap}.compose textarea{min-height:72px;max-height:130px}
 footer{gap:4px 12px}footer>span:first-child{flex-basis:100%}
}