.bn-screen { display: flex; flex-direction: column; gap: 16px; }
.bn-banner { display: block; }
.bn-cols { gap: 16px; }
.bn-cols > .col { gap: 16px; }

.bh-hero .h-slide {
    min-height: 0; padding: 34px 44px 30px;
    grid-template-rows: auto auto; row-gap: 22px;

    --art-w: clamp(320px, 36vw, 540px);
    --b1: #170a38; --b2: #43107a;
}
.bh-hero .h-slide::after {
    content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background:
        radial-gradient(420px 220px at 0% 110%, rgba(255,95,180,.2), transparent 70%),
        radial-gradient(360px 200px at 40% -30%, rgba(120,150,255,.18), transparent 70%);
}
.bh-hero .h-tx { grid-column: 1; grid-row: 1; }
.bh-hero .h-tx h3 { margin-top: 16px; }
.bh-hero .h-tx p { max-width: 470px; }
.bh-hero .h-art { grid-column: 2; grid-row: 1 / span 2; height: 100%; min-height: 300px; }
.bh-hero .h-wheel .wb { inset: 0; margin: auto; width: 100%; height: 100%; object-fit: contain; }
.bh-hero .h-art .c1 { width: 58px; left: 2%; top: 14%; animation-delay: -2s; }
.bh-hero .h-art .d1 { width: 64px; right: 2%; bottom: 10%; animation-delay: -1s; }

.bh-goals { grid-column: 1; grid-row: 2; position: relative; z-index: 2; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; max-width: 620px; }
.bh-goal {
    display: grid; grid-template-columns: 34px minmax(0, 1fr); grid-template-rows: auto auto; gap: 9px 10px; align-items: center;
    padding: 11px 12px 12px; border-radius: 16px; text-align: left; color: #fff; cursor: pointer;
    background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03)), rgba(10,4,26,.35);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.1), inset 0 1px 0 rgba(255,255,255,.08);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    transition: transform .18s var(--ease), box-shadow .18s var(--ease);
}
.bh-goal:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tone) 55%, transparent), 0 14px 30px -18px var(--tone); }
.bh-goal .ic {
    width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; color: var(--tone);
    background: color-mix(in srgb, var(--tone) 18%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tone) 35%, transparent);
}
.bh-goal .tx { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.bh-goal small { font-size: 10.5px; font-weight: 800; color: rgba(255,255,255,.62); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bh-goal b { font-family: var(--f-display); font-size: 17px; line-height: 1; font-variant-numeric: tabular-nums; }
.bh-goal b em { font-style: normal; color: rgba(255,255,255,.42); font-size: 12px; margin-left: 2px; }
.bh-goal .segs { grid-column: 1 / -1; display: flex; gap: 4px; }
.bh-goal .segs i { flex: 1; height: 5px; border-radius: 5px; background: rgba(255,255,255,.13); }
.bh-goal .segs i.on { background: var(--tone); box-shadow: 0 0 10px -1px var(--tone); }
.bh-goal.is-full { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tone) 60%, transparent); }

.bn-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.bn-list .bonus + .bonus { margin-top: 0; }
.bn-list .bonus {
    --t1: #8fa3c7; --t2: #5a6d92;
    position: relative; overflow: hidden; isolation: isolate;
    display: flex; flex-direction: column; align-items: stretch; gap: 0;
    min-width: 0; padding: 16px; border-radius: 22px; border: 1px solid transparent;
    background:
        radial-gradient(160px 130px at 100% 0%, color-mix(in srgb, var(--t1) 24%, transparent), transparent 70%),
        radial-gradient(140px 120px at 0% 100%, color-mix(in srgb, var(--t2) 12%, transparent), transparent 70%),
        linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,0)),
        var(--surface);
    transition: transform .22s var(--ease), box-shadow .22s var(--ease);
}

.bn-list .bonus::before {
    content: ''; position: absolute; inset: -1px; z-index: -1; border-radius: inherit; padding: 1px; pointer-events: none;
    background: linear-gradient(150deg, color-mix(in srgb, var(--t1) 70%, transparent), rgba(255,255,255,.07) 40%, rgba(255,255,255,.04) 70%, color-mix(in srgb, var(--t2) 45%, transparent));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude;
}

