.navbar .navbar-wrapper .nav-brand {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
}

.main {
    overflow-x: clip;
    overflow-y: visible;
    max-width: 100%;
}

.main > .mainslide > .container {
    position: relative;
}

input[type="range"] {
    accent-color: #5eead4;
}

.main > .mainslide.header {
    position: relative;
    color: #fff;
    overflow: hidden;
}

.main > .mainslide.header > .container {
    min-height: clamp(440px, calc(82vh - 70px), 640px);
    display: grid;
    align-content: center;
    padding-top: 54px;
    padding-bottom: 46px;
}

.main > .mainslide.header .hero-logo {
    display: block;
    width: clamp(150px, 15vw, 230px);
    height: clamp(150px, 15vw, 230px);
    margin: 0 auto 26px;
    object-fit: contain;
    filter: drop-shadow(0 18px 34px rgba(0, 0, 0, 0.42));
}

.main > .mainslide.header .hero-shell {
    display: grid;
    grid-template-columns: minmax(190px, 0.78fr) minmax(260px, 360px) minmax(190px, 0.78fr);
    gap: 18px;
    align-items: stretch;
    width: min(980px, 100%);
    margin: 0 auto;
}

.main > .mainslide.header .block-middle {
    display: grid;
    place-items: stretch;
    min-height: 0;
    width: 100%;
}

.main > .mainslide.header .text {
    display: grid;
    width: 100%;
}

.main > .mainslide.header .description {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 168px;
    margin: 0;
    padding: 20px;
    border-width: 1px;
    border: 1px solid rgba(255, 255, 255, 0.11);
    border-radius: 18px;
    background: rgba(15, 23, 42, 0.5);
    box-shadow: 0 18px 58px rgba(0, 0, 0, 0.24);
    color: #dbeafe;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.25;
    text-align: center;
    white-space: normal;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    transition: transform 180ms ease, border-color 180ms ease, background 180ms ease;
}

.main > .mainslide.header .description:hover {
    border-color: rgba(125, 211, 252, 0.34);
    background: rgba(15, 23, 42, 0.68);
    transform: translateY(-3px);
}

.main > .mainslide.header .description .promo-label {
    color: #94a3b8;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0;
    text-transform: uppercase;
}

.main > .mainslide.header .description .promo-code {
    padding: 6px 0 4px;
    color: #fff;
    font-size: clamp(30px, 3vw, 42px);
    font-weight: 900;
    line-height: 1;
}

.main > .mainslide.header .description .promo-note {
    display: inline-flex;
    margin-top: 8px;
    padding: 7px 10px;
    border-radius: 999px;
    background: rgba(125, 211, 252, 0.12);
    color: #dbeafe;
    font-size: 14px;
    font-weight: 800;
}

.main > .mainslide.header .monitoring {
    width: 100%;
    margin: 0 auto;
    padding: 22px;
    border: 1px solid rgba(125, 211, 252, 0.18);
    border-radius: 22px;
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.76), rgba(15, 23, 42, 0.56));
    box-shadow: 0 24px 72px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(125, 211, 252, 0.05) inset;
    color: #fff;
    text-align: center;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.main > .mainslide.header .monitoring .online {
    position: relative;
    margin: 0;
    padding-bottom: 4px;
    color: #fff;
    font-size: clamp(50px, 6vw, 76px);
    font-weight: 800;
    line-height: 1;
    transition: opacity 180ms ease, transform 180ms ease;
}

.main > .mainslide.header .monitoring .online-text {
    padding-bottom: 14px;
    color: #cbd5e1;
    font-size: 14px;
    font-weight: 600;
}

.main > .mainslide.header .monitoring .btn {
    display: block;
    width: 100%;
    height: 46px;
    margin: 0;
    border: 1px solid rgba(125, 211, 252, 0.34);
    border-radius: 12px;
    background: linear-gradient(135deg, #67e8f9, #7dd3fc);
    color: #06202a;
    font-size: 16px;
    font-weight: 800;
    line-height: 46px;
    text-transform: uppercase;
}

.main > .mainslide.header .hero-action {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 168px;
    padding: 20px;
    border: 1px solid rgba(125, 211, 252, 0.34);
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(14, 116, 144, 0.48), rgba(51, 65, 85, 0.5));
    box-shadow: 0 22px 62px rgba(8, 47, 73, 0.24);
    color: #ffffff;
    text-decoration: none;
    text-align: center;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    transition: transform 180ms ease, border-color 180ms ease, background 180ms ease;
}

.main > .mainslide.header .hero-action:hover {
    border-color: rgba(186, 230, 253, 0.6);
    background: linear-gradient(135deg, rgba(14, 116, 144, 0.62), rgba(51, 65, 85, 0.64));
    color: #fff;
    transform: translateY(-3px);
}

.main > .mainslide.header .hero-action-title {
    color: #fff;
    font-size: clamp(28px, 2.6vw, 40px);
    font-weight: 900;
    line-height: 1.12;
}

.main > .mainslide.header .hero-action-text {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 190px;
    margin-top: 18px;
    padding: 13px 18px;
    border-radius: 999px;
    background: #f8fafc;
    color: #164e63;
    font-size: 16px;
    font-weight: 800;
}

