:root {
  --bg: #0d0b14; --panel: #17141f; --line: #2a2534; --text: #f3eefc; --dim: #9a91ab;
  --accent: #ff4f8b; --accent2: #7b5cff;
  color-scheme: dark;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; background: var(--bg); color: var(--text); font: 16px/1.35 system-ui, -apple-system, "Segoe UI", sans-serif; }
body { padding-bottom: calc(64px + env(safe-area-inset-bottom)); min-height: 100dvh; }
button { font: inherit; color: inherit; background: var(--panel); border: 1px solid var(--line); border-radius: 999px; padding: .55em 1.1em; cursor: pointer; }
button.primary { background: linear-gradient(135deg, var(--accent), var(--accent2)); border: 0; font-weight: 600; }
button.ghost { background: transparent; }
svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
h2 { font-size: 1.05rem; margin: 1.4rem 1rem .5rem; } h2 small { color: var(--dim); font-weight: 400; margin-left: .4em; }

/* now playing */
#now { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: .7rem; padding: .7rem 1rem calc(.7rem + 3px);
  padding-top: calc(.7rem + env(safe-area-inset-top)); background: rgba(13, 11, 20, .88); backdrop-filter: blur(16px); border-bottom: 1px solid var(--line); }
#now .idle { color: var(--dim); font-size: .92rem; padding: .25rem 0; }
#now img { width: 46px; height: 46px; border-radius: 8px; object-fit: cover; }
#now .meta { flex: 1; min-width: 0; }
#now button { border: 0; background: none; padding: .4rem; }
#now svg { fill: currentColor; stroke: none; }
#now .bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--line); }
#now .bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--accent2), var(--accent)); }
#banner p { margin: 0; padding: .55rem 1rem; background: #3a1d2a; color: #ffc2d4; font-size: .88rem; }
.meta { display: flex; flex-direction: column; min-width: 0; }
.meta b, .meta span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.meta b { font-weight: 600; }
.meta span { color: var(--dim); font-size: .88rem; }
.meta em { font-size: .78rem; color: var(--dim); font-style: normal; } .meta em.err { color: #ff8a8a; }

/* tabs */
#tabs { position: fixed; bottom: 0; left: 0; right: 0; display: flex; background: rgba(13, 11, 20, .94); backdrop-filter: blur(16px);
  border-top: 1px solid var(--line); padding-bottom: env(safe-area-inset-bottom); z-index: 5; }
#tabs a { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: .5rem 0 .45rem; color: var(--dim);
  text-decoration: none; font-size: .72rem; position: relative; }
#tabs a.sel { color: var(--text); } #tabs a.sel svg { stroke: var(--accent); }
#badge { position: absolute; top: 4px; left: calc(50% + 8px); background: var(--accent); color: #fff; font-size: .68rem; border-radius: 99px; padding: 0 .4em; font-style: normal; }
#badge:empty { display: none; }