.bn-list .bonus::after {
    content: ''; position: absolute; z-index: -1; top: 0; bottom: 0; left: -50%; width: 45%; pointer-events: none;
    background: linear-gradient(100deg, transparent, rgba(255,255,255,.07), transparent);
    transform: skewX(-18deg); opacity: 0;
}
.bn-list .bonus[data-kind="wheel"] { --t1: #ff5fb4; --t2: #8a3dff; }
.bn-list .bonus[data-kind="fs"]    { --t1: #5fccff; --t2: #3b6cf6; }
.bn-list .bonus[data-kind="dep"]   { --t1: #ffc94a; --t2: #f08a12; }
.bn-list .bonus[data-kind="tg"]    { --t1: #43c4ff; --t2: #1e7fd0; }
.bn-list .bonus.ready { cursor: pointer; }
.bn-list .bonus.ready:hover {
    transform: translateY(-3px);
    box-shadow: 0 22px 40px -24px var(--t1), 0 0 0 1px color-mix(in srgb, var(--t1) 35%, transparent);
}
.bn-list .bonus.ready:hover::after { opacity: 1; left: 120%; transition: left .8s var(--ease), opacity .2s; }
.bn-list .bonus.ready:active { transform: translateY(-1px) scale(.99); }
.bn-list .bonus[role="button"]:focus-visible { outline: 2px solid var(--t1); outline-offset: 3px; }
.bn-list .bonus:not(.ready) {
    background:
        radial-gradient(160px 130px at 100% 0%, color-mix(in srgb, var(--t1) 9%, transparent), transparent 70%),
        var(--surface);
}
.bn-list .bonus:not(.ready)::before { background: linear-gradient(150deg, rgba(255,255,255,.12), rgba(255,255,255,.04)); }

.bt-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.bn-list .bonus .ic {
    position: relative; width: 46px; height: 46px; flex: none; display: grid; place-items: center; border-radius: 15px; color: #fff;
    background:
        radial-gradient(80% 60% at 30% 15%, rgba(255,255,255,.45), transparent 60%),
        linear-gradient(145deg, var(--t1), var(--t2));
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.4), inset 0 -3px 6px color-mix(in srgb, var(--t2) 60%, #000 20%),
        0 0 0 4px color-mix(in srgb, var(--t1) 12%, transparent),
        0 12px 24px -10px var(--t1);
}
.bn-list .bonus .ic svg { filter: drop-shadow(0 1px 2px rgba(0,0,0,.25)); }
.bn-list .bonus:not(.ready) .ic {
    color: var(--t1); background: color-mix(in srgb, var(--t1) 12%, var(--surface-3));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--t1) 25%, transparent);
}
.bt-tag {
    display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; white-space: nowrap;
    font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
    color: color-mix(in srgb, var(--t1) 80%, #fff); background: color-mix(in srgb, var(--t1) 14%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--t1) 28%, transparent);
}
.bonus.ready .bt-tag::before {
    content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor;
    box-shadow: 0 0 0 0 currentColor; animation: bt-ping 2s ease-out infinite;
}
@keyframes bt-ping { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, currentColor 60%, transparent); } 70%, 100% { box-shadow: 0 0 0 7px transparent; } }
.bonus:not(.ready) .bt-tag { color: var(--muted); background: rgba(255,255,255,.05); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }

.bt-val { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 7px; margin-top: 16px; min-width: 0; }
.bt-val b {
    font-family: var(--f-display); font-size: 34px; font-weight: 700; line-height: 1; letter-spacing: -.04em;
    font-variant-numeric: tabular-nums; white-space: nowrap;
    background: linear-gradient(180deg, #fff 30%, color-mix(in srgb, var(--t1) 70%, #fff));
    -webkit-background-clip: text; background-clip: text; color: transparent;
    filter: drop-shadow(0 0 18px color-mix(in srgb, var(--t1) 45%, transparent));
}
.bt-val em { font-style: normal; font-size: 13px; font-weight: 800; color: var(--muted); }
.bt-val span { font-size: 12px; font-weight: 700; color: var(--muted); }
.bonus:not(.ready) .bt-val b { background: none; color: var(--text); filter: none; }

.bt-bar { height: 6px; margin-top: 12px; border-radius: 6px; overflow: hidden; background: rgba(255,255,255,.07); }
.bt-bar i {
    display: block; height: 100%; border-radius: inherit;
    background: linear-gradient(90deg, var(--t2), var(--t1)); box-shadow: 0 0 10px color-mix(in srgb, var(--t1) 60%, transparent);
    transition: width 1s linear;
}

.bn-list .bonus .grow { flex: 1 1 auto; margin-top: 12px; }
.bn-list .bonus .grow b { font-size: 14.5px; letter-spacing: -.01em; }
.bn-list .bonus .grow small { margin-top: 3px; font-size: 11.5px; line-height: 1.4; }
.bt-perks { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 7px; }
.bt-perks i {
    display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px 4px 7px; border-radius: 9px;
    font-style: normal; font-size: 11px; font-weight: 800; color: var(--text);
    background: color-mix(in srgb, var(--t1) 12%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--t1) 24%, transparent);
}
.bt-perks svg { color: var(--t1); flex: none; }

.bn-list .bonus .cta {
    display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 14px; min-height: 42px;
    padding: 0 16px; border-radius: 14px; font-size: 13px; letter-spacing: 0; white-space: nowrap;
    font-kerning: normal; text-rendering: optimizeLegibility;
    color: var(--muted); background: rgba(255,255,255,.05); box-shadow: inset 0 0 0 1px rgba(255,255,255,.07);
}
.bn-list .bonus.ready .cta {
    color: #fff;
    background: linear-gradient(135deg, var(--t1), var(--t2));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.35), inset 0 -2px 0 rgba(0,0,0,.15), 0 12px 24px -12px var(--t1);
    text-shadow: 0 1px 1px rgba(0,0,0,.2);
    transition: gap .2s var(--ease), filter .2s var(--ease);
}

