/* Wandla Music — dunkles, blaustichiges Interface für die Nachtschicht am Handy.
   Zwei Akzente mit klarer Aufgabe:
   Alpin-Blau = alles, was schon in der Bibliothek ist.
   Bernstein  = alles, was gerade von außen hereinkommt (YouTube, Downloads). */

:root {
  --ink:      #10131b;
  --ink-2:    #171b26;
  --ink-3:    #212636;
  --line:     #2c3243;
  --snow:     #eaeef7;
  --fog:      #8d97ae;
  --alpine:   #62a8e5;
  --alpine-d: #2f6ea6;
  --amber:    #e3a63a;
  --red:      #e2645d;

  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --r-s: 8px;
  --r-m: 14px;
  --r-l: 22px;

  --topbar-h: 56px;
  --tabbar-h: 60px;
  --mini-h: 62px;
  --safe-b: env(safe-area-inset-bottom, 0px);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--ink);
  color: var(--snow);
  font-family: var(--sans);
  font-size: 16px;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior-y: none;
}

body { display: flex; flex-direction: column; }

svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--alpine); outline-offset: 2px; border-radius: 4px; }

/* --- Wortmarke: der Name als gesperrte Versalien, "Music" ausgestellt ------ */
.wordmark { display: flex; align-items: baseline; gap: 6px; line-height: 1; }
.wordmark__a {
  font-weight: 800; letter-spacing: .22em; text-transform: uppercase; font-size: 14px;
}
.wordmark__b {
  font-weight: 600; letter-spacing: .22em; text-transform: uppercase; font-size: 10px;
  color: var(--ink); background: var(--alpine); padding: 3px 5px 2px; border-radius: 3px;
}
.wordmark--lg .wordmark__a { font-size: 30px; letter-spacing: .18em; }
.wordmark--lg .wordmark__b { font-size: 14px; padding: 5px 7px 4px; }

/* --- Anmeldung ------------------------------------------------------------ */
.login {
  flex: 1; display: grid; place-items: center; padding: 32px 22px calc(32px + var(--safe-b));
  background: radial-gradient(120% 70% at 50% 0%, #1a2130 0%, var(--ink) 62%);
}
.login__inner { width: 100%; max-width: 360px; }
.login__lead { color: var(--fog); margin: 18px 0 30px; font-size: 15px; }
.login__hint { color: var(--fog); font-size: 12.5px; line-height: 1.5; margin-top: 22px; }
.stack { display: grid; gap: 14px; }

.field { display: grid; gap: 6px; }
.field__label {
  font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--fog);
}
.field input, .textinput {
  width: 100%; padding: 13px 14px; font-size: 16px; color: var(--snow);
  background: var(--ink-2); border: 1px solid var(--line); border-radius: var(--r-m);
}
.field input:focus, .textinput:focus { outline: none; border-color: var(--alpine); }