.main > .donate {
    color: #fff;
    position: relative;
    background-color: #0b1220;
    background:
        radial-gradient(circle at 12% 0%, rgba(56, 189, 248, 0.1), transparent 32%),
        radial-gradient(circle at 88% 16%, rgba(148, 163, 184, 0.1), transparent 30%),
        linear-gradient(180deg, rgba(10, 15, 25, 0.82) 0%, rgba(15, 23, 42, 0.96) 58%, #0b1220 82%, #0b1220 100%);
}

.main > .donate:after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 320px;
    background: linear-gradient(180deg, rgba(11, 18, 32, 0), rgba(11, 18, 32, 0.72) 42%, #0b1220 78%, #0b1220 100%);
    pointer-events: none;
    z-index: 0;
}

.main > .donate > .container {
    position: relative;
    z-index: 3;
}

.main > .mainslide.donate > .container {
    min-height: auto;
    width: min(1760px, calc(100% - 40px));
    padding-top: 56px;
    padding-bottom: 92px;
}

.main > .donate .donate-shop {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(380px, 440px);
    gap: 34px;
    align-items: start;
}

.main > .donate .donate-products {
    min-width: 0;
    position: relative;
    /* Own stacking context below the sidebar (z-index 2) so card ribbons
       (z-index 3) stay confined here and never paint over the checkout modal,
       which lives inside .donate-sidebar. */
    z-index: 1;
}

.main > .donate .donate-products:after {
    content: "";
    position: absolute;
    top: 10px;
    right: -26px;
    bottom: 10px;
    width: 2px;
    border-radius: 2px;
    background: linear-gradient(
        180deg,
        rgba(148, 163, 184, 0),
        rgba(125, 211, 252, 0.30) 16%,
        rgba(148, 163, 184, 0.30) 50%,
        rgba(125, 211, 252, 0.30) 84%,
        rgba(148, 163, 184, 0)
    );
    pointer-events: none;
}

.main > .donate .donate-sidebar {
    position: sticky;
    top: 252px;
    z-index: 2;
    align-self: start;
    margin-top: 132px;
    padding-left: 16px;
}

.main > .mainslide.donate > footer.footer {
    position: relative;
    z-index: 1;
    margin-top: 0;
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none;
}

.main > .donate .tabs > .tab-links {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 0 0 26px;
    padding: 0;
    background-color: transparent;
}

.main > .donate .tabs > .tab-links > li {
    padding: 0;
}

.main > .donate .tabs > .tab-links > li .tab-link {
    min-width: 160px;
    min-height: 44px;
    padding: 0 18px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    color: #e2e8f0;
    font-size: 16px;
    font-weight: 700;
    text-align: center;
    transition: transform 180ms ease, border-color 180ms ease, background 180ms ease;
}

.main > .donate .tabs > .tab-links > li .tab-link:hover,
.main > .donate .tabs > .tab-links > li .tab-link.active {
    border-color: rgba(125, 211, 252, 0.42);
    background: rgba(125, 211, 252, 0.11);
    color: #fff;
    transform: translateY(-1px);
}

.main .donate .items > .item-list {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    align-items: stretch;
}

.main .donate .items > .item-list > .item-id {
    display: flex;
    flex-direction: column;
    min-height: 300px;
    padding: 18px;
    border: 1px solid rgba(255, 255, 255, 0.11);
    border-radius: 18px;
    background: rgba(15, 23, 42, 0.62);
    box-shadow: 0 16px 44px rgba(0, 0, 0, 0.22);
    position: relative;
    overflow: hidden;
    cursor: pointer;
    transition: transform 180ms ease, border-color 180ms ease, background 180ms ease;
}

.main .donate .items > .item-list > .item-id:hover {
    border-color: rgba(125, 211, 252, 0.3);
    background: rgba(15, 23, 42, 0.78);
    transform: translateY(-3px);
}

.main .donate .items > .item-list > .item-id.active {
    border-color: rgba(125, 211, 252, 0.62);
    background: rgba(15, 23, 42, 0.86);
    box-shadow: 0 18px 52px rgba(0, 0, 0, 0.26), 0 0 0 1px rgba(125, 211, 252, 0.12) inset;
}

.main .donate .items > .item-list > .item-id .data {
    display: none;
}

.main .donate .items > .item-list > .item-id > .image {
    display: block;
    position: relative;
    width: min(186px, 100%);
    aspect-ratio: 1 / 1;
    height: auto;
    margin: 4px auto 0;
    border-radius: 14px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    overflow: hidden;
}

.main .donate .items > .item-list > .item-id > .image.is-loading {
    background-image: none !important;
    background-color: rgba(15, 23, 42, 0.86);
}

.main .donate .items > .item-list > .item-id > .image.is-loading:before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, transparent, rgba(125, 211, 252, 0.12), transparent),
        radial-gradient(circle at 50% 42%, rgba(148, 163, 184, 0.12), transparent 38%);
    animation: skeleton-shine 1.15s ease-in-out infinite;
}

.main .donate .items > .item-list > .item-id > .image.is-ready {
    animation: image-ready 240ms ease-out both;
}

.main .donate .items > .item-list > .item-id > .title {
    max-width: 100%;
    padding-top: 12px;
    color: #f8fafc;
    font-size: 18px;
    font-weight: 800;
    line-height: 1.25;
    text-align: center;
    white-space: normal;
}

