/* Songless – Aussehen
   Dunkles Design mit gruenem Akzent, angelehnt an das Original.
   Alles ueber CSS-Variablen, damit Farben an einer Stelle aenderbar sind. */

:root{
  --hg:            #0f1117;
  --hg-karte:      #171a22;
  --hg-hoch:       #1e222c;
  --rand:          #2a2f3b;
  --text:          #e8eaf0;
  --text-leise:    #8b93a7;
  --gruen:         #1db954;
  --gruen-hell:    #22d365;
  --rot:           #e2434f;
  --gelb:          #e8b53a;
  --radius:        14px;
  --schrift: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
}

*{ box-sizing:border-box; }

html,body{
  margin:0; padding:0;
  background:var(--hg);
  color:var(--text);
  font-family:var(--schrift);
  -webkit-font-smoothing:antialiased;
}

body{
  min-height:100vh;
  background-image:
    radial-gradient(900px 500px at 50% -180px, rgba(29,185,84,.13), transparent 70%);
}

.versteckt{ display:none !important; }

/* ---------- Kopfzeile ---------- */
.kopf{
  display:flex; align-items:center; gap:16px;
  padding:14px 20px;
  border-bottom:1px solid var(--rand);
  background:rgba(15,17,23,.85);
  backdrop-filter:blur(10px);
  position:sticky; top:0; z-index:40;
}
.marke{ font-size:20px; font-weight:700; letter-spacing:.4px; cursor:pointer; user-select:none; }
.marke .note{ color:var(--gruen); }

.reiter{ display:flex; gap:4px; margin-left:auto; background:var(--hg-karte);
         padding:4px; border-radius:11px; border:1px solid var(--rand); }
.reiter-knopf{
  background:none; border:0; color:var(--text-leise);
  padding:8px 18px; border-radius:8px; cursor:pointer;
  font-size:14px; font-weight:600; font-family:inherit;
  transition:background .15s, color .15s;
}
.reiter-knopf:hover{ color:var(--text); }
.reiter-knopf.aktiv{ background:var(--hg-hoch); color:var(--text); }

.kopf-knopf{
  background:var(--hg-karte); border:1px solid var(--rand); color:var(--text);
  width:38px; height:38px; border-radius:10px; cursor:pointer; font-size:16px;
}
.kopf-knopf:hover{ background:var(--hg-hoch); }

/* ---------- Ansichten ---------- */
.ansicht{ display:none; max-width:640px; margin:0 auto; padding:28px 18px 80px; }
.ansicht.aktiv{ display:block; }
#ansicht-verwaltung{ max-width:1080px; }

/* ---------- Spielkopf ---------- */
.spiel-kopf{ display:flex; gap:12px; margin-bottom:22px; flex-wrap:wrap; }
.auswahl{ display:flex; flex-direction:column; gap:5px; flex:1; min-width:130px; }
.auswahl > span{ font-size:11px; color:var(--text-leise); text-transform:uppercase;
                 letter-spacing:.7px; font-weight:600; }
.auswahl select, .auswahl input{
  background:var(--hg-karte); border:1px solid var(--rand); color:var(--text);
  padding:9px 11px; border-radius:9px; font-size:14px; font-family:inherit;
}
.auswahl.zaehler strong{ padding:9px 11px; font-size:14px; font-weight:600;
                         color:var(--text-leise); }

/* ---------- Versuchsliste ---------- */
.versuche{ list-style:none; margin:0 0 22px; padding:0; display:flex;
           flex-direction:column; gap:7px; }
