:root {
            --bg: #0f1115;
            --bg-soft: #161a20;
            --card: #1c2128;
            --border: rgba(255, 255, 255, .06);
            --text: #e6edf3;
            --text-dim: #9aa4af;

            --blue: #3b82f6;
            --green: #22c55e;
            --red: #ef4444;
            --orange: #f97316;
            --yellow: #facc15;

            --radius: 16px;
            --radius-sm: 10px;

            --transition: .25s cubic-bezier(.4, 0, .2, 1);
        }

        * {
            box-sizing: border-box;
        }

        body {
            margin: 0;
            background: radial-gradient(circle at top, #151922, #0f1115 60%);
            color: var(--text);
            font-family: Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto;
            -webkit-font-smoothing: antialiased;
            padding-bottom: 80px;
        }


        .navbar {
            position: sticky;
            top: 0;
            z-index: 1000;

            background: rgba(20, 23, 28, .75);
            backdrop-filter: blur(14px);

            border-bottom: 1px solid var(--border);
        }

        .navbar-brand {
            font-weight: 700;
            letter-spacing: .3px;
        }


        .deal-card {

            position: relative;

            background: linear-gradient(160deg,
                    rgba(255, 255, 255, .04),
                    rgba(255, 255, 255, .01));

            border: 1px solid var(--border);

            border-radius: var(--radius);

            overflow: hidden;

            display: flex;
            flex-direction: column;

            transition: var(--transition);

            box-shadow:
                0 10px 30px rgba(0, 0, 0, .45);
        }


        .deal-card::before {

            content: "";

            position: absolute;
            inset: -1px;

            background:
                linear-gradient(120deg,
                    transparent 30%,
                    rgba(255, 255, 255, .08),
                    transparent 70%);

            opacity: 0;

            transition: var(--transition);

            pointer-events: none;
        }

        .deal-card:hover::before {
            opacity: 1;
        }


        .deal-card:hover {

            transform: translateY(-8px) scale(1.02);

            box-shadow:
                0 20px 50px rgba(0, 0, 0, .6);
        }


        .deal-img-container {

            position: relative;
            padding-top: 100%;
            overflow: hidden;

            background: #111;
        }

        .deal-img {

            position: absolute;
            top: 0;
            left: 0;

            width: 100%;
            height: 100%;

            object-fit: cover;

            transition: transform .6s ease;
        }

        .deal-card:hover .deal-img {
            transform: scale(1.12);
        }


        .deal-img-container::after {

            content: "";

            position: absolute;
            inset: 0;

            background: linear-gradient(to top,
                    rgba(0, 0, 0, .65),
                    transparent 60%);
        }


        .ribbon {

            position: absolute;
            top: 12px;
            left: -40px;

            background: linear-gradient(90deg, var(--red), var(--orange));

            color: white;

            font-size: 11px;
            font-weight: 700;

            padding: 6px 40px;

            transform: rotate(-45deg);

            box-shadow: 0 6px 12px rgba(0, 0, 0, .4);
        }


        .deal-content {

            padding: 12px;

            display: flex;
            flex-direction: column;
            gap: 8px;

            flex-grow: 1;
        }

        .deal-title {

            font-size: .9rem;
            font-weight: 600;

            line-height: 1.35;

            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

        .badge-soft,
        .badge-green,
        .badge-red,
        .badge-yellow {

            font-size: .7rem;
            font-weight: 600;

            padding: 4px 8px;

            border-radius: 999px;

            backdrop-filter: blur(6px);
        }

        .badge-soft {
            background: rgba(59, 130, 246, .15);
            color: #93c5fd;
        }

        .badge-green {
            background: rgba(34, 197, 94, .18);
            color: #86efac;
        }

        .badge-red {
            background: rgba(239, 68, 68, .18);
            color: #fca5a5;
        }

        .badge-yellow {
            background: rgba(250, 204, 21, .2);
            color: #fde68a;
        }

        .deal-price {

            display: flex;
            align-items: end;
            gap: 6px;
        }

        .current-price {

            font-size: 1.3rem;
            font-weight: 800;

            color: var(--green);

            text-shadow:
                0 0 10px rgba(34, 197, 94, .4);
        }

        .original-price {

            font-size: .8rem;
            color: var(--text-dim);

            text-decoration: line-through;
        }


        .progress-bar-container {

            height: 14px;

            border-radius: 999px;

            overflow: hidden;

            background: #111;

            border: 1px solid var(--border);

            position: relative;
        }

        .progress-bar-fill {

            height: 100%;

            background:
                linear-gradient(90deg,
                    var(--yellow),
                    var(--orange),
                    var(--red));

            box-shadow:
                0 0 10px rgba(249, 115, 22, .6);
        }

        .progress-text {

            position: absolute;
            inset: 0;

            display: flex;
            align-items: center;
            justify-content: center;

            font-size: 10px;
            font-weight: 700;

            color: white;

            text-shadow: 0 0 4px black;
        }

        .deal-actions {

            display: flex;
            gap: 6px;
            margin-top: auto;
        }

        .btn-action {

            flex: 1;

            font-size: .8rem;
            font-weight: 600;

            border-radius: 10px;

            padding: 7px;

            cursor: pointer;

            transition: var(--transition);
        }

        .btn-buy {

            background:
                linear-gradient(135deg,
                    #3b82f6,
                    #2563eb);

            color: white;

            box-shadow:
                0 6px 14px rgba(59, 130, 246, .35);
        }

        .btn-buy:hover {

            transform: translateY(-2px);

            box-shadow:
                0 10px 25px rgba(59, 130, 246, .6);
        }


        .btn-fav,
        .btn-hide {

            background: transparent;

            border: 1px solid var(--border);

            color: var(--text-dim);
        }

        .btn-fav:hover,
        .btn-hide:hover {

            color: white;

            border-color: white;
        }

        .fab {

            width: 56px;
            height: 56px;

            border-radius: 50%;

            display: flex;
            align-items: center;
            justify-content: center;

            background: linear-gradient(135deg,
                    #3b82f6,
                    #6366f1);

            color: white;

            box-shadow:
                0 15px 40px rgba(0, 0, 0, .5);

            transition: var(--transition);
        }

        .fab:hover {
            transform: scale(1.08);
        }



        .bottom-nav {

            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;

            background: rgba(20, 23, 28, .85);

            backdrop-filter: blur(16px);

            border-top: 1px solid var(--border);

            display: flex;
            justify-content: space-around;

            padding: 8px 0;
        }

        .bottom-nav-item {

            display: flex;
            flex-direction: column;

            align-items: center;

            font-size: 11px;

            color: var(--text-dim);

            transition: var(--transition);
        }

        .bottom-nav-item.active {

            color: var(--blue);
        }

        .skeleton {

            background:
                linear-gradient(90deg,
                    #1c2128 25%,
                    #2b313a 50%,
                    #1c2128 75%);

            background-size: 200% 100%;

            animation: loading 1.5s infinite;
        }

        .icon {
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 16px;
            color: #00aaff;
        }

        .icon img {
            width: 18px;
            height: 18px;
            object-fit: contain;
            display: block;
            border-radius: 4px;
        }

        .millis {
            font-variant-numeric: tabular-nums;
            font-feature-settings: "tnum";
        }

        @keyframes loading {

            0% {
                background-position: 200% 0;
            }

            100% {
                background-position: -200% 0;
            }

        }

        @media(max-width:768px) {

            .deal-title {
                font-size: .85rem;
            }

            .current-price {
                font-size: 1.1rem;
            }

        }

        .select2-container--default .select2-selection--single {
            border: 1px solid var(--border-color);
            border-radius: 999px;
            transition: all var(--transition-speed) ease;
            background: transparent;
            color: var(--secondary-text);
            font-size: 0.9rem;
        }

        .select2-dropdown {
            border: 1px solid #717171;
            background: #1f1f1f;
            color: #aaa;
        }

        .select2-container--default .select2-results__option--selected {
            background-color: #717171;
        }

        .select2-search--dropdown .select2-search__field {
            background: #717171;
        }

        .select2-container--default .select2-search--dropdown .select2-search__field {
            border: 1px solid #717171;
            border-radius: 8px;
        }