.main .donate .items > .item-list > .item-id > .card-description {
    display: -webkit-box;
    min-height: 0;
    margin-top: 6px;
    color: #94a3b8;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.45;
    overflow: hidden;
    text-align: center;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.main .donate .items > .item-list > .item-id > .discount {
    position: absolute;
    top: 14px;
    z-index: 1;
    border-radius: 999px;
    font-weight: 800;
}

.main .donate .items > .item-list > .item-id > .discount {
    left: 14px;
    max-width: calc(100% - 104px);
    padding: 6px 10px;
    background: rgba(248, 113, 113, 0.16);
    color: #fecaca;
    font-size: 12px;
    text-transform: uppercase;
}

.main .donate .items > .item-list > .item-id > .price {
    color: #fff;
}

.main .donate .items > .item-list > .item-id > .price > span {
    color: #fff;
}

.donate-panel[data-id="donate"] > .wrapper > .modal-content,
.modal[data-id="method"] > .wrapper > .modal-content,
.modal[data-id="number"] > .wrapper > .modal-content {
    border-radius: 18px;
    overflow: hidden;
}

.donate-panel[data-id="donate"] {
    display: block;
    color: #e2e8f0;
}

.donate-panel[data-id="donate"] > .wrapper {
    display: block;
    width: 100%;
}

.donate-panel[data-id="donate"] > .wrapper > .modal-content {
    border: 1px solid rgba(125, 211, 252, 0.2);
    background: linear-gradient(180deg, rgba(20, 31, 50, 0.92), rgba(11, 18, 32, 0.88));
    box-shadow: 0 22px 70px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(125, 211, 252, 0.05) inset;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.donate-panel[data-id="donate"] .modal-header {
    padding: 26px 26px 0;
    color: #fff;
    font-size: 30px;
    font-weight: 900;
    line-height: 1.15;
}

.donate-panel[data-id="donate"] .modal-body {
    padding: 46px 26px 0;
}

.donate-panel[data-id="donate"] .donate-description {
    max-height: min(36vh, 300px);
    margin-bottom: 20px;
    overflow: auto;
    border: 1px solid rgba(148, 163, 184, 0.16);
    border-radius: 14px;
    background: rgba(2, 6, 23, 0.18);
    color: #d8e0ea;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.55;
}

.donate-panel[data-id="donate"] .donate-description .text {
    padding: 18px;
}

.donate-panel[data-id="donate"] .donate-current-price {
    display: none;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin: 0 0 20px;
    padding: 14px 18px;
    border: 1px solid rgba(125, 211, 252, 0.16);
    border-radius: 14px;
    background: rgba(125, 211, 252, 0.07);
    color: #cbd5e1;
    font-size: 16px;
    font-weight: 800;
}

.donate-panel[data-id="donate"] .donate-current-price strong {
    color: #86efac;
    font-size: 22px;
    font-weight: 900;
    white-space: nowrap;
}

.donate-panel[data-id="donate"] .donate-current-price .fa-ruble-sign {
    font-size: 0.9em;
}

.donate-panel[data-id="donate"] .input-block > label {
    color: #cbd5e1;
    font-weight: 800;
}

.donate-panel[data-id="donate"] input:not([type="checkbox"]) {
    height: 56px;
    line-height: 56px;
}

.donate-panel[data-id="donate"] .input-prepend > input {
    padding-left: 58px;
    font-size: 18px;
}

.donate-panel[data-id="donate"] .input-prepend > .prepend {
    min-width: 56px;
    height: 56px;
    font-size: 22px;
    line-height: 54px;
}

.donate-panel[data-id="donate"] .input-helper {
    color: #94a3b8;
}

.donate-panel[data-id="donate"] .alertblock {
    border-radius: 14px;
}

.donate-panel[data-id="donate"] .block-bonus {
    margin-top: 16px !important;
    padding: 14px !important;
    border: 1px solid rgba(125, 211, 252, 0.16);
    border-radius: 14px !important;
    background: rgba(125, 211, 252, 0.07) !important;
    color: #cbd5e1;
}

.donate-panel[data-id="donate"] .block-bonus .bonus-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
}

.donate-panel[data-id="donate"] .block-bonus .bonus-row + .bonus-row {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.donate-panel[data-id="donate"] .block-bonus .bonus,
.donate-panel[data-id="donate"] .block-bonus .sum {
    color: #7dd3fc;
    font-weight: 800;
}

.donate-panel[data-id="donate"] .modal-footer {
    padding: 20px 26px 26px !important;
    display: flex;
    justify-content: center;
}

.donate-panel[data-id="donate"] .modal-footer .btn {
    flex: 0 0 auto;
    min-width: 240px;
    min-height: 58px;
    padding-left: 44px;
    padding-right: 44px;
    border-radius: 14px;
    background: linear-gradient(135deg, #28a06a, #1c8f5c) !important;
    color: #ffffff !important;
    font-size: 16px;
    font-weight: 900;
}

#checkoutform {
    z-index: 9999 !important;
    background: rgba(2, 6, 23, 0.72) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

#checkoutform > .wrapper {
    width: min(660px, calc(100vw - 32px)) !important;
    padding: 0 16px !important;
}

#checkoutform > .wrapper > .modal-content {
    width: 100% !important;
    max-width: none !important;
    border: 1px solid rgba(125, 211, 252, 0.22);
    border-radius: 18px !important;
    background:
        linear-gradient(180deg, rgba(20, 31, 50, 0.98), rgba(11, 18, 32, 0.98)) !important;
    box-shadow:
        0 28px 90px rgba(0, 0, 0, 0.48),
        0 0 0 1px rgba(255, 255, 255, 0.04) inset,
        0 0 50px rgba(56, 189, 248, 0.08);
    clip-path: none !important;
}

#checkoutform .modal-header {
    padding: 0 0 24px;
    border-bottom-color: rgba(148, 163, 184, 0.16);
    color: #f8fafc;
    font-size: 28px;
    font-weight: 900;
}

#checkoutform .modal-body {
    max-width: 540px;
    margin: 0 auto;
    padding: 24px 0 8px;
}

#checkoutform .input-block {
    margin-bottom: 20px;
}

#checkoutform .input-block > label {
    color: #cbd5e1;
    font-size: 16px;
    font-weight: 900;
}

#checkoutform .input-helper {
    color: #94a3b8;
    font-size: 14px;
    font-weight: 700;
}

#checkoutform .nick-check-status {
    min-height: 18px;
    margin-top: 7px;
    color: #94a3b8;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.25;
}

#checkoutform .nick-check-status.is-loading {
    color: #bae6fd;
}

#checkoutform .nick-check-status.is-ok {
    color: #86efac;
}

#checkoutform .nick-check-status.is-error {
    color: #fecaca;
}

@keyframes skeleton-shine {
    0% { transform: translateX(-110%); }
    100% { transform: translateX(110%); }
}

@keyframes image-ready {
    from { opacity: 0.65; transform: scale(0.985); }
    to { opacity: 1; transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    .main .donate .items > .item-list > .item-id > .image.is-loading:before {
        animation: none !important;
    }
}

#checkoutform .input-prepend {
    border: 1px solid rgba(125, 211, 252, 0.22);
    border-radius: 14px !important;
    background: rgba(15, 23, 42, 0.92);
    box-shadow:
        0 14px 34px rgba(0, 0, 0, 0.28),
        0 2px 8px rgba(2, 6, 23, 0.12),
        0 0 0 1px rgba(255, 255, 255, 0.03) inset;
    overflow: hidden !important;
    transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

#checkoutform .input-prepend:focus-within {
    border-color: rgba(94, 234, 212, 0.68);
    box-shadow:
        0 18px 42px rgba(0, 0, 0, 0.34),
        0 0 0 4px rgba(45, 212, 191, 0.1),
        0 0 0 1px rgba(255, 255, 255, 0.05) inset;
    transform: translateY(-1px);
}

#checkoutform .input-prepend > input {
    background: transparent !important;
    color: #f8fafc !important;
    border-radius: 14px !important;
}

#checkoutform .input-prepend > input::placeholder {
    color: #94a3b8;
}

#checkoutform .input-prepend > .prepend {
    color: #7dd3fc;
    border-radius: 14px 0 0 14px !important;
}

