/* Karaoke night — kawaii-goth. Ink plum, lace, rose, lilac, wine. Grenze Gotisch + Nunito. */
@import url('https://fonts.googleapis.com/css2?family=Grenze+Gotisch:wght@400;600;800&family=Nunito:ital,wght@0,400;0,600;0,800;1,400&display=swap');

:root {
  --ink: #120c14;
  --ink-2: #1b1220;
  --ink-3: #26182d;
  --line: #3a2745;
  --lace: #f4e6ee;
  --lace-2: #c9b3c4;
  --rose: #ff8fc8;
  --rose-deep: #e4559f;
  --lilac: #b8a4f5;
  --wine: #8b1e47;
  --wine-soft: #c43f72;
  --display: 'Grenze Gotisch', 'Nunito', serif;
  --sans: 'Nunito', system-ui, sans-serif;
  --r-lg: 22px;
  --r: 14px;
  --r-sm: 9px;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; min-height: 100%; }
body {
  background-color: var(--ink);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .07 0'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>"), radial-gradient(120% 90% at 50% -10%, rgba(255,143,200,.10), transparent 60%), url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'><g fill='none' stroke='%23ff8fc8' stroke-width='1.2' opacity='.11'><path d='M60 8c8 14 22 18 22 34 0 10-8 16-22 30C46 58 38 52 38 42c0-16 14-20 22-34z'/><path d='M60 112c-8-14-22-18-22-34 0-10 8-16 22-30 14 14 22 20 22 30 0 16-14 20-22 34z'/><path d='M8 60c14-8 18-22 34-22 10 0 16 8 30 22-14 14-20 22-30 22-16 0-20-14-34-22z'/><path d='M112 60c-14 8-18 22-34 22-10 0-16-8-30-22 14-14 20-22 30-22 16 0 20 14 34 22z'/><circle cx='60' cy='60' r='4'/><circle cx='0' cy='0' r='3'/><circle cx='120' cy='0' r='3'/><circle cx='0' cy='120' r='3'/><circle cx='120' cy='120' r='3'/></g></svg>");
  background-attachment: fixed, fixed, fixed;
  color: var(--lace);
  font: 16px/1.5 var(--sans);
  -webkit-font-smoothing: antialiased;
}
body.center { display: grid; place-items: center; min-height: 100vh; padding: 16px; }
::selection { background: var(--rose); color: var(--ink); }
:focus-visible { outline: 2px solid var(--rose); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }

h1, h2, h3 { margin: 0; font-weight: 400; }
.wordmark { font-family: var(--display); font-weight: 600; font-size: clamp(2.6rem, 8vw, 4.2rem); line-height: .95; letter-spacing: .01em; color: var(--lace); }
.wordmark small { display: block; font-family: var(--sans); font-weight: 600; font-size: 1rem; color: var(--lace-2); letter-spacing: 0; margin-top: 8px; }
h2 { font-family: var(--display); font-size: 1.7rem; color: var(--rose); line-height: 1.1; }
h3 { font-family: var(--display); font-size: 1.3rem; color: var(--lilac); }
a { color: var(--lilac); }
p { margin: 0; }
.muted { color: var(--lace-2); }
.sm { font-size: .85rem; }

/* Mark: heart with bat wings */
.mark { width: 34px; height: 34px; fill: var(--rose); flex: none; }

/* Layout */
.wrap { max-width: 1120px; margin: 0 auto; padding: 28px 16px 72px; }
.head { display: flex; align-items: flex-end; gap: 14px; margin-bottom: 22px; }
.head .mark { margin-bottom: 10px; }
.grid { display: grid; gap: 18px; grid-template-columns: 1fr; }
@media (min-width: 880px) { .grid.two { grid-template-columns: 400px 1fr; align-items: start; } }

/* Panel; .lace = rose top border on the main panel */
.panel { position: relative; background: rgba(27,18,32,.92); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 24px 22px 22px;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.5), inset 0 0 0 2px rgba(184,164,245,.10), 0 18px 40px -24px rgba(0,0,0,.9); }
.panel.lace { border-top-color: var(--rose); }

