/* Final visual layer loaded after the legacy consolidated rules. */
body.app-shell {
    background: #070611 !important;
    background-image: radial-gradient(circle at 12% 0%, rgba(174,52,255,.22), transparent 30rem), radial-gradient(circle at 96% 18%, rgba(32,187,255,.14), transparent 30rem) !important;
}

/* Compact purple storefront presentation. */
html body.app-shell.home-dashboard-page {
    background:
        radial-gradient(circle at 78% 12%, rgba(123, 52, 190, .24), transparent 28rem),
        linear-gradient(135deg, #090815 0%, #100b1e 48%, #080b14 100%) !important;
}

html body.app-shell.home-dashboard-page #donate-catalog {
    max-width: 1030px !important;
    padding-top: 18px !important;
}

html body.app-shell.home-dashboard-page #donate-catalog .catalog-intro,
html body.app-shell.home-dashboard-page #donate-catalog .server-selector-container,
html body.app-shell.home-dashboard-page #donate-catalog .catalog-command-head,
html body.app-shell.home-dashboard-page #donate-catalog .shop-toolbar,
html body.app-shell.home-dashboard-page #donate-catalog .catalog-category-switcher {
    border-color: rgba(128, 85, 202, .28) !important;
    background: linear-gradient(110deg, rgba(29, 20, 53, .88), rgba(12, 12, 27, .92)) !important;
    box-shadow: inset 0 1px rgba(255, 255, 255, .04), 0 18px 42px rgba(0, 0, 0, .22) !important;
}

html body.app-shell.home-dashboard-page #donate-catalog .catalog-intro {
    min-height: 50px !important;
    margin-bottom: 10px !important;
    padding: 13px 20px !important;
    border-radius: 17px !important;
}

html body.app-shell.home-dashboard-page #donate-catalog .catalog-intro h2 {
    margin: 0 !important;
    color: #e8defd !important;
    font-size: 14px !important;
    font-weight: 600 !important;
}

html body.app-shell.home-dashboard-page #donate-catalog .catalog-intro p,
html body.app-shell.home-dashboard-page #donate-catalog .catalog-intro-meta,
html body.app-shell.home-dashboard-page #donate-catalog .server-selector-container,
html body.app-shell.home-dashboard-page #donate-catalog .catalog-command-head,
html body.app-shell.home-dashboard-page #donate-catalog .shop-toolbar,
html body.app-shell.home-dashboard-page #donate-catalog .catalog-category-switcher,
html body.app-shell.home-dashboard-page #donate-catalog .case-catalog-tabs {
    display: none !important;
}

html body.app-shell.home-dashboard-page #donate-catalog .tabs {
    margin-top: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
}

html body.app-shell.home-dashboard-page #donate-catalog .tabs-wrapper {
    display: none !important;
}

html body.app-shell.home-dashboard-page #donate-catalog .tab-list > .tab-id {
    padding: 0 !important;
}

html body.app-shell.home-dashboard-page #donate-catalog .tab-list > .tab-id > .items {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 13px !important;
    padding: 14px 4px !important;
}

html body.app-shell.home-dashboard-page #donate-catalog .tab-list > .tab-id .item-id {
    min-height: 294px !important;
    padding: 9px !important;
    border: 1px solid rgba(120, 93, 184, .46) !important;
    border-radius: 18px !important;
    background:
        radial-gradient(circle at 50% 0%, rgba(99, 83, 174, .18), transparent 42%),
        linear-gradient(180deg, rgba(23, 42, 70, .96), rgba(10, 15, 31, .98)) !important;
    box-shadow: inset 0 1px rgba(255, 255, 255, .06), 0 12px 25px rgba(0, 0, 0, .25) !important;
}

html body.app-shell.home-dashboard-page #donate-catalog .tab-list > .tab-id .item-id:hover {
    border-color: #b18bff !important;
    box-shadow: 0 0 24px rgba(151, 92, 255, .24), 0 18px 30px rgba(0, 0, 0, .3) !important;
}

html body.app-shell.home-dashboard-page #donate-catalog .tab-list > .tab-id .item-id .image {
    flex-basis: 90px !important;
    height: 90px !important;
    min-height: 90px !important;
    margin-bottom: 10px !important;
    border-color: rgba(110, 141, 193, .2) !important;
    border-radius: 11px !important;
    background-color: #192e4a !important;
}

html body.app-shell.home-dashboard-page #donate-catalog .tab-list > .tab-id .item-id .title {
    margin: 0 2px 6px !important;
    color: #f3efff !important;
    font-size: 12px !important;
    letter-spacing: .035em !important;
}

html body.app-shell.home-dashboard-page #donate-catalog .tab-list > .tab-id .item-id .description {
    min-height: 44px !important;
    margin: 0 2px 8px !important;
    padding: 6px 7px !important;
    border: 0 !important;
    background: transparent !important;
    color: #9d9db4 !important;
    font-size: 9px !important;
    line-height: 1.35 !important;
}

html body.app-shell.home-dashboard-page #donate-catalog .tab-list > .tab-id .item-id .product-badge {
    margin: 0 2px 5px !important;
    color: #e0c7ff !important;
    border-color: rgba(177, 112, 255, .48) !important;
    background: rgba(133, 63, 210, .22) !important;
    font-size: 8px !important;
}

html body.app-shell.home-dashboard-page #donate-catalog .tab-list > .tab-id .item-id .product-card-foot {
    gap: 5px !important;
    padding: 8px 2px 0 !important;
}

html body.app-shell.home-dashboard-page #donate-catalog .tab-list > .tab-id .item-id .price {
    padding: 8px 6px !important;
    border-color: rgba(151, 116, 226, .6) !important;
    border-radius: 10px !important;
    background: rgba(84, 56, 145, .18) !important;
    color: #d5c5ff !important;
    font-size: 12px !important;
}

html body.app-shell.home-dashboard-page #donate-catalog .tab-list > .tab-id .item-id .product-buy {
    min-height: 31px !important;
    padding: 0 9px !important;
    border-color: rgba(63, 211, 235, .55) !important;
    border-radius: 10px !important;
    background: rgba(27, 143, 171, .18) !important;
    color: #a9f2ff !important;
    font-size: 9px !important;
}

@media (max-width: 800px) {
    html body.app-shell.home-dashboard-page #donate-catalog .tab-list > .tab-id > .items {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 540px) {
    html body.app-shell.home-dashboard-page #donate-catalog .tab-list > .tab-id > .items {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 9px !important;
    }
}

body.app-shell .app-frame {
    background: transparent !important;
    opacity: 1 !important;
    transform: none !important;
}

body.app-shell .app-sidebar {
    border: 1px solid rgba(180,86,255,.42) !important;
    border-radius: 24px !important;
    background: linear-gradient(180deg, rgba(31,15,63,.97), rgba(8,8,24,.96)) !important;
    box-shadow: 18px 28px 70px rgba(0,0,0,.4), 0 0 32px rgba(160,63,255,.18) !important;
}

body.app-shell .app-topbar {
    border: 1px solid rgba(180,86,255,.4) !important;
    border-radius: 18px !important;
    background: rgba(17,10,39,.86) !important;
    box-shadow: 0 16px 42px rgba(0,0,0,.26), inset 0 1px rgba(255,255,255,.08) !important;
}

body.app-shell .app-nav a {
    border: 1px solid transparent !important;
    border-radius: 13px !important;
}

body.app-shell .app-nav a:hover,
body.app-shell .app-nav li.active a {
    border-color: rgba(255,89,220,.56) !important;
    color: #fff !important;
    background: linear-gradient(90deg, rgba(145,51,255,.44), rgba(255,78,216,.14)) !important;
    box-shadow: 0 0 24px rgba(160,53,255,.24) !important;
}

body.app-shell .hero-banner,
body.app-shell .noxis-command-card,
body.app-shell .auth-card,
body.app-shell .account-card,
body.app-shell .orders-panel,
body.app-shell .orders-hero,
body.app-shell .support-app,
body.app-shell .support-panel,
body.app-shell .support-hero,
body.app-shell .wiki-card,
body.app-shell .item-id,
body.app-shell .payment-id.window,
body.app-shell .faq-item,
body.app-shell .checkout-result-card {
    border: 1px solid rgba(180,86,255,.4) !important;
    border-radius: 22px !important;
    background: linear-gradient(145deg, rgba(29,20,58,.94), rgba(9,9,27,.95)) !important;
    box-shadow: 0 22px 60px rgba(0,0,0,.3), inset 0 1px rgba(255,255,255,.07) !important;
}

body.app-shell .app-content .hero-banner,
body.app-shell .app-content .item-id,
body.app-shell .app-content .auth-card,
body.app-shell .app-content .account-card,
body.app-shell .app-content .orders-panel,
body.app-shell .app-content .support-app {
    border-color: rgba(180,86,255,.52) !important;
    border-radius: 22px !important;
    background: linear-gradient(145deg, rgba(29,20,58,.96), rgba(9,9,27,.97)) !important;
    box-shadow: 0 24px 64px rgba(0,0,0,.34), inset 0 1px rgba(255,255,255,.08) !important;
}

body.app-shell .hero-banner {
    min-height: 410px !important;
    background: linear-gradient(120deg, rgba(47,20,92,.92), rgba(11,10,31,.95)) !important;
}

body.app-shell .app-content .hero-banner,
body.app-shell .app-content .item-id,
body.app-shell .app-content .auth-card,
body.app-shell .app-content .account-card,
body.app-shell .app-content .orders-panel,
body.app-shell .app-content .support-app {
    border-color: rgba(180,86,255,.55) !important;
    border-radius: 22px !important;
    background: linear-gradient(145deg, rgba(29,20,58,.97), rgba(9,9,27,.98)) !important;
    box-shadow: 0 24px 64px rgba(0,0,0,.36), inset 0 1px rgba(255,255,255,.08) !important;
}

body.app-shell .main-content .item-id,
body.app-shell .main-content .stat-card,
body.app-shell .main-content .payment-id.window,
body.app-shell .main-content .faq-item {
    border-color: rgba(180,86,255,.55) !important;
    border-radius: 22px !important;
    background: linear-gradient(145deg, rgba(29,20,58,.97), rgba(9,9,27,.98)) !important;
    box-shadow: 0 24px 64px rgba(0,0,0,.36), inset 0 1px rgba(255,255,255,.08) !important;
}

body.app-shell .main-content .tabs .tab-list .item-id {
    border-color: rgba(180,86,255,.62) !important;
    border-radius: 22px !important;
    background: linear-gradient(145deg, rgba(29,20,58,.98), rgba(9,9,27,1)) !important;
    box-shadow: 0 24px 64px rgba(0,0,0,.38), 0 0 24px rgba(160,63,255,.14) !important;
}

body.app-shell .app-content .hero-banner {
    background: linear-gradient(120deg, rgba(47,20,92,.98), rgba(11,10,31,1)) !important;
}

body.app-shell .app-content .hero-banner {
    background: linear-gradient(120deg, rgba(47,20,92,.96), rgba(11,10,31,.98)) !important;
}

body.app-shell .hero-title {
    color: #fff !important;
    text-shadow: 0 0 36px rgba(203,83,255,.46) !important;
}

body.app-shell .item-id:hover,
body.app-shell .product-card:hover,
body.app-shell .noxis-server-card:hover,
body.app-shell .noxis-balance-card:hover,
body.app-shell .orders-summary-card:hover {
    border-color: rgba(255,91,224,.75) !important;
    box-shadow: 0 26px 64px rgba(80,20,130,.48), 0 0 30px rgba(194,61,255,.22) !important;
    transform: translateY(-5px) !important;
}

