.survey-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.4);display:none;z-index:9998}
.survey-modal{position:fixed;inset:0;display:none;place-items:center;z-index:9999}
.survey-card{background:#fff;max-width:560px;width:min(92vw,560px);border-radius:16px;box-shadow:0 16px 48px rgba(0,0,0,.28);overflow:hidden;font-family:Inter,system-ui,Arial,sans-serif}
.survey-head{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;background:#00b3a4;color:#fff}
.survey-title{font-size:18px;font-weight:700}
.survey-close{all:unset;cursor:pointer;font-size:22px;line-height:1;padding:4px 8px;border-radius:10px}
.survey-close:focus{outline:2px solid #fff;outline-offset:2px}
.survey-body{padding:18px;color:#111}
.survey-row{margin:12px 0}
.survey-note{font-size:12px;color:#666;margin-bottom:6px;display:block}
.survey-actions{display:flex;gap:8px;justify-content:space-between;align-items:center;margin-top:12px}
.survey-btn{border:0;border-radius:10px;cursor:pointer;padding:10px 14px;font-weight:700}
.survey-btn.primary{background:#00b3a4;color:#fff}
.survey-btn.ghost{background:#f2f2f2}
.survey-helper{font-size:12px;color:#666}
.progress{display:flex;gap:6px;margin:6px 0 2px}
.dot{width:8px;height:8px;border-radius:999px;background:#d4d4d4}
.dot.active{background:#00b3a4}
.step{display:none;animation:fadeSlide .24s ease}
.step.active{display:block}
@keyframes fadeSlide{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
.opts{display:grid;gap:8px}
.opt{display:flex;align-items:center;gap:10px;padding:12px 14px;border:1px solid #e5e5e5;border-radius:12px;cursor:pointer;user-select:none;transition:transform .06s ease, box-shadow .06s ease, border-color .06s ease, background .06s ease;background:#fff}
.opt:hover{transform:translateY(-1px);box-shadow:0 6px 18px rgba(0,0,0,.06)}
.opt input{position:absolute;opacity:0;pointer-events:none}
.opt .bullet{width:16px;height:16px;border-radius:999px;border:2px solid #bbb;display:inline-block}
.opt.selected{border-color:#00b3a4;background:#f6fffe}
.opt.selected .bullet{border-color:#00b3a4;background:#00b3a4}
.input{width:100%;padding:10px;border:1px solid #ddd;border-radius:10px;font:inherit}
.textarea{width:100%;min-height:100px;padding:10px;border:1px solid #ddd;border-radius:10px;font:inherit;resize:vertical}
.form-grid{display:grid;gap:10px}
@media(min-width:520px){ .form-grid.cols-2{grid-template-columns:1fr 1fr} }
@media (max-width:420px){.survey-title{font-size:16px}}
#surveyNext{display:none}