.vip-page {
    position: relative;
    display: grid;
    gap: 20px;
    color: #f8fbff;
}

.vip-hero,
.vip-purchase-spotlight,
.vip-panel,
.vip-benefits article,
.vip-login-box,
.vip-alert {
    border-radius: 8px;
}

.vip-hero {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 240px;
    gap: 20px;
    align-items: stretch;
    padding: 28px;
    background:
        linear-gradient(125deg, rgba(14, 17, 24, .98), rgba(33, 22, 46, .96) 48%, rgba(5, 22, 28, .98)),
        repeating-linear-gradient(135deg, rgba(255,255,255,.06) 0 1px, transparent 1px 44px);
    border: 1px solid rgba(196, 244, 255, .28);
    box-shadow: 0 22px 58px rgba(0, 0, 0, .32), inset 0 0 0 1px rgba(255, 214, 120, .08);
}

.vip-hero::before,
.vip-purchase-spotlight::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(115deg, transparent 0 14%, rgba(255,255,255,.08) 14% 15%, transparent 15% 34%, rgba(125, 249, 255, .11) 34% 35%, transparent 35% 100%),
        linear-gradient(25deg, transparent 0 42%, rgba(255, 214, 120, .12) 42% 43%, transparent 43% 100%);
    mix-blend-mode: screen;
}

.vip-hero::after,
.vip-purchase-spotlight::after {
    content: "";
    position: absolute;
    inset: -35% auto -35% -18%;
    width: 34%;
    pointer-events: none;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .26), transparent);
    transform: rotate(15deg);
    animation: vip-buy-sweep 5.2s ease-in-out infinite;
}

.vip-hero-main,
.vip-status-card,
.vip-purchase-copy,
.vip-price-card,
.vip-benefits article > *,
.vip-panel > *,
.vip-login-box > * {
    position: relative;
    z-index: 1;
}

.vip-kicker {
    display: inline-flex;
    width: fit-content;
    align-items: center;
    gap: 7px;
    border: 1px solid rgba(196, 244, 255, .46);
    border-radius: 999px;
    padding: 5px 10px;
    color: #dffbff;
    background: linear-gradient(135deg, rgba(125, 249, 255, .12), rgba(255, 214, 120, .11));
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}

.vip-kicker::before {
    content: "";
    width: 8px;
    height: 8px;
    transform: rotate(45deg);
    background: linear-gradient(135deg, #ffffff, #8eeeff 45%, #ffd66e);
    box-shadow: 0 0 16px rgba(142, 238, 255, .65);
}

.vip-hero h1 {
    margin: 10px 0 8px;
    font-size: 46px;
    line-height: 1;
    letter-spacing: 0;
    color: #ffffff;
    text-shadow: 0 0 22px rgba(125, 249, 255, .25), 0 2px 0 rgba(255, 214, 120, .2);
}

.vip-hero p,
.vip-purchase-copy p,
.vip-benefits span,
.vip-panel p {
    color: rgba(248, 251, 255, .76);
}

.vip-hero p {
    max-width: 780px;
    margin: 0;
    font-size: 15px;
}

.vip-status-card {
    display: grid;
    align-content: center;
    gap: 7px;
    padding: 18px;
    background: linear-gradient(145deg, rgba(255,255,255,.09), rgba(255,255,255,.035));
    border: 1px solid rgba(255, 255, 255, .16);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.05);
}

.vip-status-card.is-active {
    border-color: rgba(255, 214, 120, .52);
    box-shadow: 0 0 34px rgba(255, 214, 120, .18), inset 0 0 26px rgba(125, 249, 255, .08);
}

.vip-status-label,
.vip-status-card small,
.vip-status-card span,
.vip-price-card span,
.vip-price-card small {
    color: rgba(248, 251, 255, .66);
    font-size: 12px;
}

.vip-status-card strong {
    color: #fff0b5;
    font-size: 21px;
}

.vip-alert,
.vip-login-box {
    padding: 15px 16px;
    border: 1px solid rgba(255, 214, 120, .34);
    background: linear-gradient(135deg, rgba(255, 214, 120, .14), rgba(125, 249, 255, .07));
    color: #fff1bd;
}

.vip-login-box {
    display: grid;
    gap: 10px;
}

