:root{font-family:Segoe UI,Arial,sans-serif;color:#173f43;background:#f4f7f5;font-size:17px}*{box-sizing:border-box}body{margin:0}header{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:24px 5%;background:white;border-bottom:1px solid #e0e9e4}a{color:#1b655f;text-decoration:none}.brand{display:flex;align-items:center;gap:12px;font-weight:650}.mark{background:#dbeee8;border-radius:14px;font-size:30px;padding:3px 12px}.badge{font-size:12px;background:#f0f4f2;padding:9px 13px;border-radius:20px;color:#536e68}main{max-width:850px;margin:45px auto;padding:0 24px}.wide{max-width:1200px}.eyebrow{color:#598078;font-weight:700;letter-spacing:2px;font-size:12px}h1{font-size:clamp(30px,4vw,44px);letter-spacing:-1.5px;margin:15px 0}h2{font-size:26px;letter-spacing:-.6px;margin-top:0}h3{font-size:19px}.intro p,.muted{color:#607774;line-height:1.6}.notice{border:1px solid #dedec9;background:#f9f8ec;color:#737052;padding:12px 16px;border-radius:12px;font-size:13px;line-height:1.5;margin:25px 0}.card{background:#fff;border:1px solid #e0e8e3;border-radius:22px;padding:32px;margin-bottom:24px;box-shadow:0 8px 35px #173f4304}.step{color:#729089;font-size:13px;font-weight:600;letter-spacing:1px;margin-bottom:16px}.options{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:24px}.choice{border:1px solid #d9e3df;padding:18px;border-radius:12px;display:flex;gap:12px;align-items:center;min-height:62px;cursor:pointer}.choice:has(input:checked){background:#eaf5ef;border-color:#2e8074}.choice input{accent-color:#246a60;width:20px;height:20px;flex-shrink:0}.scale{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin:25px 0 10px}.scale .choice{flex-direction:column;text-align:center;padding:16px 8px;font-size:14px}.scale strong{font-size:28px;font-weight:500}.scale input{margin:0}.na{display:block;margin:18px 0;font-size:15px}.na input{accent-color:#246a60}.field{display:block;margin:20px 0;font-weight:600}.field span{display:block;font-size:13px;font-weight:400;color:#667f77;margin:8px 0}input[type=text],input[type=email],input[type=tel],input[type=date],textarea,select{font:inherit;width:100%;padding:13px;border:1px solid #ccdcd4;border-radius:10px;background:white;color:#173f43;margin-top:8px}textarea{resize:vertical;min-height:110px}button{font:inherit;border:0;background:#246a60;color:white;padding:16px 25px;border-radius:12px;font-weight:600;cursor:pointer;min-height:52px}.secondary{background:white;border:1px solid #cddcd5;color:#28584e}button:hover{filter:brightness(.96)}button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:3px solid #ce9229;outline-offset:4px}.actions{display:flex;align-items:center;justify-content:space-between;gap:15px}.actions span{font-size:14px}.hidden{display:none!important}#error{color:#a43f3f}footer{text-align:center;font-size:12px;color:#71877f;padding:30px}#thanks{text-align:center;padding:60px 20px}.success{font-size:44px;color:#246a60;margin-bottom:20px}.filters{display:flex;flex-wrap:wrap;gap:16px;align-items:end;padding:22px}.filters label{flex:1;min-width:140px;font-size:13px}.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.stat{padding:24px;background:#e4efe8;border-radius:18px;margin-bottom:24px}.stat b{display:block;font-size:36px;margin:10px 0}.stat span{font-size:13px;color:#59776b}.dimensions{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}.meter{height:8px;background:#edf2ee;border-radius:6px;margin:12px 0}.meter i{display:block;height:100%;background:#5f9985;border-radius:6px}.sectionTitle{display:flex;justify-content:space-between;gap:20px;align-items:start}.response{border-top:1px solid #e5ece7;padding:24px 0}.response p{line-height:1.6;white-space:pre-wrap;overflow-wrap:anywhere}.pill{display:inline-block;font-size:12px;background:#edf3ef;border-radius:20px;padding:6px 10px;margin:3px}.low{background:#f9e5dd;color:#8b4730}.response select{width:auto;max-width:100%}.response small{color:#667e74}.trendRow{display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px solid #edf1ed}small{font-weight:400}.empty{padding:30px;color:#687e73;text-align:center}@media(max-width:700px){header{padding:18px;align-items:start}.brand{font-size:14px}.brand small,.badge{display:none}main{margin:28px auto;padding:0 16px}.card{padding:23px}.options{grid-template-columns:1fr}.scale{gap:6px}.scale .choice{padding:12px 3px;font-size:11px}.scale strong{font-size:24px}.stats{grid-template-columns:1fr 1fr}.dimensions{grid-template-columns:1fr}.sectionTitle{flex-direction:column}.stat{padding:18px}.stat b{font-size:28px}}

body.suteu{--brand-primary:#2929b8;--brand-hover:#181880;--brand-tint:#ededfc}#locationOptions button{line-height:1.5}#locationLabel{font-weight:600}
.review-invitation{margin:28px 0;padding:28px;border:1px solid #d5e6df;border-radius:18px;background:#f4f9f7;text-align:left;line-height:1.6}
.review-invitation h3{margin:12px 0}.review-button{display:inline-block;background:var(--brand-primary);color:white;padding:14px 20px;border-radius:12px;font-weight:600;margin:8px 0}.review-button:hover{background:var(--brand-hover)}.review-instructions{padding-left:24px}.review-instructions li{margin:10px 0}.review-qr{display:block;margin:20px auto;background:white;padding:8px;max-width:100%;height:auto}.review-privacy{font-size:13px;color:#607774;border-top:1px solid #d5e6df;padding-top:16px;margin-top:20px}
@media(max-width:700px){.review-invitation{padding:20px}.review-button{display:block;text-align:center}}

/* Decorative optical illustrations stay behind the opaque form cards. */
body{min-height:100vh;background-image:linear-gradient(90deg,transparent,rgba(244,248,247,.8) 30%,rgba(244,248,247,.8) 70%,transparent),url("assets/optical-pattern.svg");background-size:100% 100%,640px 720px;background-position:center top;}
.intro{background:rgba(244,248,247,.88);border-radius:20px;padding:16px 20px;margin:-16px -20px 0}
footer{background:rgba(244,248,247,.9)}
@media(max-width:700px){body{background-size:100% 100%,420px auto}.intro{padding:12px;margin:-12px -12px 0}}

/* Identitate OptiSpot: logo original și culorile butoanelor de pe optispot.ro. */
:root{--brand-primary:#0f766e;--brand-hover:#115e59;--brand-tint:#e7f3f0;color:#183e40;background:#f4f8f7;font-family:Arial,Helvetica,Verdana,sans-serif}
header{border-top:4px solid var(--brand-primary);padding-top:20px;padding-bottom:20px}
.brand{gap:24px}.brand-logo{display:block;width:190px;height:auto;flex-shrink:0}.brand-caption{font-size:14px;font-weight:400;color:#5f7472;border-left:1px solid #d9e6e2;padding-left:24px;line-height:1.5}
a{color:var(--brand-primary)}.eyebrow{color:var(--brand-primary)}button{background:var(--brand-primary)}button:hover{background:var(--brand-hover);filter:none}.secondary{background:white;color:var(--brand-hover)}.secondary:hover{background:var(--brand-tint)}.choice:has(input:checked){background:var(--brand-tint);border-color:var(--brand-primary)}.choice input,.na input{accent-color:var(--brand-primary)}.stat{background:#e6f1ee}.meter i{background:var(--brand-primary)}.success{color:var(--brand-primary)}footer{line-height:1.9}footer strong{color:var(--brand-hover)}
@media(max-width:700px){.brand-logo{width:145px}.brand-caption{display:none}header{gap:12px}.wide+footer{padding:20px}}

/* Let text wrap inside grid/flex children, including enlarged mobile text. */
header{flex-wrap:wrap}
.trendRow{flex-wrap:wrap;gap:12px}
.brand,.card,.choice,.field,.scale,.options,.stat,.dimensions>*{min-width:0}
.scale{grid-template-columns:repeat(5,minmax(0,1fr))}
.choice span,.choice strong,h1,h2,h3,.brand-caption,#locationLabel{overflow-wrap:anywhere}
input,textarea,select{max-width:100%;min-width:0}
input[type=password]{font:inherit;width:100%;padding:13px;border:1px solid #ccdcd4;border-radius:10px;background:white;color:#173f43;margin-top:8px}
@media(max-width:700px){
 .scale{grid-template-columns:minmax(0,1fr);gap:10px}
 .scale .choice{flex-direction:row;text-align:left;padding:14px;gap:12px;font-size:16px;line-height:1.45;min-height:60px}
 .scale strong{font-size:24px;flex:0 0 26px}
 .scale .choice span{flex:1;min-width:0}
 .actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
 .actions>#progress{grid-column:1/-1;grid-row:1;text-align:center}
 .actions>button{grid-row:2;padding:14px 10px;min-width:0;overflow-wrap:anywhere}
 #back{grid-column:1}#next{grid-column:2}
 .card{padding:20px}
 .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
 .filters label{min-width:0;flex-basis:100%}
}