body.app-shell .btn,
body.app-shell .product-buy,
body.app-shell .auth-submit,
body.app-shell .hero-actions .btn {
    border: 1px solid rgba(255,102,225,.68) !important;
    border-radius: 13px !important;
    background: linear-gradient(135deg, #9337f3, #d84ff1 55%, #ff58ca) !important;
    box-shadow: 0 13px 32px rgba(169,50,255,.34) !important;
}

body.app-shell .btn:hover,
body.app-shell .product-buy:hover,
body.app-shell .auth-submit:hover,
body.app-shell .hero-actions .btn:hover {
    background: linear-gradient(135deg, #b45bff, #f264e8 55%, #ff7bd5) !important;
    box-shadow: 0 17px 40px rgba(195,62,255,.5), 0 0 22px rgba(255,83,216,.3) !important;
    transform: translateY(-3px) !important;
}

body.app-shell input,
body.app-shell select,
body.app-shell textarea,
body.app-shell .shop-control,
body.app-shell .shop-search {
    border-color: rgba(180,86,255,.36) !important;
    border-radius: 12px !important;
    background: rgba(7,7,23,.84) !important;
}

body.app-shell input:focus,
body.app-shell select:focus,
body.app-shell textarea:focus {
    border-color: #df67ff !important;
    box-shadow: 0 0 0 3px rgba(213,83,255,.16), 0 0 24px rgba(171,54,255,.24) !important;
}

@media (max-width: 900px) {
    html body.app-shell .app-frame.app-layout {
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    html body.app-shell .app-frame.app-layout .app-sidebar {
        display: none !important;
    }
    html body.app-shell .app-frame.app-layout .app-content {
        width: 100% !important;
        margin: 0 !important;
        padding: 78px 10px 82px !important;
    }
    body.app-shell .app-topbar {
        position: fixed !important;
        top: 10px !important;
        right: 10px !important;
        left: 10px !important;
        z-index: 1000 !important;
        width: auto !important;
        margin: 0 !important;
    }
    body.app-shell .hero-section,
    body.app-shell .main-content,
    body.app-shell .stats-section,
    body.app-shell .auth-page,
    body.app-shell .account-shell,
    body.app-shell .orders-shell,
    body.app-shell .support-shell,
    body.app-shell .container {
        width: 100% !important;
        max-width: none !important;
        margin-right: 0 !important;
        margin-left: 0 !important;
        box-sizing: border-box !important;
    }
    body.app-shell .hero-banner { min-height: 340px !important; }
    body.app-shell .items {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
    }
    body.app-shell .item-id {
        min-width: 0 !important;
        width: auto !important;
        border-radius: 18px !important;
    }
}

@media (max-width: 420px) {
    body.app-shell .app-content {
        padding-right: 8px !important;
        padding-left: 8px !important;
    }
    body.app-shell .items {
        gap: 8px !important;
    }
    body.app-shell .item-id {
        padding: 9px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.app-shell *, body.app-shell *::before, body.app-shell *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
    }
}

/* Final polish: stronger hierarchy and utility controls inside each card. */
html body.app-shell #donate-catalog .tab-list > .tab-id .item-id {
    box-shadow:
        0 16px 34px rgba(0, 0, 0, .24),
        inset 0 1px rgba(255, 255, 255, .08),
        inset 0 -1px rgba(6, 182, 212, .08) !important;
}

html body.app-shell #donate-catalog .tab-list > .tab-id .item-id::before {
    content: "" !important;
    position: absolute !important;
    z-index: 0 !important;
    top: 0 !important;
    right: 0 !important;
    width: 90px !important;
    height: 90px !important;
    pointer-events: none !important;
    border-radius: 0 20px 0 100% !important;
    background: radial-gradient(circle at 100% 0, rgba(6, 182, 212, .18), transparent 70%) !important;
}

html body.app-shell #donate-catalog .tab-list > .tab-id .item-id > * {
    position: relative !important;
    z-index: 1 !important;
}

html body.app-shell #donate-catalog .tab-list > .tab-id .item-id .product-limit {
    display: inline-flex !important;
    align-self: flex-start !important;
    margin: 0 0 7px !important;
    padding: 3px 7px !important;
    border: 1px solid rgba(52, 211, 153, .24) !important;
    border-radius: 999px !important;
    color: #7ee7bd !important;
    background: rgba(52, 211, 153, .08) !important;
    font-size: 9px !important;
    line-height: 1.15 !important;
}

html body.app-shell #donate-catalog .tab-list > .tab-id .item-id .product-favorite {
    position: absolute !important;
    z-index: 4 !important;
    top: 20px !important;
    right: 20px !important;
    width: 30px !important;
    height: 30px !important;
    padding: 0 !important;
    border: 1px solid rgba(255, 255, 255, .16) !important;
    border-radius: 50% !important;
    color: #e8c7ff !important;
    background: rgba(8, 10, 25, .62) !important;
    box-shadow: 0 6px 16px rgba(0, 0, 0, .2) !important;
    cursor: pointer !important;
    transition: transform .22s ease, color .22s ease, border-color .22s ease, background .22s ease !important;
}

html body.app-shell #donate-catalog .tab-list > .tab-id .item-id .product-favorite:hover,
html body.app-shell #donate-catalog .tab-list > .tab-id .item-id .product-favorite:focus-visible {
    border-color: rgba(168, 85, 247, .72) !important;
    color: #fff !important;
    background: rgba(168, 85, 247, .3) !important;
    outline: 0 !important;
    transform: scale(1.1) !important;
}

html body.app-shell #donate-catalog .shop-control input::placeholder {
    color: #7f8ba2 !important;
}

html body.app-shell #donate-catalog .catalog-category-switcher__label {
    color: #b794ff !important;
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    letter-spacing: .16em !important;
    text-transform: uppercase !important;
}

html body.app-shell #donate-catalog .catalog-category-switcher__icon {
    color: #55e9ff !important;
    filter: drop-shadow(0 0 8px rgba(85, 233, 255, .3)) !important;
}

html body.app-shell #donate-catalog .tab-list > .tab-id .item-id.is-product-selected {
    border-color: rgba(85, 233, 255, .85) !important;
    box-shadow:
        0 0 0 2px rgba(85, 233, 255, .16),
        0 22px 52px rgba(6, 182, 212, .2),
        inset 0 1px rgba(255, 255, 255, .12) !important;
}

/* Cyan-blue visual theme. */
body.app-shell {
    background-image:
        radial-gradient(circle at 12% 0%, rgba(0, 214, 255, .18), transparent 30rem),
        radial-gradient(circle at 96% 18%, rgba(42, 92, 255, .18), transparent 30rem) !important;
}

body.app-shell .app-sidebar,
body.app-shell .app-topbar {
    border-color: rgba(0, 205, 255, .42) !important;
    background: linear-gradient(180deg, rgba(8, 37, 67, .97), rgba(6, 13, 29, .97)) !important;
    box-shadow: 18px 28px 70px rgba(0, 0, 0, .4), 0 0 32px rgba(0, 188, 255, .16) !important;
}

body.app-shell .app-nav a:hover,
body.app-shell .app-nav li.active a {
    border-color: rgba(0, 229, 255, .62) !important;
    background: linear-gradient(90deg, rgba(0, 157, 255, .42), rgba(0, 224, 255, .14)) !important;
    box-shadow: 0 0 24px rgba(0, 201, 255, .24) !important;
}

body.app-shell .hero-banner,
body.app-shell .app-content .hero-banner,
body.app-shell .app-content .item-id,
body.app-shell .app-content .auth-card,
body.app-shell .app-content .account-card,
body.app-shell .app-content .orders-panel,
body.app-shell .app-content .support-app,
body.app-shell .main-content .item-id,
body.app-shell .main-content .stat-card,
body.app-shell .main-content .payment-id.window,
body.app-shell .main-content .faq-item {
    border-color: rgba(0, 196, 255, .48) !important;
    background: linear-gradient(145deg, rgba(8, 34, 58, .97), rgba(5, 12, 27, .98)) !important;
    box-shadow: 0 24px 64px rgba(0, 0, 0, .36), inset 0 1px rgba(150, 240, 255, .08) !important;
}

body.app-shell .hero-banner,
body.app-shell .app-content .hero-banner {
    background: linear-gradient(120deg, rgba(7, 62, 96, .96), rgba(5, 16, 34, .98)) !important;
}

body.app-shell .hero-title {
    text-shadow: 0 0 36px rgba(0, 214, 255, .46) !important;
}

body.app-shell .item-id:hover,
body.app-shell .product-card:hover,
body.app-shell .noxis-server-card:hover,
body.app-shell .noxis-balance-card:hover,
body.app-shell .orders-summary-card:hover {
    border-color: rgba(0, 231, 255, .82) !important;
    box-shadow: 0 26px 64px rgba(0, 58, 130, .48), 0 0 30px rgba(0, 207, 255, .22) !important;
}

body.app-shell .items {
    gap: 18px !important;
    margin-top: 16px !important;
}

body.app-shell .item-id {
    padding: 18px 18px 16px !important;
    min-height: 332px !important;
    border-radius: 22px !important;
    border: 1px solid rgba(77, 203, 255, .42) !important;
    background:
        radial-gradient(circle at 50% 0%, rgba(78, 201, 255, .16), transparent 34%),
        linear-gradient(180deg, rgba(9, 27, 47, .95), rgba(8, 12, 25, .96)) !important;
    box-shadow: 0 18px 50px rgba(0, 0, 0, .25), inset 0 1px 0 rgba(173, 238, 255, .08) !important;
}

body.app-shell .item-id::before {
    background: linear-gradient(95deg, transparent 0%, rgba(149, 236, 255, .2) 40%, rgba(149, 236, 255, .02) 60%, transparent 100%) !important;
    opacity: .7 !important;
}

body.app-shell .item-id .image {
    width: 100% !important;
    max-width: 165px !important;
    height: 118px !important;
    margin: 0 auto 18px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 16px !important;
    background-color: rgba(18, 28, 47, .88) !important;
    box-shadow: inset 0 0 18px rgba(84, 211, 255, .12) !important;
}

body.app-shell .item-id .title {
    font-size: 22px !important;
    line-height: 1.15 !important;
    letter-spacing: .08em !important;
    color: #ebf8ff !important;
    text-transform: uppercase !important;
    margin-bottom: 10px !important;
    font-weight: 800 !important;
    text-shadow: 0 0 18px rgba(0, 206, 255, .18) !important;
}

body.app-shell .item-id .description {
    margin: 0 auto 14px !important;
    min-height: 42px !important;
    max-width: 210px !important;
    padding: 7px 10px !important;
    border-radius: 10px !important;
    border: 1px solid rgba(90, 211, 255, .14) !important;
    background: rgba(5, 17, 31, .56) !important;
    color: rgba(214, 245, 255, .82) !important;
    font-size: 11px !important;
    line-height: 1.35 !important;
}

body.app-shell .item-id .price {
    margin-top: auto !important;
    width: 100% !important;
    border-radius: 12px !important;
    padding: 12px 8px !important;
    font-size: 18px !important;
    letter-spacing: .06em !important;
    background: linear-gradient(135deg, rgba(0, 182, 255, .2), rgba(0, 221, 255, .1)) !important;
    border: 1px solid rgba(85, 214, 255, .4) !important;
    color: #8fefff !important;
    box-shadow: inset 0 0 20px rgba(82, 211, 255, .12), 0 0 18px rgba(0, 193, 255, .08) !important;
}

body.app-shell .item-id .price i {
    color: #9fe9ff !important;
}

/* Catalog cards keep the product image from the inline PHP data attribute. */
html body.app-shell #donate-catalog .tab-list .items {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 14px !important;
}

html body.app-shell #donate-catalog .tab-list .item-id {
    min-height: 324px !important;
    padding: 10px !important;
    border-radius: 16px !important;
    background: linear-gradient(180deg, rgba(18, 38, 58, .94), rgba(8, 19, 34, .98)) !important;
}

html body.app-shell #donate-catalog .tab-list .item-id .image {
    flex: 0 0 114px !important;
    width: 100% !important;
    max-width: none !important;
    height: 114px !important;
    min-height: 114px !important;
    margin: 0 0 13px !important;
    border: 1px solid rgba(117, 194, 255, .14) !important;
    border-radius: 11px !important;
    background-color: #18263a !important;
    background-size: contain !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    box-shadow: inset 0 0 24px rgba(34, 211, 238, .08), 0 10px 22px rgba(0, 0, 0, .2) !important;
}

html body.app-shell #donate-catalog .tab-list .item-id .title {
    margin: 0 3px 7px !important;
    font-size: 13px !important;
    letter-spacing: .03em !important;
}

html body.app-shell #donate-catalog .tab-list .item-id .product-badge {
    align-self: flex-start !important;
    margin: 0 3px 6px !important;
    padding: 3px 7px !important;
    border: 1px solid rgba(34, 211, 238, .28) !important;
    border-radius: 999px !important;
    color: #67e8f9 !important;
    background: rgba(34, 211, 238, .08) !important;
    font-size: 9px !important;
}

html body.app-shell #donate-catalog .tab-list .item-id .description {
    margin: 0 3px !important;
    color: #8fa0b5 !important;
}

html body.app-shell #donate-catalog .tab-list .item-id .product-card-foot {
    gap: 6px !important;
    padding: 12px 3px 1px !important;
}

html body.app-shell #donate-catalog .tab-list .item-id .price {
    min-width: 0 !important;
    flex: 1 1 auto !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    font-size: 15px !important;
}

html body.app-shell #donate-catalog .tab-list .item-id .product-buy {
    flex: 0 0 auto !important;
    min-height: 34px !important;
    padding: 0 11px !important;
    border-radius: 9px !important;
    color: #a5f3fc !important;
    background: rgba(34, 211, 238, .09) !important;
    border-color: rgba(34, 211, 238, .36) !important;
    font-size: 10px !important;
}