/* Form */
label { display: block; font-weight: 600; font-size: .9rem; color: var(--lace-2); margin: 14px 0 6px; }
label:first-child { margin-top: 0; }
input[type=text], input[type=password], input[type=number] {
  width: 100%; padding: 13px 15px; border-radius: var(--r); border: 1px solid var(--line);
  background: #0d0810; color: var(--lace); font: 600 1.05rem var(--sans); outline: none;
  box-shadow: inset 0 2px 6px rgba(0,0,0,.6); transition: border-color .15s, box-shadow .15s;
}
input::placeholder { color: #6e5878; font-weight: 400; }
input:focus { border-color: var(--rose); box-shadow: inset 0 2px 6px rgba(0,0,0,.6), 0 0 0 4px rgba(255,143,200,.18); }
input[type=range] { accent-color: var(--rose); width: 100%; }
input[type=checkbox] { accent-color: var(--rose); width: 18px; height: 18px; }

button {
  --seam: rgba(184,164,245,.55);
  cursor: pointer; position: relative; border: 1px solid var(--line); color: var(--lace);
  background: linear-gradient(180deg, #2c1d34, #1f1426);
  padding: 10px 16px; border-radius: 999px; font: 800 .95rem var(--sans); line-height: 1.2;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 2px 0 #0a060c;
  transition: border-color .12s, filter .12s, transform .06s, box-shadow .06s;
}
button::after { content: ''; position: absolute; inset: 3px; border-radius: inherit; border: 1.5px dashed var(--seam); pointer-events: none; opacity: .9; }
button:hover { border-color: var(--lilac); filter: brightness(1.12); }
button:active { transform: translateY(2px); box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 0 0 #0a060c; }
button:disabled { opacity: .38; cursor: not-allowed; transform: none; filter: none; }
button.primary { --seam: rgba(80,10,45,.55); background: linear-gradient(180deg, #ff9fd1, #f573b6); border-color: #ff8fc8; color: #2a0a1c; font-size: 1.05rem; padding: 15px 20px; box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 3px 0 #a3336f; }
button.primary:active { box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 0 0 #a3336f; transform: translateY(3px); }
button.ghost { background: transparent; box-shadow: none; border-color: transparent; }
button.ghost::after { border-color: transparent; }
button.ghost:hover { border-color: var(--line); }
button.ghost:hover::after { border-color: var(--seam); }
button.danger { --seam: rgba(196,63,114,.55); color: #ffb3d1; }
button.danger:hover { border-color: var(--wine-soft); }
button.small { padding: 7px 13px; font-size: .82rem; }
button.small::after { inset: 2px; border-width: 1px; }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.row.between { justify-content: space-between; }
.stack > * + * { margin-top: 14px; }

/* Status tags: filled shapes, sentence case */
.tag { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: 999px; font-size: .8rem; font-weight: 800; line-height: 1.3; box-shadow: inset 0 0 0 1px rgba(0,0,0,.25); }
.tag::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.tag.live { background: var(--rose); color: var(--ink); }
.tag.next { background: var(--lilac); color: var(--ink); }
.tag.paused { background: var(--wine); color: var(--lace); }
.tag.ok { background: #2b5a3e; color: #cdebd8; }
.tag.off { background: var(--ink-3); color: var(--lace-2); }
.tag.warn { background: #5c4a14; color: #f3dc92; }

/* Queue list */
.q { list-style: none; margin: 0; padding: 0; }
.q li {
  display: grid; grid-template-columns: 30px 1fr auto; gap: 12px; align-items: center;
  padding: 11px 12px 11px 8px; border-bottom: 1px solid var(--line);
}
.q li:last-child { border-bottom: 0; }
.q li.selected { background: rgba(184,164,245,.12); box-shadow: inset 3px 0 0 var(--lilac); border-radius: var(--r-sm); }
.q li.history { opacity: .5; }
.q .n { font-family: var(--display); font-size: 1.35rem; color: var(--lace-2); text-align: center; line-height: 1; }
.q .singer { font-weight: 800; font-size: 1.05rem; }
.q .song { color: var(--lace-2); font-size: .92rem; }
.q .song b { color: var(--lace); font-weight: 600; }
.q .vid { font-size: .78rem; color: var(--lace-2); margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 460px; opacity: .8; }
.q .vid.bad { color: #f3dc92; opacity: 1; }

/* Now-singing strip */
.now { display: grid; grid-template-columns: auto 1fr; gap: 14px 16px; align-items: center; padding: 16px 20px; border-radius: var(--r-lg); background: rgba(38,24,45,.9); border: 1px solid var(--line); box-shadow: inset 0 0 0 2px rgba(184,164,245,.10); }
.now .who { font-family: var(--display); font-size: 2rem; line-height: 1; color: var(--lace); }
.now .what { color: var(--lace-2); }
.now .what b { color: var(--lace); font-weight: 600; }
.now.is-live { border-color: var(--rose); }
.now.is-paused { border-color: var(--wine-soft); }

.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%) translateY(8px); background: var(--lilac); color: var(--ink); font-weight: 800; padding: 12px 20px; border-radius: 999px; opacity: 0; transition: opacity .2s, transform .2s; pointer-events: none; max-width: 90vw; }
.toast.show { opacity: 1; transform: translateX(-50%); }
.conn { position: fixed; top: 10px; right: 14px; font-size: .78rem; font-weight: 600; color: var(--lace-2); }
.conn.off { color: #ff9ac0; }
.empty { color: var(--lace-2); padding: 18px 0 6px; }