/* search */
.search { position: sticky; top: 70px; z-index: 4; padding: .8rem 1rem .5rem; background: var(--bg); }
#q { width: 100%; font: inherit; font-size: 1.05rem; padding: .8rem 1rem; border-radius: 14px; border: 1px solid var(--line); background: var(--panel); color: var(--text); outline: none; }
#q:focus { border-color: var(--accent2); }
.chips, .seg { display: flex; gap: .4rem; margin-top: .55rem; }
.chips button, .seg button { padding: .3em .85em; font-size: .85rem; color: var(--dim); }
.chips button.sel, .seg button.sel { color: var(--text); border-color: var(--accent2); background: #241d3a; }

.list { list-style: none; margin: 0; padding: 0 .5rem; }
.list li { display: flex; align-items: center; gap: .75rem; padding: .5rem; border-radius: 12px; cursor: pointer; transition: transform .2s, opacity .2s; background: var(--bg); }
.list li:active { background: var(--panel); }
.list li img { width: 52px; height: 52px; border-radius: 8px; object-fit: cover; flex: none; background: var(--panel); }
.list li img.video { width: 70px; height: 52px; }
.list li .meta { flex: 1; }
.list time { color: var(--dim); font-size: .82rem; font-variant-numeric: tabular-nums; }
.list li.empty { color: var(--dim); justify-content: center; text-align: center; padding: 2rem 1rem; cursor: default; font-size: .92rem; }
.list.loading { opacity: .45; }
.queue li { cursor: default; }
.queue li.dragging { z-index: 2; background: var(--panel); box-shadow: 0 8px 30px #0008; transition: none; }
.queue li.gone { opacity: 0; transform: translateX(-40px); }
.queue .x, .queue .grip { border: 0; background: none; padding: .4rem; color: var(--dim); }
.queue .grip { touch-action: none; cursor: grab; }
.who { display: inline-block; font-size: .72rem; font-weight: 600; padding: .05em .5em; border-radius: 99px; margin-right: .25em;
  background: hsl(var(--h) 60% 30%); color: hsl(var(--h) 90% 85%); vertical-align: 1px; }
.who.radio { background: #2a2534; color: var(--dim); }
.people { margin: 0 1rem; line-height: 2; }

.controls { margin: .8rem 1rem 0; padding: .4rem .9rem; border: 1px solid var(--line); border-radius: 16px; background: var(--panel); }
.controls .row { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .35rem 0; }
.controls .row > span { font-size: .9rem; color: var(--dim); }
.controls .seg { margin: 0; }
#vol { width: 55%; accent-color: var(--accent); }

/* launcher */
.launch { position: fixed; inset: 0; z-index: 20; background: rgba(5, 4, 10, .0); display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  padding: 1rem 1rem calc(1.4rem + env(safe-area-inset-bottom)); transition: background .25s; touch-action: none; }
.launch.on { background: rgba(5, 4, 10, .82); backdrop-filter: blur(8px); }
.launch .aim { color: var(--dim); display: flex; flex-direction: column; align-items: center; gap: .3rem; margin-bottom: auto; padding-top: 12vh; font-size: .92rem; opacity: 0; transition: opacity .3s .15s; }
.launch.on .aim { opacity: 1; }
.launch .aim svg { width: 34px; height: 34px; animation: nudge 1.3s ease-in-out infinite; stroke: var(--accent); }
@keyframes nudge { 50% { transform: translateY(-10px); } }
.launch .card { --glow: #7b5cff; width: min(78vw, 340px); padding: 14px 14px 16px; border-radius: 24px; background: var(--panel); text-align: center;
  box-shadow: 0 0 60px -10px var(--glow), 0 20px 50px #000a; transform: translateY(120%); transition: transform .35s cubic-bezier(.2, .9, .3, 1.2);
  touch-action: none; user-select: none; display: flex; flex-direction: column; gap: .2rem; cursor: grab; }
.launch.on .card { transform: none; }
.launch .card .cover { aspect-ratio: 1; border-radius: 14px; overflow: hidden; margin-bottom: .6rem; }
.launch .card .cover.video { aspect-ratio: 16 / 9; }
.launch .card img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.launch .card b { font-size: 1.1rem; } .launch .card span { color: var(--dim); }
.launch .card.shot { transition: transform .38s cubic-bezier(.5, 0, .9, .4), opacity .38s; transform: translate(var(--x, 0), calc(-110vh + var(--y, 0px))) scale(.55) rotate(-4deg) !important; opacity: .6; }
.launch.fired { background: rgba(5, 4, 10, 0); transition-delay: .15s; }
.launch .actions { display: flex; gap: .5rem; margin-top: 1.2rem; transition: opacity .2s; }
.launch.fired .actions, .launch.fired .aim { opacity: 0; }

/* nights */
.nights { list-style: none; padding: 0 1rem; margin: 0; display: grid; gap: .8rem; }
.nights li { display: flex; gap: .9rem; align-items: center; cursor: pointer; }
.collage { width: 76px; height: 76px; flex: none; display: grid; grid-template-columns: 1fr 1fr; border-radius: 12px; overflow: hidden; background: var(--panel); }
.collage img { width: 100%; height: 100%; object-fit: cover; }
.collage img:only-child { grid-column: span 2; grid-row: span 2; }
.back { margin: .8rem 0 0 .6rem; border: 0; color: var(--dim); }
.night-title { font-size: 1.5rem; margin-bottom: .1rem; }
.sub { margin: 0 1rem; color: var(--dim); font-size: .9rem; }
.night-actions { display: flex; gap: .5rem; margin: .9rem 1rem .4rem; }

#toast { position: fixed; left: 50%; bottom: calc(80px + env(safe-area-inset-bottom)); transform: translate(-50%, 20px); opacity: 0; z-index: 30;
  background: #fff; color: #111; padding: .55rem 1.1rem; border-radius: 99px; font-weight: 600; font-size: .92rem; transition: .25s; pointer-events: none; }
#toast.on { opacity: 1; transform: translate(-50%, 0); }

.modal { position: fixed; inset: 0; z-index: 40; background: rgba(5, 4, 10, .9); display: grid; place-items: center; padding: 1.5rem; }
.modal form, body.login form { display: flex; flex-direction: column; gap: .8rem; width: min(100%, 340px); }
.modal h1, body.login h1 { margin: 0; font-size: 1.8rem; }
.modal p { margin: 0; color: var(--dim); }
.modal input, body.login input { font: inherit; font-size: 1.1rem; padding: .8rem 1rem; border-radius: 14px; border: 1px solid var(--line); background: var(--panel); color: var(--text); }
body.login { display: grid; place-items: center; padding: 1.5rem; }
body.login h1 { background: linear-gradient(135deg, var(--accent), var(--accent2)); -webkit-background-clip: text; background-clip: text; color: transparent; font-size: 2.6rem; }
#msg { color: #ff8a8a; margin: 0; min-height: 1.2em; }