.btn {
  padding: 14px 18px; border-radius: var(--r-m); font-weight: 600; font-size: 15px;
  background: var(--ink-3); border: 1px solid var(--line);
}
.btn--primary { background: var(--alpine); color: #0b1017; border-color: transparent; }
.btn[disabled] { opacity: .55; }

.notice { margin: 0; padding: 11px 13px; border-radius: var(--r-s); font-size: 14px; }
.notice--error { background: rgba(226,100,93,.14); color: #f0a8a3; }

/* --- Grundlayout ---------------------------------------------------------- */
.app { flex: 1; display: flex; flex-direction: column; min-height: 0; }

.topbar {
  height: var(--topbar-h); flex: none; display: flex; align-items: center; gap: 10px;
  padding: 0 8px 0 14px; border-bottom: 1px solid var(--line);
  background: rgba(16,19,27,.92); backdrop-filter: blur(12px);
  position: sticky; top: 0; z-index: 20;
}
.topbar__title {
  font-size: 15px; font-weight: 600; margin: 0; flex: 1;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.topbar .wordmark { flex: 1; }

.iconbtn {
  flex: none; width: 40px; height: 40px; display: grid; place-items: center;
  border-radius: 50%; color: var(--snow);
}
.iconbtn--accent { color: var(--alpine); }
.iconbtn:active { background: var(--ink-3); }

.view {
  flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: 18px 16px calc(var(--tabbar-h) + var(--mini-h) + var(--safe-b) + 16px);
}

/* --- Abschnitte ----------------------------------------------------------- */
.eyebrow {
  font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--fog);
  margin: 0 0 12px; display: flex; align-items: center; gap: 10px;
}
.eyebrow::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.section { margin-bottom: 30px; }
.section:last-child { margin-bottom: 0; }

/* Waagerechte Album-Reihe */
.rail { display: flex; gap: 14px; overflow-x: auto; padding-bottom: 4px; scroll-snap-type: x mandatory; }
.rail::-webkit-scrollbar { display: none; }
.rail .card { flex: none; width: 132px; scroll-snap-align: start; }

.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 16px 14px; }

.card { text-align: left; display: grid; gap: 8px; }
.card__art {
  width: 100%; aspect-ratio: 1; border-radius: var(--r-m); background: var(--ink-2);
  object-fit: cover; border: 1px solid var(--line);
}
.card__title { font-size: 13.5px; font-weight: 600; line-height: 1.3; }
.card__sub { font-size: 12px; color: var(--fog); }
.card__title, .card__sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Titelliste */
.rows { display: grid; }
.row {
  display: flex; align-items: center; gap: 12px; padding: 9px 0; text-align: left; width: 100%;
  border-bottom: 1px solid rgba(44,50,67,.55);
}
.row:last-child { border-bottom: 0; }
.row__art { width: 44px; height: 44px; flex: none; border-radius: var(--r-s); object-fit: cover; background: var(--ink-2); }
.row__num { width: 26px; flex: none; text-align: right; color: var(--fog); font-size: 13px; font-variant-numeric: tabular-nums; }
.row__text { flex: 1; min-width: 0; display: grid; gap: 2px; }
.row__title { font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row__sub { font-size: 12.5px; color: var(--fog); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row.is-playing .row__title { color: var(--alpine); font-weight: 600; }
.row__time { color: var(--fog); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.row__more { width: 34px; height: 34px; flex: none; display: grid; place-items: center; color: var(--fog); border-radius: 50%; }
.row__star { color: var(--alpine); }

.listhead { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; }
.listhead__art { width: 104px; height: 104px; border-radius: var(--r-m); object-fit: cover; background: var(--ink-2); border: 1px solid var(--line); }
.listhead__text { min-width: 0; display: grid; gap: 4px; }
.listhead__title { font-size: 19px; font-weight: 700; margin: 0; line-height: 1.2; }
.listhead__sub { color: var(--fog); font-size: 13px; margin: 0; }
.listhead__actions { display: flex; gap: 8px; margin-top: 8px; }

.chip {
  padding: 8px 14px; border-radius: 999px; background: var(--ink-3); border: 1px solid var(--line);
  font-size: 13px; font-weight: 500;
}
.chip[aria-pressed="true"] { background: var(--alpine); color: #0b1017; border-color: transparent; }
.chip--amber { border-color: rgba(227,166,58,.4); color: var(--amber); }
.chip--play { background: var(--alpine); color: #0b1017; border-color: transparent; font-weight: 600; }

.segmented { display: flex; gap: 6px; margin-bottom: 20px; overflow-x: auto; }
.segmented::-webkit-scrollbar { display: none; }
.segmented button {
  flex: none; padding: 7px 14px; border-radius: 999px; font-size: 13px; color: var(--fog);
  border: 1px solid var(--line);
}
.segmented button.is-active { color: var(--snow); border-color: var(--alpine); background: rgba(98,168,229,.12); }

.searchbar { display: flex; gap: 8px; margin-bottom: 20px; }
.searchbar .textinput { flex: 1; }

.empty { color: var(--fog); font-size: 14px; line-height: 1.6; padding: 28px 0; }
.empty strong { color: var(--snow); display: block; margin-bottom: 6px; font-size: 15px; }

.spinner {
  width: 22px; height: 22px; margin: 40px auto; border-radius: 50%;
  border: 2px solid var(--line); border-top-color: var(--alpine);
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* --- YouTube-Treffer ------------------------------------------------------ */
.yt-row { display: flex; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid rgba(44,50,67,.55); }
.yt-row__thumb { width: 76px; height: 44px; flex: none; border-radius: var(--r-s); object-fit: cover; background: var(--ink-2); }
.yt-row__text { flex: 1; min-width: 0; display: grid; gap: 3px; }
.yt-row__title { font-size: 14px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.yt-row__sub { font-size: 12px; color: var(--fog); }
.yt-row__get {
  flex: none; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%;
  color: var(--amber); border: 1px solid rgba(227,166,58,.4);
}
.yt-row__get[disabled] { opacity: .45; }

.dl { padding: 12px 0; border-bottom: 1px solid rgba(44,50,67,.55); display: grid; gap: 8px; }
.dl__top { display: flex; justify-content: space-between; gap: 12px; font-size: 13.5px; }
.dl__state { color: var(--amber); font-size: 12px; white-space: nowrap; }
.dl__bar { height: 4px; border-radius: 2px; background: var(--ink-3); overflow: hidden; }
.dl__fill { height: 100%; background: var(--amber); border-radius: 2px; transition: width .4s ease; }
.dl--done .dl__fill { background: var(--alpine); }
.dl--done .dl__state { color: var(--alpine); }

/* --- Mini-Player ---------------------------------------------------------- */
.mini {
  position: fixed; left: 8px; right: 8px; bottom: calc(var(--tabbar-h) + var(--safe-b) + 6px);
  height: var(--mini-h); z-index: 30; display: flex; align-items: center; gap: 6px;
  padding: 0 6px 0 8px; border-radius: var(--r-l); overflow: hidden;
  background: var(--ink-2); border: 1px solid var(--line);
  box-shadow: 0 12px 30px rgba(0,0,0,.5);
}
.mini__open { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; text-align: left; }
.mini__cover { width: 44px; height: 44px; border-radius: 10px; object-fit: cover; background: var(--ink-3); flex: none; }
.mini__text { min-width: 0; display: grid; gap: 2px; }
.mini__title { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mini__artist { font-size: 12px; color: var(--fog); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* --- Signatur: LED-Pegelmeter, wie eine Leiste aus WS2812 ----------------- */
.meter {
  position: absolute; inset: auto 0 0 0; height: 22px; display: flex; align-items: flex-end;
  gap: 2px; padding: 0 6px; opacity: .5; pointer-events: none;
}
.meter span {
  flex: 1; height: 100%; border-radius: 1px; transform: scaleY(.06); transform-origin: bottom;
  background: linear-gradient(to top, var(--alpine-d), var(--alpine) 55%, var(--amber));
  transition: transform .09s linear;
}
.meter--tall {
  position: relative;
  inset: auto;
  height: 26px;
  opacity: .65;
  padding: 0;
  margin: 4px 0 0;
  gap: 3px;
}

/* --- Tableiste ------------------------------------------------------------ */
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 31;
  height: calc(var(--tabbar-h) + var(--safe-b)); padding-bottom: var(--safe-b);
  display: grid; grid-template-columns: repeat(4, 1fr);
  background: rgba(16,19,27,.94); backdrop-filter: blur(14px); border-top: 1px solid var(--line);
}
.tab { display: grid; justify-items: center; align-content: start; padding-top: 5px; gap: 1px; color: var(--fog); font-size: 10.5px; letter-spacing: .04em; }
.tab svg { width: 21px; height: 21px; }
.tab.is-active { color: var(--snow); }
.tab.is-active svg { color: var(--alpine); }
.tab[data-tab="youtube"].is-active svg { color: var(--amber); }

/* --- Sheets --------------------------------------------------------------- */
.scrim { position: fixed; inset: 0; background: rgba(6,8,12,.6); z-index: 40; }
.sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 41;
  background: var(--ink-2); border-top: 1px solid var(--line);
  border-radius: var(--r-l) var(--r-l) 0 0;
  padding: 10px 20px calc(24px + var(--safe-b));
  transform: translateY(0); transition: transform .28s cubic-bezier(.22,.61,.36,1);
}
.sheet[data-closing="1"] { transform: translateY(101%); }
.sheet--player {
  top: 0; border-radius: 0; padding-top: max(10px, env(safe-area-inset-top, 0px));
  background: linear-gradient(180deg, #1b2231 0%, var(--ink) 55%);
  display: flex; flex-direction: column;
}
.sheet__grip { width: 40px; height: 4px; border-radius: 2px; background: var(--line); margin: 4px auto 8px; }
.sheet__close { position: absolute; top: max(8px, env(safe-area-inset-top, 0px)); left: 8px; }
.sheet--menu { max-height: 70vh; overflow-y: auto; }

.player { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 10px; max-width: 460px; width: 100%; margin: 0 auto; }
.player__cover {
  width: 100%; max-width: 320px; aspect-ratio: 1; margin: 0 auto; object-fit: cover;
  border-radius: var(--r-l); background: var(--ink-3); box-shadow: 0 24px 50px rgba(0,0,0,.55);
}
.player__meta { margin-top: 22px; }
.player__title { font-size: 21px; font-weight: 700; margin: 0 0 4px; line-height: 1.25; }
.player__artist { margin: 0; color: var(--fog); font-size: 14px; }
.player__seek { margin-top: 16px; }
.player__times { display: flex; justify-content: space-between; font-size: 12px; color: var(--fog); font-variant-numeric: tabular-nums; margin-top: 2px; }

.seek { -webkit-appearance: none; appearance: none; width: 100%; height: 22px; background: none; }
.seek::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: var(--ink-3); }
.seek::-moz-range-track { height: 4px; border-radius: 2px; background: var(--ink-3); }
.seek::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; border-radius: 50%; background: var(--alpine); margin-top: -5px; }
.seek::-moz-range-thumb { width: 14px; height: 14px; border: 0; border-radius: 50%; background: var(--alpine); }

.player__controls { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; }
.playbtn {
  width: 68px; height: 68px; border-radius: 50%; display: grid; place-items: center;
  background: var(--alpine); color: #0b1017;
}
.playbtn svg { width: 30px; height: 30px; }
.player__extra { display: flex; gap: 10px; margin-top: 24px; justify-content: center; flex-wrap: wrap; }

.menu__head { display: flex; gap: 12px; align-items: center; padding: 6px 0 14px; border-bottom: 1px solid var(--line); }
.menu__head img { width: 46px; height: 46px; border-radius: var(--r-s); object-fit: cover; background: var(--ink-3); }
.menu__items { display: grid; padding-top: 6px; }
.menu__items button {
  display: flex; align-items: center; gap: 14px; padding: 15px 2px; text-align: left; font-size: 15px;
}
.menu__items button svg { color: var(--fog); }

/* --- Hinweise ------------------------------------------------------------- */
.toast {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(var(--tabbar-h) + var(--mini-h) + var(--safe-b) + 20px); z-index: 60;
  background: var(--ink-3); border: 1px solid var(--line); color: var(--snow);
  padding: 11px 16px; border-radius: 999px; font-size: 13.5px; max-width: 88vw; text-align: center;
  box-shadow: 0 10px 26px rgba(0,0,0,.5);
}
.toast--amber { border-color: rgba(227,166,58,.5); }
.toast--error { border-color: rgba(226,100,93,.5); }

@media (min-width: 720px) {
  .view { padding-left: 28px; padding-right: 28px; }
  .rail .card { width: 158px; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  .meter span { transform: scaleY(.18) !important; }
}

/* Der Zustand "versteckt" muss stärker sein als display:flex/grid oben. */
[hidden] { display: none !important; }
.row__art-btn { flex: none; display: block; line-height: 0; }