@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&family=Space+Mono:wght@400;700&family=Playfair+Display:wght@600&display=swap');

:root {
    --goweb-preview-bg: #f0f2f5;
}

.goweb-player-container {
    width: 100%;
    margin: 20px 0;
}

.goweb-audio-strip,
.audio-strip {
    --p-bg: #fff;
    --p-text: #333;
    --p-accent: #3b82f6;
    --p-sec: #6b7280;
    --p-radius: 12px;
    --p-border: none;
    --p-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    --range-track: rgba(0, 0, 0, 0.1);
    --cover-gradient: linear-gradient(45deg, #555, #222);

    display: flex;
    align-items: center;
    background: var(--p-bg);
    color: var(--p-text);
    padding: 15px 20px;
    border-radius: var(--p-radius);
    box-shadow: var(--p-shadow);
    border: var(--p-border);
    gap: 15px;
    transition: transform 0.2s;
    position: relative;
    overflow: hidden;
    font-family: 'Inter', sans-serif;
    width: 100%;
    flex-wrap: nowrap;
}

.goweb-audio-strip:hover,
.audio-strip:hover {
    transform: translateY(-2px);
}

.goweb-img-box,
.audio-strip .img-box {
    width: 48px;
    height: 48px;
    border-radius: 6px;
    overflow: hidden;
    flex-shrink: 0;
    position: relative;
    background: var(--cover-gradient);
}

.goweb-img-box::before,
.audio-strip .img-box::before {
    content: '';
    position: absolute;
    inset: 0;
    background: inherit;
    background-size: cover;
    background-position: center;
    transition: transform 0.3s ease;
}

.goweb-img-box[data-cover]::before,
.audio-strip .img-box[data-cover]::before {
    background-image: var(--goweb-cover-image);
}

.goweb-track-data,
.audio-strip .track-data {
    flex: 1;
    min-width: 100px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.goweb-track-data .title,
.audio-strip .title {
    font-weight: 700;
    font-size: 0.95rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.goweb-track-data .artist,
.audio-strip .artist {
    font-size: 0.75rem;
    color: var(--p-sec);
    margin-top: 2px;
}

.goweb-play-btn,
.audio-strip .play-btn {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.65);
    color: #fff;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    transition: 0.2s;
    position: absolute;
    inset: 50% auto auto 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
}

.goweb-play-btn:hover,
.audio-strip .play-btn:hover {
    transform: translate(-50%, -50%) scale(1.08);
    filter: brightness(1.1);
}

.goweb-play-btn i,
.audio-strip .play-btn i {
    pointer-events: none;
}

.goweb-progress-wrapper,
.audio-strip .progress-wrapper {
    flex: 2;
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 160px;
}

.goweb-time,
.audio-strip .time-txt {
    font-size: 0.7rem;
    opacity: 0.8;
    min-width: 30px;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.goweb-progress-bar,
.audio-strip .seek-slider {
    -webkit-appearance: none;
    width: 100%;
    background: transparent;
    cursor: pointer;
}

.goweb-progress-bar::-webkit-slider-runnable-track,
.audio-strip .seek-slider::-webkit-slider-runnable-track {
    width: 100%;
    height: 4px;
    background: var(--range-track);
    border-radius: 10px;
}

.goweb-progress-bar::-webkit-slider-thumb,
.audio-strip .seek-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    height: 12px;
    width: 12px;
    border-radius: 50%;
    background: var(--p-accent);
    margin-top: -4px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.goweb-progress-bar::-moz-range-track,
.audio-strip .seek-slider::-moz-range-track {
    width: 100%;
    height: 4px;
    background: var(--range-track);
    border-radius: 10px;
}

.goweb-progress-bar::-moz-range-thumb,
.audio-strip .seek-slider::-moz-range-thumb {
    height: 12px;
    width: 12px;
    border-radius: 50%;
    background: var(--p-accent);
    border: none;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.goweb-hidden-audio {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
    padding: 0;
    margin: -1px;
}

.goweb-player-focused .goweb-audio-strip,
.goweb-player-focused .audio-strip {
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.4), var(--p-shadow);
}

/* === Theme Variations === */
.design-1 { --p-bg:#1b1d25; --p-text:#fff; --p-accent:#00b3ff; --p-sec:#9ca3af; --range-track:rgba(255,255,255,0.1); --cover-gradient:linear-gradient(135deg,#1b1d25,#111); }
.design-2 { --p-bg:#000; --p-text:#fff; --p-accent:#1db954; --p-radius:0; --range-track:#333; --cover-gradient:linear-gradient(135deg,#0f0f0f,#222); }
.design-2 .play-btn { background:#fff; color:#000; }
.design-3 { background:rgba(30,30,30,0.6); backdrop-filter:blur(10px); border:1px solid rgba(255,255,255,0.1); --p-text:#fff; --p-accent:#f472b6; --p-sec:#ccc; --range-track:rgba(255,255,255,0.2); --cover-gradient:linear-gradient(135deg,#4b1d60,#1f1f1f); }
.design-4 { --p-bg:#050505; --p-text:#0ff; --p-sec:#0ff; --p-accent:#f0f; --p-radius:0; --range-track:#14213d; --cover-gradient:linear-gradient(135deg,#0ff,#f0f); font-family:'Space Mono',monospace; border:1px solid #0ff; box-shadow:0 0 10px rgba(0,255,255,0.2); }
.design-4 .play-btn { background:transparent; border:1px solid #f0f; color:#f0f; border-radius:0; }
.design-5 { --p-bg:#ffcc00; --p-text:#000; --p-sec:#333; --p-accent:#000; --p-radius:0; border:3px solid #000; box-shadow:4px 4px 0 #000; --range-track:rgba(0,0,0,0.2); --cover-gradient:repeating-linear-gradient(45deg,#000,#000 6px,#ffcc00 6px,#ffcc00 12px); }
.design-6 { background:linear-gradient(45deg,#8e2de2,#4a00e0); --p-text:#fff; --p-sec:#ddd; --p-accent:#00d2ff; --range-track:rgba(255,255,255,0.3); --cover-gradient:linear-gradient(45deg,#00d2ff,#4a00e0); }
.design-7 { --p-bg:#240046; --p-text:#e0aaff; --p-sec:#9d4edd; --p-accent:#ff9e00; --range-track:#3c096c; --cover-gradient:linear-gradient(135deg,#9d4edd,#240046); }
.design-8 { --p-bg:#2d2d2d; --p-text:#ccc; --p-sec:#888; --p-accent:#00fff2; --p-shadow:5px 5px 10px #1f1f1f,-5px -5px 10px #3b3b3b; --cover-gradient:linear-gradient(135deg,#2d2d2d,#1c1c1c); }
.design-9 { background:rgba(28,28,30,0.85); backdrop-filter:blur(20px); --p-text:#fff; --p-accent:#0a84ff; --range-track:#3a3a3c; --cover-gradient:linear-gradient(135deg,#0a84ff,#1c1c1e); }
.design-10 { --p-bg:#141e30; --p-text:#d4af37; --p-sec:#8a7024; --p-accent:#d4af37; border:1px solid #d4af37; --cover-gradient:linear-gradient(135deg,#d4af37,#141e30); }
.design-10 .play-btn { background:transparent; border:1px solid #d4af37; color:#d4af37; }
.design-11 { --p-bg:#ffffff; --p-text:#212121; --p-sec:#757575; --p-accent:#6200ee; --p-shadow:0 2px 8px rgba(0,0,0,0.15); --cover-gradient:linear-gradient(135deg,#6200ee,#bb86fc); }
.design-12 { --p-bg:#fff0f5; --p-text:#5e3a48; --p-sec:#9c7a85; --p-accent:#ff6b99; --p-radius:25px; --range-track:#ebd3db; --cover-gradient:linear-gradient(135deg,#ff6b99,#ffd1e3); }
.design-13 { --p-bg:#eef2f6; --p-text:#1e293b; --p-sec:#64748b; --p-accent:#0f172a; --range-track:#cbd5e1; --cover-gradient:linear-gradient(135deg,#0f172a,#475569); }
.design-13 .play-btn { border-radius:6px; }
.design-14 { --p-bg:#fffdf0; --p-text:#333; --p-sec:#666; --p-accent:#d9534f; --p-radius:0; border:2px dashed #aaa; box-shadow:none; --cover-gradient:repeating-linear-gradient(45deg,#d9534f,#d9534f 6px,#fffdf0 6px,#fffdf0 12px); }
.design-15 { background:linear-gradient(to right,#ffe259,#ffa751); --p-text:#fff; --p-sec:rgba(255,255,255,0.8); --p-accent:#ff4b1f; --range-track:rgba(255,255,255,0.4); --cover-gradient:linear-gradient(135deg,#ff4b1f,#ffa751); }
.design-16 { --p-bg:#e0f7fa; --p-text:#00695c; --p-sec:#4db6ac; --p-accent:#009688; --p-radius:50px; --range-track:#b2dfdb; --cover-gradient:linear-gradient(135deg,#4db6ac,#009688); }
.design-17 { --p-bg:#fff; --p-text:#000; --p-sec:#555; --p-accent:#000; border:2px solid #000; box-shadow:5px 5px 0 #ccc; --cover-gradient:linear-gradient(135deg,#000,#555); }
.design-18 { background:rgba(255,255,255,0.4); backdrop-filter:blur(12px); border:1px solid rgba(255,255,255,0.6); --p-text:#333; --p-accent:#3b82f6; --p-sec:#555; --range-track:rgba(0,0,0,0.05); --cover-gradient:linear-gradient(135deg,#3b82f6,#93c5fd); }
.design-19 { --p-bg:#fdfbf7; --p-text:#4a4036; --p-sec:#8c7b6c; --p-accent:#8c7b6c; --cover-gradient:linear-gradient(135deg,#b79871,#f3d9b1); font-family:'Playfair Display',serif; }
.design-20 { --p-bg:transparent; --p-text:#333; --p-sec:#777; --p-accent:#e11d48; border:1px solid #e11d48; --range-track:#ffccd5; --cover-gradient:linear-gradient(135deg,#e11d48,#ffe1e7); }
.design-20 .play-btn { background:#e11d48; }

@media (max-width: 600px) {
    .goweb-audio-strip,
    .audio-strip {
        flex-wrap: wrap;
        padding: 15px;
        gap: 12px;
    }

    .goweb-progress-wrapper,
    .audio-strip .progress-wrapper {
        width: 100%;
        order: 3;
        margin-top: 5px;
    }

    .goweb-track-data,
    .audio-strip .track-data {
        width: calc(100% - 60px);
    }
}


/* --- GROUP 3: NICHE & ARTISTIC (21-30) --- */
.design-21 { --bg: #001428; --text: #00f3ff; --sub: rgba(0,243,255,0.6); --accent: #00f3ff; --border: 1px solid rgba(0,243,255,0.3); --radius: 0; --font: 'Share Tech Mono', monospace; box-shadow: 0 0 15px rgba(0,243,255,0.15); } .design-21 .play-btn { background: transparent; border: 1px solid #00f3ff; color: #00f3ff; }
.design-22 { --bg: #ffefc1; --text: #5d4037; --sub: #8d6e63; --accent: #ffab91; --radius: 40px; --font: 'Fredoka', sans-serif; box-shadow: inset 6px 6px 12px #e6d7ae, inset -6px -6px 12px #ffffff; } .design-22 .play-btn { box-shadow: 5px 5px 10px rgba(0,0,0,0.15); background: #ff7043; }
.design-23 { --bg: #fff; --text: #000; --sub: #555; --accent: #ffd700; --radius: 0; border: 3px solid #000; box-shadow: 8px 8px 0px #304ffe; } .design-23 .play-btn { background: #ff4081; border: 2px solid #000; color: #fff; } .design-23 input[type=range]::-webkit-slider-thumb { border-radius: 0; border: 2px solid #000; background: #00e676; }
.design-24 { --bg: #f8f8f8; --text: #000; --sub: #555; --accent: #000; --radius: 0; --font: 'Cinzel', serif; border-top: 1px solid #000; border-bottom: 1px solid #000; box-shadow: none; } .design-24 .img-box { filter: grayscale(100%); } .design-24 .play-btn { background: transparent; border: 1px solid #000; color: #000; border-radius: 0; }
.design-25 { --bg: #c0c0c0; --text: #333; --sub: #555; --accent: #b71c1c; --radius: 4px 4px 20px 4px; --font: 'Press Start 2P', cursive; border: 3px solid #888; box-shadow: inset -3px -3px 5px rgba(0,0,0,0.2); } .design-25 .play-btn { background: #222; color: #b71c1c; box-shadow: 0 4px 0 #000; border-radius: 5px; }
.design-26 { background: #f1f8e9; --text: #33691e; --sub: #558b2f; --accent: #7cb342; --radius: 20px; border: 1px solid #dcedc8; } .design-26 .play-btn { background: #558b2f; border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; }
.design-27 { background: repeating-linear-gradient(45deg, #fbc02d, #fbc02d 10px, #f9a825 10px, #f9a825 20px); --text: #000; --sub: #212121; --accent: #212121; --radius: 2px; --font: 'Audiowide', cursive; border: 4px solid #212121; } .design-27 .track-info { background: #fff; padding: 5px; border: 2px solid #000; }
.design-28 { background: #2c3e50; --text: #ecf0f1; --sub: #bdc3c7; --accent: #fff; --radius: 4px; --font: 'Permanent Marker', cursive; border: 6px solid #8e44ad; } .design-28 .play-btn { background: transparent; border: 2px solid #fff; }
.design-29 { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); --text: #fff; --sub: #e0e0e0; --accent: #fff; --radius: 50px 20px 50px 20px; } .design-29 .play-btn { background: rgba(255,255,255,0.2); backdrop-filter: blur(5px); }
.design-30 { background: #5d4037; --text: #d7ccc8; --sub: #a1887f; --accent: #ffab91; --radius: 8px; border: 1px solid #3e2723; box-shadow: inset 0 0 20px #3e2723; } .design-30 .play-btn { background: linear-gradient(to bottom, #8d6e63, #5d4037); border: 1px solid #4e342e; }

/* --- GROUP 4: CREATIVE & OBJECTS (31-40) --- */
.design-31 { background: #f4f1ea; border: 4px solid #1a1a1a; box-shadow: 8px 8px 0 #d93025; } .design-31 .img-box { border-radius: 50%; border: 3px solid #1a1a1a; } .design-31 .play-btn { background: #1a5fb4; color: #fff; border-radius: 0; } .design-31 input[type=range]::-webkit-slider-thumb { background: #d93025; border: 2px solid #000; }
.design-32 { background: #fff; background-image: radial-gradient(circle at 0 50%, transparent 15px, #fff 16px), radial-gradient(circle at 100% 50%, transparent 15px, #fff 16px); padding: 15px 40px; --font: 'Courier Prime', monospace; border-left: 2px dashed #ccc; } .design-32 .img-box { filter: grayscale(1); } .design-32 .play-btn { background: #000; }
.design-33 { background: radial-gradient(#5c4033, #3e2723); border: 4px double #d4af37; color: #ffecb3; --font: 'Rye', serif; box-shadow: inset 0 0 20px #000; } .design-33 .play-btn { background: #d4af37; color: #3e2723; border: 2px solid #3e2723; }
.design-34 { background: #000; color: #fff; border: 2px solid #fff; } .design-34 .title { text-shadow: 2px 0 #ff00c1, -2px 0 #00fff9; } .design-34 .play-btn { background: #fff; color: #000; clip-path: polygon(10% 0, 100% 0%, 90% 100%, 0% 100%); border-radius: 0; }
.design-35 { background: #fff; border: 2px solid #333; border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px; --font: 'Gloria Hallelujah', cursive; box-shadow: 5px 5px 0 rgba(0,0,0,0.1); } .design-35 .play-btn { background: transparent; border: 2px solid #333; }
.design-36 { background: #0c0c0c; color: #0f0; --font: 'VT323', monospace; border: 1px solid #0f0; box-shadow: 0 0 10px rgba(0,255,0,0.2); } .design-36 .artist { color: #0a0; } .design-36 .play-btn { background: #0f0; color: #000; border-radius: 0; }
.design-37 { background: #101010; border: 2px solid #ff0055; box-shadow: 0 0 15px #ff0055; color: #fff; --font: 'Orbitron', sans-serif; } .design-37 .play-btn { color: #ff0055; background: transparent; border: 2px solid #ff0055; text-shadow: 0 0 5px #fff; }
.goweb-audio-strip.design-38,
.audio-strip.design-38 { background: #f2f2f2; border-top: 10px solid #333; border-bottom: 10px solid #333; border-radius: 4px; justify-content: space-between; } .design-38 .img-box { display: none; } .design-38 .track-info { background: #fff; padding: 5px 15px; border: 1px solid #ccc; transform: rotate(-1deg); width: 100%; font-weight: bold; font-family: 'Permanent Marker', cursive; color: #000; } .design-38 .play-btn { color: #333; background: transparent; }
.design-39 { background: #e6e6e6; border: 2px solid #fff; border-right-color: #888; border-bottom-color: #888; --radius: 0; } .design-39 .img-box { border: 2px solid #888; border-right-color: #fff; border-bottom-color: #fff; } .design-39 .play-btn { background: #c0c0c0; border: 2px solid #fff; border-right-color: #444; border-bottom-color: #444; color: #000; }
.design-40 { background: #fdfbf7; background-image: linear-gradient(45deg, #fdfbf7 25%, #f5f5f5 25%, #f5f5f5 50%, #fdfbf7 50%, #fdfbf7 75%, #f5f5f5 75%, #f5f5f5 100%); background-size: 40px 40px; color: #1c1c1c; border-radius: 50px; --font: 'Abril Fatface', cursive; border: 1px solid #eee; } .design-40 .play-btn { background: #1c1c1c; color: #d4af37; } .design-40 .artist { font-family: 'Poppins', sans-serif; }