* {
            font-family: 'Vazirmatn', Tahoma, Arial, sans-serif;
        }

        :root {
            --soull-bg: #f6f7fb;
            --soull-card: #ffffff;
            --soull-card-soft: #f8fafc;
            --soull-border: #e2e8f0;
            --soull-text: #0f172a;
            --soull-muted: #64748b;
            --soull-primary: #2563eb;
            --soull-player: #020617;
        }

        html.dark {
            --soull-bg: #050816;
            --soull-card: #0f172a;
            --soull-card-soft: #111827;
            --soull-border: #1e293b;
            --soull-text: #ffffff;
            --soull-muted: #94a3b8;
            --soull-primary: #60a5fa;
            --soull-player: #020617;
        }

        html,
        body {
            margin: 0;
            min-height: 100%;
            background: var(--soull-bg);
            color: var(--soull-text);
        }
                :root{
            --soull-nebula-1: #7C3AED;
            --soull-nebula-2: #22D3EE;
            --soull-nebula-3: #F472B6;
            --soull-void: #05060f;
            --soull-void-2: #0b0d1f;
        }

        @keyframes soullAurora {
            0%   { transform: translate3d(-8%, -6%, 0) rotate(0deg) scale(1); }
            50%  { transform: translate3d(6%, 8%, 0) rotate(180deg) scale(1.15); }
            100% { transform: translate3d(-8%, -6%, 0) rotate(360deg) scale(1); }
        }

        @keyframes soullOrbit {
            from { transform: rotate(0deg); }
            to   { transform: rotate(360deg); }
        }

        @keyframes soullPulseGlow {
            0%, 100% { box-shadow: 0 0 18px 2px rgba(124, 58, 237, .55), 0 0 40px 8px rgba(34, 211, 238, .25); }
            50%      { box-shadow: 0 0 28px 6px rgba(244, 114, 182, .6), 0 0 60px 14px rgba(124, 58, 237, .35); }
        }

        @keyframes soullScan {
            0%   { transform: translateX(-120%); }
            100% { transform: translateX(220%); }
        }

        @keyframes soullFloat {
            0%, 100% { transform: translateY(0); }
            50%      { transform: translateY(-3px); }
        }

        @keyframes soullBar {
            0%, 100% { transform: scaleY(.25); }
            50%      { transform: scaleY(1); }
        }

        @keyframes soullTwinkle {
            0%, 100% { opacity: .15; }
            50%      { opacity: .9; }
        }

        .soull-player-shell{
            background: transparent;
        }

        .soull-player-fieldwrap{
            position: relative;
            isolation: isolate;
        }

        .soull-player-inner{
            position: relative;
            overflow: hidden;
            background: linear-gradient(180deg, rgba(10,11,26,.92), rgba(4,5,15,.97));
            border: 1px solid rgba(124, 58, 237, .35);
            backdrop-filter: blur(18px);
        }

        .soull-player-aurora{
            position: absolute;
            inset: -60% -20%;
            z-index: 0;
            pointer-events: none;
            background:
                radial-gradient(circle at 30% 30%, rgba(124,58,237,.35), transparent 45%),
                radial-gradient(circle at 70% 60%, rgba(34,211,238,.28), transparent 50%),
                radial-gradient(circle at 50% 90%, rgba(244,114,182,.25), transparent 55%);
            filter: blur(30px);
            animation: soullAurora 16s ease-in-out infinite;
            opacity: .55;
        }

        .soull-player-stars{
            position: absolute;
            inset: 0;
            z-index: 0;
            pointer-events: none;
            background-image:
                radial-gradient(1px 1px at 10% 20%, #fff, transparent 60%),
                radial-gradient(1px 1px at 80% 30%, #fff, transparent 60%),
                radial-gradient(1px 1px at 40% 70%, #fff, transparent 60%),
                radial-gradient(1.5px 1.5px at 60% 15%, #fff, transparent 60%),
                radial-gradient(1px 1px at 90% 80%, #fff, transparent 60%),
                radial-gradient(1px 1px at 20% 85%, #fff, transparent 60%);
            opacity: .4;
        }
        .soull-player-stars span{
            position: absolute;
            border-radius: 999px;
            background: #fff;
            animation: soullTwinkle 3s ease-in-out infinite;
        }

        .soull-player-scanline{
            position: absolute;
            top: 0; bottom: 0; left: 0;
            width: 35%;
            z-index: 1;
            pointer-events: none;
            background: linear-gradient(100deg, transparent, rgba(255,255,255,.06), transparent);
            animation: soullScan 6s linear infinite;
        }


        .soull-player-cover-wrap{
            position: relative;
            width: 72px;
            height: 72px;
        }
        .soull-cover-ring{
            position: absolute;
            inset: -7px;
            border-radius: 1.9rem;
            background: conic-gradient(from 0deg, var(--soull-nebula-1), var(--soull-nebula-2), var(--soull-nebula-3), var(--soull-nebula-1));
            animation: soullOrbit 5s linear infinite;
            opacity: .9;
        }
        .soull-cover-ring::after{
            content:'';
            position: absolute;
            inset: 3px;
            border-radius: 1.6rem;
            background: var(--soull-void-2);
        }
        #soull-player-cover{
            position: relative;
            z-index: 2;
            animation: soullFloat 3.2s ease-in-out infinite;
            box-shadow: 0 0 0 1px rgba(255,255,255,.06) inset;
        }
        #soull-player-cover.playing{
            animation: soullFloat 3.2s ease-in-out infinite, soullPulseGlow 2.4s ease-in-out infinite;
        }


        .soull-eq span{
            width: 3px;
            border-radius: 3px;
            background: linear-gradient(180deg, var(--soull-nebula-2), var(--soull-nebula-1));
            height: 100%;
            transform-origin: bottom;
            transform: scaleY(.25);
            box-shadow: 0 0 6px rgba(34,211,238,.7);
        }
        .soull-eq.playing span{ animation: soullBar 1s ease-in-out infinite; }
        .soull-eq.playing span:nth-child(2){ animation-delay: .15s; }
        .soull-eq.playing span:nth-child(3){ animation-delay: .3s; }
        .soull-eq.playing span:nth-child(4){ animation-delay: .45s; }

        /* --- transport buttons --- */
        .soull-icon-btn{
            border-radius: 999px;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
        }
        .soull-icon-btn:hover{ transform: translateY(-2px) scale(1.05); }

        .soull-big-play{
            background: linear-gradient(135deg, var(--soull-nebula-2), var(--soull-nebula-1) 60%, var(--soull-nebula-3));
            box-shadow: 0 0 18px 2px rgba(124,58,237,.55), 0 0 40px 8px rgba(34,211,238,.25);
        }
        .soull-big-play:hover{
            box-shadow: 0 0 26px 4px rgba(244,114,182,.65), 0 0 55px 12px rgba(34,211,238,.35);
        }


        .soull-player-range{
            -webkit-appearance: none;
            appearance: none;
            height: 6px;
            border-radius: 999px;
            background:
                linear-gradient(90deg, var(--soull-nebula-2), var(--soull-nebula-1), var(--soull-nebula-3)) 0 / var(--soull-progress-value, 0%) 100% no-repeat,
                rgba(255,255,255,.12);
            outline: none;
            cursor: pointer;
        }
        .soull-player-range::-webkit-slider-thumb{
            -webkit-appearance: none;
            appearance: none;
            width: 14px; height: 14px;
            border-radius: 999px;
            background: #fff;
            box-shadow: 0 0 0 3px rgba(124,58,237,.55), 0 0 12px rgba(34,211,238,.8);
            border: none;
            cursor: pointer;
        }
        .soull-player-range::-moz-range-thumb{
            width: 14px; height: 14px;
            border-radius: 999px;
            background: #fff;
            box-shadow: 0 0 0 3px rgba(124,58,237,.55), 0 0 12px rgba(34,211,238,.8);
            border: none;
            cursor: pointer;
        }
        .soull-player-range::-moz-range-progress{
            height: 6px;
            border-radius: 999px;
            background: linear-gradient(90deg, var(--soull-nebula-2), var(--soull-nebula-1), var(--soull-nebula-3));
        }

        .soull-player-badge{
            position: relative;
            z-index: 2;
            background: linear-gradient(90deg, rgba(124,58,237,.25), rgba(34,211,238,.2));
            border: 1px solid rgba(255,255,255,.12);
        }

        body {
            background:
                radial-gradient(circle at top right, rgba(37, 99, 235, .22), transparent 28%),
                radial-gradient(circle at top left, rgba(236, 72, 153, .14), transparent 26%),
                linear-gradient(180deg, var(--soull-bg), var(--soull-bg));
            padding-bottom: 105px;
        }

        .soull-glass {
            background: color-mix(in srgb, var(--soull-card) 82%, transparent);
            backdrop-filter: blur(22px);
            border-color: var(--soull-border);
        }

        .soull-card {
            background: var(--soull-card);
            border-color: var(--soull-border);
            color: var(--soull-text);
        }

        .soull-soft {
            background: var(--soull-card-soft);
        }

        .soull-muted {
            color: var(--soull-muted);
        }

        .soull-border {
            border-color: var(--soull-border);
        }

        a {
            color: inherit;
            text-decoration: none;
        }

        input,
        textarea,
        select {
            background: var(--soull-card);
            color: var(--soull-text);
            border-color: var(--soull-border);
        }

        input::placeholder,
        textarea::placeholder {
            color: var(--soull-muted);
        }

        .soull-scroll::-webkit-scrollbar {
            height: 8px;
            width: 8px;
        }

        .soull-scroll::-webkit-scrollbar-thumb {
            background: rgba(148, 163, 184, .35);
            border-radius: 999px;
        }

        .soull-song-card {
            min-width: 0;
            transition: .22s ease;
        }

        .soull-song-card:hover {
            transform: translateY(-5px);
        }

        .soull-song-card img {
            background: #111827;
        }

        .soull-tabs {
            scrollbar-width: none;
        }

        .soull-tabs::-webkit-scrollbar {
            display: none;
        }

        .soull-tab-btn {
            flex-shrink: 0;
            padding: 13px 22px;
            border-radius: 999px;
            background: var(--soull-card);
            border: 1px solid var(--soull-border);
            color: var(--soull-text);
            font-weight: 900;
            transition: .2s ease;
        }

        .soull-tab-btn:hover {
            transform: translateY(-2px);
            border-color: rgba(37, 99, 235, .5);
        }

        .soull-tab-btn.active {
            background: linear-gradient(135deg, #2563eb, #7c3aed);
            color: #ffffff;
            border-color: transparent;
            box-shadow: 0 16px 35px rgba(37, 99, 235, .28);
        }

        .soull-section-card {
            background: var(--soull-card);
            border: 1px solid var(--soull-border);
            border-radius: 2rem;
        }

        .soull-hover-up {
            transition: .22s ease;
        }

        .soull-hover-up:hover {
            transform: translateY(-5px);
        }

        #soull-player {
            background: var(--soull-player);
            color: #ffffff;
        }

        .soull-player-range {
            accent-color: #ffffff;
        }

        .soull-swal-popup {
            background: var(--soull-card) !important;
            color: var(--soull-text) !important;
            border-radius: 2rem !important;
            border: 1px solid var(--soull-border) !important;
            font-family: 'Vazirmatn', Tahoma, Arial, sans-serif !important;
        }

        .soull-swal-title {
            color: var(--soull-text) !important;
            font-weight: 900 !important;
        }

        .soull-swal-html {
            color: var(--soull-muted) !important;
            font-weight: 700 !important;
        }

        .soull-swal-button {
            border-radius: 1rem !important;
            font-weight: 900 !important;
            padding: .75rem 2rem !important;
            background: #2563eb !important;
            box-shadow: none !important;
        }


        /* Soull Premium Player */
        body {
            padding-bottom: 132px;
        }

        .soull-player-shell {
            background:
                radial-gradient(circle at 8% 0%, rgba(59, 130, 246, .38), transparent 34%),
                radial-gradient(circle at 92% 0%, rgba(217, 70, 239, .30), transparent 34%),
                linear-gradient(135deg, rgba(2, 6, 23, .96), rgba(15, 23, 42, .94));
            color: #fff;
            box-shadow: 0 -24px 80px rgba(2, 6, 23, .45);
        }

        .soull-player-inner {
            border: 1px solid rgba(255, 255, 255, .10);
            background: rgba(255, 255, 255, .055);
            backdrop-filter: blur(26px);
        }

        .soull-player-cover-wrap {
            position: relative;
        }

        .soull-player-cover-wrap::after {
            content: '';
            position: absolute;
            inset: -7px;
            border-radius: 28px;
            background: linear-gradient(135deg, rgba(59, 130, 246, .7), rgba(217, 70, 239, .5));
            filter: blur(14px);
            opacity: .55;
            z-index: -1;
        }

        #soull-player-cover.playing {
            animation: soullCoverPulse 2.2s ease-in-out infinite;
        }

        @keyframes soullCoverPulse {
            0%, 100% { transform: scale(1); }
            50% { transform: scale(1.045); }
        }

        .soull-icon-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 999px;
            transition: .2s ease;
        }

        .soull-icon-btn:hover {
            transform: translateY(-2px) scale(1.04);
        }

        .soull-big-play {
            background: linear-gradient(135deg, #ffffff, #dbeafe);
            box-shadow: 0 18px 40px rgba(59, 130, 246, .32);
        }

        .soull-player-range {
            appearance: none;
            height: 6px;
            border-radius: 999px;
            background: linear-gradient(to left, #60a5fa 0%, #a855f7 var(--soull-progress-value, 0%), rgba(255,255,255,.18) var(--soull-progress-value, 0%), rgba(255,255,255,.18) 100%);
            cursor: pointer;
            outline: none;
        }

        .soull-player-range::-webkit-slider-thumb {
            appearance: none;
            width: 16px;
            height: 16px;
            border-radius: 999px;
            background: #fff;
            box-shadow: 0 0 0 5px rgba(96, 165, 250, .18);
        }

        .soull-player-range::-moz-range-thumb {
            width: 16px;
            height: 16px;
            border: 0;
            border-radius: 999px;
            background: #fff;
            box-shadow: 0 0 0 5px rgba(96, 165, 250, .18);
        }

        .soull-eq span {
            display: block;
            width: 4px;
            height: 13px;
            border-radius: 999px;
            background: linear-gradient(180deg, #60a5fa, #d946ef);
            animation: soullEq 1s ease-in-out infinite;
            animation-play-state: paused;
        }

        .soull-eq.playing span {
            animation-play-state: running;
        }
        .dark .download-128 {
    background: #ffffff !important;
    color: #0f172a !important;
}
        .dark .textwh {
    background: #ffffff !important;
    color: #0f172a !important;
}

        .soull-eq span:nth-child(2) { animation-delay: .16s; height: 20px; }
        .soull-eq span:nth-child(3) { animation-delay: .32s; height: 15px; }
        .soull-eq span:nth-child(4) { animation-delay: .48s; height: 24px; }

        @keyframes soullEq {
            0%, 100% { transform: scaleY(.45); opacity: .55; }
            50% { transform: scaleY(1); opacity: 1; }
        }

        @media (max-width: 767px) {
            body {
                padding-bottom: 155px;
            }

            nav.fixed.bottom-\[88px\] {
                bottom: 118px;
            }
        }