:root {
    --accent-blue: #F96918;
    --accent-hover: #FFB800;
    --bonus-yellow: #fbbf24;
    --success-green: #10b981;
}

.shop-section {padding: calc(var(--header-height) + 50px) 5% 50px;position: relative;z-index: 5;flex: 1;max-width: 1400px;margin: 0 auto;width: 100%;}
.section-title {font-size: 36px;font-weight: 800;text-transform: uppercase;margin-bottom: 40px;text-align: center;font-style: italic;}
.section-title span { color: var(--accent-blue); }

.balance-card {background: var(--card-bg);border: 1px solid rgba(255, 255, 255, 0.05);border-radius: 12px;padding: 30px;margin-bottom: 50px;display: flex;justify-content: space-between;align-items: center;flex-wrap: wrap;gap: 20px;backdrop-filter: blur(10px);}
.balance-info h3 {font-size: 14px;text-transform: uppercase;color: var(--text-gray);margin-bottom: 5px;}
.balance-amount {font-size: 32px;font-weight: 900;color: white;}
.balance-amount span { color: var(--accent-blue); }

.top-up-form {display: flex;gap: 15px;flex-wrap: wrap;}
.amount-input {background: rgba(0, 0, 0, 0.3);border: 1px solid rgba(255, 255, 255, 0.1);padding: 15px 20px;border-radius: 6px;color: white;font-family: inherit;font-weight: 600;width: 200px;outline: none;}
.amount-input:focus { border-color: var(--accent-blue); }
.btn-top-up {background: var(--accent-blue);color: white;border: none;padding: 15px 30px;border-radius: 6px;font-weight: 800;text-transform: uppercase;cursor: pointer;transition: 0.3s;}
.btn-top-up:hover {background: var(--accent-hover);box-shadow: 0 0 20px rgba(249, 105, 24, 0.4);}

.shop-grid {display: grid;grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));gap: 30px;}
.shop-item {background: var(--card-bg);border: 1px solid rgba(255, 255, 255, 0.05);border-radius: 12px;padding: 25px;transition: 0.3s;position: relative;overflow: hidden;display: flex;flex-direction: column;backdrop-filter: blur(5px);}
.shop-item:hover {transform: translateY(-5px);border-color: var(--accent-blue);box-shadow: 0 10px 30px rgba(0,0,0,0.3);}
.item-icon {font-size: 32px;color: var(--accent-blue);margin-bottom: 20px;}
.item-name {font-size: 18px;font-weight: 800;text-transform: uppercase;margin-bottom: 10px;}
.item-desc {font-size: 13px;color: var(--text-gray);margin-bottom: 20px;line-height: 1.5;flex-grow: 1;}
.item-price {font-size: 20px;font-weight: 700;color: white;margin-bottom: 15px;}

.btn-buy {width: 100%;padding: 12px;background: rgba(255, 255, 255, 0.05);border: 1px solid rgba(255, 255, 255, 0.1);color: white;font-weight: 700;text-transform: uppercase;border-radius: 6px;cursor: pointer;transition: 0.3s;border: none;}
.btn-buy:hover {background: var(--accent-blue);border-color: var(--accent-blue);}

.login-placeholder {text-align: center;padding: 60px 20px;background: var(--card-bg);border-radius: 12px;border: 1px solid rgba(255,255,255,0.05);}
.login-placeholder p {font-size: 16px;color: var(--text-gray);margin-bottom: 20px;}

.coin-icon {
    width: 24px;
    height: 24px;
    vertical-align: middle;
    margin-left: 4px;
    display: inline-block;
    position: relative;
    top: -2px;
}

.coin-icon-sm {
    width: 18px;
    height: 18px;
    vertical-align: middle;
    margin-left: 3px;
    display: inline-block;
    position: relative;
    top: -1.5px;
}

.coin-icon-lg {
    width: 32px;
    height: 32px;
    vertical-align: middle;
    margin-left: 6px;
    display: inline-block;
    position: relative;
    top: -3px;
}