html body.app-shell #donate-catalog .tab-list .item-id .product-buy:hover {
    color: #07121e !important;
    background: #67e8f9 !important;
    box-shadow: 0 8px 20px rgba(34, 211, 238, .28) !important;
}

body.app-shell .item-id .product-badge,
body.app-shell .item-id .badge,
body.app-shell .item-id .discount {
    top: 12px !important;
    right: 12px !important;
    border-radius: 999px !important;
    padding: 4px 9px !important;
    border: 1px solid rgba(80, 214, 255, .38) !important;
    background: rgba(10, 26, 40, .8) !important;
    color: #9deeff !important;
    font-size: 10px !important;
    letter-spacing: .08em !important;
    text-transform: uppercase !important;
}

body.app-shell .btn,
body.app-shell .product-buy,
body.app-shell .auth-submit,
body.app-shell .hero-actions .btn {
    border-color: rgba(104, 244, 255, .72) !important;
    background: linear-gradient(135deg, #007ff0, #00bde8 55%, #00e1d0) !important;
    box-shadow: 0 13px 32px rgba(0, 157, 255, .34) !important;
}

body.app-shell .btn:hover,
body.app-shell .product-buy:hover,
body.app-shell .auth-submit:hover,
body.app-shell .hero-actions .btn:hover {
    background: linear-gradient(135deg, #139dff, #00d5f2 55%, #24f0d7) !important;
    box-shadow: 0 17px 40px rgba(0, 196, 255, .5), 0 0 22px rgba(0, 235, 220, .3) !important;
}

body.app-shell input:focus,
body.app-shell select:focus,
body.app-shell textarea:focus {
    border-color: #00d9ff !important;
    box-shadow: 0 0 0 3px rgba(0, 207, 255, .16), 0 0 24px rgba(0, 166, 255, .24) !important;
}

/* Interactive polish: ambient light, scanlines and clearer product states. */
body.app-shell .app-frame {
    position: relative;
    isolation: isolate;
}

body.app-shell .app-frame::before {
    position: fixed;
    z-index: -1;
    inset: 0;
    pointer-events: none;
    content: "";
    opacity: .34;
    background:
        linear-gradient(115deg, transparent 0 46%, rgba(0, 220, 255, .08) 50%, transparent 54%),
        repeating-linear-gradient(0deg, transparent 0 7px, rgba(0, 201, 255, .025) 8px);
    background-size: 180% 100%, 100% 9px;
    animation: interface-scan 15s linear infinite;
}

body.app-shell .hero-banner {
    overflow: hidden !important;
}

body.app-shell .hero-banner::after {
    position: absolute;
    z-index: 0;
    top: -30%;
    left: -45%;
    width: 34%;
    height: 170%;
    pointer-events: none;
    content: "";
    background: linear-gradient(90deg, transparent, rgba(112, 244, 255, .16), transparent);
    transform: rotate(18deg);
    animation: hero-sweep 8s ease-in-out infinite;
}

body.app-shell .hero-banner > * {
    position: relative;
    z-index: 1;
}

body.app-shell .item-id,
body.app-shell .stat-card,
body.app-shell .product-card {
    position: relative;
    overflow: hidden;
    transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease !important;
}

body.app-shell .item-id::after,
body.app-shell .stat-card::after,
body.app-shell .product-card::after {
    position: absolute;
    top: 0;
    left: -120%;
    width: 70%;
    height: 100%;
    pointer-events: none;
    content: "";
    background: linear-gradient(105deg, transparent, rgba(116, 246, 255, .11), transparent);
    transform: skewX(-18deg);
    transition: left .7s ease;
}

body.app-shell .item-id:hover::after,
body.app-shell .stat-card:hover::after,
body.app-shell .product-card:hover::after {
    left: 140%;
}

body.app-shell .item-id img,
body.app-shell .product-card img {
    transition: transform .45s cubic-bezier(.2, .8, .2, 1), filter .45s ease !important;
}

body.app-shell .item-id:hover img,
body.app-shell .product-card:hover img {
    filter: saturate(1.2) drop-shadow(0 0 16px rgba(0, 215, 255, .26)) !important;
    transform: scale(1.045) translateY(-2px) !important;
}

body.app-shell .noxis-mobile-bar {
    border: 1px solid rgba(0, 218, 255, .48) !important;
    background: linear-gradient(135deg, rgba(5, 25, 51, .96), rgba(10, 12, 35, .96)) !important;
    box-shadow: 0 -10px 34px rgba(0, 120, 210, .2), 0 0 24px rgba(0, 205, 255, .12) !important;
    backdrop-filter: blur(18px);
}

body.app-shell .noxis-mobile-bar a.active,
body.app-shell .noxis-mobile-bar a:hover {
    color: #72f5ff !important;
    background: rgba(0, 191, 255, .16) !important;
    box-shadow: inset 0 0 22px rgba(0, 213, 255, .12) !important;
}

@keyframes interface-scan {
    0% { background-position: 120% 0, 0 0; }
    100% { background-position: -40% 0, 0 90px; }
}

@keyframes hero-sweep {
    0%, 22% { left: -45%; opacity: 0; }
    38% { opacity: 1; }
    68%, 100% { left: 145%; opacity: 0; }
}

/* Extra interface details: live status, depth and keyboard feedback. */
body.app-shell .app-topbar::before {
    position: absolute;
    top: 12px;
    right: 14px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    content: "";
    background: #64f6ff;
    box-shadow: 0 0 0 4px rgba(0, 218, 255, .1), 0 0 18px rgba(0, 231, 255, .9);
    animation: live-pulse 2.2s ease-in-out infinite;
}

body.app-shell .app-topbar {
    position: relative;
}

body.app-shell .popular,
body.app-shell .badge,
body.app-shell .product-badge,
body.app-shell [class*="status"] {
    border-color: rgba(0, 222, 255, .54) !important;
    background: linear-gradient(90deg, rgba(0, 153, 220, .18), rgba(0, 231, 210, .12)) !important;
    box-shadow: inset 0 0 16px rgba(0, 210, 255, .08), 0 0 14px rgba(0, 180, 255, .08) !important;
}

body.app-shell .price,
body.app-shell .product-price,
body.app-shell [class*="price"] {
    color: #63f5ff !important;
    text-shadow: 0 0 18px rgba(0, 221, 255, .4) !important;
}

body.app-shell a:focus-visible,
body.app-shell button:focus-visible,
body.app-shell input:focus-visible,
body.app-shell select:focus-visible,
body.app-shell textarea:focus-visible {
    outline: 2px solid #6df6ff !important;
    outline-offset: 3px !important;
    box-shadow: 0 0 0 5px rgba(0, 205, 255, .18), 0 0 24px rgba(0, 205, 255, .35) !important;
}

body.app-shell .app-content > * {
    animation: content-rise .55s both;
}

body.app-shell .app-content > *:nth-child(2) { animation-delay: .06s; }
body.app-shell .app-content > *:nth-child(3) { animation-delay: .12s; }
body.app-shell .app-content > *:nth-child(4) { animation-delay: .18s; }

@keyframes live-pulse {
    0%, 100% { opacity: .7; transform: scale(.85); }
    50% { opacity: 1; transform: scale(1.15); }
}

@keyframes content-rise {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Ambient details and product-card variety. */
body.app-shell {
    scrollbar-color: #00cfe5 #071326;
    scrollbar-width: thin;
}

body.app-shell ::selection {
    color: #03111d;
    background: #6df6ff;
    text-shadow: none;
}

body.app-shell ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

body.app-shell ::-webkit-scrollbar-track {
    background: #071326;
}

body.app-shell ::-webkit-scrollbar-thumb {
    border: 2px solid #071326;
    border-radius: 999px;
    background: linear-gradient(#008fe8, #00ded0);
}

body.app-shell ::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(#18b8ff, #57f5df);
}

body.app-shell .app-brand,
body.app-shell .app-topbar,
body.app-shell .noxis-mobile-bar {
    -webkit-backdrop-filter: blur(18px);
}

body.app-shell .item-id:nth-child(3n + 1) {
    --card-accent: #00e4d0;
}

body.app-shell .item-id:nth-child(3n + 2) {
    --card-accent: #38b9ff;
}

body.app-shell .item-id:nth-child(3n) {
    --card-accent: #7c9dff;
}

body.app-shell .item-id {
    border-top-color: color-mix(in srgb, var(--card-accent, #00c4ff) 70%, transparent) !important;
}

body.app-shell .item-id::before {
    position: absolute;
    top: 0;
    right: 18px;
    left: 18px;
    height: 1px;
    pointer-events: none;
    content: "";
    background: linear-gradient(90deg, transparent, var(--card-accent, #00c4ff), transparent);
    box-shadow: 0 0 14px var(--card-accent, #00c4ff);
    opacity: .72;
}

body.app-shell .item-id:hover {
    border-top-color: var(--card-accent, #00e4d0) !important;
}

body.app-shell .app-nav li.active a,
body.app-shell .noxis-mobile-bar a.active {
    position: relative;
}

body.app-shell .app-nav li.active a::after {
    position: absolute;
    top: 50%;
    right: 8px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    content: "";
    background: #6df6ff;
    box-shadow: 0 0 12px #00d9ff;
    transform: translateY(-50%);
}

@media (max-width: 900px) {
    body.app-shell .item-id::before {
        right: 12px;
        left: 12px;
    }
}

/* Futuristic signal layer: deeper glass, stronger glow and motion cues. */
body.app-shell .app-content::before {
    position: fixed;
    inset: 0 0 0 0;
    pointer-events: none;
    content: "";
    background:
        linear-gradient(180deg, rgba(0, 210, 255, .04), transparent 18%, transparent 82%, rgba(0, 210, 255, .04)),
        repeating-linear-gradient(90deg, rgba(120, 230, 255, .016) 0 1px, transparent 1px 20px),
        repeating-linear-gradient(0deg, rgba(120, 230, 255, .012) 0 1px, transparent 1px 18px);
    mix-blend-mode: screen;
    opacity: .8;
}

body.app-shell .app-sidebar::after,
body.app-shell .app-topbar::after,
body.app-shell .noxis-mobile-bar::before,
body.app-shell .hero-banner::before {
    position: absolute;
    inset: 0;
    pointer-events: none;
    content: "";
    border-radius: inherit;
    background: linear-gradient(135deg, rgba(112, 250, 255, .12), transparent 30%, transparent 70%, rgba(122, 201, 255, .12));
    opacity: .9;
}

body.app-shell .app-sidebar,
body.app-shell .app-topbar,
body.app-shell .noxis-mobile-bar,
body.app-shell .hero-banner,
body.app-shell .item-id,
body.app-shell .stat-card {
    position: relative;
    overflow: hidden;
}

body.app-shell .app-nav a {
    transition: transform .25s ease, border-color .25s ease, background .25s ease, box-shadow .25s ease !important;
}

body.app-shell .app-nav a:hover {
    transform: translateX(2px) !important;
}

body.app-shell .btn,
body.app-shell .product-buy,
body.app-shell .auth-submit,
body.app-shell .hero-actions .btn {
    position: relative;
    overflow: hidden;
    box-shadow: 0 14px 36px rgba(0, 180, 255, .24), inset 0 1px rgba(255,255,255,.18) !important;
}

body.app-shell .btn::after,
body.app-shell .product-buy::after,
body.app-shell .auth-submit::after,
body.app-shell .hero-actions .btn::after {
    position: absolute;
    inset: 0;
    content: "";
    background: linear-gradient(120deg, transparent 20%, rgba(255,255,255,.18) 50%, transparent 80%);
    transform: translateX(-120%);
    animation: btn-shimmer 4.8s ease-in-out infinite;
}

body.app-shell .product-badge,
body.app-shell .badge,
body.app-shell .popular {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    border-radius: 999px;
    letter-spacing: .08em;
    text-transform: uppercase;
    font-size: 9px;
    font-weight: 800;
}

body.app-shell .item-id:hover,
body.app-shell .stat-card:hover,
body.app-shell .product-card:hover {
    transform: translateY(-7px) scale(1.01) !important;
}

body.app-shell .item-id::before,
body.app-shell .stat-card::before,
body.app-shell .product-card::before {
    position: absolute;
    right: 18px;
    left: 18px;
    height: 1px;
    content: "";
    background: linear-gradient(90deg, transparent, rgba(121, 254, 255, .72), transparent);
    box-shadow: 0 0 18px rgba(105, 249, 255, .46);
    opacity: .78;
}

body.app-shell .app-content > *:nth-child(odd) {
    transform-origin: left center;
}

body.app-shell .app-content > *:nth-child(even) {
    transform-origin: right center;
}

@keyframes btn-shimmer {
    0%, 100% { transform: translateX(-120%); }
    42%, 58% { transform: translateX(120%); }
}

@media (max-width: 900px) {
    body.app-shell .app-content::before {
        background:
            linear-gradient(180deg, rgba(0, 210, 255, .04), transparent 18%, transparent 82%, rgba(0, 210, 255, .04)),
            repeating-linear-gradient(90deg, rgba(120, 230, 255, .014) 0 1px, transparent 1px 14px),
            repeating-linear-gradient(0deg, rgba(120, 230, 255, .01) 0 1px, transparent 1px 14px);
    }
}

/* NOXIS Control Center: final product-wide visual system. */
:root {
    --noxis-cc-bg: #0b0c10;
    --noxis-cc-panel: rgba(22, 21, 37, .78);
    --noxis-cc-panel-strong: rgba(17, 17, 31, .94);
    --noxis-cc-purple: #a855f7;
    --noxis-cc-indigo: #6366f1;
    --noxis-cc-blue: #3b82f6;
    --noxis-cc-cyan: #22d3ee;
    --noxis-cc-border: rgba(168, 85, 247, .2);
}

body.app-shell {
    background-color: var(--noxis-cc-bg) !important;
    background-image:
        radial-gradient(circle at 8% 0%, rgba(168, 85, 247, .2), transparent 30rem),
        radial-gradient(circle at 96% 20%, rgba(59, 130, 246, .18), transparent 28rem),
        linear-gradient(180deg, #0b0c10 0%, #0b0d15 100%) !important;
    color: #e0e6ed !important;
}

body.app-shell .app-frame {
    gap: 22px !important;
    padding: 18px !important;
}

body.app-shell .app-sidebar,
body.app-shell .app-topbar,
body.app-shell .hero-banner,
body.app-shell .stat-card,
body.app-shell .item-id,
body.app-shell .auth-card,
body.app-shell .account-card,
body.app-shell .orders-panel,
body.app-shell .support-app,
body.app-shell .wiki-card,
body.app-shell .payment-id.window,
body.app-shell .faq-item {
    background: var(--noxis-cc-panel) !important;
    border: 1px solid var(--noxis-cc-border) !important;
    box-shadow: 0 24px 70px rgba(0, 0, 0, .32), inset 0 1px rgba(255, 255, 255, .06) !important;
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
}

body.app-shell .app-sidebar {
    width: 260px !important;
    padding: 20px 16px !important;
    border-radius: 22px !important;
    background: linear-gradient(180deg, rgba(22, 21, 37, .95), rgba(12, 14, 26, .92)) !important;
}

body.app-shell .app-brand {
    padding: 4px 6px 20px !important;
    border-bottom: 1px solid rgba(168, 85, 247, .16) !important;
}

body.app-shell .app-brand-mark {
    background: linear-gradient(135deg, var(--noxis-cc-purple), var(--noxis-cc-indigo)) !important;
    box-shadow: 0 0 28px rgba(168, 85, 247, .38) !important;
}

body.app-shell .app-brand-copy strong {
    letter-spacing: .16em !important;
}

body.app-shell .app-nav-heading {
    margin-top: 20px !important;
}

body.app-shell .app-nav-group {
    margin-top: 18px !important;
}

body.app-shell .app-nav-group-label,
body.app-shell .app-nav-kicker {
    color: #697386 !important;
    letter-spacing: .14em !important;
    font-size: 10px !important;
    text-transform: uppercase !important;
}

body.app-shell .app-nav a {
    min-height: 42px !important;
    padding: 10px 12px !important;
    color: #8e98aa !important;
    border-radius: 12px !important;
}

body.app-shell .app-nav a:hover,
body.app-shell .app-nav li.active a {
    color: #f1eaff !important;
    background: linear-gradient(90deg, rgba(168, 85, 247, .24), rgba(99, 102, 241, .11)) !important;
    border-color: rgba(168, 85, 247, .34) !important;
    box-shadow: 0 0 24px rgba(168, 85, 247, .16) !important;
}

body.app-shell .app-nav li.active a i {
    color: #c084fc !important;
}

body.app-shell .app-topbar {
    min-height: 58px !important;
    padding: 10px 16px !important;
    border-radius: 16px !important;
    background: rgba(20, 19, 35, .84) !important;
}

body.app-shell .public-topbar-context span {
    color: #b084f5 !important;
    background: rgba(168, 85, 247, .12) !important;
    border: 1px solid rgba(168, 85, 247, .25) !important;
}

body.app-shell .public-topbar-context strong {
    color: #fff !important;
}

body.app-shell .app-content {
    gap: 22px !important;
    padding: 0 4px 28px !important;
}

body.app-shell .hero-banner {
    min-height: 360px !important;
    padding: 38px !important;
    border-radius: 26px !important;
    background:
        radial-gradient(circle at 86% 50%, rgba(99, 102, 241, .2), transparent 18rem),
        linear-gradient(115deg, rgba(34, 24, 60, .95), rgba(14, 15, 30, .94)) !important;
}

body.app-shell .hero-banner::after {
    background: linear-gradient(90deg, transparent, rgba(192, 132, 252, .2), transparent) !important;
}

body.app-shell .hero-title {
    letter-spacing: -.04em !important;
    text-shadow: 0 0 34px rgba(168, 85, 247, .36) !important;
}

body.app-shell .hero-subtitle,
body.app-shell .hero-banner p {
    color: #9ca8b8 !important;
}

body.app-shell .items {
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)) !important;
    gap: 16px !important;
}

body.app-shell .item-id {
    min-height: 330px !important;
    padding: 16px !important;
    border-radius: 18px !important;
    background:
        radial-gradient(circle at 50% 0%, rgba(168, 85, 247, .13), transparent 38%),
        linear-gradient(160deg, rgba(25, 24, 43, .92), rgba(11, 15, 28, .96)) !important;
}

body.app-shell .item-id:hover {
    border-color: rgba(192, 132, 252, .72) !important;
    box-shadow: 0 24px 58px rgba(0, 0, 0, .42), 0 0 30px rgba(168, 85, 247, .2) !important;
}

body.app-shell .item-id .price {
    color: #ddd6fe !important;
    border-color: rgba(168, 85, 247, .4) !important;
    background: linear-gradient(135deg, rgba(168, 85, 247, .2), rgba(59, 130, 246, .12)) !important;
    box-shadow: inset 0 0 18px rgba(168, 85, 247, .1), 0 0 18px rgba(99, 102, 241, .08) !important;
}

body.app-shell .btn,
body.app-shell .product-buy,
body.app-shell .auth-submit,
body.app-shell .hero-actions .btn {
    background: linear-gradient(135deg, #7c3aed, #6366f1 58%, #3b82f6) !important;
    border-color: rgba(196, 181, 253, .58) !important;
    box-shadow: 0 12px 34px rgba(99, 102, 241, .3), inset 0 1px rgba(255, 255, 255, .2) !important;
}

body.app-shell .btn:hover,
body.app-shell .product-buy:hover,
body.app-shell .auth-submit:hover,
body.app-shell .hero-actions .btn:hover {
    background: linear-gradient(135deg, #9333ea, #6366f1 58%, #2563eb) !important;
    box-shadow: 0 16px 40px rgba(129, 80, 240, .45), 0 0 24px rgba(59, 130, 246, .25) !important;
}

body.app-shell input,
body.app-shell select,
body.app-shell textarea,
body.app-shell .shop-control,
body.app-shell .shop-search {
    color: #e5e7eb !important;
    background: rgba(10, 11, 20, .78) !important;
    border-color: rgba(139, 92, 246, .24) !important;
}

body.app-shell input:focus,
body.app-shell select:focus,
body.app-shell textarea:focus {
    border-color: #a855f7 !important;
    box-shadow: 0 0 0 3px rgba(168, 85, 247, .16), 0 0 22px rgba(99, 102, 241, .22) !important;
}

body.app-shell .noxis-mobile-bar {
    border-color: rgba(168, 85, 247, .4) !important;
    background: rgba(18, 17, 32, .94) !important;
}

@media (max-width: 900px) {
    body.app-shell .app-frame {
        padding: 10px !important;
    }

    body.app-shell .app-content {
        padding: 78px 0 74px !important;
    }

    body.app-shell .hero-banner {
        min-height: 300px !important;
        padding: 24px !important;
    }
}

@media (max-width: 560px) {
    body.app-shell .app-topbar {
        left: 8px !important;
        right: 8px !important;
    }

    body.app-shell .hero-banner {
        padding: 20px !important;
        border-radius: 20px !important;
    }

    body.app-shell .items {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
    }

    body.app-shell .item-id {
        min-height: 286px !important;
        padding: 12px !important;
    }

    body.app-shell .item-id .image {
        height: 92px !important;
        margin-bottom: 12px !important;
    }

    body.app-shell .item-id .title {
        font-size: 15px !important;
    }

    body.app-shell .item-id .description {
        font-size: 10px !important;
        min-height: 36px !important;
    }

    body.app-shell .item-id .price {
        font-size: 14px !important;
        padding: 9px 6px !important;
    }

    html body.app-shell #donate-catalog .tab-list .items {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 9px !important;
    }

    html body.app-shell #donate-catalog .tab-list .item-id {
        min-height: 278px !important;
        padding: 8px !important;
    }

    html body.app-shell #donate-catalog .tab-list .item-id .image {
        flex-basis: 92px !important;
        height: 92px !important;
        min-height: 92px !important;
    }

    html body.app-shell #donate-catalog .tab-list .item-id .product-card-foot {
        align-items: stretch !important;
        flex-direction: column !important;
    }

    html body.app-shell #donate-catalog .tab-list .item-id .product-buy {
        width: 100% !important;
    }
}

/* Public surface refresh: one responsive system for account, support,
   knowledge, auth, history and game pages. */
body.app-shell .app-content {
    min-width: 0 !important;
    content-visibility: auto;
    contain: layout style;
}

body.app-shell .app-content > .container,
body.app-shell .app-content > main,
body.app-shell .app-content > section {
    width: min(100%, 1180px) !important;
    min-width: 0 !important;
    margin-right: auto !important;
    margin-left: auto !important;
}

body.app-shell .app-content h1,
body.app-shell .app-content h2,
body.app-shell .app-content h3 {
    color: #f8f7ff !important;
    letter-spacing: -.035em !important;
}

body.app-shell .app-content h1 {
    font-size: clamp(28px, 4vw, 46px) !important;
    line-height: 1.05 !important;
}

body.app-shell .app-content h2 {
    font-size: clamp(22px, 3vw, 34px) !important;
    line-height: 1.1 !important;
}

body.app-shell .app-content p,
body.app-shell .app-content li,
body.app-shell .app-content .muted,
body.app-shell .app-content small {
    color: #8e9ab0 !important;
}

body.app-shell .panel,
body.app-shell .card,
body.app-shell .account-card,
body.app-shell .support-panel,
body.app-shell .support-card,
body.app-shell .orders-panel,
body.app-shell .orders-summary-card,
body.app-shell .wiki-card,
body.app-shell .faq-item,
body.app-shell .auth-card,
body.app-shell .history-panel,
body.app-shell .inventory-panel,
body.app-shell .mint-panel,
body.app-shell .checkout-result-card {
    border: 1px solid rgba(168, 85, 247, .2) !important;
    border-radius: 20px !important;
    background:
        linear-gradient(145deg, rgba(23, 23, 43, .9), rgba(9, 13, 27, .94)) !important;
    box-shadow: 0 18px 48px rgba(0, 0, 0, .24), inset 0 1px rgba(255, 255, 255, .06) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    backdrop-filter: blur(16px) !important;
}

body.app-shell .panel:hover,
body.app-shell .card:hover,
body.app-shell .account-card:hover,
body.app-shell .support-card:hover,
body.app-shell .wiki-card:hover,
body.app-shell .orders-summary-card:hover {
    border-color: rgba(85, 233, 255, .42) !important;
    transform: translate3d(0, -3px, 0) !important;
}

body.app-shell form:not(.product-favorite-form) {
    min-width: 0;
}

body.app-shell label {
    color: #bac4d7 !important;
    font-size: 12px !important;
    font-weight: 700 !important;
}

body.app-shell input,
body.app-shell select,
body.app-shell textarea {
    min-height: 42px !important;
    color: #f4f7ff !important;
    border: 1px solid rgba(126, 93, 255, .28) !important;
    border-radius: 12px !important;
    background: rgba(6, 9, 20, .72) !important;
}

body.app-shell textarea {
    min-height: 110px !important;
    resize: vertical !important;
}

body.app-shell table {
    width: 100% !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    overflow: hidden !important;
    border: 1px solid rgba(126, 93, 255, .2) !important;
    border-radius: 16px !important;
    background: rgba(8, 12, 25, .45) !important;
}

body.app-shell th {
    color: #b794ff !important;
    background: rgba(126, 93, 255, .12) !important;
    font-size: 10px !important;
    letter-spacing: .1em !important;
    text-transform: uppercase !important;
}

body.app-shell td,
body.app-shell th {
    padding: 13px 14px !important;
    border-bottom: 1px solid rgba(255, 255, 255, .06) !important;
}

body.app-shell tr:last-child td {
    border-bottom: 0 !important;
}

body.app-shell .empty-state,
body.app-shell .no-results,
body.app-shell .empty-block {
    display: grid !important;
    place-items: center !important;
    min-height: 180px !important;
    padding: 28px !important;
    border: 1px dashed rgba(85, 233, 255, .25) !important;
    border-radius: 18px !important;
    color: #8e9ab0 !important;
    text-align: center !important;
    background: rgba(85, 233, 255, .035) !important;
}

body.app-shell .footer {
    margin-top: 44px !important;
}

@media (max-width: 700px) {
    body.app-shell .app-content {
        padding-right: 10px !important;
        padding-left: 10px !important;
    }

    body.app-shell .panel,
    body.app-shell .card,
    body.app-shell .account-card,
    body.app-shell .support-panel,
    body.app-shell .support-card,
    body.app-shell .orders-panel,
    body.app-shell .wiki-card,
    body.app-shell .faq-item,
    body.app-shell .auth-card {
        border-radius: 16px !important;
    }

    body.app-shell table {
        display: block !important;
        overflow-x: auto !important;
        white-space: nowrap !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.app-shell .panel:hover,
    body.app-shell .card:hover,
    body.app-shell .account-card:hover,
    body.app-shell .support-card:hover,
    body.app-shell .wiki-card:hover,
    body.app-shell .orders-summary-card:hover {
        transform: none !important;
    }
}

/* Store card specification: glass surface, dedicated preview/info/footer
   zones and a predictable 1 / 2-3 / 5 column responsive grid. */
html body.app-shell #donate-catalog .tab-list > .tab-id > .items {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 16px !important;
    align-items: stretch !important;
    justify-content: center !important;
}

html body.app-shell #donate-catalog .tab-list > .tab-id .item-id {
    display: flex !important;
    flex: 0 1 calc((100% - 64px) / 5) !important;
    min-width: 0 !important;
    min-height: 352px !important;
    padding: 12px !important;
    flex-direction: column !important;
    border: 1px solid rgba(168, 85, 247, .28) !important;
    border-radius: 20px !important;
    background:
        radial-gradient(circle at 50% 0%, rgba(168, 85, 247, .18), transparent 48%),
        rgba(20, 21, 38, .65) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    backdrop-filter: blur(16px) !important;
}

html body.app-shell #donate-catalog .tab-list > .tab-id .item-id .image {
    flex: 0 0 142px !important;
    width: 100% !important;
    height: 142px !important;
    min-height: 142px !important;
    margin: 0 0 14px !important;
    border: 1px solid rgba(6, 182, 212, .34) !important;
    border-radius: 15px !important;
    background-color: rgba(26, 16, 60, .7) !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: contain !important;
    box-shadow: inset 0 0 28px rgba(6, 182, 212, .12), 0 0 18px rgba(168, 85, 247, .08) !important;
}

html body.app-shell #donate-catalog .tab-list > .tab-id .item-id .title {
    min-height: 22px !important;
    margin: 0 0 6px !important;
    color: #fff !important;
    font-size: 15px !important;
    font-weight: 900 !important;
    line-height: 1.25 !important;
    text-transform: uppercase !important;
}

html body.app-shell #donate-catalog .tab-list > .tab-id .item-id .product-badge {
    align-self: flex-start !important;
    margin: 3px 0 7px !important;
    padding: 4px 9px !important;
    border: 1px solid rgba(168, 85, 247, .36) !important;
    border-radius: 999px !important;
    color: #d8b4fe !important;
    background: rgba(168, 85, 247, .12) !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    letter-spacing: .04em !important;
    line-height: 1.1 !important;
}

html body.app-shell #donate-catalog .tab-list > .tab-id .item-id .description {
    min-height: 42px !important;
    margin: 0 !important;
    color: #9da8bd !important;
    font-size: 11px !important;
    line-height: 1.45 !important;
}

html body.app-shell #donate-catalog .tab-list > .tab-id .item-id .product-card-foot {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    margin-top: auto !important;
    padding-top: 14px !important;
    border-top: 1px solid rgba(255, 255, 255, .08) !important;
}