.versuche li{
  background:var(--hg-karte); border:1px solid var(--rand);
  border-radius:10px; padding:12px 14px; font-size:14px;
  min-height:44px; display:flex; align-items:center; gap:10px;
  color:var(--text-leise);
}
.versuche li.gefuellt{ color:var(--text); }
.versuche li.falsch{ border-color:rgba(226,67,79,.4); background:rgba(226,67,79,.09); }
.versuche li.uebersprungen{ border-color:rgba(139,147,167,.35); }
.versuche li.richtig{ border-color:var(--gruen); background:rgba(29,185,84,.14); color:#fff; }
.versuche li .symbol{ flex:none; width:18px; text-align:center; }
.versuche li .inhalt{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.versuche li.jetzt{ border-color:var(--gruen); box-shadow:0 0 0 1px rgba(29,185,84,.3); }

/* ---------- Player ---------- */
.player{ background:var(--hg-karte); border:1px solid var(--rand);
         border-radius:var(--radius); padding:18px; margin-bottom:18px; }
.balken{ position:relative; height:9px; background:var(--hg-hoch);
         border-radius:5px; overflow:hidden; }
.balken-frei{ position:absolute; inset:0 auto 0 0; width:0;
              background:linear-gradient(90deg,#2f6b45,#3d8f5b); transition:width .25s; }
.balken-position{ position:absolute; top:0; bottom:0; left:0; width:3px;
                  background:var(--gruen-hell); border-radius:2px; opacity:0;
                  box-shadow:0 0 8px rgba(34,211,101,.8); }
.marken{ position:absolute; inset:0; pointer-events:none; }
.marken i{ position:absolute; top:0; bottom:0; width:1px;
           background:rgba(255,255,255,.22); }

.zeiten{ display:flex; justify-content:space-between; font-size:12px;
         color:var(--text-leise); margin-top:8px; font-variant-numeric:tabular-nums; }
.player-knoepfe{ display:flex; justify-content:center; margin-top:12px; }
.abspielen{
  width:62px; height:62px; border-radius:50%; border:0; cursor:pointer;
  background:var(--gruen); color:#04140a;
  display:grid; place-items:center;
  transition:transform .12s, background .15s;
  box-shadow:0 6px 20px rgba(29,185,84,.3);
}
.abspielen:hover{ background:var(--gruen-hell); transform:scale(1.05); }
.abspielen:active{ transform:scale(.96); }
.abspielen svg{ width:30px; height:30px; fill:currentColor; }
.abspielen.laedt{ opacity:.6; cursor:wait; }

/* ---------- Rateeingabe ---------- */
.rate-bereich{ display:flex; flex-direction:column; gap:11px; }
.such-huelle{ position:relative; }
#suche{
  width:100%; padding:14px 40px 14px 15px;
  background:var(--hg-karte); border:1px solid var(--rand); border-radius:11px;
  color:var(--text); font-size:15px; font-family:inherit;
}
#suche:focus{ outline:none; border-color:var(--gruen); }
.such-loeschen{ position:absolute; right:8px; top:50%; transform:translateY(-50%);
  background:none; border:0; color:var(--text-leise); font-size:15px;
  cursor:pointer; padding:6px 9px; }

.vorschlaege{
  position:absolute; top:calc(100% + 6px); left:0; right:0; z-index:30;
  list-style:none; margin:0; padding:5px;
  background:var(--hg-hoch); border:1px solid var(--rand);
  border-radius:11px; max-height:300px; overflow-y:auto;
  box-shadow:0 14px 40px rgba(0,0,0,.55);
}
.vorschlaege li{ padding:10px 12px; border-radius:8px; cursor:pointer; font-size:14px; }
.vorschlaege li:hover, .vorschlaege li.markiert{ background:rgba(29,185,84,.18); }
.vorschlaege li .v-interpret{ color:var(--text-leise); font-size:12.5px; margin-top:2px; }
.vorschlaege .leer{ padding:12px; color:var(--text-leise); font-size:13px; cursor:default; }
.vorschlaege .leer:hover{ background:none; }

.rate-knoepfe{ display:flex; gap:10px; }
.rate-knoepfe .knopf{ flex:1; }

/* ---------- Knoepfe ---------- */
.knopf{
  background:var(--hg-hoch); border:1px solid var(--rand); color:var(--text);
  padding:13px 18px; border-radius:11px; cursor:pointer;
  font-size:14px; font-weight:600; font-family:inherit;
  transition:background .15s, border-color .15s, opacity .15s;
}
.knopf:hover:not(:disabled){ background:#262b37; }
.knopf:disabled{ opacity:.42; cursor:not-allowed; }
.knopf.gruen{ background:var(--gruen); border-color:var(--gruen); color:#04140a; }
.knopf.gruen:hover:not(:disabled){ background:var(--gruen-hell); }
.knopf.rot{ background:rgba(226,67,79,.15); border-color:rgba(226,67,79,.5); color:#ff8b93; }
.knopf.rot:hover:not(:disabled){ background:rgba(226,67,79,.28); }
.knopf.grau{ color:var(--text-leise); }
.knopf.klein{ padding:8px 13px; font-size:13px; border-radius:9px; }
.knopf.gross{ padding:15px 26px; font-size:15px; }

/* ---------- Ergebnis ---------- */
.ergebnis{ display:flex; flex-direction:column; gap:15px; align-items:center;
           text-align:center; animation:auftauchen .35s ease; }
@keyframes auftauchen{ from{opacity:0; transform:translateY(10px);} to{opacity:1;} }
.ergebnis-titel{ font-size:19px; font-weight:700; }
.ergebnis-titel.gut{ color:var(--gruen-hell); }
.ergebnis-titel.schlecht{ color:var(--rot); }
.ergebnis-karte{
  display:flex; gap:16px; align-items:center; text-align:left;
  background:var(--hg-karte); border:1px solid var(--rand);
  border-radius:var(--radius); padding:16px; width:100%;
}
.ergebnis-karte img{ width:86px; height:86px; border-radius:9px;
                     object-fit:cover; flex:none; background:var(--hg-hoch); }
.e-song{ font-size:18px; font-weight:700; line-height:1.25; }
.e-interpret{ color:var(--text-leise); margin-top:4px; font-size:15px; }
.e-zusatz{ color:var(--text-leise); margin-top:7px; font-size:12.5px; }
.voll-audio{ width:100%; height:38px; }
.entfernen-knopf{ background:none; border:0; color:var(--text-leise);
  text-decoration:underline; text-underline-offset:3px; padding:4px 8px; }
.entfernen-knopf:hover:not(:disabled){ background:none; color:var(--rot); }
.ergebnis-knoepfe{ display:flex; gap:10px; width:100%; }
.ergebnis-knoepfe .knopf{ flex:1; }

/* ---------- Leer-Hinweis ---------- */
.leer-hinweis{ text-align:center; padding:70px 20px; }
.leer-note{ font-size:52px; margin-bottom:14px; opacity:.75; }
.leer-hinweis h2{ margin:0 0 10px; }
.leer-hinweis p{ color:var(--text-leise); max-width:400px; margin:0 auto 22px;
                 line-height:1.6; }

/* ---------- Karten (Bibliothek) ---------- */
.karte{
  background:var(--hg-karte); border:1px solid var(--rand);
  border-radius:var(--radius); padding:20px; margin-bottom:18px;
}
.karte h2{ margin:0 0 12px; font-size:17px; }
.karte h2 .anzahl{ color:var(--text-leise); font-weight:500; font-size:14px; }
.karte-kopf{ display:flex; justify-content:space-between; align-items:center;
             gap:12px; flex-wrap:wrap; margin-bottom:12px; }
.karte-kopf h2{ margin:0; }
.karte-werkzeuge{ display:flex; gap:8px; }
.karte-werkzeuge input, .karte-werkzeuge select{
  background:var(--hg); border:1px solid var(--rand); color:var(--text);
  padding:8px 11px; border-radius:9px; font-size:13.5px; font-family:inherit;
}
.hilfe{ color:var(--text-leise); font-size:13.5px; line-height:1.6; margin:0 0 12px; }
.hilfe.klein{ font-size:12.5px; margin:7px 0 0; }
.hilfe code, .karte code{ background:var(--hg-hoch); padding:2px 6px;
                          border-radius:5px; font-size:12px; }

textarea, .import-zeile input, .einstellung input{
  background:var(--hg); border:1px solid var(--rand); color:var(--text);
  padding:11px 13px; border-radius:10px; font-size:14px;
  font-family:inherit; width:100%; resize:vertical;
}
textarea:focus, input:focus, select:focus{ outline:none; border-color:var(--gruen); }
.import-zeile{ display:flex; gap:9px; margin-top:11px; flex-wrap:wrap; }
.import-zeile input{ flex:1; min-width:170px; }

.vorschau-box{ margin-top:14px; background:var(--hg); border:1px solid var(--rand);
  border-radius:10px; padding:14px; max-height:260px; overflow-y:auto; font-size:13.5px; }
.vorschau-box ol{ margin:10px 0 0; padding-left:22px; color:var(--text-leise);
                  line-height:1.75; }

/* ---------- Datei-Ablage ---------- */
.ablage{
  border:2px dashed var(--rand); border-radius:var(--radius);
  padding:34px 20px; text-align:center; cursor:pointer;
  transition:border-color .18s, background .18s;
}
.ablage:hover, .ablage.aktiv{ border-color:var(--gruen); background:rgba(29,185,84,.07); }
.ablage p{ margin:6px 0; font-size:14px; }
.ablage-symbol{ font-size:34px; margin-bottom:8px; }

/* ---------- Jobs ---------- */
.job{ background:var(--hg); border:1px solid var(--rand); border-radius:11px;
      padding:14px; margin-bottom:11px; }
.job-kopf{ display:flex; justify-content:space-between; align-items:center;
           gap:10px; margin-bottom:9px; flex-wrap:wrap; }
.job-titel{ font-weight:600; font-size:14.5px; }
.job-zahlen{ font-size:12.5px; color:var(--text-leise); }
.job-balken{ height:7px; background:var(--hg-hoch); border-radius:4px;
             overflow:hidden; margin-bottom:9px; }
.job-balken i{ display:block; height:100%; background:var(--gruen);
               transition:width .35s; }
.job-aktuell{ font-size:12.5px; color:var(--text-leise); margin-bottom:8px;
              overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.job-log{ max-height:130px; overflow-y:auto; font-size:12px;
          font-family:Consolas, "Courier New", monospace; line-height:1.65; }
.job-log div{ color:var(--text-leise); }
.job-log .erfolg{ color:#66d98a; }
.job-log .fehler{ color:#ff8b93; }
.job-log .warnung{ color:var(--gelb); }

/* ---------- Tabelle ---------- */
.tabelle-huelle{ overflow-x:auto; margin:0 -6px; }
.tabelle{ width:100%; border-collapse:collapse; font-size:13.5px; }
.tabelle th{
  text-align:left; padding:9px 10px; color:var(--text-leise);
  font-size:11.5px; text-transform:uppercase; letter-spacing:.6px;
  border-bottom:1px solid var(--rand); font-weight:600; white-space:nowrap;
}
.tabelle th[data-sort]{ cursor:pointer; user-select:none; }
.tabelle th[data-sort]:hover{ color:var(--text); }
.tabelle td{ padding:8px 10px; border-bottom:1px solid rgba(42,47,59,.55);
             vertical-align:middle; }
.tabelle tr:hover td{ background:rgba(255,255,255,.025); }
.tabelle .spalte-wahl{ width:34px; }
.t-cover{ width:36px; height:36px; border-radius:6px; object-fit:cover;
          background:var(--hg-hoch); display:block; }
.t-titel{ font-weight:600; }
.t-fehlt{ color:var(--rot); font-size:11px; }
.t-marken{ display:flex; gap:4px; flex-wrap:wrap; }
.t-marke{ background:var(--hg-hoch); border:1px solid var(--rand);
          padding:2px 8px; border-radius:20px; font-size:11px; color:var(--text-leise);
          white-space:nowrap; }
.t-knoepfe{ display:flex; gap:5px; justify-content:flex-end; }
.t-knopf{ background:none; border:0; color:var(--text-leise); cursor:pointer;
          padding:5px 7px; border-radius:6px; font-size:14px; }
.t-knopf:hover{ background:var(--hg-hoch); color:var(--text); }
.tabelle input[type=text], .tabelle input[type=number]{
  background:var(--hg); border:1px solid var(--gruen); color:var(--text);
  padding:5px 8px; border-radius:6px; font-size:13.5px; width:100%;
  font-family:inherit;
}
.leer-zeile{ text-align:center; color:var(--text-leise); padding:34px 0 !important; }

.auswahl-leiste{
  display:flex; gap:8px; align-items:center; flex-wrap:wrap;
  background:rgba(29,185,84,.1); border:1px solid rgba(29,185,84,.32);
  border-radius:10px; padding:10px 12px; margin-bottom:12px; font-size:13.5px;
}
.auswahl-leiste input{ background:var(--hg); border:1px solid var(--rand);
  color:var(--text); padding:7px 10px; border-radius:8px; font-size:13px;
  font-family:inherit; width:150px; }

/* ---------- Mein Spotify ---------- */
.spotify-zeile{
  display:flex; justify-content:space-between; align-items:center; gap:12px;
  flex-wrap:wrap; background:var(--hg); border:1px solid var(--rand);
  border-radius:10px; padding:14px; margin-bottom:14px;
}
.spotify-zeile b{ font-size:18px; }
.spotify-knoepfe{ display:flex; gap:8px; align-items:center; }
.spotify-knoepfe input{
  width:90px; background:var(--hg-karte); border:1px solid var(--rand);
  color:var(--text); padding:9px 11px; border-radius:9px; font-size:13.5px;
  font-family:inherit;
}

/* ---------- Einstellungen ---------- */
.einstellung{ margin-bottom:18px; }
.einstellung > label{ display:block; font-size:12.5px; color:var(--text-leise);
  margin-bottom:7px; font-weight:600; }
.einstellung .zeile{ display:flex; gap:9px; flex-wrap:wrap; align-items:center; }
.einstellung .zeile input{ flex:1; min-width:190px; }
.werkzeug-status{ font-size:13px; color:var(--text-leise); flex:1; min-width:190px; }
.werkzeug-status b{ color:var(--text); }
.werkzeug-status .fehlt{ color:var(--rot); }
.werkzeug-status .da{ color:var(--gruen-hell); }

/* ---------- Statistikfenster ---------- */
.ueberlagerung{
  position:fixed; inset:0; background:rgba(0,0,0,.72);
  display:grid; place-items:center; z-index:60; padding:20px;
  backdrop-filter:blur(3px);
}
.fenster{
  background:var(--hg-karte); border:1px solid var(--rand);
  border-radius:var(--radius); padding:26px; width:100%; max-width:430px;
  position:relative;
}
.fenster h2{ margin:0 0 20px; font-size:19px; }
.fenster h3{ margin:22px 0 12px; font-size:13px; color:var(--text-leise);
             text-transform:uppercase; letter-spacing:.6px; }
.fenster-zu{ position:absolute; top:14px; right:14px; background:none; border:0;
             color:var(--text-leise); font-size:17px; cursor:pointer; padding:5px; }
.stat-zahlen{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px;
              text-align:center; }
.stat-zahlen strong{ display:block; font-size:26px; }
.stat-zahlen span{ font-size:11px; color:var(--text-leise); }
.verteilung{ display:flex; flex-direction:column; gap:6px; }
.v-zeile{ display:flex; align-items:center; gap:9px; font-size:13px; }
.v-zeile .v-nr{ width:16px; color:var(--text-leise); }
.v-zeile .v-balken{ flex:1; height:22px; background:var(--hg-hoch);
                    border-radius:5px; overflow:hidden; }
.v-zeile .v-balken i{ display:block; height:100%; background:var(--gruen);
  min-width:2px; transition:width .4s; }
.v-zeile .v-wert{ width:26px; text-align:right; color:var(--text-leise);
                  font-variant-numeric:tabular-nums; }
.fenster-fuss{ margin-top:22px; text-align:center; }

/* ---------- Hinweise (Toasts) ---------- */
.hinweis-huelle{ position:fixed; bottom:20px; left:50%; transform:translateX(-50%);
  z-index:80; display:flex; flex-direction:column; gap:8px; align-items:center;
  pointer-events:none; width:calc(100% - 32px); max-width:440px; }
.hinweis{
  background:var(--hg-hoch); border:1px solid var(--rand); color:var(--text);
  padding:12px 18px; border-radius:11px; font-size:13.5px;
  box-shadow:0 10px 32px rgba(0,0,0,.5);
  animation:hoch .28s ease; max-width:100%; text-align:center;
}
.hinweis.gut{ border-color:var(--gruen); }
.hinweis.schlecht{ border-color:var(--rot); }
@keyframes hoch{ from{opacity:0; transform:translateY(14px);} to{opacity:1;} }

/* ---------- Handy ---------- */
@media (max-width:640px){
  .kopf{ padding:11px 13px; gap:9px; }
  .marke{ font-size:17px; }
  .reiter-knopf{ padding:7px 12px; font-size:13px; }
  .ansicht{ padding:18px 13px 60px; }
  .karte{ padding:15px; }
  .ergebnis-karte img{ width:66px; height:66px; }
  .stat-zahlen strong{ font-size:21px; }
  .rate-knoepfe{ flex-direction:column; }
  .karte-werkzeuge{ width:100%; }
  .karte-werkzeuge input{ flex:1; }
  .tabelle th:nth-child(5), .tabelle td:nth-child(5),
  .tabelle th:nth-child(7), .tabelle td:nth-child(7){ display:none; }
}