/* What Up Screw (2026-11-10): purple and white, built for a phone held in one hand. */
:root {
  --bg: #12041f; --panel: #1d0a33; --panel-2: #2a0f49; --line: #432068; --purple: #7b2ff7; --purple-2: #a66bff;
  --white: #ffffff; --ink: #f4ecff; --dim: #b9a6d6; --gold: #f1d572;
  --safe-b: env(safe-area-inset-bottom, 0px);
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--ink); font: 16px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; -webkit-tap-highlight-color: transparent; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; }
.app { max-width: 480px; margin: 0 auto; min-height: 100%; display: flex; flex-direction: column; padding-bottom: calc(64px + var(--safe-b)); background: linear-gradient(180deg, #24093f 0, var(--bg) 260px); }
.top { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px 8px; }
.brand { display: flex; align-items: center; gap: 10px; }
.hbtns { display: flex; align-items: center; gap: 6px; }
.icon.nav { border: 1px solid var(--line); font-size: 24px; line-height: 1; padding-bottom: 3px; color: var(--white); }
.icon.nav:disabled { color: #5d4a7d; border-color: #2b1448; cursor: default; }
.brand b { display: block; letter-spacing: .08em; font-size: 17px; color: var(--white); }
.brand small { color: var(--purple-2); font-size: 12px; letter-spacing: .04em; }
.view { padding: 0 16px 12px; flex: 1; }
h2 { font-size: 15px; letter-spacing: .08em; text-transform: uppercase; color: var(--purple-2); margin: 18px 0 8px; }
.search { display: flex; gap: 8px; margin: 6px 0 12px; }
.search input { flex: 1; min-width: 0; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel); color: var(--white); }
.search input::placeholder { color: var(--dim); }
.search button, .big, .ghost { border-radius: 12px; padding: 12px 14px; font-weight: 600; }
.search button { background: var(--white); color: #2a0a4a; }
.actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.big { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; }
.big.radio { background: var(--purple); color: var(--white); }
.big.radio.on { background: var(--white); color: #2a0a4a; }
.big.link { background: var(--panel-2); color: var(--white); border: 1px solid var(--purple-2); }
.ghost { border: 1px solid var(--line); color: var(--ink); padding: 8px 12px; font-size: 14px; }
.banner { margin: 12px 0 0; padding: 8px 12px; border-left: 3px solid var(--gold); background: var(--panel); color: #e9dfc0; font-size: 13px; border-radius: 0 8px 8px 0; }
.seg { display: grid; grid-template-columns: 1fr 1fr; margin: 14px 0 8px; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.seg button { padding: 10px; color: var(--dim); font-weight: 600; }
.seg button[aria-selected="true"] { background: var(--panel-2); color: var(--white); }
.row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid #2b1448; }
.row img { width: 72px; height: 44px; object-fit: cover; border-radius: 6px; background: var(--panel); flex: none; }
.row .txt { flex: 1; min-width: 0; text-align: left; padding: 4px 0; }
.row .txt b, .row .txt small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row .txt b { color: var(--white); font-weight: 600; }
.row .txt small { color: var(--dim); font-size: 13px; }
.row.playing .txt b { color: var(--purple-2); }
.tag { display: inline-block; font-size: 11px; padding: 1px 6px; border-radius: 6px; border: 1px solid var(--gold); color: var(--gold); margin-left: 6px; vertical-align: 1px; }
.icon { width: 44px; height: 44px; border-radius: 50%; font-size: 18px; display: inline-grid; place-items: center; flex: none; }
.icon[aria-pressed="true"] { color: #ff7ab8; }
.artist { margin: 14px 0 2px; display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.artist b { color: var(--white); font-size: 16px; }
.artist button { color: var(--purple-2); font-size: 13px; padding: 6px 0; }
.empty { color: var(--dim); padding: 22px 0; text-align: center; }
.fine { color: var(--dim); font-size: 12px; margin: 8px 0; }
.dock { position: sticky; bottom: calc(60px + var(--safe-b)); z-index: 5; margin: 0 8px; padding: 10px 12px 6px; background: var(--panel); border: 1px solid var(--purple); border-radius: 16px; box-shadow: 0 -8px 30px #0009; }
.frame { position: relative; height: min(56vw, 30vh, 250px); border-radius: 10px; overflow: hidden; background: #000; }
.frame iframe, .frame > div { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.now { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.now .meta { flex: 1; min-width: 0; }
.now b, .now small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.now small { color: var(--dim); font-size: 13px; }
.controls { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.icon.main { background: var(--white); color: #2a0a4a; }
.controls .ghost { margin-left: auto; } .controls .ghost + .ghost { margin-left: 0; }
.tabs { position: fixed; left: 0; right: 0; bottom: 0; z-index: 6; max-width: 480px; margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); background: #17062a; border-top: 1px solid var(--line); padding-bottom: var(--safe-b); }
.tabs button { padding: 18px 4px; color: var(--dim); font-size: 13px; font-weight: 600; letter-spacing: .04em; }
.tabs button[aria-current="page"] { color: var(--white); box-shadow: inset 0 3px 0 var(--purple); }
.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.card { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--panel); }
.card .art { aspect-ratio: 1; display: grid; place-items: center; font-weight: 800; letter-spacing: .06em; text-align: center; padding: 10px; color: var(--white); }
.card .info { padding: 8px 10px; font-size: 13px; } .card .info small { color: var(--dim); display: block; }
.event { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; margin: 8px 0; background: var(--panel); }
.event b { color: var(--white); } .event small { display: block; color: var(--dim); }
.pl { border: 1px solid var(--line); border-radius: 12px; padding: 8px 12px; margin: 8px 0; display: flex; align-items: center; gap: 8px; }
.pl .txt { flex: 1; min-width: 0; text-align: left; } .pl small { color: var(--dim); display: block; }
.scrim { position: fixed; inset: 0; background: #000a; z-index: 8; }
.sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 9; max-width: 480px; margin: 0 auto; max-height: 82%; overflow: auto; background: var(--panel); border-radius: 18px 18px 0 0; border-top: 2px solid var(--purple); padding: 6px 16px calc(18px + var(--safe-b)); }
.sheet header { display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; background: var(--panel); }
.sheet h2 { color: var(--white); }
.sheet ol { padding-left: 20px; } .sheet li { margin: 6px 0; }
.sheet .big { width: 100%; margin-top: 10px; }
.sheet .big[disabled] { opacity: .55; }
.toast { position: fixed; left: 50%; bottom: calc(80px + var(--safe-b)); transform: translateX(-50%); z-index: 10; background: var(--white); color: #2a0a4a; padding: 8px 14px; border-radius: 999px; font-size: 14px; font-weight: 600; max-width: 90%; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--white); outline-offset: 2px; }