*, *::before, *::after { box-sizing: border-box; }

        body {
            padding: 0;
            margin: 0;
            font-size: 15px;
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
            background: #0c0c0c;
            color: #e0d8d0;
            min-height: 100vh;
        }

        #songs {
            position: relative;
            max-width: 1080px;
            margin: 2.5em auto 3em auto;
            padding: 2em 2.5em 2.5em;
            background: #181818;
            border-radius: 10px;
            box-shadow: 0 30px 80px rgba(0,0,0,0.7);
        }

        h1 {
            font-family: "Gilda Display", serif;
            font-weight: 400;
            font-style: normal;
            font-size: 2.6em;
            line-height: 1.4em;
            margin: 0 0 0.1em 0;
            padding: 0;
            text-align: center;
            color: #fff;
            letter-spacing: 0.03em;
        }
        h1::after { content: '|'; visibility: hidden; animation: cursor 1s 4 step-end; }
        @keyframes cursor { 0%,100%{ visibility: hidden; } 50%{ visibility: visible; } }
        h1 a { text-decoration: none; color: inherit; }
        p { line-height:1.6em; text-align:center;}
        p strong { color:#E86149;}
        .player-wrap {
            background: #111;
            border: 1px solid #2a2a2a;
            border-radius: 8px;
            padding: 1em 1.2em 0.8em;
            margin: 1.6em 0 0 0;
        }
        .player-controls { display: flex; align-items: center; gap: 10px; }
        audio { flex: 1; accent-color: #e8614a; }
        #next-btn, #repeat-btn, #copy-btn { background: none; border: 1px solid #333; border-radius: 5px; color: #555; font-size: 1.3em; height: 2em; cursor: pointer; line-height: 1; padding: 0; flex-shrink: 0; transition: color 0.15s, border-color 0.15s, background 0.15s; }
        #next-btn, #repeat-btn { width: 2em; }
        #next-btn:hover, #repeat-btn:hover, #copy-btn:hover { color: #e8614a; border-color: #e8614a; }
        #repeat-btn.active { color: #e8614a; border-color: #e8614a; }
        #copy-btn { display: none; position: absolute; top: 1.2em; right: 1.2em; font-size: 0.72em; padding: 0.4em 0.9em; letter-spacing: 0.04em; color: #4a7a9a; border-color: #3a5a7a; border-radius: 5px; cursor: pointer; background: none; border: 1px solid #3a5a7a; transition: color 0.15s, border-color 0.15s, background 0.15s; }
        #copy-btn:hover { color: #e8614a; border-color: #e8614a; }
        #copy-btn.visible { display: block; }
        #copy-btn.copied { background: #2a3a2a; border-color: #4a8a4a; color: #6abf6a; }
        #nowplaying {
            text-align: center;
            margin: 0.7em 0 0 0;
            min-height: 1.4em;
            font-size: 0.88em;
            color: #888;
            line-height: 1.5;
        }
        #nowplaying b { color: #e0d8d0; font-weight: 600; }
        #lyrics { font-size: 0.8em; color: #777; margin-top: 0.4em; text-align: center; }
        #lyrics a { color: #e8614a; }

        .latest-section { margin: 1.8em 0 0 0; }
        .latest-section h2 {
            font-family: "Gilda Display", serif;
            font-weight: 400;
            font-size: 0.78em;
            text-transform: uppercase;
            letter-spacing: 0.14em;
            margin: 0 0 10px 0;
            padding-bottom: 8px;
            border-bottom: 1px solid #e8614a;
            color: #e8614a;
        }
        .latest-grid {
            display: grid;
            grid-template-columns: repeat(6, 1fr);
            gap: 8px;
        }
        @media (max-width: 800px) {
            .latest-grid { grid-template-columns: repeat(3, 1fr); }
        }
        .latest-date {
            display: block;
            font-size: 0.68em;
            color: #444;
            margin-top: 3px;
        }
        a.song-card.selected .latest-date { color: rgba(255,255,255,0.45); }
        a.song-card:hover .latest-date { color: rgba(255,255,255,0.55); }

        .col-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 22px;
            margin: 2em 0 0 0;
        }

        .col h2 {
            font-family: "Gilda Display", serif;
            font-weight: 400;
            font-size: 0.78em;
            text-transform: uppercase;
            letter-spacing: 0.14em;
            margin: 0 0 12px 0;
            padding-bottom: 8px;
            border-bottom: 1px solid #e8614a;
            color: #e8614a;
        }

        a.song-card {
            display: flex;
            align-items: center;
            user-select: none;
            padding: 9px 13px;
            margin-bottom: 5px;
            background: #212121;
            border: 1px solid #2c2c2c;
            text-decoration: none;
            color: #ccc;
            border-radius: 5px;
            line-height: 1.35;
            transition: background 0.12s, border-color 0.12s, color 0.12s;
        }
        a.song-card:hover { background: #e8614a; border-color: #e8614a; color: #fff; cursor: pointer; }
        a.song-card:hover strong { color: rgba(255,255,255,0.65); }
        .song-card-text { flex: 1; }
        a.song-card strong {
            display: block;
            font-size: 0.72em;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            color: #555;
            margin-bottom: 2px;
            transition: color 0.12s;
        }
        a.song-card.selected { background: #e8614a; border-color: #e8614a; color: #fff; }
        a.song-card.selected strong { color: rgba(255,255,255,0.65); }
        a.song-card.queued { background: #2a3a4a; border-color: #3a5a7a; color: #8ab4cc; }
        a.song-card.queued strong { color: #4a7a9a; }
        a.song-card.queued:hover { background: #e8614a; border-color: #e8614a; color: #fff; }
        a.song-card.queued:hover strong { color: rgba(255,255,255,0.65); }
        .song-card-icon {
            display: none;
            font-size: 0.8em;
            margin-left: 10px;
            flex-shrink: 0;
            opacity: 0.9;
        }
        a.song-card.selected .song-card-icon { display: block; }
        .queue-badge {
            display: none;
            font-size: 0.68em;
            font-weight: 700;
            margin-left: 10px;
            flex-shrink: 0;
            background: #3a5a7a;
            color: #8ab4cc;
            border-radius: 3px;
            padding: 1px 5px;
            min-width: 1.4em;
            text-align: center;
        }
        a.song-card.queued .queue-badge { display: block; }
        @keyframes long-press-flash { 0%,100% { background: #212121; } 50% { background: #3a5a7a; } }
        a.song-card.long-press-flash { animation: long-press-flash 0.4s ease; }

        .tag-list { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 5px; }
        .tag { font-size: 0.65em; padding: 1px 6px; border-radius: 3px; background: #2a2a2a; border: 1px solid #383838; color: #666; letter-spacing: 0.03em; white-space: nowrap; }
        a.song-card:hover .tag { background: rgba(0,0,0,0.2); border-color: rgba(255,255,255,0.25); color: rgba(255,255,255,0.75); }
        a.song-card.selected .tag { background: rgba(0,0,0,0.2); border-color: rgba(255,255,255,0.25); color: rgba(255,255,255,0.75); }
        a.song-card.queued .tag { background: rgba(0,0,0,0.15); border-color: #3a5a7a; color: #5a8aaa; }

        .tag-filter-section { margin: 1em 0 0 0; border-top: 1px solid #2a2a2a; padding-top: 1.4em; }
        .tag-filter-section h3 {
            font-family: "Gilda Display", serif;
            font-weight: 400;
            font-size: 0.78em;
            text-transform: uppercase;
            letter-spacing: 0.14em;
            color: #555;
            margin: 0 0 0.8em 0;
        }
        .tag-filter-list { display: flex; flex-wrap: wrap; gap: 6px; }
        .tag-filter {
            background: none;
            border: 1px solid #2c2c2c;
            border-radius: 4px;
            color: #555;
            font-size: 0.75em;
            padding: 3px 10px;
            cursor: pointer;
            letter-spacing: 0.03em;
            transition: color 0.12s, border-color 0.12s, background 0.12s;
        }
        .tag-filter:hover { color: #ccc; border-color: #555; }
        .tag-filter.active { color: #e8614a; border-color: #e8614a; background: rgba(232,97,74,0.08); }
        .tag-filter-count { color: #444; font-size: 0.9em; margin-left: 2px; }
        .tag-filter.active .tag-filter-count { color: rgba(232,97,74,0.6); }
        a.song-card.tag-dim { opacity: 0.2; }

        #alert { display:none; padding:1em; background:#c0392b; color:#fff; text-align:center; font-size:1.2em; margin-bottom:1em; border-radius:6px; }
        .copy { text-align: right; margin-top: 1.8em; color: #444; font-size: 0.78em; }

        .song-list {
            margin-top: 2.5em;
            border-top: 1px solid #2a2a2a;
            padding-top: 1.5em;
        }
        .song-list h3 {
            font-family: "Gilda Display", serif;
            font-weight: 400;
            font-size: 0.78em;
            text-transform: uppercase;
            letter-spacing: 0.14em;
            color: #555;
            margin: 0 0 1em 0;
        }
        .song-list table {
            width: 100%;
            border-collapse: collapse;
            font-size: 0.82em;
        }
        .song-list tr { border-bottom: 1px solid #222; }
        .song-list tr:last-child { border-bottom: none; }
        .song-list td { padding: 5px 8px; color: #777; vertical-align: top; }
        .song-list td:first-child { color: #aaa; width: 35%; }
        .song-list td:nth-child(2) { color: #888; }
        .song-list td:last-child { color: #444; width: 40px; text-align: right; font-variant-numeric: tabular-nums; }