html body.app-shell #donate-catalog .tab-list > .tab-id .item-id .price {
    min-width: 0 !important;
    padding: 7px 10px !important;
    border: 1px solid rgba(168, 85, 247, .42) !important;
    border-radius: 999px !important;
    color: #f0e7ff !important;
    background: rgba(168, 85, 247, .14) !important;
    font-size: 15px !important;
    font-weight: 900 !important;
    white-space: nowrap !important;
}

html body.app-shell #donate-catalog .tab-list > .tab-id .item-id .product-buy {
    min-height: 38px !important;
    padding: 0 13px !important;
    border: 1px solid rgba(6, 182, 212, .52) !important;
    border-radius: 11px !important;
    color: #d9fbff !important;
    background: rgba(6, 182, 212, .14) !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    white-space: nowrap !important;
}

html body.app-shell #donate-catalog .tab-list > .tab-id .item-id:hover,
html body.app-shell #donate-catalog .tab-list > .tab-id .item-id:focus-visible {
    border-color: rgba(168, 85, 247, .78) !important;
    box-shadow: 0 18px 42px rgba(0, 0, 0, .34), 0 0 28px rgba(168, 85, 247, .2) !important;
    transform: translateY(-4px) !important;
}

html body.app-shell #donate-catalog .tab-list > .tab-id .item-id:hover .image,
html body.app-shell #donate-catalog .tab-list > .tab-id .item-id:focus-visible .image {
    transform: scale(1.1) !important;
}