#checkoutform .checkout-footer {
    display: grid;
    grid-template-columns: minmax(240px, 300px) 1fr;
    gap: 18px;
    align-items: center;
    max-width: 540px;
    margin: 0 auto;
    padding: 28px 0 0;
    border-top-color: rgba(148, 163, 184, 0.16);
    text-align: left;
}

#checkoutform .checkout-footer .btn {
    width: 100%;
    min-height: 52px;
    margin: 0;
    border-radius: 12px;
    background: linear-gradient(135deg, #28a06a, #1c8f5c) !important;
    color: #ffffff !important;
    font-size: 16px;
    font-weight: 900;
    box-shadow: 0 12px 28px rgba(16, 185, 129, 0.28);
    text-transform: uppercase;
    white-space: nowrap;
}

#checkoutform .checkout-footer .btn[data-modal-close] {
    width: auto;
    justify-self: end;
    background: transparent !important;
    color: #cbd5e1 !important;
    text-transform: none;
    box-shadow: none;
}

/* Unified ₽ for the "Купить"/"Купить за…" buttons: small, centered, white. */
.donate-panel[data-id="donate"] .modal-footer .btn .fa-ruble-sign,
#checkoutform .checkout-footer .btn .fa-ruble-sign,
#checkoutform .checkout-footer .btn .fas.fa-ruble-sign {
    color: #ffffff !important;
    font-size: 0.72em !important;
    margin-left: 5px;
    vertical-align: 0;
}

#methodform .methods {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    padding: 20px 0 0;
}

#methodform,
#numberform {
    z-index: 10000 !important;
    background: rgba(2, 6, 23, 0.72) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

#methodform > .wrapper,
#numberform > .wrapper {
    width: min(700px, calc(100vw - 28px)) !important;
    padding: 0 16px !important;
}

#methodform > .wrapper > .modal-content,
#numberform > .wrapper > .modal-content {
    width: 100% !important;
    padding: 40px 44px !important;
    border: 1px solid rgba(125, 211, 252, 0.22);
    border-radius: 18px !important;
    background: linear-gradient(180deg, rgba(20, 31, 50, 0.98), rgba(11, 18, 32, 0.98)) !important;
    box-shadow:
        0 28px 90px rgba(0, 0, 0, 0.48),
        0 0 0 1px rgba(255, 255, 255, 0.04) inset,
        0 0 50px rgba(56, 189, 248, 0.08);
}

#methodform .modal-header,
#numberform .modal-header {
    padding: 0 0 22px;
    border-bottom-color: rgba(148, 163, 184, 0.16);
    color: #f8fafc;
    font-size: 26px;
    font-weight: 900;
}

#methodform .modal-body,
#numberform .modal-body {
    padding: 22px 0 4px;
}

#methodform .methods > li {
    list-style: none;
}

#methodform .methods > li > .btn {
    height: 148px;
    padding: 24px;
    border: 1px solid rgba(125, 211, 252, 0.2);
    border-radius: 14px;
    background-color: rgba(15, 23, 42, 0.86);
    background-image: url("../../../img/methods/qiwi.svg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 74%;
    background-origin: content-box;
    color: #e2e8f0;
    font-weight: 700;
    box-shadow:
        0 14px 34px rgba(0, 0, 0, 0.28),
        0 0 0 1px rgba(255, 255, 255, 0.03) inset;
    transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

#methodform .methods > li > .btn[data-icon="easy"] {
    background-size: 62%;
}

#methodform .methods > li > .btn:hover {
    border-color: rgba(94, 234, 212, 0.72);
    box-shadow:
        0 18px 42px rgba(0, 0, 0, 0.34),
        0 0 0 4px rgba(45, 212, 191, 0.08);
    transform: translateY(-2px);
}

#methodform .methods > li > .btn.active,
#methodform .methods > li > .btn:focus-visible {
    border-color: rgba(52, 211, 153, 0.9);
    outline: none;
}

#numberform .easydonate-panel {
    display: grid;
    justify-items: center;
    gap: 16px;
    padding: 10px 0 6px;
    text-align: center;
}

#numberform .easydonate-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 148px;
    height: 148px;
    border: 1px solid rgba(125, 211, 252, 0.18);
    border-radius: 18px;
    background: rgba(15, 23, 42, 0.72);
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.28);
}

#numberform .easydonate-logo img {
    display: block;
    width: 110px;
    max-height: 110px;
    object-fit: contain;
}

#numberform .easydonate-buy,
#numberform .easydonate-tg {
    min-width: 260px;
    min-height: 50px;
    border-radius: 12px;
    line-height: 50px;
    font-weight: 900;
}

#numberform .easydonate-buy {
    background: linear-gradient(135deg, #28a06a, #1c8f5c) !important;
    color: #ffffff !important;
    box-shadow: 0 12px 28px rgba(16, 185, 129, 0.28);
}

#numberform .easydonate-tg {
    background: rgba(125, 211, 252, 0.12) !important;
    color: #dbeafe !important;
    border: 1px solid rgba(125, 211, 252, 0.22);
}

#numberform .easydonate-note {
    max-width: 420px;
    color: #94a3b8;
    font-size: 14px;
    font-weight: 700;
}