#toast-container {
    position: fixed;
    top: 30px;
    right: 30px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 15px;
            pointer-events: none;
        }
        .toast {
            background: rgba(20, 20, 25, 0.85);
            backdrop-filter: blur(15px);
            -webkit-backdrop-filter: blur(15px);
            border-radius: 10px;
            padding: 18px 25px;
            min-width: 320px;
            max-width: 450px;
            display: flex;
            align-items: center;
            gap: 15px;
            color: #fff;
            font-weight: 600;
            font-size: 14px;
            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4);
            transform: translateX(120%);
            transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55), opacity 0.3s;
            pointer-events: auto;
            border-left: 5px solid var(--accent-blue);
        }
        .toast.show { transform: translateX(0); }
        .toast.success {
            border-left-color: var(--success-green);
            box-shadow: 0 0 25px rgba(16, 185, 129, 0.15), 0 15px 35px rgba(0, 0, 0, 0.4);
        }
        .toast.error {
            border-left-color: var(--danger);
            box-shadow: 0 0 25px rgba(239, 68, 108, 0.15), 0 15px 35px rgba(0, 0, 0, 0.4);
        }
        .toast i { font-size: 20px; }
        .toast.success i { color: var(--success-green); }
        .toast.error i { color: var(--danger); }
        .toast-content { flex-grow: 1; line-height: 1.4; }
        .toast-close { color: var(--text-gray); cursor: pointer; transition: 0.2s; font-size: 16px; }
        .toast-close:hover { color: #fff; }

        .modal-overlay {
            position: fixed;
            top: 0; left: 0; width: 100%; height: 100%;
            background: rgba(5, 5, 7, 0.8);
            backdrop-filter: blur(8px);
            z-index: 10000;
            display: flex;
            justify-content: center;
            align-items: center;
            opacity: 0;
            visibility: hidden;
            transition: 0.3s ease;
        }
        .modal-overlay.active {
            opacity: 1;
            visibility: visible;
        }
        .modal-card {
            background: #0f0f14;
            border: 1px solid rgba(255, 255, 255, 0.08);
            border-radius: 16px;
            padding: 35px;
            max-width: 420px;
            width: 90%;
            text-align: center;
            box-shadow: 0 20px 50px rgba(0,0,0,0.6);
            transform: scale(0.8);
            transition: 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
        }
        .modal-overlay.active .modal-card {
            transform: scale(1);
        }
        .modal-icon {
            font-size: 45px;
            color: var(--bonus-yellow);
            margin-bottom: 20px;
        }
        .modal-title {
            font-size: 20px;
            font-weight: 800;
            text-transform: uppercase;
            margin-bottom: 12px;
        }
        .modal-text {
            font-size: 14px;
            color: var(--text-gray);
            line-height: 1.6;
            margin-bottom: 25px;
        }
        .modal-text span {
            color: white;
            font-weight: 700;
        }
        .modal-buttons {
            display: flex;
            gap: 15px;
        }
        .btn-modal-confirm {
            flex: 1;
            padding: 14px;
            background: var(--accent-blue);
            color: white;
            border: none;
            border-radius: 6px;
            font-weight: 700;
            text-transform: uppercase;
            cursor: pointer;
            transition: 0.3s;
        }
        .btn-modal-confirm:hover { background: var(--accent-hover); }
        .btn-modal-cancel {
            flex: 1;
            padding: 14px;
            background: rgba(255, 255, 255, 0.05);
            color: var(--text-gray);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 6px;
            font-weight: 700;
            text-transform: uppercase;
            cursor: pointer;
            transition: 0.3s;
        }
        .btn-modal-cancel:hover { background: rgba(255, 255, 255, 0.1); color: white; }

        .modal-input {
            width: 100%;
            background: rgba(0, 0, 0, 0.4);
            border: 1px solid rgba(255, 255, 255, 0.1);
            padding: 12px 15px;
            border-radius: 6px;
            color: white;
            font-family: inherit;
            font-weight: 600;
            margin-bottom: 20px;
            outline: none;
            text-align: center;
        }
        .modal-input:focus {
            border-color: var(--accent-blue);
        }

        @media (max-width: 576px) {
            #toast-container { top: auto; bottom: 20px; left: 15px; right: 15px; }
            .toast { min-width: 100%; }
        }

.topup-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.topup-step { background: rgba(255,255,255,.03); border: 1px solid var(--card-border); border-radius: 10px; padding: 18px; }
.topup-step-num { width: 26px; height: 26px; border-radius: 50%; background: linear-gradient(135deg, var(--accent-blue), var(--accent-hover)); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 12px; color: #fff; margin-bottom: 12px; }
.topup-step-body label { display: block; font-size: 11px; text-transform: uppercase; font-weight: 700; color: var(--text-gray); margin-bottom: 8px; letter-spacing: .4px; }
.topup-step-body select { width: 100%; padding: 11px 14px; background: rgba(0,0,0,.3); border: 1px solid var(--card-border); border-radius: 6px; color: #fff; font-family: inherit; }
.topup-step-hint { font-size: 12px; color: var(--text-gray); line-height: 1.5; margin-bottom: 12px; }

.topup-status { display: flex; gap: 14px; align-items: flex-start; padding: 16px 18px; border-radius: 10px; font-size: 13px; }
.topup-status i { font-size: 20px; margin-top: 2px; }
.topup-status-pending { background: rgba(245,158,11,.1); border: 1px solid rgba(245,158,11,.3); color: #fbbf24; }
.topup-status-rejected { background: rgba(239,68,68,.1); border: 1px solid rgba(239,68,68,.3); color: #ef4444; }
.topup-status div div { color: var(--text-gray); margin-top: 4px; font-weight: 400; }

@media (max-width: 900px) {
    .topup-steps { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 576px) {
    .topup-steps { grid-template-columns: 1fr; }
}

.shop-item-set { text-align: center; }
.set-img { width: 100%; max-width: 160px; height: 130px; object-fit: contain; margin: 0 auto 18px; filter: grayscale(1) brightness(.65); transition: filter .35s ease, transform .35s ease; }
.shop-item-set:hover .set-img { filter: grayscale(0) brightness(1) saturate(1.3); transform: scale(1.05); }

.btn-pay-method { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 14px; border-radius: 8px; font-weight: 800; text-transform: uppercase; font-size: 13px; transition: .25s; }
.btn-pay-mono { background: linear-gradient(90deg, #000000, #2b2b2b); color: #fff; border: 1px solid #333; }
.btn-pay-mono:hover { box-shadow: 0 8px 22px rgba(0,0,0,.4); transform: translateY(-2px); }
.btn-pay-boosty { background: linear-gradient(90deg, #f15f2c, #f4a11e); color: #fff; }
.btn-pay-boosty:hover { box-shadow: 0 8px 22px rgba(241,95,44,.4); transform: translateY(-2px); }