.vip-login-box h2,
.vip-login-box p {
    margin: 0;
}

.vip-purchase-spotlight {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 240px;
    gap: 20px;
    align-items: center;
    padding: 26px;
    border: 1px solid rgba(255, 214, 120, .58);
    background:
        linear-gradient(140deg, rgba(20, 14, 28, .98), rgba(46, 20, 40, .94) 42%, rgba(7, 35, 40, .98)),
        repeating-linear-gradient(45deg, rgba(255,255,255,.05) 0 1px, transparent 1px 36px);
    box-shadow: 0 24px 64px rgba(0, 0, 0, .34), 0 0 42px rgba(255, 214, 120, .18);
}

.vip-purchase-copy h2 {
    margin: 10px 0 8px;
    color: #fff8d6;
    font-size: 31px;
    line-height: 1.1;
    letter-spacing: 0;
}

.vip-purchase-copy p {
    max-width: 820px;
    margin: 0;
}

.vip-purchase-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 18px;
}

.vip-price-card {
    display: grid;
    gap: 7px;
    justify-items: center;
    padding: 20px 15px;
    background:
        linear-gradient(145deg, rgba(255,255,255,.12), rgba(255,255,255,.035)),
        conic-gradient(from 45deg, rgba(255,214,120,.16), rgba(125,249,255,.16), rgba(255,255,255,.12), rgba(255,214,120,.16));
    border: 1px solid rgba(255,255,255,.18);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
}

.vip-price-card strong {
    color: #fff1a6;
    font-size: 34px;
    line-height: 1;
    text-shadow: 0 0 18px rgba(255, 214, 120, .26);
}