@media (min-width: 640px) and (max-width: 1024px) {
    html body.app-shell #donate-catalog .tab-list > .tab-id > .items {
        justify-content: center !important;
    }

    html body.app-shell #donate-catalog .tab-list > .tab-id .item-id {
        flex-basis: calc((100% - 32px) / 3) !important;
    }
}

@media (max-width: 820px) {
    html body.app-shell #donate-catalog .tab-list > .tab-id > .items {
        justify-content: center !important;
    }

    html body.app-shell #donate-catalog .tab-list > .tab-id .item-id {
        flex-basis: calc((100% - 16px) / 2) !important;
    }
}

@media (max-width: 639px) {
    html body.app-shell #donate-catalog .tab-list > .tab-id > .items {
        gap: 12px !important;
    }

    html body.app-shell #donate-catalog .tab-list > .tab-id .item-id {
        flex-basis: 100% !important;
        min-height: 334px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    html body.app-shell #donate-catalog .tab-list > .tab-id .item-id,
    html body.app-shell #donate-catalog .tab-list > .tab-id .item-id::after,
    html body.app-shell #donate-catalog .tab-list > .tab-id .item-id .image,
    html body.app-shell #donate-catalog .tab-list > .tab-id .item-id .image::after {
        animation: none !important;
        transition: none !important;
    }
}

/* Catalog motion pass: keep the cards tactile without relying on AOS. */
html body.app-shell #donate-catalog .tab-list > .tab-id > .items {
    position: relative !important;
}

html body.app-shell #donate-catalog .tab-list > .tab-id .item-id {
    position: relative !important;
    isolation: isolate !important;
    overflow: hidden !important;
    animation: catalog-card-breathe 5.8s ease-in-out infinite !important;
    will-change: transform, box-shadow !important;
}

html body.app-shell #donate-catalog .tab-list > .tab-id .item-id:nth-child(2n) {
    animation-delay: -1.8s !important;
}

html body.app-shell #donate-catalog .tab-list > .tab-id .item-id:nth-child(3n) {
    animation-delay: -3.4s !important;
}

html body.app-shell #donate-catalog .tab-list > .tab-id .item-id::after {
    content: "" !important;
    position: absolute !important;
    z-index: 3 !important;
    top: -30% !important;
    left: -75% !important;
    width: 42% !important;
    height: 170% !important;
    pointer-events: none !important;
    background: linear-gradient(105deg, transparent, rgba(255,255,255,.22), transparent) !important;
    transform: rotate(12deg) !important;
    animation: catalog-card-sheen 6.5s ease-in-out infinite !important;
}

html body.app-shell #donate-catalog .tab-list > .tab-id .item-id .image {
    position: relative !important;
    overflow: hidden !important;
    transition: transform .45s cubic-bezier(.2,.8,.2,1), box-shadow .45s ease, filter .45s ease !important;
}

html body.app-shell #donate-catalog .tab-list > .tab-id .item-id .image::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    pointer-events: none !important;
    border-radius: inherit !important;
    background: radial-gradient(circle at 50% 115%, rgba(85,233,255,.24), transparent 58%) !important;
    opacity: .45 !important;
    animation: catalog-image-pulse 3.8s ease-in-out infinite !important;
}

html body.app-shell #donate-catalog .tab-list > .tab-id .item-id:hover .image,
html body.app-shell #donate-catalog .tab-list > .tab-id .item-id:focus-visible .image {
    transform: scale(1.035) translateY(-2px) !important;
    filter: saturate(1.12) brightness(1.08) !important;
    box-shadow: inset 0 0 34px rgba(85,233,255,.22), 0 0 22px rgba(85,233,255,.18) !important;
}

html body.app-shell #donate-catalog .tab-list > .tab-id .item-id .product-badge {
    animation: catalog-badge-pulse 2.8s ease-in-out infinite !important;
}

html body.app-shell #donate-catalog .tab-list > .tab-id .item-id .product-buy {
    position: relative !important;
    overflow: hidden !important;
    transition: transform .25s ease, box-shadow .25s ease, background .25s ease !important;
}

html body.app-shell #donate-catalog .tab-list > .tab-id .item-id .product-buy::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    pointer-events: none !important;
    background: linear-gradient(115deg, transparent 25%, rgba(255,255,255,.38) 48%, transparent 70%) !important;
    transform: translateX(-130%) !important;
    animation: catalog-button-shine 4.8s ease-in-out infinite !important;
}

html body.app-shell #donate-catalog .catalog-category-switcher__button,
html body.app-shell #donate-catalog .shop-control {
    transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease !important;
}

html body.app-shell #donate-catalog .catalog-category-switcher__button:hover {
    transform: translateY(-2px) !important;
}

@keyframes catalog-card-breathe {
    0%, 100% { box-shadow: 0 14px 28px rgba(0,0,0,.2), inset 0 1px rgba(255,255,255,.06); }
    50% { box-shadow: 0 18px 34px rgba(0,0,0,.25), 0 0 18px rgba(126,93,255,.08), inset 0 1px rgba(255,255,255,.08); }
}

@keyframes catalog-card-sheen {
    0%, 58%, 100% { left: -75%; opacity: 0; }
    68% { left: 135%; opacity: 1; }
    78% { left: 135%; opacity: 0; }
}

@keyframes catalog-image-pulse {
    0%, 100% { opacity: .28; }
    50% { opacity: .62; }
}

@keyframes catalog-badge-pulse {
    0%, 100% { box-shadow: 0 0 0 rgba(85,233,255,0); }
    50% { box-shadow: 0 0 14px rgba(85,233,255,.22); }
}

@keyframes catalog-button-shine {
    0%, 62%, 100% { transform: translateX(-130%); }
    78% { transform: translateX(130%); }
}

@media (prefers-reduced-motion: reduce) {
    html body.app-shell #donate-catalog .tab-list > .tab-id .item-id,
    html body.app-shell #donate-catalog .tab-list > .tab-id .item-id::after,
    html body.app-shell #donate-catalog .tab-list > .tab-id .item-id .image::after,
    html body.app-shell #donate-catalog .tab-list > .tab-id .item-id .product-badge,
    html body.app-shell #donate-catalog .tab-list > .tab-id .item-id .product-buy::after {
        animation: none !important;
    }
}

/* Shared Control Center cards across dashboard, account, orders and support. */
body.app-shell .stat-card,
body.app-shell .noxis-server-card,
body.app-shell .noxis-balance-card,
body.app-shell .orders-summary-card,
body.app-shell .purchase-product-card,
body.app-shell .support-panel,
body.app-shell .support-card,
body.app-shell .wiki-card,
body.app-shell .account-card,
body.app-shell .payment-id.window,
body.app-shell .faq-item {
    border-radius: 18px !important;
    border-color: rgba(139, 92, 246, .22) !important;
    background:
        linear-gradient(145deg, rgba(28, 25, 48, .9), rgba(12, 16, 29, .96)) !important;
    box-shadow: 0 18px 48px rgba(0, 0, 0, .26), inset 0 1px rgba(255, 255, 255, .06) !important;
}

