/* ECOlife kvíz modal — önálló mini plugin stílusa (a design token-neveket a téma
   biztosítja: var(--c-*), var(--font-*)). */
.modal { position: fixed; inset: 0; z-index: 100; background: rgba(22,52,40,.55); display: none; align-items: center; justify-content: center; padding: 20px; }
.modal.open { display: flex; }
.modal-box { background: var(--c-paper); border-radius: 20px; max-width: 460px; width: 100%; padding: 32px; box-shadow: 0 30px 80px rgba(0,0,0,.35); }
.modal-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.modal-x { width: 32px; height: 32px; border: 1px solid var(--c-stroke); background: #fff; border-radius: 9px; cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--c-ink); }
.modal h3 { font-family: var(--font-display); font-size: 21px; font-weight: 700; letter-spacing: -.02em; color: var(--c-ink); margin: 0 0 4px; }
.modal p { font-size: 14px; color: var(--c-graphite); margin: 0 0 18px; font-family: var(--font-ui); }
.qopts { display: flex; flex-direction: column; gap: 8px; }
.qopt { text-align: left; background: #fff; border: 1px solid var(--c-stroke); border-radius: 999px; padding: 13px 16px; font-size: 14px; font-weight: 700; color: var(--c-ink); cursor: pointer; font-family: var(--font-ui); }
.qopt:hover { border-color: var(--c-mint-deep); }
.qres { background: var(--c-mint-tint); border-radius: 14px; padding: 14px 16px; margin-bottom: 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.qres b { font-family: var(--font-display); font-size: 24px; font-weight: 800; color: var(--c-ink); }
.qlink { background: none; border: none; color: var(--c-graphite); font-weight: 700; font-size: 13.5px; cursor: pointer; font-family: var(--font-ui); text-decoration: underline; }