/* Songcards: Text und Buttons nicht markierbar, außer Notizen */
  .song, .song * {
    user-select: none;
  }
  .song textarea {
    user-select: text;
  }
   :root {
        --bg: #020617;
        --surface: #020617;
        --text: #e5e7eb;
        --border: #1f2933;
        --accent: #ff2a8a;
      }

      body.light {
        --bg: #f8fafc;
        --surface: rgba(255,255,255,.92);
        --text: #020617;
        --border: #cbd5e1;
        --accent: #ff2a8a;
      }

      body.light .song {
        box-shadow: 0 2px 6px rgba(0,0,0,.04);
      }

      * {
        box-sizing: border-box;
      }

      body {
        margin: 0;
        background: #020617;
        color: var(--text);
        font-family: system-ui;
        min-height: 100vh;
        padding: 30px;
        transition: color .4s ease;
      }

      .app {
        max-width: 1000px;
        margin: auto;
        background: var(--surface);
        border-radius: 24px;
        padding: 24px;
        border: 1px solid var(--border);
        box-shadow: 0 20px 60px rgba(0,0,0,.4);
        transition: box-shadow .4s ease, border .4s ease;
      }

      body.light {
        background: linear-gradient(#f8fafc, #eef2f7);
      }

      body.light .app {
        backdrop-filter: none;
        background: #f8fafc;
        box-shadow:
          0 10px 25px rgba(0,0,0,.08),
          0 2px 6px rgba(0,0,0,.04);
      }

      body.esc {
        background: #07003c;
        position: relative;
        overflow-x: hidden;
      }

      body.esc::before {
        content: "";
        position: fixed;
        inset: 0;
        z-index: -2;

        background:
          radial-gradient(900px circle at 25% 30%, #2b1cff55 0%, transparent 60%),
          radial-gradient(900px circle at 80% 70%, #ff2a8a55 0%, transparent 60%),
          radial-gradient(600px circle at 60% 20%, #2dd4ff33 0%, transparent 60%),
          linear-gradient(135deg, #07003c 0%, #0c004a 40%, #14004d 100%);
      }


      body.esc.paused::before {
        animation-play-state: paused;
      }

      body.esc .app {
  background: rgba(5,0,45,.78);
  border: 1px solid rgba(255,255,255,.06);

  box-shadow:
    0 20px 60px rgba(0,0,0,.55),
    0 0 30px rgba(43,28,255,.25);
}

      body.esc.light .app {
        background: rgba(255,255,255,0.9);
      }

      .toolbar {
        display: flex;
        gap: 10px;
        flex-wrap: wrap;
        margin-top: 10px;
      }

      .toolBtn {
        background: rgba(255,255,255,.08);
        border: 1px solid var(--border);
        color: var(--text);
        padding: 8px 14px;
        border-radius: 999px;
        cursor: pointer;
        display: flex;
        align-items: center;
        gap: 6px;
        backdrop-filter: blur(6px);
        transition: transform .15s ease, background .15s ease;
      }

      .toolBtn:hover {
        background: rgba(255,255,255,.14);
        transform: translateY(-1px);
      }

      .iconBtn {
        background: rgba(255,255,255,.08);
        border: 1px solid var(--border);
        border-radius: 50%;
        width: 36px;
        height: 36px;
        display: grid;
        place-items: center;
        cursor: pointer;
        transition: transform .15s ease, background .15s ease;
      }

      .iconBtn:hover {
        background: rgba(255,255,255,.14);
        transform: translateY(-1px);
      }

      .toolBtn.active {
        background: var(--accent);
        color: white;
      }

      .toolBtn.active:hover {
        background: var(--accent);
      }

      .toolBtn.danger {
        border-color: #ef4444;
        color: #ef4444;
      }

      .toolBtn.danger:hover {
        background: rgba(239,68,68,.1);
      }

      #songs {
        display: flex;
        flex-direction: column;
        gap: 12px;
        margin-top: 20px;
      }

      .song {
        position: relative;
        background: var(--bg);
        border: 1px solid var(--border);
        border-radius: 12px;
        padding: 12px;
        padding-right: 48px;
        box-shadow: 0 6px 20px rgba(0,0,0,.4);
      }

      .song:hover {
        background: var(--bg);
      }

      .song.selected {
        outline: 2px dashed var(--accent);
      }

      .row {
        display: flex;
        gap: 12px;
        align-items: center;
      }

      .thumb {
        width: 80px;
        height: 60px;
        object-fit: cover;
        border-radius: 6px;
      }

      .rank {
        display: flex;
        flex-direction: column;
        align-items: center;
        min-width: 70px;
      }

      .rankNumber {
        font-size: 26px;
        font-weight: bold;
      }

      .rankButtons {
        display: flex;
        gap: 4px;
      }

      .meta {
        flex: 1;
      }

      .title {
        font-weight: 600;
      }

      .link {
        font-size: 12px;
        opacity: .6;
        word-break: break-all;
      }

      textarea {
        margin-top: 8px;
        width: 100%;
        background: var(--bg);
        border: 1px solid var(--border);
        border-radius: 8px;
        padding: 8px;
        color: var(--text);
        resize: none;
        overflow: hidden;
        max-height: 200px;
      }

      button {
        background: var(--accent);
        border: none;
        border-radius: 6px;
        color: var(--text);
        cursor: pointer;
        transition: background .3s ease, color .3s ease;
      }

      button:hover {
        background: var(--accent);
      }

      .delete {
        position: absolute;
        top: 6px;
        right: 12px;
        background: transparent;
        font-size: 18px;
        color: #94a3b8;
      }

      .delete:hover {
        background: #dc2626;
      }


      .song.active {
        border-width: 2px;
        border-color: var(--border);
      }

      /* Medal Overrides */
      .song.place-0.active {
        box-shadow: 0 0 0 2px #facc15, 0 8px 25px rgba(250,204,21,.5);
      }

      .song.place-1.active {
        box-shadow: 0 0 0 2px #cbd5e1, 0 8px 25px rgba(203,213,225,.5);
      }

      .song.place-2.active {
        box-shadow: 0 0 0 2px #cd7f32, 0 8px 25px rgba(205,127,50,.5);
      }

      #linkInput {
        flex: 1;
        height: 52px;
        padding: 0 16px;
        font-size: 18px;
        border-radius: 14px;
        background: var(--bg);
        border: 1px solid var(--border);
        color: var(--text);
      }

      .rankButtons button {
        background: transparent;
        color: #94a3b8;
        font-size: 18px;
        padding: 0 4px;
      }

      .rankButtons button:hover {
        color: var(--text);
      }

      .addRow {
        display: flex;
        gap: 10px;
        align-items: stretch;
      }

      .addBtn {
        height: 52px;
        width: 52px;
        font-size: 28px;
        border-radius: 14px;
        padding: 0;
      }

      .dragging {
        opacity: .4;
      }

      .dragOver {
        outline: 2px dashed var(--accent);
      }

      textarea::-webkit-scrollbar {
        width: 6px;
      }

      textarea::-webkit-scrollbar-thumb {
        background: var(--accent);
        border-radius: 6px;
      }

      .titleRow {
        display: flex;
        align-items: center;
        gap: 6px;
      }

      .thumbCol {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 4px;
      }

      .playThumb {
        background: transparent;
        border: none;
        color: var(--text);
        font-size: 20px;
        cursor: pointer;
      }

      .playThumb:hover {
        transform: scale(1.1);
      }

      .playerFrame {
        width: 100%;
        aspect-ratio: 16 / 9;
        max-height: 60vh;
      }

      .playerFrame iframe {
        width: 100%;
        height: 100%;
        border: 0;
      }

      .player {
        overflow: hidden;
        transition: max-height .35s ease, opacity .3s ease;
        max-height: 0;
        opacity: 0;
      }

      .player.open {
        max-height: 80vh;
        opacity: 1;
      }

      .thumbCol.dim img {
        opacity: .4;
      }

      .thumbCol img {
        transition: opacity .3s ease;
      }

      .playRow {
        display: flex;
        align-items: center;
        gap: 6px;
      }

      .wave {
        display: none;
        align-items: flex-end;
        gap: 2px;
        height: 14px;
      }

      .wave span {
        width: 3px;
        background: var(--accent);
        border-radius: 2px;
        transform-origin: bottom;
        animation: wave 1s infinite ease-in-out;
      }

      @keyframes wave {
        0%,100% { height: 4px }
        50% { height: 14px }
      }

      .wave.playing span {
        animation: wave 1s infinite ease-in-out;
      }

      .wave.playing span:nth-child(2) { animation-delay: .2s }
      .wave.playing span:nth-child(3) { animation-delay: .4s }

      .copyLink {
        cursor: pointer;
        opacity: .6;
        user-select: none;
      }

      .copyLink:hover {
        opacity: 1;
      }

      .header {
        margin-bottom: 20px;
      }

      .titleEdit {
        display: flex;
        align-items: center;
        gap: 6px;
      }

      #listTitle {
        flex: 1;
        background: transparent;
        border: none;
        font-size: 28px;
        font-weight: bold;
        color: var(--text);
      }

      #listTitle:focus {
        outline: none;
      }

      .editTitle {
        background: transparent;
      }

      #listDesc {
        width: 100%;
        background: transparent;
        border: none;
        color: #94a3b8;
        margin-top: 6px;
      }

      #listDesc:focus {
        outline: none;
      }

      hr {
        border: none;
        border-top: 1px solid var(--border);
        margin: 16px 0;
      }

      h2 {
        margin: 0;
      }

      #toast {
        position: fixed;
        bottom: 20px;
        right: 20px;
        background: var(--accent);
        color: var(--text);
        padding: 10px 14px;
        border-radius: 10px;
        opacity: 0;
        pointer-events: none;
        transition: opacity .3s ease, transform .3s ease;
        transform: translateY(10px);
      }

      #toast.show {
        opacity: 1;
        transform: translateY(0);
      }

      /* Ranking-Zahl einfärben */
      .place-0 .rankNumber {
        color: gold;
      }

      .place-1 .rankNumber {
        color: silver;
      }

      .place-2 .rankNumber {
        color: #cd7f32;
      }

      .escToggle {
        display: flex;
        align-items: center;
        gap: 6px;
        cursor: pointer;
        color: #94a3b8;
      }

      .escToggle input {
        accent-color: var(--accent);
      }

      .escInfo {
        display: flex;
        align-items: center;
        gap: 6px;
        font-size: 12px;
        color: #94a3b8;
        margin-bottom: 2px;
      }

      .escFlag {
        width: 24px;
        height: auto;
        border-radius: 2px;
      }

      #themeToggle {
        transition: transform .4s ease;
      }

      #themeToggle.spin {
        transform: rotate(180deg);
      }

      @keyframes escFloat {
        0% {
          transform: translate3d(-6%, -6%, 0) scale(1.08);
        }
        100% {
          transform: translate3d(6%, 6%, 0) scale(1.08);
        }
      }

      .helpOverlay {
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,.25);
        opacity: 0;
        pointer-events: none;
        transition: opacity .25s ease;
        z-index: 20;
      }

      .helpOverlay.open {
        opacity: 1;
        pointer-events: auto;
      }

      .helpPanel {
        position: fixed;
        top: 0;
        right: 0;
        height: 100%;
        width: min(360px, 90vw);
        background: var(--surface);
        border-left: 1px solid var(--border);
        box-shadow: -10px 0 30px rgba(0,0,0,.25);
        transform: translateX(100%);
        transition: transform .3s ease, opacity .25s ease;
        opacity: 0;
        z-index: 21;
        display: flex;
        flex-direction: column;
      }

      .helpPanel.open {
        transform: translateX(0);
        opacity: 1;
      }

      .helpHeader {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 14px 16px;
        border-bottom: 1px solid var(--border);
      }

      .helpContent {
        padding: 16px;
        overflow-y: auto;
      }

      .helpSection {
        margin-bottom: 18px;
      }

      .helpSection h4 {
        margin: 0 0 8px;
        opacity: .7;
      }

      .helpRow {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 10px;
        padding: 6px 0;
      }

      .helpRow span {
        opacity: .8;
        text-align: right;
      }

      kbd {
        background: rgba(255,255,255,.08);
        border: 1px solid var(--border);
        border-radius: 6px;
        padding: 3px 8px;
        font-family: ui-monospace, monospace;
        font-size: 12px;
      }

      body.light kbd {
        background: rgba(0,0,0,.04);
      }

      .escPointsWrap {
        margin-top: 8px;
        display: flex;
        flex-direction: column;
        gap: 6px;
      }

      .escRow {
        display: flex;
        align-items: center;
        gap: 6px;
        flex-wrap: wrap;
        overflow-x: auto;
      }

      .escRow span {
        width: 70px;
        opacity: .7;
        font-size: 12px;
        flex-shrink: 0;
      }

      .escPoint {
        background: transparent;
        border: 1px solid var(--border);
        color: var(--text);
        border-radius: 6px;
        padding: 2px 6px;
        font-size: 12px;
        cursor: pointer;
      }

      .escPoint.active {
        background: var(--accent);
        color: white;
      }

      body.light .escPoint {
        background: rgba(0,0,0,.03);
      }

      .escBiasWrap {
        margin-top: 10px;
      }

      .escBiasLabels {
        display: flex;
        justify-content: space-between;
        font-size: 12px;
        opacity: .7;
        margin-bottom: 4px;
      }

      .escBiasSlider {
        width: 100%;
        accent-color: var(--accent);
      }

      .draggingGlobal {
        user-select: none;
      }

      .song.dragging {
        opacity: 0.85;
        box-shadow: 0 20px 40px rgba(0,0,0,.55);
        cursor: grabbing;
        transition: none;
      }
            

      .dragGhost {
        opacity: 0.9;
        transform: scale(1.03);
        box-shadow: 0 15px 40px rgba(0,0,0,.6);
        z-index: 9999;
      }

      .dragPlaceholder {
        height: 80px;
        margin: 8px 0;
        border-radius: 8px;
        background: rgba(244,63,94,0.35);
        border: 2px dashed var(--accent);
      }
      .song {
        transition:
        transform 0.18s ease,
        box-shadow 0.18s ease,
        background 0.18s ease;
      }

      .rank,
      .thumb,
      .thumbCol {
        cursor: grab;
      }

      .rank:active,
      .thumb:active,
      .thumbCol:active {
        cursor: grabbing;
      }