body.app-shell .stat-card:hover,
body.app-shell .noxis-server-card:hover,
body.app-shell .noxis-balance-card:hover,
body.app-shell .orders-summary-card:hover,
body.app-shell .support-card:hover,
body.app-shell .wiki-card:hover,
body.app-shell .account-card:hover {
    border-color: rgba(168, 85, 247, .55) !important;
    box-shadow: 0 22px 56px rgba(0, 0, 0, .34), 0 0 26px rgba(99, 102, 241, .16) !important;
    transform: translateY(-4px) !important;
}

body.app-shell .stat-card h3,
body.app-shell .noxis-server-card h3,
body.app-shell .noxis-balance-card h3,
body.app-shell .orders-summary-card h3,
body.app-shell .support-card h3,
body.app-shell .wiki-card h3,
body.app-shell .account-card h3 {
    color: #f5f3ff !important;
    letter-spacing: -.02em !important;
}

body.app-shell .stat-card small,
body.app-shell .noxis-server-card small,
body.app-shell .noxis-balance-card small,
body.app-shell .orders-summary-card small,
body.app-shell .support-card small,
body.app-shell .wiki-card small {
    color: #8994a8 !important;
}

body.app-shell .stat-card .icon,
body.app-shell .noxis-server-card .icon,
body.app-shell .noxis-balance-card .icon,
body.app-shell .orders-summary-card .icon {
    color: #c084fc !important;
    background: rgba(168, 85, 247, .12) !important;
    border: 1px solid rgba(168, 85, 247, .24) !important;
    box-shadow: 0 0 22px rgba(168, 85, 247, .13) !important;
}

body.app-shell .support-panel,
body.app-shell .orders-panel,
body.app-shell .account-card,
body.app-shell .wiki-card {
    padding: 22px !important;
}

body.app-shell .orders-table,
body.app-shell .history-table,
body.app-shell table {
    border-collapse: separate !important;
    border-spacing: 0 8px !important;
}

body.app-shell .orders-table tr,
body.app-shell .history-table tr,
body.app-shell table tr {
    background: rgba(255, 255, 255, .025) !important;
}

body.app-shell .orders-table td,
body.app-shell .orders-table th,
body.app-shell .history-table td,
body.app-shell .history-table th,
body.app-shell table td,
body.app-shell table th {
    border-color: rgba(139, 92, 246, .14) !important;
}

body.app-shell .faq-item,
body.app-shell .support-card,
body.app-shell .wiki-card {
    transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease !important;
}

body.app-shell .faq-item summary,
body.app-shell .support-card a,
body.app-shell .wiki-card a {
    color: #ddd6fe !important;
}

body.app-shell .product-favorite {
    color: #c084fc !important;
    background: rgba(168, 85, 247, .12) !important;
    border: 1px solid rgba(168, 85, 247, .24) !important;
    border-radius: 9px !important;
}

@media (max-width: 560px) {
    body.app-shell .stat-card,
    body.app-shell .noxis-server-card,
    body.app-shell .noxis-balance-card,
    body.app-shell .orders-summary-card,
    body.app-shell .support-panel,
    body.app-shell .support-card,
    body.app-shell .wiki-card,
    body.app-shell .account-card,
    body.app-shell .payment-id.window,
    body.app-shell .faq-item {
        border-radius: 15px !important;
        padding: 15px !important;
    }
}

/* Full NOXIS rewrite: one visual language for every public surface. */
body.app-shell {
    --cc-bg: #080a12;
    --cc-panel: rgba(16, 20, 35, .88);
    --cc-panel-soft: rgba(19, 19, 38, .72);
    --cc-line: rgba(126, 93, 255, .2);
    --cc-line-bright: rgba(143, 119, 255, .58);
    --cc-purple: #9b6cff;
    --cc-blue: #4b8dff;
    --cc-cyan: #55e9ff;
    --cc-text: #f5f7ff;
    --cc-muted: #8d98ad;
    background: var(--cc-bg) !important;
    background-image:
        radial-gradient(ellipse at 12% -8%, rgba(122, 70, 255, .28), transparent 34rem),
        radial-gradient(ellipse at 100% 28%, rgba(30, 129, 255, .2), transparent 31rem),
        linear-gradient(145deg, #080a12, #0b0d18 48%, #080b15) !important;
    font-family: "Plus Jakarta Sans", Inter, system-ui, sans-serif !important;
    color: var(--cc-text) !important;
}

body.app-shell::before {
    position: fixed;
    z-index: -2;
    inset: 0;
    pointer-events: none;
    content: "";
    opacity: .34;
    background-image:
        linear-gradient(rgba(110, 129, 255, .06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(110, 129, 255, .06) 1px, transparent 1px);
    background-size: 42px 42px;
    mask-image: linear-gradient(to bottom, #000, transparent 82%);
}

body.app-shell .app-frame {
    display: grid !important;
    grid-template-columns: 252px minmax(0, 1fr) !important;
    gap: 18px !important;
    max-width: 1640px !important;
    margin: 0 auto !important;
    padding: 14px !important;
}

body.app-shell .app-sidebar {
    position: sticky !important;
    top: 14px !important;
    height: calc(100vh - 28px) !important;
    box-sizing: border-box !important;
    border: 1px solid var(--cc-line) !important;
    border-radius: 24px !important;
    background:
        linear-gradient(180deg, rgba(19, 21, 38, .96), rgba(9, 13, 25, .96)) !important;
    box-shadow: 0 25px 80px rgba(0, 0, 0, .4), inset 0 1px rgba(255, 255, 255, .06) !important;
}

body.app-shell .app-sidebar::before,
body.app-shell .app-topbar::before {
    position: absolute;
    top: 0;
    left: 18%;
    width: 64%;
    height: 1px;
    content: "";
    background: linear-gradient(90deg, transparent, var(--cc-cyan), transparent);
    box-shadow: 0 0 20px var(--cc-cyan);
    opacity: .7;
}

body.app-shell .app-content {
    min-width: 0 !important;
    padding: 0 0 36px !important;
}

body.app-shell .app-topbar {
    position: sticky !important;
    top: 14px !important;
    z-index: 20 !important;
    min-height: 58px !important;
    margin-bottom: 18px !important;
    border: 1px solid var(--cc-line) !important;
    border-radius: 18px !important;
    background: rgba(14, 17, 31, .84) !important;
    box-shadow: 0 18px 50px rgba(0, 0, 0, .28), inset 0 1px rgba(255, 255, 255, .06) !important;
    backdrop-filter: blur(22px) !important;
}

body.app-shell .app-brand-mark {
    border-radius: 14px !important;
    background: linear-gradient(145deg, #a56bff, #4d82ff) !important;
    box-shadow: 0 0 30px rgba(137, 92, 255, .46) !important;
}

body.app-shell .app-brand-copy strong {
    color: #fff !important;
    letter-spacing: .18em !important;
}

body.app-shell .app-nav {
    gap: 5px !important;
}

body.app-shell .app-nav a {
    min-height: 42px !important;
    border: 1px solid transparent !important;
    border-radius: 13px !important;
    color: #8b95a9 !important;
    transition: .25s ease !important;
}

body.app-shell .app-nav a:hover {
    color: #fff !important;
    background: rgba(126, 93, 255, .1) !important;
    transform: translateX(3px) !important;
}

body.app-shell .app-nav li.active a {
    color: #fff !important;
    border-color: rgba(155, 108, 255, .42) !important;
    background: linear-gradient(100deg, rgba(126, 79, 255, .32), rgba(65, 117, 255, .12)) !important;
    box-shadow: 0 10px 28px rgba(92, 62, 190, .2), inset 0 1px rgba(255, 255, 255, .08) !important;
}

body.app-shell .app-nav li.active a i,
body.app-shell .online-status b {
    color: var(--cc-cyan) !important;
}

body.app-shell .hero-banner,
body.app-shell .auth-card,
body.app-shell .account-card,
body.app-shell .orders-panel,
body.app-shell .support-app,
body.app-shell .support-panel,
body.app-shell .wiki-card,
body.app-shell .stat-card,
body.app-shell .mint-card,
body.app-shell .faq-item,
body.app-shell .payment-id.window,
body.app-shell .item-id,
body.app-shell .card,
body.app-shell .panel {
    border: 1px solid var(--cc-line) !important;
    border-radius: 22px !important;
    background:
        linear-gradient(145deg, rgba(21, 23, 43, .9), rgba(10, 14, 27, .96)) !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .28), inset 0 1px rgba(255, 255, 255, .05) !important;
}

body.app-shell .hero-banner {
    min-height: 330px !important;
    border-radius: 28px !important;
    background:
        radial-gradient(circle at 84% 45%, rgba(96, 77, 255, .3), transparent 17rem),
        linear-gradient(120deg, rgba(30, 24, 63, .94), rgba(10, 14, 29, .98)) !important;
}

body.app-shell .hero-title,
body.app-shell h1,
body.app-shell h2 {
    color: #fbfbff !important;
    letter-spacing: -.045em !important;
}

body.app-shell .hero-subtitle,
body.app-shell .section-note,
body.app-shell .description,
body.app-shell .item-id .description {
    color: var(--cc-muted) !important;
}

body.app-shell .btn,
body.app-shell .product-buy,
body.app-shell .auth-submit,
body.app-shell .hero-actions .btn,
body.app-shell .button,
body.app-shell button.button {
    min-height: 40px !important;
    border: 1px solid rgba(189, 168, 255, .48) !important;
    border-radius: 12px !important;
    background: linear-gradient(135deg, #8252ed, #4e74ed) !important;
    color: #fff !important;
    box-shadow: 0 12px 28px rgba(92, 75, 220, .3), inset 0 1px rgba(255, 255, 255, .2) !important;
}

body.app-shell .btn:hover,
body.app-shell .product-buy:hover,
body.app-shell .auth-submit:hover,
body.app-shell .button:hover {
    background: linear-gradient(135deg, #a16bff, #4d91ff) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 16px 38px rgba(91, 110, 255, .42), 0 0 24px rgba(155, 108, 255, .18) !important;
}

body.app-shell input,
body.app-shell select,
body.app-shell textarea,
body.app-shell .shop-control,
body.app-shell .shop-search {
    min-height: 42px !important;
    box-sizing: border-box !important;
    border: 1px solid rgba(126, 93, 255, .22) !important;
    border-radius: 12px !important;
    color: #f4f5ff !important;
    background: rgba(7, 10, 20, .72) !important;
}

body.app-shell input:focus,
body.app-shell select:focus,
body.app-shell textarea:focus {
    border-color: var(--cc-purple) !important;
    box-shadow: 0 0 0 3px rgba(155, 108, 255, .15), 0 0 24px rgba(75, 141, 255, .16) !important;
}

body.app-shell table {
    overflow: hidden !important;
    border: 1px solid var(--cc-line) !important;
    border-radius: 16px !important;
    background: rgba(8, 11, 21, .5) !important;
}

body.app-shell th {
    color: #bdc6d8 !important;
    background: rgba(126, 93, 255, .1) !important;
    text-transform: uppercase !important;
    letter-spacing: .08em !important;
    font-size: 10px !important;
}

body.app-shell td,
body.app-shell th {
    border-color: rgba(126, 93, 255, .12) !important;
}

body.app-shell .footer {
    border-top: 1px solid var(--cc-line) !important;
    color: #78839a !important;
}

/* Catalog discovery and selection flow. */
html body.app-shell #donate-catalog .catalog-command-head {
    display: flex !important;
    align-items: flex-end !important;
    justify-content: space-between !important;
    gap: 18px !important;
    margin: 4px 0 16px !important;
    padding: 0 4px !important;
}

html body.app-shell #donate-catalog .catalog-command-kicker {
    display: block !important;
    margin-bottom: 8px !important;
    color: #b794ff !important;
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    letter-spacing: .2em !important;
}

html body.app-shell #donate-catalog .catalog-command-head h2 {
    margin: 0 !important;
    color: #fff !important;
    font-size: clamp(24px, 3vw, 38px) !important;
    letter-spacing: -.06em !important;
}

html body.app-shell #donate-catalog .catalog-command-head p {
    margin: 7px 0 0 !important;
    color: #8793aa !important;
    font-size: 12px !important;
}

html body.app-shell #donate-catalog .catalog-command-state {
    flex: 0 0 auto !important;
    padding: 8px 11px !important;
    border: 1px solid rgba(85, 233, 255, .25) !important;
    border-radius: 999px !important;
    color: #8cecff !important;
    background: rgba(85, 233, 255, .07) !important;
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace !important;
    font-size: 10px !important;
    letter-spacing: .08em !important;
    text-transform: uppercase !important;
}