#methodform .methods > li > .btn[data-icon="smart"] { background-image: url("../../../img/methods/smart.svg"); }
#methodform .methods > li > .btn[data-icon="steam"] { background-image: url("../../../img/methods/steam.svg"); }
#methodform .methods > li > .btn[data-icon="uah"] { background-image: url("../../../img/methods/uah.svg"); }
#methodform .methods > li > .btn[data-icon="sbp"] { background-image: url("../../../img/methods/sbp-logo.png"); }
#methodform .methods > li > .btn[data-icon="unitpay"] { background-image: url("../../../img/methods/unitpay.png"); }
#methodform .methods > li > .btn[data-icon="kzt"] { background-image: url("../../../img/methods/kzt.svg"); }
#methodform .methods > li > .btn[data-icon="card"] { background-image: url("../../../img/methods/card.svg"); }
#methodform .methods > li > .btn[data-icon="1card"] { background-image: url("../../../img/methods/cent.svg"); }
#methodform .methods > li > .btn[data-icon="easy"] { background-image: url("../../../img/methods/easy.svg"); }
#methodform .methods > li > .btn[data-icon="3card"] { background-image: url("../../../img/methods/3card.svg"); }
#methodform .methods > li > .btn[data-icon="yoomoney"] { background-image: url("../../../img/methods/yoomoney.svg"); }
#methodform .methods > li > .btn[data-icon="megafon"] { background-image: url("../../../img/methods/megafon.svg"); }
#methodform .methods > li > .btn[data-icon="beeline"] { background-image: url("../../../img/methods/beeline.svg"); }
#methodform .methods > li > .btn[data-icon="mts"] { background-image: url("../../../img/methods/mts.svg"); }
#methodform .methods > li > .btn[data-icon="tele2"] { background-image: url("../../../img/methods/tele2.svg"); }
#methodform .methods > li > .btn[data-icon="applepay"] { background-image: url("../../../img/methods/applepay.svg"); }
#methodform .methods > li > .btn[data-icon="samsungpay"] { background-image: url("../../../img/methods/samsung.svg"); }
#methodform .methods > li > .btn[data-icon="paypal"] { background-image: url("../../../img/methods/paypal.svg"); }
#methodform .methods > li > .btn[data-icon="advcash"] { background-image: url("../../../img/methods/advcash.svg"); }
#methodform .methods > li > .btn[data-icon="pm"] { background-image: url("../../../img/methods/perfectmoney.svg"); }
#methodform .methods > li > .btn[data-icon="btc"] { background-image: url("../../../img/methods/bitcoin.svg"); }
#methodform .methods > li > .btn[data-icon="eth"] { background-image: url("../../../img/methods/ethereum.svg"); }
#methodform .methods > li > .btn[data-icon="bch"] { background-image: url("../../../img/methods/bitcoin-cash.svg"); }
#methodform .methods > li > .btn[data-icon="ltc"] { background-image: url("../../../img/methods/litecoin.svg"); }
#methodform .methods > li > .btn[data-icon="googlepay"] { background-image: url("../../../img/methods/googlepay.svg"); }

#methodform > .wrapper {
    width: min(700px, calc(100vw - 28px)) !important;
}

#methodform > .wrapper > .modal-content {
    border-radius: 20px !important;
    background:
        radial-gradient(circle at 18% 0%, rgba(94, 234, 212, 0.1), transparent 34%),
        linear-gradient(180deg, rgba(22, 27, 34, 0.98), rgba(12, 17, 24, 0.98)) !important;
}

#methodform .modal-header {
    padding-bottom: 18px;
    font-size: 30px;
    line-height: 1.1;
}

#methodform .modal-body {
    padding-top: 18px;
}

#methodform .method-subtitle {
    max-width: 420px;
    margin: 0 0 16px;
    color: #aeb7c4;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.35;
}

#methodform .method-product {
    display: grid;
    grid-template-columns: 60px minmax(0, 1fr) auto;
    gap: 14px;
    align-items: center;
    margin-bottom: 16px;
    padding: 14px 16px;
    border: 1px solid rgba(148, 163, 184, 0.14);
    border-radius: 14px;
    background: rgba(15, 23, 42, 0.48);
}

#methodform .method-product-image {
    width: 60px;
    height: 60px;
    border-radius: 14px;
    background-color: rgba(2, 6, 23, 0.42);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.22);
}

#methodform .method-product-info {
    min-width: 0;
}

#methodform .method-product-label {
    color: #64748b;
    font-size: 12px;
    font-weight: 900;
    line-height: 1.2;
    text-transform: uppercase;
}

#methodform .method-product-title {
    overflow: hidden;
    color: #f8fafc;
    font-size: 18px;
    font-weight: 900;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#methodform .method-product-price {
    padding: 8px 13px;
    border-radius: 999px;
    background: rgba(94, 234, 212, 0.11);
    color: #99f6e4;
    font-size: 16px;
    font-weight: 900;
    white-space: nowrap;
}

#methodform .methods {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 0;
}

#methodform .methods > li > .btn {
    display: grid;
    grid-template-columns: 62px minmax(0, 1fr) 22px;
    gap: 16px;
    align-items: center;
    height: auto;
    min-height: 96px;
    padding: 16px 18px;
    border-color: rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    background-color: rgba(255, 255, 255, 0.035);
    background-image: none !important;
    background-position: initial;
    background-size: initial;
    text-align: left;
}

#methodform .method-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 62px;
    height: 62px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    background: rgba(2, 6, 23, 0.42);
    color: #e2e8f0;
    position: relative;
    overflow: hidden;
}

#methodform .method-icon-sbp:before {
    content: "";
    position: absolute;
    left: 20px;
    top: 15px;
    width: 24px;
    height: 24px;
    background: url("../../../img/methods/sbp-logo.png") center / contain no-repeat;
}

#methodform .method-card-line {
    position: absolute;
    left: 10px;
    bottom: 15px;
    width: 12px;
    height: 5px;
    border-radius: 2px;
    background: #7dd3fc;
}

#methodform .method-sbp-mark {
    position: absolute;
    right: 9px;
    bottom: 10px;
    color: #ffffff;
    font-size: 12px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: 0;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.42);
}

#methodform .method-icon-card {
    color: #bae6fd;
    font-size: 25px;
}

#methodform .method-icon-easy {
    background-image: url("../../../img/methods/easy.svg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 72%;
}

#methodform .method-copy {
    display: grid;
    min-width: 0;
    gap: 3px;
}

#methodform .method-title {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    color: #f8fafc;
    font-size: 19px;
    font-weight: 900;
    line-height: 1.15;
}

#methodform .method-title em {
    display: inline-flex;
    padding: 4px 8px;
    border-radius: 999px;
    background: rgba(249, 115, 22, 0.16);
    color: #fdba74;
    font-size: 11px;
    font-style: normal;
    font-weight: 900;
    line-height: 1;
}

#methodform .method-text {
    color: #aeb7c4;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.22;
}

#methodform .method-arrow {
    justify-self: end;
    color: #64748b;
    font-size: 18px;
    transition: color 180ms ease, transform 180ms ease;
}

#methodform .methods > li > .btn:hover .method-arrow,
#methodform .methods > li > .btn:focus-visible .method-arrow {
    color: #99f6e4;
    transform: translateX(2px);
}

#methodform .method-support {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid rgba(148, 163, 184, 0.14);
    color: #94a3b8;
    font-size: 14px;
    font-weight: 700;
    text-align: center;
}