.bn-list .bonus.ready[data-kind="dep"] .cta { color: #2a1600; text-shadow: none; }

.bn-list .bonus.ready .cta::after {
    content: ''; width: 6px; height: 6px; margin-right: 2px;
    border-top: 2px solid currentColor; border-right: 2px solid currentColor; border-radius: 1px;
    transform: rotate(45deg);
}
.bn-list .bonus.ready:hover .cta { gap: 12px; filter: brightness(1.08); }

.bn-list:has(> .bonus:only-child) { grid-template-columns: minmax(0, 1fr); }
.bn-list .bonus:only-child {
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto; column-gap: 14px; align-items: center;
    grid-template-areas: "ic val cta" "ic tx cta" "bar bar bar";
}
.bn-list .bonus:only-child .bt-top { display: contents; }
.bn-list .bonus:only-child .ic { grid-area: ic; }
.bn-list .bonus:only-child .bt-tag { display: none; }
.bn-list .bonus:only-child .bt-val { grid-area: val; margin-top: 0; }
.bn-list .bonus:only-child .bt-val b { font-size: 24px; }
.bn-list .bonus:only-child .grow { grid-area: tx; margin-top: 4px; }
.bn-list .bonus:only-child .bt-bar { grid-area: bar; margin-top: 12px; }
.bn-list .bonus:only-child .cta { grid-area: cta; margin-top: 0; }
.bn-list .bonus:only-child .bt-val ~ .grow b { font-size: 12.5px; color: var(--dim); }

.tgc[hidden] { display: none; }
.tgc {
    --tg: #2aa3e0; --tg2: #43c4ff;
    position: relative; overflow: hidden; isolation: isolate;
    border-color: rgba(67,196,255,.28);
    background:
        radial-gradient(70% 120% at 100% 0%, rgba(67,196,255,.2), transparent 60%),
        radial-gradient(60% 90% at 0% 100%, rgba(30,127,208,.14), transparent 70%),
        var(--card, rgba(255,255,255,.03));
}

.tgc::before {
    content: ''; position: absolute; z-index: -1; right: -34px; top: -40px; width: 190px; height: 190px; opacity: .07;
    background: #fff;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 240'%3E%3Cpath d='M100 144.4l48.4 35.7c5.5 3 9.5 1.5 10.9-5.1L179 82.2c2-8.1-3.1-11.7-8.4-9.3L55 117.5c-7.9 3.2-7.8 7.6-1.4 9.5l29.7 9.3L152 93c3.2-2 6.2-.9 3.8 1.3z'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 240'%3E%3Cpath d='M100 144.4l48.4 35.7c5.5 3 9.5 1.5 10.9-5.1L179 82.2c2-8.1-3.1-11.7-8.4-9.3L55 117.5c-7.9 3.2-7.8 7.6-1.4 9.5l29.7 9.3L152 93c3.2-2 6.2-.9 3.8 1.3z'/%3E%3C/svg%3E") center / contain no-repeat;
    transform: rotate(-12deg);
}
.tgc-top { display: flex; align-items: center; gap: 14px; }
.tgc-ic {
    width: 52px; height: 52px; flex: none; display: grid; place-items: center; border-radius: 17px; color: #fff;
    background: linear-gradient(145deg, var(--tg2), #1e7fd0);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 12px 26px -10px var(--tg2);
}
.tgc-ic svg { width: 30px; height: 30px; margin-left: -3px; }
.tgc-tx { min-width: 0; flex: 1; }
.tgc-tx small { display: block; color: var(--tg2); font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.tgc-tx h3 { margin: 3px 0 0; }
.tgc-tx p { margin: 4px 0 0; color: var(--dim); font-size: 12.5px; font-weight: 600; line-height: 1.45; }
.tgc-tx p b { color: var(--text); }
.tgc-amt { flex: none; text-align: right; }
.tgc-amt b {
    display: block; font-family: var(--f-display); font-size: 28px; font-weight: 700; line-height: 1; letter-spacing: -.03em;
    color: #fff; text-shadow: 0 0 22px rgba(67,196,255,.55); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.tgc-amt small { display: block; margin-top: 5px; color: var(--faint); font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }

.tgc-steps { list-style: none; margin: 16px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; counter-reset: none; }
.tgc-steps li {
    position: relative; display: flex; align-items: center; gap: 10px; min-width: 0;
    padding: 10px 11px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line-soft);
}
.tgc-steps li > i {
    width: 26px; height: 26px; flex: none; display: grid; place-items: center; border-radius: 50%;
    font-style: normal; font-family: var(--f-display); font-size: 12px; font-weight: 700; color: var(--faint);
    box-shadow: inset 0 0 0 2px rgba(255,255,255,.12);
}
.tgc-steps li > i svg { width: 14px; height: 14px; }
.tgc-steps span { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.tgc-steps b { font-size: 12px; font-weight: 800; line-height: 1.3; color: var(--text); overflow-wrap: anywhere; }
.tgc-steps small { font-size: 10.5px; font-weight: 600; line-height: 1.3; color: var(--faint); }
.tgc-steps li.now { border-color: rgba(67,196,255,.45); background: linear-gradient(100deg, rgba(67,196,255,.12), transparent 70%), var(--surface); }
.tgc-steps li.now > i { color: #fff; background: var(--tg); box-shadow: 0 0 0 4px rgba(67,196,255,.16); }
.tgc-steps li.done > i { color: #06261a; background: #3ddc97; box-shadow: none; }
.tgc-steps li.done b { color: var(--dim); }

.tgc-act { display: flex; gap: 10px; margin-top: 14px; }
.tgc-act > * {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 0 18px;
    border-radius: 14px; font: inherit; font-size: 13.5px; font-weight: 800; text-decoration: none; cursor: pointer; border: 0;
    transition: transform .18s var(--ease), box-shadow .18s var(--ease), filter .18s var(--ease);
}
.tgc-act svg { width: 17px; height: 17px; flex: none; }
.tgc-soft { flex: none; color: var(--tg2); background: rgba(67,196,255,.1); box-shadow: inset 0 0 0 1px rgba(67,196,255,.3); }
.tgc-soft:hover { background: rgba(67,196,255,.16); }
.tgc-go {
    flex: 1; color: #fff;
    background: linear-gradient(180deg, #5fd0ff 0%, #2aa3e0 55%, #1b80c4 100%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.45), inset 0 -2px 0 rgba(0,40,90,.3), 0 12px 26px -12px rgba(42,163,224,.95);
}
.tgc-go:not(:disabled):hover { transform: translateY(-1px); filter: brightness(1.06); }
.tgc-go:not(:disabled):active { transform: translateY(1px); }
.tgc-go.is-got {
    cursor: default; color: #3ddc97; background: rgba(61,220,151,.1);
    box-shadow: inset 0 0 0 1px rgba(61,220,151,.35);
}

.tgc.is-got { border-color: var(--line-soft); }
.tgc.is-got .tgc-ic { filter: saturate(.55); box-shadow: inset 0 1px 0 rgba(255,255,255,.25); }
.tgc.is-got .tgc-amt b { color: #3ddc97; text-shadow: none; }

.bn-next {
    padding: 16px 16px 15px; margin-bottom: 16px; border-radius: 18px;
    border: 1px solid var(--gold-line);
    background: radial-gradient(320px 140px at 0% 0%, rgba(247,201,75,.14), transparent 70%), var(--surface);
}
.bn-next-h { display: flex; align-items: baseline; gap: 12px; margin-bottom: 12px; }
.bn-next .pct { font-family: var(--f-display); font-size: 26px; line-height: 1; color: var(--gold-text); font-variant-numeric: tabular-nums; }
.bn-next .tx { font-size: 13px; font-weight: 800; color: var(--text); min-width: 0; }
.bn-bar { height: 9px; border-radius: 9px; background: rgba(255,255,255,.08); overflow: hidden; }
.bn-bar i { display: block; height: 100%; width: var(--p, 0%); border-radius: inherit; background: var(--gold-grad); box-shadow: 0 0 14px rgba(247,201,75,.5); transition: width .6s var(--ease); }

.bn-ladder { position: relative; gap: 0; }
.bn-ladder .lvl {
    position: relative; display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 14px;
    padding: 0 0 14px; border: 0; background: none; border-radius: 0; box-shadow: none; opacity: 1;
}
.bn-ladder .lvl:last-child { padding-bottom: 0; }
.bn-ladder .lvl:not(:last-child)::before {
    content: ''; position: absolute; left: 14px; top: 32px; bottom: 2px; width: 2px; border-radius: 2px;
    background: rgba(255,255,255,.08);
}
.bn-ladder .lvl.got:not(:last-child)::before { background: color-mix(in srgb, var(--lc) 50%, transparent); }
.lv-node {
    width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; margin-top: 8px;
    font-family: var(--f-display); font-size: 12px; font-weight: 700; color: var(--faint);
    background: var(--panel); box-shadow: inset 0 0 0 2px rgba(255,255,255,.1);
}
.lvl.got .lv-node { color: #fff; background: color-mix(in srgb, var(--lc) 70%, #000); box-shadow: none; }
.lvl.now .lv-node { color: var(--gold-ink); background: var(--gold-grad); box-shadow: 0 0 0 5px rgba(247,201,75,.16), 0 6px 18px -4px rgba(247,201,75,.7); }
.lv-body {
    min-width: 0; padding: 12px 14px; border-radius: 16px; border: 1px solid var(--line-soft);
    background: linear-gradient(100deg, color-mix(in srgb, var(--lc) 8%, transparent), transparent 60%), var(--surface);
}
.lvl.got .lv-body { opacity: .6; }
.lvl.now .lv-body { border-color: var(--gold-line); background: linear-gradient(100deg, rgba(247,201,75,.12), transparent 70%), var(--surface); box-shadow: 0 14px 30px -22px rgba(247,201,75,.8); }
.bn-ladder .lvl .lh { margin-bottom: 8px; }
.bn-ladder .lvl .lh b { color: var(--lc); }
.bn-ladder .lvl.now .lh b { color: var(--gold-text); }
.bn-ladder .lvl .need { font-variant-numeric: tabular-nums; }
.lv-perks { display: flex; flex-wrap: wrap; gap: 6px; }
.lv-perks span {
    padding: 4px 9px; border-radius: 8px; font-size: 11px; font-weight: 700; color: var(--dim);
    background: rgba(255,255,255,.045); box-shadow: inset 0 0 0 1px var(--line-soft);
}
.lv-perks b { color: var(--text); font-weight: 800; }

.bn-wg {
    position: relative; overflow: hidden;
    background:
        radial-gradient(70% 120% at 0% 0%, rgba(247,201,75,.13), transparent 60%),
        radial-gradient(50% 90% at 100% 100%, rgba(240,166,44,.08), transparent 70%),
        var(--card, rgba(255,255,255,.03));
    border-color: rgba(247,201,75,.24);
}
.wg-top { display: flex; align-items: center; gap: 14px; }
.wg-ic {
    width: 48px; height: 48px; flex: none; display: grid; place-items: center; border-radius: 16px;
    color: #ffd36b; background: rgba(247,201,75,.12);
    box-shadow: inset 0 0 0 1px rgba(247,201,75,.35), 0 10px 28px -12px rgba(247,201,75,.7);
}
.wg-ic svg { width: 22px; height: 22px; }
.wg-head { min-width: 0; }
.wg-head h3 { margin: 0; }
.wg-head small { display: block; margin-top: 3px; color: var(--gold-text); font-size: 11.5px; font-weight: 800; }
.wg-sum { margin-left: auto; text-align: right; }
.wg-sum small { display: block; color: var(--faint); font-size: 9.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.wg-sum strong {
    display: block; margin-top: 2px; font-family: var(--f-display); font-size: 26px; font-weight: 700;
    letter-spacing: -.04em; line-height: 1.1; color: var(--gold-text); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.wg-bar {
    position: relative; height: 10px; margin-top: 16px; border-radius: 99px;
    background: rgba(255,255,255,.07); box-shadow: inset 0 1px 2px rgba(0,0,0,.35);
}
.wg-bar i {
    position: relative; display: block; width: 0; height: 100%; border-radius: inherit; overflow: hidden;
    background: linear-gradient(90deg, #f0a62c, #ffd36b); box-shadow: 0 0 12px rgba(247,201,75,.55);
    transition: width .9s cubic-bezier(.2,.8,.2,1);
}

.wg-bar i::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.55) 50%, transparent 70%);
    transform: translateX(-100%); animation: wg-shine 2.8s ease-in-out infinite;
}
@keyframes wg-shine { 60%, 100% { transform: translateX(100%); } }
.wg-foot {
    display: flex; align-items: center; gap: 10px; margin-top: 8px;
    color: var(--muted, var(--dim)); font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.wg-foot b { margin-left: auto; color: var(--gold-text); font-size: 13px; }
.wg-n {
    margin: 12px 0 0; padding-top: 12px; border-top: 1px solid var(--line-soft);
    color: var(--faint); font-size: 12px; font-weight: 600; line-height: 1.5;
}

.cb-lock { display: flex; align-items: center; gap: 13px; padding: 14px; border-radius: 16px; background: var(--surface); border: 1px dashed var(--line-2); }
.cb-lock .ic { width: 40px; height: 40px; flex: none; border-radius: 13px; display: grid; place-items: center; color: var(--gold-text); background: var(--gold-soft-2); }
.cb-lock p { margin: 0; color: var(--dim); font-size: 12.5px; font-weight: 700; line-height: 1.5; }
.cb-lock p b { color: var(--text); }
.cb-tiers { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); grid-auto-flow: column; gap: 8px; margin-top: 10px; }
.cb-tiers .t { padding: 12px 10px; border-radius: 14px; text-align: center; background: var(--surface); border: 1px solid var(--line-soft); }
.cb-tiers .t b { display: block; font-family: var(--f-display); font-size: 18px; color: var(--gold-text); }
.cb-tiers .t small { display: block; margin-top: 3px; color: var(--faint); font-size: 11px; font-weight: 700; }
.cb-row .cb-take { flex: none; min-height: 34px; padding: 7px 14px; font-size: 12px; }

@media (max-width: 760px) {
    .bn-screen { gap: 14px; }
    .bh-hero .h-slide { --art-w: 48%; padding: 20px 16px 16px; row-gap: 14px; }
    .bh-hero .h-art { grid-row: 1; min-height: 0; height: 150px; margin-right: 0; }
    .bh-hero .h-tx h3 { margin-top: 10px; }
    .bh-goals { grid-column: 1 / -1; gap: 7px; }
    .bh-goal { grid-template-columns: minmax(0, 1fr); padding: 9px 10px 10px; gap: 7px; border-radius: 13px; }
    .bh-goal .ic { display: none; }
    .bh-goal small { font-size: 9.5px; white-space: normal; line-height: 1.25; }
    .bh-goal b { font-size: 15px; }

    .bn-list { grid-template-columns: minmax(0, 1fr); gap: 9px; }
    .bn-list .bonus {
        display: grid; grid-template-columns: auto minmax(0, 1fr) auto; column-gap: 12px; align-items: center;
        grid-template-areas: "ic val cta" "ic tx cta" "bar bar bar";
        padding: 12px; border-radius: 18px;
    }
    .bn-list .bonus .bt-top { display: contents; }
    .bn-list .bonus .ic { grid-area: ic; width: 44px; height: 44px; border-radius: 14px; }
    .bn-list .bonus .bt-tag { display: none; }
    .bn-list .bonus .bt-val { grid-area: val; margin-top: 0; gap: 0 5px; }
    .bn-list .bonus .bt-val b { font-size: 21px; }
    .bn-list .bonus .bt-val span, .bn-list .bonus .bt-val em { font-size: 11px; }
    .bn-list .bonus { grid-template-areas: "ic val cta" "ic tx cta" ". pk pk" "bar bar bar"; }

    .bn-list .bonus .grow { display: contents; }
    .bn-list .bonus .grow b { grid-area: tx; margin-top: 2px; font-size: 12.5px; color: var(--dim); }
    .bn-list .bonus .bt-val ~ .grow small { display: none; }
    .bn-list .bonus .grow small { grid-area: tx; }
    .bn-list .bonus .bt-perks { grid-area: pk; margin-top: 8px; gap: 5px; }
    .bn-list .bonus[data-kind="dep"] .bt-val span { display: none; }
    .bn-list .bonus .bt-perks i { padding: 3px 7px 3px 5px; font-size: 10.5px; }
    .bn-list .bonus .bt-bar { grid-area: bar; margin-top: 10px; }
    .bn-list .bonus .cta { grid-area: cta; margin-top: 0; min-height: 38px; padding: 0 12px 0 14px; gap: 6px; font-size: 12px; border-radius: 12px; }
    .tgc-ic { width: 44px; height: 44px; border-radius: 14px; }
    .tgc-ic svg { width: 26px; height: 26px; }
    .tgc-top { flex-wrap: wrap; }
    .tgc-tx { flex-basis: calc(100% - 58px); }
    .tgc-amt { flex-basis: 100%; padding-left: 58px; text-align: left; display: flex; align-items: baseline; gap: 8px; }
    .tgc-amt small { margin: 0; }
    .tgc-amt b { font-size: 24px; }
    .tgc-steps { grid-template-columns: minmax(0, 1fr); gap: 6px; }
    .tgc-steps li { padding: 8px 10px; }
    .tgc-act { flex-direction: column-reverse; gap: 8px; }
    .tgc-act > * { min-height: 44px; }
    .bn-next .pct { font-size: 22px; }
    .lv-perks span { font-size: 10.5px; }
    .wg-ic { width: 42px; height: 42px; border-radius: 14px; }
    .wg-top { flex-wrap: wrap; row-gap: 12px; }
    .wg-sum { flex-basis: 100%; margin-left: 0; text-align: left; }
    .wg-sum strong { font-size: 24px; }
}
@media (prefers-reduced-motion: reduce) {
    .bh-goal, .bn-list .bonus, .bn-list .bonus .cta, .wg-bar i, .bt-bar i { transition: none; }
    .bn-list .bonus::after { display: none; }
    .bonus.ready .bt-tag::before { animation: none; }
    .wg-bar i::after { animation: none; }
}
html.is-lite .bh-goal, html.is-webview .bh-goal { -webkit-backdrop-filter: none; backdrop-filter: none; }

@media (min-width: 761px) {
    .bn-cb [data-cashback]:has(.cb-lock) { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 10px; }
    .bn-cb .cb-tiers { margin-top: 0; }
}