html body.app-shell #donate-catalog .catalog-command-state i {
    margin-right: 5px !important;
    color: #52f3a9 !important;
    font-size: 7px !important;
    vertical-align: middle !important;
}

html body.app-shell #donate-catalog .shop-toolbar {
    grid-template-columns: minmax(0, 1fr) 230px !important;
    position: relative !important;
    gap: 12px !important;
    padding: 16px !important;
    border: 1px solid rgba(126, 93, 255, .2) !important;
    border-radius: 18px !important;
    background:
        radial-gradient(circle at 0% 50%, rgba(126, 93, 255, .18), transparent 32%),
        linear-gradient(135deg, rgba(23, 24, 47, .96), rgba(8, 13, 27, .96)) !important;
    box-shadow: 0 18px 44px rgba(0, 0, 0, .22), inset 0 1px rgba(255, 255, 255, .06) !important;
}

/* The catalog itself is not a nested window: let the page surface show
   through between controls and product cards. */
html body.app-shell #donate-catalog > .tabs {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
}

html body.app-shell #donate-catalog > .tabs > .tab-list,
html body.app-shell #donate-catalog > .tabs > .tab-list > .tab-id {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

/* Recent purchases use the page surface too; keep their inline product
   artwork visible instead of letting generic card backgrounds replace it. */
body.app-shell .payments {
    margin-top: 42px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

body.app-shell .payments .blockname {
    margin-bottom: 14px !important;
    color: #f4efff !important;
}

body.app-shell .payments .payment-list {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 14px !important;
}

body.app-shell .payments .payment-id.window {
    min-width: 0 !important;
    min-height: 356px !important;
    padding: 10px !important;
    border: 1px solid rgba(85, 233, 255, .58) !important;
    border-radius: 20px !important;
    background: linear-gradient(180deg, rgba(14, 37, 58, .96), rgba(7, 18, 33, .99)) !important;
}

body.app-shell .payments .payment-id.window .image {
    width: 100% !important;
    height: 150px !important;
    min-height: 150px !important;
    margin: 0 0 18px !important;
    border: 1px solid rgba(104, 181, 240, .12) !important;
    border-radius: 14px !important;
    background-color: #172a43 !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: contain !important;
    box-shadow: inset 0 0 28px rgba(74, 169, 255, .1) !important;
}

body.app-shell .payments .payment-id.window .title {
    min-height: 48px !important;
    color: #eef5ff !important;
    font-size: 18px !important;
    font-weight: 900 !important;
    letter-spacing: .04em !important;
    line-height: 1.12 !important;
}

body.app-shell .payments .payment-id.window .player {
    margin-top: auto !important;
    color: #8e9bb1 !important;
}

body.app-shell .payments .payment-id.window .amount {
    margin-top: 12px !important;
    padding: 4px 8px !important;
    border-radius: 7px !important;
    color: #52f2bd !important;
    background: rgba(31, 178, 133, .1) !important;
    font-weight: 900 !important;
}

@media (max-width: 900px) {
    body.app-shell .payments .payment-list {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 560px) {
    body.app-shell .payments .payment-list {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 9px !important;
    }

    body.app-shell .payments .payment-id.window {
        min-height: 290px !important;
        padding: 8px !important;
    }

    body.app-shell .payments .payment-id.window .image {
        height: 105px !important;
        min-height: 105px !important;
        margin-bottom: 12px !important;
    }

    body.app-shell .payments .payment-id.window .title {
        min-height: 38px !important;
        font-size: 14px !important;
    }
}

html body.app-shell #donate-catalog .shop-control-label {
    color: #aeb8ce !important;
    letter-spacing: .14em !important;
}

html body.app-shell #donate-catalog .shop-control {
    height: 52px !important;
    border: 1px solid rgba(126, 93, 255, .26) !important;
    border-radius: 14px !important;
    background: rgba(6, 9, 19, .72) !important;
}

html body.app-shell #donate-catalog .shop-control:focus-within {
    border-color: rgba(85, 233, 255, .7) !important;
    box-shadow: 0 0 0 3px rgba(85, 233, 255, .1), 0 0 24px rgba(126, 93, 255, .18) !important;
}

html body.app-shell #donate-catalog .shop-control input {
    font-size: 14px !important;
}

html body.app-shell #donate-catalog .shop-search-clear {
    width: 28px !important;
    height: 28px !important;
    min-height: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 8px !important;
    color: #9ca8bc !important;
    background: transparent !important;
    box-shadow: none !important;
}

html body.app-shell #donate-catalog .shop-search-clear:hover {
    color: #fff !important;
    background: rgba(155, 108, 255, .18) !important;
    transform: none !important;
}

html body.app-shell #donate-catalog .shop-results-status {
    grid-column: 1 / -1 !important;
    margin: 2px 2px 0 !important;
    color: #7f8ba2 !important;
    font-size: 11px !important;
}

html body.app-shell #donate-catalog .catalog-category-switcher {
    margin-top: 14px !important;
    padding: 12px !important;
    border: 1px solid rgba(126, 93, 255, .16) !important;
    border-radius: 18px !important;
    background: rgba(13, 16, 29, .72) !important;
}

html body.app-shell #donate-catalog .catalog-category-switcher__list {
    gap: 8px !important;
}

html body.app-shell #donate-catalog .catalog-category-switcher__button {
    min-height: 42px !important;
    border: 1px solid transparent !important;
    border-radius: 12px !important;
    color: #8e9ab0 !important;
    background: transparent !important;
}

html body.app-shell #donate-catalog .catalog-category-switcher__item.active .catalog-category-switcher__button,
html body.app-shell #donate-catalog .catalog-category-switcher__button:hover {
    color: #fff !important;
    border-color: rgba(155, 108, 255, .38) !important;
    background: linear-gradient(100deg, rgba(126, 79, 255, .26), rgba(65, 117, 255, .12)) !important;
}

html body.app-shell #donate-catalog .tab-list > .tab-id {
    animation: catalog-panel-in .42s ease both !important;
}

html body.app-shell #donate-catalog .tab-list > .tab-id > .items {
    padding: 4px !important;
}

html body.app-shell #donate-catalog .tab-list > .tab-id .item-id {
    border: 1px solid rgba(103, 128, 177, .24) !important;
    border-radius: 20px !important;
    background:
        linear-gradient(180deg, rgba(20, 34, 56, .98), rgba(8, 17, 31, .99)) !important;
    box-shadow: 0 14px 28px rgba(0, 0, 0, .2), inset 0 1px rgba(255, 255, 255, .06) !important;
    transition: transform .28s ease, border-color .28s ease, box-shadow .28s ease !important;
}

html body.app-shell #donate-catalog .tab-list > .tab-id .item-id:hover,
html body.app-shell #donate-catalog .tab-list > .tab-id .item-id:focus-visible {
    border-color: rgba(85, 233, 255, .72) !important;
    outline: 0 !important;
    transform: translateY(-8px) !important;
    box-shadow: 0 22px 42px rgba(0, 0, 0, .34), 0 0 28px rgba(85, 233, 255, .13) !important;
}

html body.app-shell #donate-catalog .tab-list > .tab-id .item-id.is-product-selected {
    border-color: #b794ff !important;
    background:
        radial-gradient(circle at 50% 0%, rgba(167, 125, 255, .28), transparent 42%),
        linear-gradient(180deg, rgba(35, 25, 69, .98), rgba(12, 16, 34, .99)) !important;
    box-shadow: 0 0 0 2px rgba(183, 148, 255, .16), 0 24px 52px rgba(86, 53, 180, .34) !important;
}

html body.app-shell #donate-catalog .tab-list > .tab-id .item-id .image {
    border: 1px solid rgba(118, 169, 220, .18) !important;
    border-radius: 14px !important;
    background-color: #172a43 !important;
    box-shadow: inset 0 0 32px rgba(73, 155, 255, .12) !important;
}

html body.app-shell #donate-catalog .tab-list > .tab-id .item-id .title {
    color: #f6f8ff !important;
    font-size: 14px !important;
    letter-spacing: .06em !important;
}

html body.app-shell #donate-catalog .tab-list > .tab-id .item-id .price {
    color: #d5c2ff !important;
    border-color: rgba(183, 148, 255, .5) !important;
    background: rgba(126, 93, 255, .1) !important;
}

html body.app-shell #donate-catalog .tab-list > .tab-id .item-id .product-buy {
    color: #b6f4ff !important;
    border-color: rgba(85, 233, 255, .5) !important;
    background: rgba(85, 233, 255, .1) !important;
}

html body.app-shell #donate-catalog .tab-list > .tab-id .item-id .product-buy:hover {
    color: #07131f !important;
    background: #55e9ff !important;
}

@keyframes catalog-panel-in {
    from { opacity: .35; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

html body.app-shell #donate-catalog .catalog-empty-state {
    display: grid !important;
    justify-items: center !important;
    gap: 8px !important;
    padding: 52px 20px !important;
    border: 1px dashed rgba(126, 93, 255, .34) !important;
    border-radius: 20px !important;
    color: #8f9ab0 !important;
    text-align: center !important;
    background: rgba(126, 93, 255, .04) !important;
}

html body.app-shell #donate-catalog .catalog-empty-state[hidden] {
    display: none !important;
}

html body.app-shell #donate-catalog .catalog-empty-state > i {
    margin-bottom: 4px !important;
    color: var(--cc-cyan) !important;
    font-size: 26px !important;
}

html body.app-shell #donate-catalog .catalog-empty-state strong {
    color: #f1edff !important;
    font-size: 18px !important;
}

html body.app-shell #donate-catalog .catalog-empty-state .btn {
    min-height: 36px !important;
    margin-top: 8px !important;
    padding: 0 14px !important;
    font-size: 11px !important;
}

html body.app-shell #donate-catalog .item-id.is-search-match {
    animation: catalog-match-in .28s ease both !important;
    border-color: rgba(85, 233, 255, .48) !important;
}

html body.app-shell #donate-catalog .item-id.is-search-hidden {
    display: none !important;
}