#methodform .method-support a {
    color: #93c5fd;
    font-weight: 900;
    text-decoration: none;
}

#methodform .method-support a:hover {
    color: #bfdbfe;
}

html body > footer.footer,
html body > footer.footer.bg-cyan {
    background-color: #0b1220 !important;
    background-image: none !important;
    background: #0b1220 !important;
    color: #cbd5e1;
    border-top: 0;
    box-shadow: 0 -1px 0 #0b1220;
}

html body .main > .mainslide.donate > footer.footer {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
}

/* ============================================================
   Marketing layer (2026-06-29): sale banner + countdown, product
   badges, struck/honest prices, whale anchor, live ticker,
   public leaderboard, trust strip, checkout upsell.
   ============================================================ */

/* Sale banner + countdown */
.main > .donate .sale-banner {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 14px 22px;
    margin: 0 0 28px; padding: 15px 24px;
    border: 1px solid rgba(248, 113, 113, 0.32); border-radius: 16px;
    background: linear-gradient(135deg, rgba(248, 113, 113, 0.16), rgba(249, 115, 22, 0.10));
    box-shadow: 0 16px 44px rgba(0, 0, 0, 0.22);
}
.main > .donate .sale-banner-left { display: flex; align-items: center; gap: 12px; }
.main > .donate .sale-fire { font-size: 26px; line-height: 1; }
.main > .donate .sale-text { color: #fde2e2; font-size: 17px; font-weight: 700; }
.main > .donate .sale-text b { color: #fff; font-weight: 900; }
.main > .donate .sale-countdown { display: flex; align-items: center; gap: 12px; }
.main > .donate .sale-cd-label { color: #fca5a5; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.main > .donate .sale-cd-clock { display: inline-flex; align-items: center; gap: 4px; }
.main > .donate .sale-cd-clock b { min-width: 44px; padding: 7px 0; border-radius: 10px; background: rgba(2, 6, 23, 0.55); color: #fff; font-size: 20px; font-weight: 900; text-align: center; font-variant-numeric: tabular-nums; }
.main > .donate .sale-cd-clock i { color: #fca5a5; font-style: normal; font-weight: 900; }

/* Per-product marketing badge (pill under the title) */
.main .donate .items > .item-list > .item-id > .item-badge {
    position: absolute; top: 22px; right: -46px; width: 178px; z-index: 3;
    padding: 8px 0; transform: rotate(45deg);
    background: linear-gradient(rgba(7, 14, 28, 0.52), rgba(7, 14, 28, 0.52)), rgb(var(--accent, 125, 211, 252));
    color: #fff; text-align: center; font-weight: 900; font-size: 12.5px;
    letter-spacing: .4px; text-transform: uppercase; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
    box-shadow: 0 5px 14px rgba(0, 0, 0, 0.42);
}

/* Coloured frame for cards that have a badge (accent set inline as --accent) */
.main .donate .items > .item-list > .item-id.item-featured {
    border-color: rgba(var(--accent), 0.55);
    background: radial-gradient(82% 50% at 100% 0%, rgba(var(--accent), 0.10), transparent 60%), rgba(15, 23, 42, 0.70);
    box-shadow: 0 16px 44px rgba(0, 0, 0, 0.22), inset 0 0 0 1px rgba(var(--accent), 0.12);
}
.main .donate .items > .item-list > .item-id.item-featured:hover {
    border-color: rgba(var(--accent), 0.80);
}

/* Honest sale price: hero "new" price on the left, "old" price + discount
   chip as a single box-centered unit on the right, level with the hero price.
   Centering the two BOXES against each other (align-items:center on the row)
   is what keeps the struck price + chip from drifting off — see
   site-custom.css for .price-row / .price-sub / .price-off) */
.main .donate .items > .item-list > .item-id > .price { display: flex; flex-direction: row; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 6px 10px; margin-top: auto; padding-top: 14px; }
.main .donate .items > .item-list > .item-id > .price > .price-row { display: flex; align-items: baseline; line-height: 1; }
.main .donate .items > .item-list > .item-id > .price .price-new { color: #f8fafc; font-size: 23px; font-weight: 900; letter-spacing: -0.01em; line-height: 1; }
.main .donate .items > .item-list > .item-id > .price .price-new i, .main .donate .items > .item-list > .item-id > .price .price-new svg { margin-left: 3px; color: #94a3b8; font-size: 0.6em; vertical-align: 0.09em; }
/* "Выбрать" button under the price (card click opens the buy panel) */
.main .donate .items > .item-list > .item-id > .item-choose {
    display: block; width: fit-content; margin: 14px auto 0;
    padding: 11px 50px; border-radius: 12px;
    background: linear-gradient(135deg, #28a06a, #1c8f5c);
    color: #fff; font-weight: 900; font-size: 14px; text-align: center;
    white-space: nowrap; transition: filter .15s ease;
}
.main .donate .items > .item-list > .item-id:hover > .item-choose { filter: brightness(1.07); }

/* Exclusive anchor tier (a real item flagged is_anchor in admin): gold-highlighted,
   still a normal purchasable card showing the item's real image. */
.main .donate .items > .item-list > .item-id.item-anchor {
    border-color: rgba(250, 204, 21, 0.45);
    background: linear-gradient(180deg, rgba(120, 90, 20, 0.30), rgba(15, 23, 42, 0.82));
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.30), 0 0 0 1px rgba(250, 204, 21, 0.10) inset;
}
.main .donate .items > .item-list > .item-id.item-anchor:hover {
    border-color: rgba(250, 204, 21, 0.72);
}
.main .donate .items > .item-list > .item-id.item-anchor > .item-badge i { margin-right: 1px; }

/* Live activity band: ticker + leaderboard */
.main > .donate .live-band { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; margin: 36px 0 8px; }
/* Critical: let the band's children shrink to their grid track. Without this the
   leaderboard's auto-fill grid keeps its ~1500px intrinsic width and overflows the
   container at every width below ~1560px (the real "не подстраивается" bug). */
.main > .donate .live-band > * { min-width: 0; }
.main > .donate .live-band .lb-head { display: flex; align-items: center; gap: 9px; margin-bottom: 14px; color: #f8fafc; font-size: 18px; font-weight: 900; }
.main > .donate .live-purchases,
.main > .donate .donate-leaderboard {
    padding: 20px 22px; border: 1px solid rgba(125, 211, 252, 0.16); border-radius: 18px;
    background: rgba(15, 23, 42, 0.55); box-shadow: 0 16px 44px rgba(0, 0, 0, 0.20);
}
.main > .donate .lb-live-dot { width: 9px; height: 9px; border-radius: 50%; background: #34d399; animation: lb-pulse 1.6s infinite; }
@keyframes lb-pulse { 0% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.55); } 70% { box-shadow: 0 0 0 8px rgba(52, 211, 153, 0); } 100% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0); } }
.main > .donate .lp-list { list-style: none; margin: 0; padding: 2px; display: flex; flex-direction: row; flex-wrap: nowrap; gap: 12px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.main > .donate .lp-list::-webkit-scrollbar { display: none; }
.main > .donate .lp-item { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; padding: 8px 14px 8px 8px; border: 1px solid rgba(255, 255, 255, 0.07); border-radius: 14px; background: rgba(255, 255, 255, 0.04); cursor: pointer; transition: border-color .16s ease, transform .16s ease; animation: lp-in .45s ease; }
.main > .donate .lp-item:hover { border-color: rgba(125, 211, 252, 0.40); transform: translateY(-2px); }
@keyframes lp-in { from { opacity: 0; transform: translateX(-18px); } to { opacity: 1; transform: none; } }
.main > .donate .lp-icon { width: 38px; height: 38px; flex: none; border-radius: 50%; background-color: rgba(2, 6, 23, 0.5); background-size: cover; background-position: center; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25); }
.main > .donate .lp-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; max-width: 210px; }
.main > .donate .lp-who { color: #cbd5e1; font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.main > .donate .lp-who b { color: #f8fafc; font-weight: 800; }
.main > .donate .lp-what { color: #99f6e4; font-size: 13px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.main > .donate .lp-text b { color: #f8fafc; font-weight: 800; }
.main > .donate .lp-text i { color: #99f6e4; font-style: normal; font-weight: 800; }
.main > .donate .lp-time { flex: none; color: #64748b; font-size: 12px; font-weight: 700; }
.main > .donate .lb-tabs { display: flex; gap: 8px; margin-bottom: 14px; }
.main > .donate .lb-tab { padding: 7px 15px; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 999px; background: rgba(255, 255, 255, 0.05); color: #cbd5e1; font-size: 13px; font-weight: 800; cursor: pointer; transition: all .16s ease; }
.main > .donate .lb-tab.active { border-color: rgba(125, 211, 252, 0.45); background: rgba(125, 211, 252, 0.12); color: #fff; }
.main > .donate .lb-list { list-style: none; margin: 0; padding: 0; display: none; gap: 8px; }
.main > .donate .lb-list.active { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.main > .donate .lb-row { display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: 11px; background: rgba(255, 255, 255, 0.03); }
.main > .donate .lb-rank { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; flex: none; border-radius: 8px; background: rgba(148, 163, 184, 0.14); color: #cbd5e1; font-weight: 900; font-size: 13px; }
.main > .donate .lb-rank-1 .lb-rank { background: linear-gradient(135deg, #fde047, #eab308); color: #3a2c00; }
.main > .donate .lb-rank-2 .lb-rank { background: linear-gradient(135deg, #e5e7eb, #9ca3af); color: #1f2937; }
.main > .donate .lb-rank-3 .lb-rank { background: linear-gradient(135deg, #fdba74, #c2724a); color: #2a1500; }
.main > .donate .lb-name { flex: 1; min-width: 0; color: #f1f5f9; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.main > .donate .lb-sum { flex: none; color: #86efac; font-weight: 900; }
.main > .donate .lb-empty { padding: 16px; color: #64748b; text-align: center; font-weight: 700; }

/* Trust strip in the buy panel */
.donate-trust { display: flex; flex-wrap: wrap; gap: 10px 18px; margin-top: 18px; padding-top: 16px; border-top: 1px solid rgba(148, 163, 184, 0.14); }
.donate-trust span { display: inline-flex; align-items: center; gap: 7px; color: #cbd5e1; font-size: 13px; font-weight: 700; }
.donate-trust span i { color: #34d399; }

/* Checkout upsell */
.checkout-upsell { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-bottom: 18px; padding: 13px 16px; border: 1px solid rgba(250, 204, 21, 0.30); border-radius: 14px; background: linear-gradient(135deg, rgba(250, 204, 21, 0.12), rgba(15, 23, 42, 0.4)); }
.checkout-upsell .cu-tag { padding: 4px 10px; border-radius: 999px; background: rgba(250, 204, 21, 0.18); color: #fde68a; font-size: 11px; font-weight: 900; text-transform: uppercase; }
.checkout-upsell .cu-body { flex: 1; min-width: 150px; color: #e2e8f0; font-size: 14px; font-weight: 600; }
.checkout-upsell .cu-body b { color: #fff; font-weight: 900; }
.checkout-upsell .cu-btn { padding: 9px 18px; border: 0; border-radius: 10px; background: linear-gradient(135deg, #eab308, #f59e0b); color: #1a1505; font-weight: 900; cursor: pointer; }
.checkout-upsell .cu-btn:hover { filter: brightness(1.05); }

@media (max-width: 880px) {
    .main > .donate .live-band { grid-template-columns: 1fr; }
    .main > .donate .sale-banner { justify-content: center; text-align: center; }
}

/* Hall-of-fame: top-3 donators at the top of the page (#1 crowned) */
.main > .mainslide.header .top-donators { margin: 30px auto 4px; max-width: 780px; }
.main > .mainslide.header .top-donators .td-title { display: flex; align-items: center; justify-content: center; gap: 8px; margin-bottom: 14px; color: #e2e8f0; font-size: 15px; font-weight: 800; letter-spacing: .02em; }
.main > .mainslide.header .top-donators .td-title span { font-size: 18px; }
.main > .mainslide.header .top-donators .td-row { display: flex; justify-content: center; align-items: stretch; gap: 14px; flex-wrap: wrap; }
.main > .mainslide.header .top-donators .td-card { position: relative; display: flex; align-items: center; gap: 12px; min-width: 200px; padding: 14px 20px 14px 16px; border: 1px solid rgba(255, 255, 255, 0.10); border-radius: 16px; background: rgba(15, 23, 42, 0.60); box-shadow: 0 14px 36px rgba(0, 0, 0, 0.25); }
.main > .mainslide.header .top-donators .td-rank-1 { border-color: rgba(250, 204, 21, 0.50); background: linear-gradient(180deg, rgba(120, 90, 20, 0.34), rgba(15, 23, 42, 0.70)); transform: translateY(-5px); }
.main > .mainslide.header .top-donators .td-medal { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; flex: none; border-radius: 10px; background: rgba(148, 163, 184, 0.16); color: #cbd5e1; font-weight: 900; }
.main > .mainslide.header .top-donators .td-rank-1 .td-medal { background: linear-gradient(135deg, #fde047, #eab308); color: #3a2c00; }
.main > .mainslide.header .top-donators .td-rank-2 .td-medal { background: linear-gradient(135deg, #e5e7eb, #9ca3af); color: #1f2937; }
.main > .mainslide.header .top-donators .td-rank-3 .td-medal { background: linear-gradient(135deg, #fdba74, #c2724a); color: #2a1500; }
.main > .mainslide.header .top-donators .td-info { display: flex; flex-direction: column; min-width: 0; }
.main > .mainslide.header .top-donators .td-name { color: #f1f5f9; font-weight: 800; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 170px; }
.main > .mainslide.header .top-donators .td-sum { color: #86efac; font-weight: 900; font-size: 14px; }
.main > .mainslide.header .top-donators .td-crown { position: absolute; top: -15px; left: 50%; transform: translateX(-50%); font-size: 22px; filter: drop-shadow(0 3px 6px rgba(0, 0, 0, .45)); }
@media (max-width: 640px) {
    .main > .mainslide.header .top-donators .td-card { min-width: 0; flex: 1 1 100%; }
    .main > .mainslide.header .top-donators .td-rank-1 { transform: none; }
}

/* #1 medal shows a crown icon (not emoji) */
.main > .mainslide.header .top-donators .td-rank-1 .td-medal i { font-size: 16px; line-height: 1; }

/* Narrow screens: give the anchor "Эксклюзив" badge a touch more breathing room */
@media (max-width: 560px) {
    .main .donate .items > .item-list > .item-id.item-anchor > .item-badge { margin-top: 0; }
    .main > .donate .lb-list.active { grid-template-columns: 1fr; }
}

/* Compact the live-purchases + leaderboard band on phones/tablets */
@media (max-width: 760px) {
    .main > .donate .live-band { gap: 16px; margin: 24px 0 8px; }
    .main > .donate .live-purchases,
    .main > .donate .donate-leaderboard { padding: 16px 16px; }
    .main > .donate .live-band .lb-head { font-size: 16px; margin-bottom: 12px; }
    .main > .donate .lb-tab { padding: 6px 12px; font-size: 12px; }
    .main > .donate .lp-item { padding: 7px 13px 7px 7px; }
    .main > .donate .lp-icon { width: 34px; height: 34px; }
}

/* Square / intermediate windows: the product grid keeps 4 cols only while there is
   room for them next to the sidebar — otherwise step down so cards never get tiny.
   (Below 992px the sidebar stacks and style-responsive.css takes over: 3 → auto → 1.) */
@media (max-width: 1380px) {
    .main .donate .items > .item-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1120px) {
    .main .donate .items > .item-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Keep the live band readable across the whole mid-range, not only wide/mobile */
@media (max-width: 1120px) {
    .main > .donate .lb-list.active { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
}

/* ------------------------------------------------------------------
   Footer payment logos -> right (2026-07-04)
   The footer is rendered nested inside .main (not body>footer), so the
   pipui theme rule `body > footer > .container { display:grid; ... }`
   never matches and the copyright + payment logos stacked on the left.
   Force the two-column layout here: copyright block left, payment logos
   pushed to the far right (as in the reference layout).
   ------------------------------------------------------------------ */
footer.footer > .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px 28px;
    flex-wrap: wrap;
}
footer.footer > .container > .block-right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 10px 14px;
    margin-left: auto;
    text-align: right;
}
@media (max-width: 720px) {
    footer.footer > .container { justify-content: center; }
    footer.footer > .container > .block-right { justify-content: center; margin-left: 0; }
}

/* ------------------------------------------------------------------
   Footer: understated / muted treatment (2026-07-04)
   Make the footer recede — subtle darkening band at the page base,
   smaller & dimmer copyright, quiet legal links (also kills the stray
   default purple visited-link colour), and faded payment logos that
   light up on hover. Targets `footer.footer` so it applies whether the
   footer is nested in .main (homepage) or a direct child of body
   (static pages). !important on the background beats the earlier
   `...donate > footer.footer { background: transparent !important }`.
   ------------------------------------------------------------------ */
html body > footer.footer,
html body .main > .mainslide.donate > footer.footer {
    margin-top: 40px !important;
    padding: 22px 0 26px !important;
    background: linear-gradient(180deg, rgba(2, 6, 23, 0) 0%, rgba(2, 6, 23, 0.42) 55%, rgba(2, 6, 23, 0.60) 100%) !important;
    border-top: 1px solid rgba(148, 163, 184, 0.08) !important;
    box-shadow: none !important;
}

/* Copyright: smaller, dimmer, tidy line spacing (legal text stays legible) */
footer.footer .copyright-text {
    color: #64748b;
    font-size: 12px;
    line-height: 1.6;
    font-weight: 400;
}
footer.footer .copyright-text strong { color: #94a3b8; font-weight: 600; }

/* Legal links: quiet grey, brighten on hover */
footer.footer .static-pages-links { margin-top: 12px; }
footer.footer .static-pages-links a,
footer.footer .static-pages-links a:visited {
    color: #94a3b8;
    font-size: 12.5px;
    font-weight: 500;
    text-decoration: none;
    transition: color .18s ease;
}
footer.footer .static-pages-links a:hover { color: #e2e8f0; }
footer.footer .static-pages-links .dot { color: #3f4b5e; }

/* Payment logos: smaller + faded + softly desaturated; full colour on hover */
footer.footer .block-right > a {
    width: 44px !important;
    height: 44px !important;
    opacity: 0.42;
    filter: grayscale(45%);
    transition: opacity .2s ease, filter .2s ease;
}
footer.footer .block-right > a:hover {
    opacity: 0.9;
    filter: none;
}