.monthly-bonus-winner-wrap { padding: 24px 0 0; }
.monthly-bonus-winner-banner[hidden] { display: none; }
.monthly-bonus-winner-banner { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 18px; overflow: hidden; padding: 20px 24px; border: 1px solid rgba(207, 255, 77, .48); border-radius: 10px; color: var(--text); background: linear-gradient(115deg, rgba(207, 255, 77, .13), rgba(61, 213, 255, .08) 58%, rgba(9, 17, 30, .9)); box-shadow: 0 18px 46px rgba(0, 0, 0, .22); }
.monthly-bonus-winner-banner::after { content: ""; position: absolute; top: -70px; right: 12%; width: 180px; height: 180px; border-radius: 50%; background: rgba(207, 255, 77, .12); filter: blur(20px); pointer-events: none; }
.monthly-bonus-winner-icon { position: relative; z-index: 1; display: grid; width: 58px; height: 58px; place-items: center; border: 1px solid rgba(207, 255, 77, .6); border-radius: 50%; color: #07120a; background: var(--lime); font-size: 28px; box-shadow: 0 0 30px rgba(207, 255, 77, .2); }
.monthly-bonus-winner-copy { position: relative; z-index: 1; }
.monthly-bonus-winner-copy > span { color: var(--lime); font: 800 10px/1.3 "JetBrains Mono", monospace; letter-spacing: .08em; text-transform: uppercase; }
.monthly-bonus-winner-copy h2 { margin: 5px 0 6px; font-size: clamp(20px, 2.5vw, 28px); }
.monthly-bonus-winner-copy p { margin: 0; color: var(--muted); line-height: 1.55; }
.monthly-bonus-winner-end { position: relative; z-index: 1; max-width: 180px; padding: 10px 13px; border: 1px solid rgba(61, 213, 255, .3); border-radius: 6px; color: var(--blue); background: rgba(5, 12, 22, .45); font: 800 11px/1.45 "JetBrains Mono", monospace; text-align: center; }
html[data-course-theme=light] .monthly-bonus-winner-banner { border-color: #a9c956; color: #172638; background: linear-gradient(115deg, #f2f9dc, #eefaff 62%, #fff); box-shadow: 0 16px 38px rgba(47, 72, 94, .11); }
html[data-course-theme=light] .monthly-bonus-winner-copy p { color: #566d80; }
html[data-course-theme=light] .monthly-bonus-winner-copy > span { color: #527916; }
html[data-course-theme=light] .monthly-bonus-winner-end { border-color: #afd8e5; color: #17677d; background: rgba(255, 255, 255, .72); }
@media (max-width: 700px) { .monthly-bonus-winner-wrap { padding-top: 14px; } .monthly-bonus-winner-banner { grid-template-columns: auto 1fr; padding: 17px; gap: 13px; } .monthly-bonus-winner-icon { width: 48px; height: 48px; font-size: 23px; } .monthly-bonus-winner-end { grid-column: 1 / -1; width: 100%; max-width: none; box-sizing: border-box; text-align: left; } }