@keyframes catalog-match-in {
    from { opacity: .45; transform: translateY(5px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 760px) {
    html body.app-shell #donate-catalog .catalog-command-head {
        align-items: flex-start !important;
        flex-direction: column !important;
    }

    /* Dashboard reference layout: compact command strip, overview split and
       analytics cards with a quiet glass surface. */
    body.home-dashboard-page .noxis-dashboard {
        max-width: 1100px !important;
        margin: 0 auto !important;
    }

    body.home-dashboard-page .noxis-command-card {
        display: grid !important;
        grid-template-columns: minmax(220px, 1fr) minmax(220px, 1.05fr) auto !important;
        align-items: center !important;
        gap: 18px !important;
        min-height: 108px !important;
        margin: 22px 0 28px !important;
        padding: 16px 18px !important;
        border: 1px solid rgba(171, 83, 255, .48) !important;
        border-radius: 19px !important;
        background:
            radial-gradient(circle at 50% 0%, rgba(154, 55, 255, .2), transparent 45%),
            linear-gradient(135deg, rgba(31, 13, 57, .88), rgba(10, 13, 29, .95)) !important;
        box-shadow: 0 14px 40px rgba(72, 20, 119, .22), inset 0 1px rgba(255, 255, 255, .08) !important;
    }

    body.home-dashboard-page .noxis-command-copy {
        min-width: 0 !important;
    }

    body.home-dashboard-page .noxis-command-copy strong {
        font-size: 13px !important;
    }

    body.home-dashboard-page .noxis-command-copy small {
        max-width: 220px !important;
        line-height: 1.35 !important;
    }

    body.home-dashboard-page .noxis-ai-search {
        width: auto !important;
        min-width: 0 !important;
        height: 40px !important;
        border: 1px solid rgba(171, 83, 255, .32) !important;
        border-radius: 11px !important;
        background: rgba(5, 5, 17, .62) !important;
    }

    body.home-dashboard-page .noxis-ai-search input {
        min-width: 0 !important;
        height: 38px !important;
        background: transparent !important;
    }

    body.home-dashboard-page .noxis-command-actions {
        display: grid !important;
        grid-template-columns: repeat(2, max-content) !important;
        justify-content: end !important;
        gap: 7px !important;
    }

    body.home-dashboard-page .noxis-command-actions .noxis-action-primary {
        grid-column: 1 / -1 !important;
        justify-self: stretch !important;
    }

    body.home-dashboard-page .noxis-overview-grid {
        grid-template-columns: minmax(0, 1.35fr) minmax(260px, .9fr) !important;
        gap: 14px !important;
        margin-bottom: 28px !important;
    }

    body.home-dashboard-page .noxis-server-card,
    body.home-dashboard-page .noxis-balance-card {
        min-height: 204px !important;
        padding: 18px !important;
        border: 1px solid rgba(126, 93, 255, .24) !important;
        border-radius: 18px !important;
        background: linear-gradient(145deg, rgba(23, 23, 43, .94), rgba(10, 14, 28, .97)) !important;
    }

    body.home-dashboard-page .noxis-server-main {
        margin-bottom: 19px !important;
    }

    body.home-dashboard-page .noxis-server-icon {
        width: 38px !important;
        height: 38px !important;
        border-radius: 11px !important;
        color: #fff !important;
        background: linear-gradient(135deg, #8d24ff, #5328c9) !important;
    }

    body.home-dashboard-page .noxis-iso-server {
        width: 48px !important;
        height: 38px !important;
        margin-left: auto !important;
        border: 1px solid rgba(173, 82, 255, .45) !important;
        border-radius: 10px !important;
        color: #e0a7ff !important;
        background: rgba(126, 40, 255, .2) !important;
    }

    body.home-dashboard-page .noxis-server-metrics {
        padding-top: 14px !important;
        border-top: 1px solid rgba(126, 93, 255, .16) !important;
    }

    body.home-dashboard-page .noxis-copy-server {
        min-height: 35px !important;
        border-color: rgba(126, 93, 255, .2) !important;
        color: #a9a1b9 !important;
        background: rgba(255, 255, 255, .03) !important;
    }

    body.home-dashboard-page .noxis-balance-card {
        background:
            radial-gradient(circle at 90% 0%, rgba(126, 58, 255, .25), transparent 52%),
            linear-gradient(145deg, rgba(24, 20, 45, .95), rgba(9, 13, 28, .98)) !important;
    }

    body.home-dashboard-page .noxis-balance-value {
        margin: 29px 0 10px !important;
        font-size: 42px !important;
    }

    body.home-dashboard-page .noxis-balance-card p {
        max-width: 220px !important;
        min-height: 34px !important;
    }

    body.home-dashboard-page .noxis-analytics-grid {
        grid-template-columns: minmax(230px, .8fr) minmax(0, 1.55fr) !important;
        gap: 14px !important;
    }

    body.home-dashboard-page .noxis-data-card {
        min-height: 250px !important;
        padding: 18px !important;
        border: 1px solid rgba(126, 93, 255, .22) !important;
        border-radius: 18px !important;
        background: linear-gradient(145deg, rgba(20, 17, 38, .94), rgba(9, 12, 25, .98)) !important;
        box-shadow: 0 18px 50px rgba(0, 0, 0, .25), inset 0 1px rgba(255, 255, 255, .05) !important;
    }

    body.home-dashboard-page .noxis-widget-heading {
        margin: 25px 0 4px !important;
    }

    body.home-dashboard-page .noxis-widget-heading strong {
        color: #f4efff !important;
        font-size: 13px !important;
    }

    body.home-dashboard-page .noxis-widget-heading small {
        margin-top: 6px !important;
        color: #817b93 !important;
    }

    body.home-dashboard-page .noxis-node-map {
        height: 165px !important;
    }

    body.home-dashboard-page .noxis-node-links {
        stroke: rgba(171, 83, 255, .35) !important;
        stroke-dasharray: 4 6 !important;
    }

    body.home-dashboard-page .noxis-node {
        fill: #b24dff !important;
        stroke: #dca3ff !important;
        filter: drop-shadow(0 0 7px #a52cff) !important;
    }

    body.home-dashboard-page .noxis-node-core {
        fill: #6d20c9 !important;
        stroke: #e0a1ff !important;
        filter: drop-shadow(0 0 10px #a52cff) !important;
    }

    body.home-dashboard-page .noxis-area-chart {
        height: 155px !important;
        margin-top: 28px !important;
    }

    body.home-dashboard-page .noxis-chart-area {
        fill: url(#noxis-chart-fill) !important;
    }

    body.home-dashboard-page .noxis-chart-line {
        stroke: #b145ff !important;
        filter: drop-shadow(0 0 6px #a52cff) !important;
    }

    @media (max-width: 900px) {
        body.home-dashboard-page .noxis-command-card {
            grid-template-columns: 1fr !important;
        }

        body.home-dashboard-page .noxis-command-actions {
            justify-content: stretch !important;
        }
    }

    @media (max-width: 700px) {
        body.home-dashboard-page .noxis-overview-grid,
        body.home-dashboard-page .noxis-analytics-grid {
            grid-template-columns: 1fr !important;
        }
    }

    html body.app-shell #donate-catalog .shop-toolbar {
        grid-template-columns: 1fr !important;
    }

    html body.app-shell #donate-catalog .shop-results-status {
        grid-column: auto !important;
    }
}

/* Search stays part of the catalog flow, without a separate surrounding card. */
html body.app-shell #donate-catalog .catalog-command-head {
    margin-bottom: 12px !important;
}

html body.app-shell #donate-catalog .shop-toolbar {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 230px !important;
    margin: 0 0 14px !important;
    padding: 0 2px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

html body.app-shell #donate-catalog .shop-control-field {
    background: transparent !important;
}

html body.app-shell #donate-catalog .shop-results-status {
    padding: 0 2px !important;
    background: transparent !important;
}

@media (max-width: 760px) {
    html body.app-shell #donate-catalog .shop-toolbar {
        grid-template-columns: 1fr !important;
        padding: 0 !important;
    }
}

@media (max-width: 900px) {
    body.app-shell .app-frame {
        display: block !important;
        width: 100% !important;
        padding: 8px !important;
    }

    body.app-shell .app-sidebar {
        display: none !important;
    }

    body.app-shell .app-topbar {
        top: 8px !important;
        margin-bottom: 14px !important;
    }

    body.app-shell .app-content {
        padding: 0 0 74px !important;
    }
}

@media (max-width: 560px) {
    body.app-shell .hero-banner {
        min-height: 300px !important;
        padding: 22px !important;
        border-radius: 20px !important;
    }

    body.app-shell .app-topbar {
        border-radius: 15px !important;
    }

    body.app-shell .hero-title {
        font-size: clamp(26px, 8vw, 38px) !important;
    }

    body.app-shell .card,
    body.app-shell .panel,
    body.app-shell .account-card,
    body.app-shell .support-panel,
    body.app-shell .orders-panel {
        border-radius: 17px !important;
    }
}

/* Catalog layout: keep the storefront readable at every viewport size. */
    html body.app-shell.home-dashboard-page #donate-catalog {
        width: min(100% - 32px, 1180px) !important;
        max-width: 1180px !important;
        margin-inline: auto !important;
        padding: 28px 0 56px !important;
    }

    html body.app-shell.home-dashboard-page #donate-catalog .catalog-intro,
    html body.app-shell.home-dashboard-page #donate-catalog .server-selector-container,
    html body.app-shell.home-dashboard-page #donate-catalog .catalog-command-head,
    html body.app-shell.home-dashboard-page #donate-catalog .shop-toolbar,
    html body.app-shell.home-dashboard-page #donate-catalog .catalog-category-switcher {
        display: flex !important;
    }

    html body.app-shell.home-dashboard-page #donate-catalog .catalog-intro {
        align-items: center !important;
        justify-content: space-between !important;
        min-height: 0 !important;
        margin-bottom: 16px !important;
        padding: 22px 26px !important;
    }

    html body.app-shell.home-dashboard-page #donate-catalog .catalog-intro h2 {
        margin: 5px 0 6px !important;
        font-size: clamp(22px, 3vw, 32px) !important;
        line-height: 1.15 !important;
    }

    html body.app-shell.home-dashboard-page #donate-catalog .catalog-intro p {
        display: block !important;
        margin: 0 !important;
        color: #aeb5ce !important;
        font-size: 13px !important;
    }

    html body.app-shell.home-dashboard-page #donate-catalog .catalog-intro-meta {
        display: flex !important;
    }

    html body.app-shell.home-dashboard-page #donate-catalog .server-selector-container {
        align-items: center !important;
        justify-content: space-between !important;
        gap: 16px !important;
        margin-bottom: 16px !important;
        padding: 14px 18px !important;
    }

    html body.app-shell.home-dashboard-page #donate-catalog .catalog-command-head {
        align-items: end !important;
        justify-content: space-between !important;
        margin-top: 24px !important;
        padding: 22px 0 14px !important;
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    html body.app-shell.home-dashboard-page #donate-catalog .shop-toolbar {
        align-items: end !important;
        flex-wrap: wrap !important;
        gap: 12px !important;
        margin-bottom: 16px !important;
        padding: 14px 16px !important;
    }

    html body.app-shell.home-dashboard-page #donate-catalog .catalog-category-switcher {
        align-items: center !important;
        justify-content: space-between !important;
        gap: 18px !important;
        padding: 14px 16px !important;
    }

    html body.app-shell.home-dashboard-page #donate-catalog .tabs-wrapper {
        display: flex !important;
    }

    html body.app-shell.home-dashboard-page #donate-catalog .tab-list > .tab-id > .items {
        display: grid !important;
        grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
        align-items: stretch !important;
        gap: 18px !important;
        padding: 18px 0 8px !important;
    }

    html body.app-shell.home-dashboard-page #donate-catalog .tab-list > .tab-id .item-id {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        min-width: 0 !important;
        min-height: 378px !important;
        height: 100% !important;
        padding: 16px !important;
        overflow: hidden !important;
    }

    html body.app-shell.home-dashboard-page #donate-catalog .tab-list > .tab-id .item-id .image {
        flex: 0 0 148px !important;
        width: 100% !important;
        max-width: none !important;
        height: 148px !important;
        margin: 0 0 14px !important;
        background-size: contain !important;
        background-position: center !important;
        background-repeat: no-repeat !important;
    }

    html body.app-shell.home-dashboard-page #donate-catalog .tab-list > .tab-id .item-id .title {
        min-height: 42px !important;
        margin: 0 0 8px !important;
        font-size: 16px !important;
        line-height: 1.3 !important;
        letter-spacing: .02em !important;
    }

    html body.app-shell.home-dashboard-page #donate-catalog .tab-list > .tab-id .item-id .description {
        display: -webkit-box !important;
        min-height: 0 !important;
        max-width: none !important;
        margin: 0 0 12px !important;
        padding: 0 !important;
        overflow: hidden !important;
        -webkit-box-orient: vertical !important;
        -webkit-line-clamp: 3 !important;
        font-size: 12px !important;
        line-height: 1.45 !important;
    }

    html body.app-shell.home-dashboard-page #donate-catalog .tab-list > .tab-id .item-id .product-card-foot {
        align-items: center !important;
        margin-top: auto !important;
        padding: 14px 0 0 !important;
    }

    html body.app-shell.home-dashboard-page #donate-catalog .tab-list > .tab-id .item-id .price {
        flex: 1 1 auto !important;
        font-size: 16px !important;
        font-weight: 800 !important;
    }

    html body.app-shell.home-dashboard-page #donate-catalog .tab-list > .tab-id .item-id .product-buy {
        flex: 0 0 auto !important;
        min-height: 40px !important;
        padding-inline: 14px !important;
        font-size: 11px !important;
    }

    @media (max-width: 980px) {
        html body.app-shell.home-dashboard-page #donate-catalog .tab-list > .tab-id > .items {
            grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        }
    }

    @media (max-width: 620px) {
        html body.app-shell.home-dashboard-page #donate-catalog {
            width: min(100% - 20px, 1180px) !important;
            padding-top: 16px !important;
        }

        html body.app-shell.home-dashboard-page #donate-catalog .catalog-intro,
        html body.app-shell.home-dashboard-page #donate-catalog .server-selector-container,
        html body.app-shell.home-dashboard-page #donate-catalog .catalog-command-head,
        html body.app-shell.home-dashboard-page #donate-catalog .catalog-category-switcher {
            align-items: flex-start !important;
            flex-direction: column !important;
        }

        html body.app-shell.home-dashboard-page #donate-catalog .catalog-intro-meta {
            display: none !important;
        }

        html body.app-shell.home-dashboard-page #donate-catalog .tab-list > .tab-id > .items {
            grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
            gap: 10px !important;
        }

        html body.app-shell.home-dashboard-page #donate-catalog .tab-list > .tab-id .item-id {
            min-height: 350px !important;
            padding: 11px !important;
        }

        html body.app-shell.home-dashboard-page #donate-catalog .tab-list > .tab-id .item-id .image {
            flex-basis: 112px !important;
            height: 112px !important;
        }

        html body.app-shell.home-dashboard-page #donate-catalog .tab-list > .tab-id .item-id .title {
            font-size: 14px !important;
        }

        html body.app-shell.home-dashboard-page #donate-catalog .tab-list > .tab-id .item-id .product-card-foot {
            align-items: stretch !important;
            flex-direction: column !important;
        }

        html body.app-shell.home-dashboard-page #donate-catalog .tab-list > .tab-id .item-id .product-buy {
            width: 100% !important;
        }
    }