body {
            margin: 0;
            padding: 0;
            background: #fafafa;
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
            color: #222;
            overscroll-behavior: none;
        }

        .container {
            max-width: 480px;
            margin: 0 auto;
            padding: 20px;
        }

        .card {
            background: #fff;
            border-radius: 18px;
            padding: 20px;
            margin-top: 20px;
            box-shadow: 0 4px 16px rgba(0,0,0,0.12);
        }

        .cover {
            width: 100%;
            border-radius: 14px;
            margin-bottom: 14px;
            object-fit: cover;
        }

        h1 {
            margin: 0;
            font-size: 1.7em;
        }

        h2 {
            margin: 6px 0 20px;
            font-size: 1.1em;
            opacity: 0.7;
        }

        input {
            width: 100%;
            padding: 12px;
            font-size: 1.1em;
            border-radius: 10px;
            border: 1px solid #ccc;
        }

        button {
            width: 100%;
            margin-top: 14px;
            padding: 12px;
            font-size: 1.1em;
            border: none;
            border-radius: 10px;
            background: #111;
            color: white;
            cursor: pointer;
        }

        .error {
            margin-top: 10px;
            color: #b00;
            display: none;
        }

        /* Playlist */

        
        .playlist {
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
            overscroll-behavior: contain;
        }

        .playlist-item {
            display: flex;
            align-items: center;
            padding: 10px 0;
            border-bottom: 1px solid #eee;
            cursor: pointer;
        }

        .playlist-item:last-child {
            border-bottom: none;
        }

        .pl-cover {
            width: 56px;
            height: 56px;
            border-radius: 8px;
            object-fit: cover;
            margin-right: 12px;
        }

        .pl-title {
            font-size: 1.1em;
            font-weight: 600;
        }

        .pl-sub {
            opacity: 0.7;
            font-size: 0.9em;
        }

        /* immer gleich breit wie der Card-Inhalt */
        .now-playing {
            position: fixed;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: calc(100% - 40px);  /* 2 × 20px padding der .container */
            max-width: 480px;

            max-height: 50vh;
            background: #ffffff;

            border-top-left-radius: 18px;
            border-top-right-radius: 18px;

            box-shadow: 0 -4px 14px rgba(0,0,0,0.15);
            padding: 16px;
            display: none;
            z-index: 999;

            overflow-x: visible;
            overflow-y: hidden;
            overscroll-behavior: contain;
        }


        /* Override card spacing */
        #player-card {
            padding-bottom: 55vh; /* Platz lassen für Player */
        }

        /* Compact cover */
        .now-playing .cover {
            width: 80px;
            height: 80px;
            border-radius: 10px;
            object-fit: cover;
            margin-right: 14px;
            flex-shrink: 0;   /* bleibt schön in fester Größe */
        }


        #now-playing {
            display: flex;
            flex-direction: row;
            align-items: flex-start;
        }

        .now-playing-text {
            flex: 1;
            min-width: 0; /* ← wichtig für Text-Umbruch */
        }

        #np-title {
            margin: 0;
            font-size: 1.2em;
            white-space: normal;
            overflow-wrap: break-word; /* ← verhindert Abschneiden */
        }

        #np-album {
            margin: 4px 0 10px;
            font-size: 0.95em;
            opacity: 0.7;
            white-space: normal;
            overflow-wrap: break-word;
        }

        .np-seek-wrapper {
            padding: 0 12px;      /* Abstand links/rechts */
        }

        /* Reset + Basis-Look */
        #np-seek {
            -webkit-appearance: none;
            appearance: none;
            width: 100%;
            margin: 10px 0;

            height: 4px;
            border-radius: 4px;
            background: #ddd;     /* durchgehend grau, keine native Füllung mehr */
            outline: none;
            background: linear-gradient(
                to right,
                #007aff 0%,
                #007aff 0%,
                #ddd 0%,
                #ddd 100%
            );
        }

        /* Entfernt den blauen Chrome-/Android-Thumb komplett */
        #np-seek::-webkit-slider-thumb {
            -webkit-appearance: none;
            appearance: none;
            width: 0;
            height: 0;
            border: none;
            background: transparent;
        }

        /* Firefox-Thumb ebenfalls entfernen */
        #np-seek::-moz-range-thumb {
            width: 0;
            height: 0;
            border: none;
            background: transparent;
        }

        /* Time row */
        #np-times {
            font-size: 0.9em;
            opacity: 0.7;
            margin-bottom: 6px;
        }

        /* Buttons */
        .np-buttons {
            display: flex;
            justify-content: space-around;
            margin-top: 8px;
        }

        .np-buttons button {
            width: 70px;
            padding: 10px;
            font-size: 1.5em;
            border-radius: 12px;
            border: none;
        }

        .np-btn-main {
            background: #222;
            color: white;
        }

        .np-btn-side {
            background: #ddd;
            color: #333;
        }

        #playpause-btn {
            background: #000 !important;
            color: #000 !important;
        }
        #playpause-btn .icon-play {
            border-color: transparent transparent transparent white;
        }

        .icon-prev,
        .icon-next,
        .icon-prev::after,
        .icon-next::after {
            border-color: transparent black transparent transparent; /* prev */
        }


        .icon-btn {
            width: 70px;
            height: 50px;
            background: #eee;
            border-radius: 12px;
            display: flex;
            justify-content: center;
            align-items: center;
            border: none;
        }

        .icon {
            display: inline-block;
            width: 0;
            height: 0;
            border-style: solid;
        }

        /* Play Triangle */
        .icon-play {
            border-width: 10px 0 10px 18px;
            border-color: transparent transparent transparent black;
        }

        /* Pause */
        .icon-pause {
            width: 16px;
            height: 16px;
            position: relative;
        }

        .icon-pause::before,
        .icon-pause::after {
            content: "";
            position: absolute;
            top: 0;
            width: 4px;
            height: 16px;
            background: white;
            border-radius: 0px;
        }

        .icon-pause::before {
            left: 0;
        }

        .icon-pause::after {
            right: 0;
        }

        .icon-prev,
        .icon-next {
            width: 0;
            height: 0;
            position: relative;
        }

        .icon-prev {
            border-style: solid;
            border-width: 10px 12px 10px 0;
            border-color: transparent black transparent transparent;
        }

        .icon-prev::after {
            content: "";
            position: absolute;
            left: -12px;
            top: -10px;
            border-style: solid;
            border-width: 10px 12px 10px 0;
            border-color: transparent black transparent transparent;
        }

        .icon-next {
            border-style: solid;
            border-width: 10px 0 10px 12px;
            border-color: transparent transparent transparent black;
        }

        .icon-next::after {
            content: "";
            position: absolute;
            right: -12px;
            top: -10px;
            border-style: solid;
            border-width: 10px 0 10px 12px;
            border-color: transparent transparent transparent black;
        }

        /* INSTALL BUTTON */
        .install-btn {
            width: 100%;
            padding: 12px;
            margin-bottom: 12px;
            background: #007aff;
            color: white;
            font-size: 16px;
            border-radius: 8px;
            border: none;
        }

        /* OVERLAY */
        .tutorial-overlay {
            position: fixed;
            inset: 0;
            background: rgba(0,0,0,0.85);
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 99999;
        }

        .tutorial-content {
            position: relative;
            width: 90%;
            max-width: 430px;
            background: white;
            border-radius: 16px;
            padding: 16px;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        /* Close Button */
        .tutorial-close-btn {
            position: absolute;
            top: 8px;
            right: 8px;
            background: #000;            /* schwarz */
            color: #fff;                 /* weißes X */
            border: none;
            border-radius: 50%;
            width: 36px;                 /* etwas größer für zentriertes X */
            height: 36px;
            font-size: 20px;
            display: flex;               /* perfekte Zentrierung */
            justify-content: center;
            align-items: center;
            line-height: 1;              /* verhindert abgeschnittenes X */
            padding: 0;                  /* verhindert Verschiebungen */
        }

        /* Screenshot */
        .tutorial-image {
            width: 100%;
            max-height: 70vh;
            object-fit: contain;
            margin-top: 32px;
            margin-bottom: 20px;
        }

        /* Navigation arrows */
        .tutorial-nav {
            display: flex;
            justify-content: space-between;
            width: 100%;
        }

        .tutorial-arrow {
            font-size: 22px;
            padding: 10px 22px;
            background: #000;      /* schwarz */
            color: #fff;           /* weiß */
            border-radius: 8px;
            border: none;
        }

        .tutorial-arrow:active {
            background: #333;
        }
        .tutorial-close-btn:active {
            background: #333;
        }