.wheelio-entry { margin: 1rem auto; padding: 0 1rem; text-align: center; }
.wheelio-entry button { background: transparent; border: 0; text-decoration: underline; font: inherit; padding: .75rem; cursor: pointer; }
#wheelio-settings { box-sizing: border-box; width: min(94vw, 760px); max-height: 92dvh; padding: 20px; border: 0; border-radius: 16px; background: #f4f2ed; box-shadow: 0 16px 80px #0008; }
#wheelio-settings, #wheelio-settings :where(h2,p,a,strong,button) { color: #191a1b !important; }
#wheelio-settings::backdrop { background: #0009; }
#wheelio-settings h2 { margin: 0; font: 700 20px/1.3 Arial,sans-serif; }
#wheelio-settings p { margin: 12px 0; font: 14px/1.5 Arial,sans-serif; }
#wheelio-settings a { text-decoration: underline; }
#wheelio-settings header { display: flex; justify-content: space-between; align-items: start; gap: 16px; }
#wheelio-close { flex: none; min-height: 44px; padding: 8px 12px; }
#wheelio-settings button { cursor: pointer; border: 1px solid #777; border-radius: 8px; background: #e3e1dc; min-height: 44px; padding: 10px 14px; font: 700 14px/1.3 Arial,sans-serif; }
#wheelio-settings button:focus-visible, .wheelio-entry button:focus-visible { outline: 3px solid #315da1; outline-offset: 3px; }
.wheelio-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.wheelio-actions button { flex: 1 1 160px; }
#wheelio-settings [hidden] { display: none !important; }
#wheelio-host { height: min(60dvh, 650px); min-height: 240px; }
#wheelio-host iframe { display: block; width: 100%; height: 100%; border: 0; background: #f4f2ed; }
#wheelio-settings[open][data-active] { display: flex; flex-direction: column; height: 92dvh; }
#wheelio-settings[data-active] .wheelio-explanation { display: none; }
#wheelio-settings[data-active] #wheelio-host { flex: 1; min-height: 0; }
#wheelio-settings[data-active] .wheelio-actions { flex: none; }
@media (max-width: 480px) {
    #wheelio-settings { padding: 14px; }
    #wheelio-settings h2 { font-size: 18px; }
}