.vip-benefits {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.vip-benefits article,
.vip-panel {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(196, 244, 255, .15);
    background:
        linear-gradient(145deg, rgba(18, 22, 31, .92), rgba(18, 14, 26, .88)),
        linear-gradient(45deg, rgba(125,249,255,.08), rgba(255,214,120,.06));
    box-shadow: 0 14px 34px rgba(0, 0, 0, .22), inset 0 1px 0 rgba(255,255,255,.06);
}

.vip-benefits article {
    display: grid;
    gap: 6px;
    min-height: 112px;
    padding: 17px 15px 15px 48px;
}

.vip-benefits article::before {
    content: "";
    position: absolute;
    left: 17px;
    top: 19px;
    width: 18px;
    height: 18px;
    transform: rotate(45deg);
    background:
        linear-gradient(135deg, #ffffff 0 18%, #90f0ff 18% 54%, #ffd66e 54% 100%);
    box-shadow: 0 0 18px rgba(125, 249, 255, .36);
}

.vip-benefits article::after,
.vip-panel::after,
.vip-avatar-card::after,
.vip-frame-card::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(115deg, transparent 0 18%, rgba(255,255,255,.07) 18% 19%, transparent 19% 100%);
}

.vip-benefits strong,
.vip-panel h2 {
    color: #fff5c6;
}

.vip-benefits strong {
    font-size: 14px;
}

.vip-dashboard {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}

.vip-panel {
    display: grid;
    align-content: start;
    gap: 14px;
    padding: 22px 24px;
}

.vip-panel-wide {
    grid-column: 1 / -1;
}

.vip-panel h2,
.vip-panel p {
    margin: 0;
}

.vip-form {
    display: grid;
    gap: 14px;
}

.vip-field {
    display: grid;
    gap: 7px;
}

.vip-field-label {
    color: rgba(255, 245, 198, .82);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.vip-input {
    width: 100%;
    min-height: 44px;
    border-radius: 10px;
    border: 1px solid rgba(196, 244, 255, .18);
    background: rgba(8, 12, 18, .72);
    color: #f8fbff;
    padding: 0 14px;
    font-family: inherit;
    font-size: 14px;
    transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.vip-select {
    color-scheme: dark;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    cursor: pointer;
    padding-right: 40px;
    background-image:
        linear-gradient(45deg, transparent 50%, rgba(255, 235, 170, .92) 50%),
        linear-gradient(135deg, rgba(255, 235, 170, .92) 50%, transparent 50%);
    background-position:
        calc(100% - 18px) calc(50% + 2px),
        calc(100% - 12px) calc(50% + 2px);
    background-size: 6px 6px, 6px 6px;
    background-repeat: no-repeat;
}

.vip-select option,
.vip-select optgroup {
    background: #121822;
    color: #f5f7fb;
}

.vip-input:focus {
    outline: 0;
    border-color: rgba(255, 214, 120, .58);
    background: rgba(10, 14, 22, .92);
    box-shadow: 0 0 0 3px rgba(255, 214, 120, .12), 0 10px 24px rgba(0, 0, 0, .18);
}

.vip-panel-action {
    border-color: rgba(255, 214, 120, .24);
    background:
        linear-gradient(155deg, rgba(22, 28, 40, .96), rgba(14, 18, 28, .94)),
        radial-gradient(circle at top right, rgba(255, 214, 120, .08), transparent 58%);
    box-shadow: 0 16px 38px rgba(0, 0, 0, .24), inset 0 1px 0 rgba(255, 255, 255, .05);
}

.vip-panel-action::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    border-radius: 8px 0 0 8px;
    background: linear-gradient(180deg, #ffe08a, #d4a853 55%, #9a6b18);
    pointer-events: none;
}

.vip-panel-action h2 {
    padding-bottom: 2px;
}

.vip-panel-action p {
    color: rgba(248, 251, 255, .68);
    font-size: 13px;
    line-height: 1.45;
}

.vip-panel-action .vip-btn-primary {
    margin-top: 4px;
    justify-self: start;
}

.vip-toggle-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.vip-toggle-grid label {
    display: flex;
    align-items: center;
    gap: 9px;
    min-height: 48px;
    border-radius: 8px;
    padding: 10px;
    background: rgba(255, 255, 255, .055);
    border: 1px solid rgba(255, 255, 255, .08);
}

.vip-btn {
    position: relative;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    border: 0;
    border-radius: 8px;
    padding: 0 15px;
    font-weight: 900;
    cursor: pointer;
    text-decoration: none;
    letter-spacing: 0;
}

.vip-btn::after {
    content: "";
    position: absolute;
    inset: -60% auto -60% -45%;
    width: 38%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.42), transparent);
    transform: rotate(16deg);
    transition: transform .45s ease;
}

.vip-btn:hover::after {
    transform: translateX(360%) rotate(16deg);
}

.vip-btn:disabled {
    opacity: .5;
    cursor: not-allowed;
}

.vip-btn-primary,
.vip-btn-buy {
    color: #231500;
    background: linear-gradient(135deg, #ffffff 0%, #fff0a8 28%, #f2b733 62%, #b9780d 100%);
    box-shadow: 0 12px 28px rgba(242, 183, 51, .25);
}

.vip-btn-buy {
    min-height: 50px;
    padding: 0 18px;
}

.vip-btn-secondary {
    color: #e9fcff;
    background: linear-gradient(135deg, rgba(125, 249, 255, .14), rgba(255, 214, 120, .12));
    border: 1px solid rgba(196, 244, 255, .26);
}

.vip-frame-grid,
.vip-avatar-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 12px;
}

.vip-frame-card,
.vip-avatar-card {
    position: relative;
    overflow: hidden;
    display: grid;
    gap: 9px;
    justify-items: center;
    border-radius: 8px;
    padding: 15px 12px;
    background: linear-gradient(145deg, rgba(255,255,255,.075), rgba(255,255,255,.028));
    border: 1px solid rgba(255,255,255,.11);
}

.vip-frame-card {
    min-height: 178px;
}

.vip-avatar-card {
    min-height: 152px;
    text-decoration: none;
    color: #fff;
}

.vip-avatar-card:hover,
.vip-frame-card:hover {
    border-color: rgba(255, 214, 120, .38);
    transform: translateY(-2px);
}

.vip-frame-preview {
    position: relative;
    width: 74px;
    height: 74px;
    display: grid;
    place-items: center;
}

.vip-frame-avatar {
    width: 58px;
    height: 58px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: #fff;
    background: linear-gradient(135deg, #383143, #101923);
    border: 1px solid rgba(255, 255, 255, .18);
    font-weight: 900;
}

.vip-frame-card strong,
.vip-frame-card small,
.vip-avatar-card strong,
.vip-avatar-card small {
    position: relative;
    z-index: 1;
    text-align: center;
}

.vip-frame-card small,
.vip-avatar-card small {
    color: rgba(223, 251, 255, .72);
}

.vip-avatar-suggestions p {
    max-width: 760px;
}

.vip-avatar-gem {
    position: relative;
    width: 66px;
    height: 66px;
    display: grid;
    place-items: center;
    clip-path: polygon(50% 0, 96% 26%, 82% 100%, 18% 100%, 4% 26%);
    background: conic-gradient(from 45deg, #ffffff, #8ff0ff, #ffd66e, #d86bff, #ffffff);
    animation: vip-avatar-spin 4.6s linear infinite;
    box-shadow: 0 0 24px rgba(125, 249, 255, .25);
}

.vip-avatar-gem::after {
    content: "";
    position: absolute;
    inset: 7px;
    clip-path: polygon(50% 0, 96% 26%, 82% 100%, 18% 100%, 4% 26%);
    background: linear-gradient(135deg, #24182d, #10252d);
}

.vip-avatar-gem i {
    position: relative;
    z-index: 1;
    font-style: normal;
    font-weight: 900;
    color: #fff4c6;
}

@keyframes vip-buy-sweep {
    0%, 100% { transform: translateX(-45%) rotate(15deg); opacity: .08; }
    50% { transform: translateX(355%) rotate(15deg); opacity: .72; }
}

@keyframes vip-avatar-spin {
    to { transform: rotate(360deg); }
}

@media (max-width: 900px) {
    .vip-hero,
    .vip-purchase-spotlight,
    .vip-dashboard,
    .vip-benefits,
    .vip-toggle-grid {
        grid-template-columns: 1fr;
    }

    .vip-hero,
    .vip-purchase-spotlight {
        padding: 22px;
    }

    .vip-price-card,
    .vip-status-card {
        justify-items: start;
    }
}

@media (max-width: 520px) {
    .vip-hero h1 {
        font-size: 36px;
    }

    .vip-purchase-copy h2 {
        font-size: 25px;
    }

    .vip-purchase-actions {
        display: grid;
    }

    .vip-btn {
        width: 100%;
    }

    .vip-benefits article {
        padding-left: 45px;
    }
}

/* Voucher premium header + benefit spoilers */
.vip-voucher-band {
    position: relative;
    display: grid;
    place-items: center;
    background: linear-gradient(180deg, #dcae46, #f6d789 48%, #c68b20);
    border-right: 1px solid rgba(16,35,51,.22);
}

.vip-voucher-band span {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    color: #102333;
    font-size: 11px;
    font-weight: 950;
    letter-spacing: .18em;
    text-transform: uppercase;
}

.vip-hero-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 16px;
}

.vip-hero-seal {
    position: relative;
    display: grid;
    place-items: center;
    align-content: center;
    color: #f8dda0;
    background:
        linear-gradient(135deg, #102333, #172f42),
        conic-gradient(from 10deg, #c1841d, #ffe5a5, #b87610, #ffe5a5, #c1841d);
    border: 8px solid #dcae46;
    clip-path: polygon(50% 0, 57% 8%, 67% 4%, 72% 14%, 83% 14%, 86% 25%, 96% 31%, 92% 42%, 100% 50%, 92% 58%, 96% 69%, 86% 75%, 83% 86%, 72% 86%, 67% 96%, 57% 92%, 50% 100%, 43% 92%, 33% 96%, 28% 86%, 17% 86%, 14% 75%, 4% 69%, 8% 58%, 0 50%, 8% 42%, 4% 31%, 14% 25%, 17% 14%, 28% 14%, 33% 4%, 43% 8%);
    box-shadow: 0 20px 34px rgba(16, 35, 51, .34);
}

.vip-hero-seal span,
.vip-hero-seal small {
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.vip-hero-seal strong {
    color: #fff9d8;
    line-height: .9;
}

.vip-voucher-hero .vip-status-card {
    color: #f8fbff;
    background: linear-gradient(145deg, rgba(16,35,51,.94), rgba(8,20,31,.92));
    border-color: rgba(255,255,255,.18);
}

.vip-voucher-hero .vip-status-card strong {
    color: #ffe9a8;
}

.vip-benefits {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}

.vip-benefits-head {
    display: grid;
    gap: 8px;
    margin-bottom: 2px;
}

.vip-benefits-head h2 {
    margin: 0;
    color: #fff7d2;
    font-size: 26px;
    line-height: 1.1;
}

.vip-benefit-list {
    display: grid;
    gap: 10px;
}

.vip-benefit-row {
    --vip-row-color: #f5c75f;
    --vip-row-soft: rgba(245, 199, 95, .13);
    --vip-row-border: rgba(245, 199, 95, .46);
    --vip-row-shadow: rgba(245, 199, 95, .30);
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    border: 1px solid var(--vip-row-border);
    background:
        linear-gradient(135deg, var(--vip-row-soft), rgba(15,20,32,.88)),
        rgba(15,20,32,.88);
    box-shadow: 0 14px 34px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.06);
}

.vip-benefit-row summary {
    position: relative;
    z-index: 1;
    min-height: 74px;
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) 26px;
    gap: 13px;
    align-items: center;
    padding: 12px 14px;
    cursor: pointer;
    list-style: none;
}

.vip-benefit-row summary::-webkit-details-marker {
    display: none;
}

.vip-benefit-row::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(115deg, transparent 0 18%, rgba(255,255,255,.07) 18% 19%, transparent 19% 100%),
        linear-gradient(90deg, var(--vip-row-color), transparent 42%);
    opacity: .18;
    pointer-events: none;
}

.vip-benefit-icon {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    color: #101722;
    background: linear-gradient(135deg, #fff, var(--vip-row-color));
    box-shadow: 0 0 22px var(--vip-row-shadow);
}

.vip-benefit-icon svg {
    width: 25px;
    height: 25px;
}

.vip-benefit-copy {
    min-width: 0;
    display: grid;
    gap: 3px;
}

.vip-benefit-copy strong {
    color: #fff7d2;
    font-size: 15px;
}

.vip-benefit-copy small {
    color: rgba(248,251,255,.68);
    font-size: 12px;
}

.vip-benefit-chevron {
    width: 11px;
    height: 11px;
    justify-self: center;
    border-right: 2px solid rgba(255,255,255,.72);
    border-bottom: 2px solid rgba(255,255,255,.72);
    transform: rotate(45deg);
    transition: transform .2s ease;
}

.vip-benefit-row[open] .vip-benefit-chevron {
    transform: rotate(225deg);
}

.vip-benefit-row p {
    position: relative;
    z-index: 1;
    margin: -2px 14px 14px 75px;
    padding: 12px 13px;
    border-left: 2px solid var(--vip-row-color);
    border-radius: 8px;
    color: rgba(248,251,255,.78);
    background: rgba(0,0,0,.22);
}

.vip-benefit-gold { --vip-row-color: #f5c75f; --vip-row-soft: rgba(245,199,95,.13); --vip-row-border: rgba(245,199,95,.46); --vip-row-shadow: rgba(245,199,95,.30); }
.vip-benefit-violet { --vip-row-color: #b993ff; --vip-row-soft: rgba(185,147,255,.13); --vip-row-border: rgba(185,147,255,.46); --vip-row-shadow: rgba(185,147,255,.30); }
.vip-benefit-emerald { --vip-row-color: #5ee3a0; --vip-row-soft: rgba(94,227,160,.13); --vip-row-border: rgba(94,227,160,.46); --vip-row-shadow: rgba(94,227,160,.30); }
.vip-benefit-cyan { --vip-row-color: #70e7ff; --vip-row-soft: rgba(112,231,255,.13); --vip-row-border: rgba(112,231,255,.46); --vip-row-shadow: rgba(112,231,255,.30); }
.vip-benefit-pink { --vip-row-color: #ff8fcf; --vip-row-soft: rgba(255,143,207,.13); --vip-row-border: rgba(255,143,207,.46); --vip-row-shadow: rgba(255,143,207,.30); }
.vip-benefit-amber { --vip-row-color: #ffb453; --vip-row-soft: rgba(255,180,83,.13); --vip-row-border: rgba(255,180,83,.46); --vip-row-shadow: rgba(255,180,83,.30); }
.vip-benefit-ruby { --vip-row-color: #ff6f86; --vip-row-soft: rgba(255,111,134,.13); --vip-row-border: rgba(255,111,134,.46); --vip-row-shadow: rgba(255,111,134,.30); }
.vip-benefit-blue { --vip-row-color: #8bb8ff; --vip-row-soft: rgba(139,184,255,.13); --vip-row-border: rgba(139,184,255,.46); --vip-row-shadow: rgba(139,184,255,.30); }
.vip-benefit-indigo { --vip-row-color: #8f9dff; --vip-row-soft: rgba(143,157,255,.14); --vip-row-border: rgba(143,157,255,.48); --vip-row-shadow: rgba(143,157,255,.32); }
.vip-benefit-crimson { --vip-row-color: #ff7088; --vip-row-soft: rgba(255,112,136,.14); --vip-row-border: rgba(255,112,136,.48); --vip-row-shadow: rgba(255,112,136,.32); }
.vip-benefit-sapphire { --vip-row-color: #6ecbff; --vip-row-soft: rgba(110,203,255,.14); --vip-row-border: rgba(110,203,255,.48); --vip-row-shadow: rgba(110,203,255,.32); }
.vip-benefit-sun { --vip-row-color: #ffd56a; --vip-row-soft: rgba(255,213,106,.15); --vip-row-border: rgba(255,213,106,.52); --vip-row-shadow: rgba(255,213,106,.34); }
.vip-benefit-lime { --vip-row-color: #b8ff72; --vip-row-soft: rgba(184,255,114,.14); --vip-row-border: rgba(184,255,114,.48); --vip-row-shadow: rgba(184,255,114,.30); }
.vip-benefit-sky { --vip-row-color: #7fd6ff; --vip-row-soft: rgba(127,214,255,.14); --vip-row-border: rgba(127,214,255,.48); --vip-row-shadow: rgba(127,214,255,.32); }

.vip-benefits-lead {
    margin: 0;
    max-width: 760px;
    color: rgba(248,251,255,.72);
    font-size: 14px;
    line-height: 1.55;
}

.vip-benefits-group {
    display: grid;
    gap: 12px;
}

.vip-benefits-group-game {
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px dashed rgba(255,215,120,.24);
}

.vip-benefits-subhead {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    padding: 12px 14px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,.08);
    background: linear-gradient(135deg, rgba(255,255,255,.04), rgba(0,0,0,.18));
}

.vip-benefits-subhead-game {
    border-color: rgba(127,214,255,.24);
    background:
        linear-gradient(135deg, rgba(127,214,255,.08), rgba(143,157,255,.05)),
        rgba(0,0,0,.18);
}

.vip-benefits-subicon {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    font-size: 22px;
    background: rgba(255,255,255,.08);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.12);
}

.vip-benefits-subhead h3 {
    margin: 0;
    color: #fff7d2;
    font-size: 18px;
    line-height: 1.2;
}

.vip-benefits-subhead p {
    margin: 4px 0 0;
    color: rgba(248,251,255,.66);
    font-size: 12px;
    line-height: 1.45;
}

.vip-game-callout {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 12px;
    align-items: start;
    padding: 12px 14px;
    border-radius: 10px;
    border: 1px solid rgba(255,213,106,.28);
    background:
        linear-gradient(135deg, rgba(255,213,106,.10), rgba(143,157,255,.08)),
        rgba(0,0,0,.22);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}

.vip-game-callout-icon {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    font-size: 20px;
    background: rgba(255,213,106,.14);
}

.vip-game-callout p {
    margin: 0;
    color: rgba(248,251,255,.78);
    font-size: 13px;
    line-height: 1.5;
}

.vip-game-callout code {
    padding: 1px 6px;
    border-radius: 6px;
    color: #ffe9a8;
    background: rgba(0,0,0,.28);
    border: 1px solid rgba(255,213,106,.24);
    font-size: 12px;
}

.vip-benefit-scope {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    margin-bottom: 2px;
    padding: 2px 8px;
    border-radius: 999px;
    color: #dff6ff;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    background: rgba(127,214,255,.14);
    border: 1px solid rgba(127,214,255,.28);
}

.vip-benefit-row.is-game {
    border-style: solid;
    background:
        linear-gradient(135deg, var(--vip-row-soft), rgba(10,18,28,.92)),
        rgba(10,18,28,.92);
}

.vip-benefit-row.is-game::before {
    opacity: .24;
}

.vip-benefit-icon.has-emoji {
    position: relative;
    overflow: visible;
}

.vip-benefit-icon.has-emoji svg {
    width: 20px;
    height: 20px;
    opacity: .72;
}

.vip-benefit-emoji {
    position: absolute;
    top: -6px;
    right: -6px;
    width: 24px;
    height: 24px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    font-size: 14px;
    line-height: 1;
    background: rgba(255,255,255,.92);
    box-shadow: 0 0 0 2px rgba(16,20,32,.92), 0 8px 16px rgba(0,0,0,.24);
    animation: vipEmojiPop .8s ease both;
}

@keyframes vipEmojiPop {
    from { transform: scale(.6) rotate(-12deg); opacity: 0; }
    to { transform: scale(1) rotate(0deg); opacity: 1; }
}

.vip-fx-portal:hover,
.vip-fx-portal[open] {
    box-shadow: 0 18px 42px rgba(0,0,0,.26), 0 0 30px rgba(143,157,255,.34), inset 0 1px 0 rgba(255,255,255,.08);
}

.vip-fx-mobs .vip-benefit-icon.has-emoji svg {
    animation: vipFxShake 2.4s ease-in-out infinite;
}

.vip-fx-jewel .vip-benefit-emoji {
    animation: vipFxSparkle 1.8s ease-in-out infinite;
}

.vip-fx-golden .vip-benefit-icon {
    animation: vipFxGoldenGlow 2.2s ease-in-out infinite;
}

.vip-fx-pouch .vip-benefit-emoji {
    animation: vipFxBounce 1.6s ease-in-out infinite;
}

.vip-fx-exp .vip-benefit-icon {
    animation: vipFxPulse 1.4s ease-in-out infinite;
}

@keyframes vipFxShake {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(-4deg); }
    75% { transform: rotate(4deg); }
}

@keyframes vipFxSparkle {
    0%, 100% { transform: scale(1); filter: saturate(1); }
    50% { transform: scale(1.12); filter: saturate(1.35); }
}

@keyframes vipFxGoldenGlow {
    0%, 100% { box-shadow: 0 0 22px var(--vip-row-shadow); }
    50% { box-shadow: 0 0 34px rgba(255,213,106,.55), 0 0 12px rgba(255,255,255,.18); }
}

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

@keyframes vipFxPulse {
    0%, 100% { transform: scale(1); box-shadow: 0 0 22px var(--vip-row-shadow); }
    50% { transform: scale(1.04); box-shadow: 0 0 34px rgba(127,214,255,.48); }
}

@media (max-width: 980px) {
    .vip-hero-seal {
        width: 120px;
        height: 120px;
        border-width: 6px;
    }

    .vip-hero-seal strong {
        font-size: 34px;
    }
}

@media (max-width: 560px) {
    .vip-voucher-hero h1 {
        font-size: 34px;
    }

    .vip-benefit-row summary {
        grid-template-columns: 42px minmax(0, 1fr) 22px;
        gap: 10px;
        padding: 11px;
    }

    .vip-benefit-icon {
        width: 42px;
        height: 42px;
    }

    .vip-benefit-row p {
        margin: 0 11px 12px;
    }
}

/* Voucher hero — legible title, clean gold zone */
.vip-voucher-hero {
    grid-template-columns: 62px minmax(0, 1fr);
    grid-template-areas:
        "band main"
        "band meta";
    gap: 0;
    min-height: 0;
    padding: 0;
    isolation: isolate;
    background: linear-gradient(102deg, #132434 0 62px, #f0cc6a 62px 100%);
    border-color: rgba(255, 215, 124, .56);
    box-shadow: 0 28px 70px rgba(0, 0, 0, .38), 0 0 40px rgba(255, 211, 116, .18);
}

.vip-voucher-hero::before {
    background:
        repeating-linear-gradient(90deg, rgba(16, 35, 51, .025) 0 1px, transparent 1px 14px);
    mix-blend-mode: normal;
    opacity: .65;
}

.vip-voucher-hero::after {
    width: 18%;
    opacity: .55;
}

.vip-voucher-band { grid-area: band; z-index: 2; }

.vip-voucher-hero .vip-hero-main {
    grid-area: main;
    z-index: 2;
    align-self: stretch;
    display: grid;
    align-content: center;
    min-width: 0;
    padding: 30px clamp(18px, 4vw, 42px) 20px;
    margin: 14px 14px 0 0;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(255, 248, 225, .94) 0%, rgba(247, 223, 160, .9) 100%);
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, .42),
        0 10px 28px rgba(16, 35, 51, .12);
}

.vip-voucher-hero .vip-kicker {
    border-color: rgba(16, 35, 51, .18);
    color: #102333;
    background: rgba(255, 255, 255, .52);
}

.vip-voucher-hero h1 {
    max-width: 100%;
    color: #0c1824;
    font-size: clamp(34px, 6vw, 52px);
    line-height: .98;
    text-wrap: balance;
    text-shadow: 0 1px 0 rgba(255, 255, 255, .65);
}

.vip-voucher-hero p {
    max-width: 560px;
    color: rgba(12, 24, 36, .82);
    font-size: clamp(14px, 2.2vw, 16px);
    line-height: 1.4;
    font-weight: 600;
}

.vip-hero-tags {
    max-width: 560px;
}

.vip-hero-tags span {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    border-radius: 999px;
    padding: 0 10px;
    font-size: 12px;
    font-weight: 900;
    color: #fff4cf;
    background: linear-gradient(135deg, #142636, #1b3348);
    border: 1px solid rgba(255, 255, 255, .16);
    box-shadow: 0 4px 12px rgba(16, 35, 51, .18);
}

.vip-hero-meta-row {
    grid-area: meta;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 0 clamp(18px, 4vw, 42px) 24px;
}

.vip-hero-seal {
    justify-self: start;
    margin: 0;
    width: 126px;
    height: 126px;
    border-width: 6px;
    flex-shrink: 0;
}

.vip-hero-seal strong { font-size: 36px; }

.vip-voucher-hero .vip-status-card {
    justify-self: end;
    width: min(240px, 100%);
    margin: 0;
    flex: 1 1 220px;
    border-radius: 12px;
}
.vip-btn-primary,
.vip-btn-buy,
.vip-btn-secondary,
.vip-frame-card .vip-btn {
    color: #10141c;
    background: linear-gradient(135deg, #ffffff 0%, #e8edf5 34%, #b8c0cd 68%, #7f8a99 100%);
    border: 1px solid rgba(255,255,255,.56);
    box-shadow: 0 14px 28px rgba(185, 195, 210, .18), inset 0 1px 0 rgba(255,255,255,.65);
}
.vip-btn:hover {
    filter: brightness(1.06);
}
.vip-benefit-icon,
.vip-benefit-icon svg {
    color: #06090f !important;
    stroke: #06090f !important;
}
.vip-benefit-row {
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.vip-benefit-row:hover,
.vip-benefit-row[open] {
    transform: translateY(-1px);
    box-shadow: 0 18px 42px rgba(0,0,0,.26), 0 0 26px var(--vip-row-shadow), inset 0 1px 0 rgba(255,255,255,.08);
}
.vip-benefit-row p {
    transform-origin: top;
    animation: vipBenefitReveal .22s ease both;
}
@keyframes vipBenefitReveal {
    from { opacity: 0; transform: translateY(-8px) scaleY(.96); }
    to { opacity: 1; transform: translateY(0) scaleY(1); }
}
@media (max-width: 720px) {
    .vip-voucher-hero {
        grid-template-columns: 1fr;
        grid-template-areas: "band" "main" "meta";
    }
    .vip-voucher-band { min-height: 42px; }
    .vip-voucher-band span {
        writing-mode: horizontal-tb;
        transform: none;
    }
    .vip-voucher-hero .vip-hero-main {
        margin: 0 14px;
    }
    .vip-hero-meta-row {
        flex-direction: column;
        align-items: stretch;
        padding: 0 18px 20px;
    }
    .vip-hero-seal,
    .vip-voucher-hero .vip-status-card {
        width: 100%;
    }
    .vip-voucher-hero .vip-status-card {
        margin-top: 0;
    }
}