:root {
  --ink:#172821; --muted:#65726d; --paper:#f6f2eb; --white:#fff;
  --green:#0c5a43; --green-dark:#084735; --lime:#d9ee75; --line:#d9ded8;
  --serif: Georgia, 'Times New Roman', serif; --sans: Inter, Avenir, 'Segoe UI', Arial, sans-serif;
}
* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html, body { margin:0; min-height:100%; background:#d9ddd8; color:var(--ink); font-family:var(--sans); }
button, a { font:inherit; }
button { color:inherit; }
.kiosk { width:min(100%, 1080px); min-height:100svh; margin:auto; background:var(--paper); position:relative; overflow:hidden; box-shadow:0 0 70px #17282122; }
.topbar { height:104px; padding:28px 34px 16px; display:grid; grid-template-columns:54px 1fr 54px; align-items:center; position:relative; z-index:20; }
.brand { grid-column:2; justify-self:center; display:flex; align-items:center; gap:10px; color:var(--ink); text-decoration:none; }
.brand-copy { display:flex; flex-direction:column; line-height:1; }
.brand-copy b { font-size:21px; font-weight:900; letter-spacing:.27em; }
.brand-copy small { display:flex; align-items:center; gap:5px; margin-top:5px; color:var(--green); font-size:7px; font-weight:900; letter-spacing:.14em; }
.brand-copy small i { width:5px; height:5px; border-radius:50%; background:#54b77d; box-shadow:0 0 0 3px #54b77d24; animation:miliePulse 1.8s infinite; }
.brand-mark { width:44px; height:38px; display:grid; place-items:center; }
.brand-mark svg { width:100%; fill:none; stroke:var(--green); stroke-width:1.6; }
.brand-mark circle { fill:var(--lime); }
.brand-mark .milie-spark { fill:none; stroke:var(--green); stroke-width:2; stroke-linecap:round; }
@keyframes miliePulse { 50% { opacity:.45; transform:scale(.8); } }
.icon-button { width:50px; height:50px; border:1px solid #cbd2cc; border-radius:50%; background:#ffffff88; display:grid; place-items:center; cursor:pointer; }
.icon-button svg { width:25px; fill:none; stroke:var(--ink); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.back-button { grid-column:1; grid-row:1; }
.help-button { grid-column:3; grid-row:1; }
.screen { min-height:calc(100svh - 104px); display:none; padding:18px 42px 38px; animation:screenIn .42s cubic-bezier(.2,.8,.2,1); }
.screen.active { display:flex; flex-direction:column; }
@keyframes screenIn { from { opacity:0; transform:translateX(22px); } to { opacity:1; transform:none; } }
.eyebrow { color:var(--green); font-size:12px; letter-spacing:.18em; font-weight:800; margin:0 0 14px; }
h1,h2 { font-family:var(--serif); font-weight:400; letter-spacing:-.04em; margin:0; line-height:.95; }
h1 { font-size:clamp(50px, 9.2vw, 72px); }
h2 { font-size:clamp(41px, 7.5vw, 58px); }
h1 em,h2 em { color:var(--green); font-weight:400; }
.hero-copy { position:relative; z-index:2; padding-top:3vh; }
.hero-subtitle { max-width:525px; color:var(--muted); font-size:18px; line-height:1.5; margin:22px 0 0; }
.hero-art { min-height:36svh; flex:1; position:relative; margin:5px -42px 0; display:grid; place-items:center; }
.sun-disc { position:absolute; width:57%; aspect-ratio:1; border-radius:50%; background:var(--lime); top:12%; left:22%; }
.hero-glasses { width:112%; position:relative; z-index:3; transform:rotate(-5deg) translateX(-1%); filter:drop-shadow(0 25px 20px #25362c30); }
.hero-glasses .frame { fill:#ffffff40; stroke:url(#tortoise); stroke-width:18; stroke-linejoin:round; }
.hero-glasses .bridge,.hero-glasses .temple { fill:none; stroke:#4a2822; stroke-width:15; stroke-linecap:round; }
.hero-glasses .shine { fill:none; stroke:#ffffffa0; stroke-width:5; stroke-linecap:round; }
.frame-shadow { position:absolute; width:65%; height:28px; background:#23362c2c; filter:blur(16px); border-radius:50%; top:68%; transform:rotate(-5deg); }
.home-actions { position:relative; z-index:5; }
.primary-button { border:0; width:100%; min-height:68px; border-radius:14px; background:var(--green); color:#fff; font-weight:750; font-size:18px; letter-spacing:.01em; padding:0 25px; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:20px; box-shadow:0 10px 24px #0c5a4323; transition:.2s ease; }
.primary-button span:not(.bell) { font-size:27px; font-weight:300; }
.primary-button:active { transform:scale(.985); background:var(--green-dark); }
.primary-button:disabled { background:#aab6b0; box-shadow:none; cursor:not-allowed; }
.home-actions p { text-align:center; color:var(--muted); font-size:13px; margin:14px 0 0; }
.pulse-dot { display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--green); margin-right:6px; box-shadow:0 0 0 5px #0c5a4314; }
.presentation-screen { align-items:center; justify-content:center; text-align:center; }
.presentation-screen.active { display:flex; }
.presentation-content { width:min(560px, 100%); margin:auto; padding:18px 8px 55px; }
.presentation-avatar { width:230px; height:230px; position:relative; display:grid; place-items:center; margin:12px auto 38px; }
.presentation-orbit { position:absolute; border:2px solid #c8dcd3; border-radius:50%; animation:presentation-orbit 12s linear infinite; }
.presentation-orbit i { position:absolute; width:16px; height:16px; border-radius:50%; box-shadow:0 0 0 7px var(--paper); }
.presentation-orbit.orbit-outer { inset:0; }
.presentation-orbit.orbit-outer i { left:calc(50% - 8px); top:-8px; background:#9cc5b3; }
.presentation-orbit.orbit-middle { inset:25px; animation-direction:reverse; animation-duration:10s; }
.presentation-orbit.orbit-middle i { right:-8px; top:74px; background:var(--lime); }
.presentation-orbit.orbit-inner { inset:49px; animation-duration:8s; border-color:#d7e4dd; }
.presentation-orbit.orbit-inner i { left:-8px; top:calc(50% - 8px); background:var(--green); }
.presentation-mark { width:104px; height:104px; border:5px solid #d9e5df; border-radius:50%; display:grid; place-items:center; background:var(--green); color:#fff; font-family:var(--serif); font-size:43px; box-shadow:0 12px 30px #0c5a4328; animation:presentation-breathe 2.5s ease-in-out infinite; }
.presentation-content h2 { font-size:clamp(41px, 7vw, 58px); }
.presentation-copy { max-width:430px; margin:20px auto 28px; color:var(--muted); font-size:14px; line-height:1.55; }
.presentation-speaking { min-height:48px; display:flex; align-items:center; justify-content:center; gap:13px; color:var(--green); font-size:12px; }
.voice-bars { height:28px; display:flex; align-items:center; gap:3px; }
.voice-bars i { width:3px; height:8px; border-radius:4px; background:var(--green); animation:voice-bar .9s ease-in-out infinite; }
.voice-bars i:nth-child(2),.voice-bars i:nth-child(4) { animation-delay:.15s; }
.voice-bars i:nth-child(3) { animation-delay:.3s; }
.voice-bars i:nth-child(5) { animation-delay:.45s; }
.presentation-progress { width:min(390px, 82%); height:4px; margin:8px auto 24px; border-radius:5px; overflow:hidden; background:#dce3dd; }
.presentation-progress i { display:block; width:100%; height:100%; transform:scaleX(0); transform-origin:left; background:var(--green); transition:transform .18s linear; }
.presentation-skip { border:0; background:none; color:var(--green); font-size:12px; font-weight:800; padding:12px 18px; cursor:pointer; }
.presentation-skip span { margin-left:7px; font-size:17px; }
@keyframes presentation-orbit { to { transform:rotate(360deg); } }
@keyframes presentation-breathe { 50% { transform:scale(1.045); box-shadow:0 24px 52px #0c5a4345; } }
@keyframes voice-bar { 0%,100% { height:7px; opacity:.45; } 50% { height:24px; opacity:1; } }
.customer-orbi { display:flex; align-items:center; gap:12px; margin:5px 0 26px; }
.customer-orbi-avatar { width:55px; height:55px; border-radius:50%; display:grid; place-items:center; background:var(--lime); }
.customer-orbi-avatar svg { width:39px; fill:none; stroke:var(--green); stroke-width:1.7; stroke-linecap:round; }
.customer-orbi-avatar circle { fill:#fff; }
.customer-orbi > span:last-child { color:var(--green); font-size:9px; font-weight:900; letter-spacing:.12em; }
.customer-orbi > span:last-child i { display:inline-block; width:6px; height:6px; border-radius:50%; background:#54b77d; margin-right:5px; box-shadow:0 0 0 3px #54b77d22; }
.customer-heading > p:last-child { max-width:500px; }
.customer-form { display:grid; gap:17px; margin-top:34px; padding-bottom:30px; }
.customer-field { display:flex; flex-direction:column; gap:8px; color:var(--ink); font-size:12px; font-weight:800; }
.customer-field > div { min-height:68px; border:1.5px solid var(--line); border-radius:14px; background:#fff; display:grid; grid-template-columns:52px 1fr; align-items:center; padding:0 17px 0 10px; transition:.2s; }
.customer-field > div:focus-within { border-color:var(--green); box-shadow:0 0 0 4px #0c5a4310; }
.customer-field svg { width:25px; justify-self:center; fill:none; stroke:var(--green); stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.customer-field input { width:100%; height:58px; border:0; outline:0; background:transparent; color:var(--ink); font-size:17px; font-family:var(--sans); }
.customer-field input::placeholder { color:#9aa59f; }
.customer-field small { color:var(--muted); font-size:9px; font-weight:400; margin-top:-2px; }
.privacy-note { display:flex; align-items:flex-start; gap:10px; padding:14px; border-radius:13px; background:#edf2e6; }
.privacy-note > span { flex:0 0 24px; width:24px; height:24px; border-radius:50%; display:grid; place-items:center; background:var(--green); color:#fff; font-size:11px; }
.privacy-note p { color:var(--muted); font-size:10px; line-height:1.45; margin:0; }
.privacy-note b { color:var(--ink); font-size:11px; }
.consent-card { border:1px solid #b8d4c4; border-radius:15px; background:#edf7f0; overflow:hidden; }
.consent-check { display:grid; grid-template-columns:30px 1fr; gap:11px; align-items:flex-start; padding:15px; cursor:pointer; }
.consent-check input { position:absolute; opacity:0; pointer-events:none; }
.consent-box { width:27px; height:27px; border:1.5px solid #8fa49a; border-radius:7px; background:#fff; color:transparent; display:grid; place-items:center; font-size:14px; font-weight:900; transition:.2s; }
.consent-check input:checked + .consent-box { border-color:var(--green); background:var(--green); color:#fff; }
.consent-check input:focus-visible + .consent-box { outline:3px solid #0c5a4330; outline-offset:2px; }
.consent-check p { color:var(--muted); font-size:10px; line-height:1.45; margin:0; }
.consent-check b { color:var(--ink); font-size:11px; }
.privacy-link { width:100%; border:0; border-top:1px solid #cfe0d5; background:#fff9; color:var(--green); font-size:10px; font-weight:800; padding:12px 15px; cursor:pointer; display:flex; align-items:center; justify-content:space-between; text-align:left; }
.privacy-link span { font-size:16px; }
.step-heading { margin-top:10px; }
.step-row { display:flex; justify-content:space-between; color:var(--muted); font-size:11px; font-weight:800; letter-spacing:.12em; }
.progress { height:4px; background:#dfe3de; margin:10px 0 32px; border-radius:5px; overflow:hidden; }
.progress i { display:block; width:var(--progress); height:100%; border-radius:5px; background:var(--green); animation:progressIn .7s ease; }
@keyframes progressIn { from { width:0; } }
.step-heading > p:last-child { color:var(--muted); margin:16px 0 0; font-size:15px; }
.prescription-status { margin-top:16px; border:1px solid #b8d4c4; background:#edf7f0; border-radius:14px; padding:12px 15px; display:flex; align-items:center; gap:11px; }
.prescription-status[hidden] { display:none; }
.prescription-status > span { width:28px; height:28px; border-radius:50%; display:grid; place-items:center; background:var(--green); color:#fff; font-weight:900; }
.prescription-status p { display:flex; flex-direction:column; margin:0; font-size:12px; }
.prescription-status small { color:var(--muted); margin-top:2px; }
.prescription-status p { flex:1; }
.remove-prescription { min-height:38px; border:1px solid #c7d7ce; border-radius:10px; background:#fff; color:#7b4039; padding:7px 10px; display:flex; align-items:center; gap:6px; font-size:9px; font-weight:800; cursor:pointer; }
.remove-prescription svg { width:16px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.remove-prescription > span { width:auto; height:auto; border-radius:0; display:inline; background:none; color:inherit; box-shadow:none; }
.remove-prescription:active { transform:scale(.97); background:#f8efec; }
.option-list { display:grid; gap:12px; margin:28px 0 115px; }
.choice-card { width:100%; min-height:125px; border:1.5px solid var(--line); background:#fff; border-radius:18px; padding:18px; display:grid; grid-template-columns:68px 1fr 30px; align-items:center; text-align:left; gap:16px; cursor:pointer; transition:.2s; }
.choice-card.selected { border-color:var(--green); box-shadow:0 5px 20px #133a2b12; background:#fbfdf8; }
.choice-icon { width:66px; height:66px; border-radius:15px; background:#edf2e6; display:grid; place-items:center; }
.choice-icon svg { width:43px; fill:none; stroke:var(--green); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.choice-copy { display:flex; flex-direction:column; gap:5px; }
.choice-copy b { font-family:var(--serif); font-size:21px; }
.choice-copy small { font-size:12px; line-height:1.35; color:var(--muted); }
.choice-copy strong { font-size:12px; color:var(--green); margin-top:2px; }
.select-circle { width:25px; height:25px; border:1.5px solid #aab5ae; border-radius:50%; display:grid; place-items:center; }
.choice-card.selected .select-circle { border-color:var(--green); }
.choice-card.selected .select-circle i { width:13px; height:13px; background:var(--green); border-radius:50%; }
.analysis-card { border:1px solid var(--line); border-radius:20px; background:#fff; overflow:hidden; }
.analysis-message { display:flex; align-items:flex-start; gap:12px; margin:24px 0 13px; padding:15px 17px; border-radius:16px; background:#edf2e6; }
.analysis-message-avatar { flex:0 0 38px; width:38px; height:38px; border-radius:50%; display:grid; place-items:center; background:var(--green); color:#fff; font-family:var(--serif); font-size:19px; border:3px solid #d5e6c9; }
.analysis-message p { color:var(--muted); font-size:11px; line-height:1.5; margin:0; }
.analysis-message b { color:var(--ink); font-size:12px; }
.rx-analysis { margin-top:24px; }
.analysis-card-head { min-height:82px; padding:15px 18px; display:grid; grid-template-columns:48px 1fr 28px; align-items:center; gap:13px; background:#edf2e6; }
.analysis-icon { width:48px; height:48px; border-radius:13px; display:grid; place-items:center; background:#fff; }
.analysis-icon svg { width:29px; fill:none; stroke:var(--green); stroke-width:1.7; stroke-linejoin:round; }
.analysis-card-head div { display:flex; flex-direction:column; gap:3px; }
.analysis-card-head small { color:var(--muted); font-size:9px; font-weight:800; letter-spacing:.12em; }
.analysis-card-head b { font-family:var(--serif); font-size:17px; }
.analysis-check { width:26px; height:26px; border-radius:50%; display:grid; place-items:center; background:var(--green); color:#fff; font-size:13px; }
.analysis-rx-body { padding:17px 20px; display:grid; grid-template-columns:1fr auto; gap:5px 12px; }
.analysis-rx-body > span { grid-column:1 / -1; color:var(--muted); font-size:9px; font-weight:800; text-transform:uppercase; letter-spacing:.1em; }
.analysis-rx-body strong { grid-column:1 / -1; font-family:var(--serif); font-size:19px; color:var(--green); }
.analysis-rx-body p { grid-column:1 / -1; color:var(--muted); font-size:11px; line-height:1.45; margin:3px 0 0; }
.recommendation-card { margin:13px 0 11px; padding:22px; position:relative; background:var(--green); color:#fff; }
.recommendation-label { display:inline-block; border-radius:20px; padding:6px 10px; background:var(--lime); color:var(--green-dark); font-size:8px; font-weight:900; letter-spacing:.1em; }
.recommendation-card h3 { font-family:var(--serif); font-size:28px; line-height:1.02; margin:18px 0 9px; max-width:65%; }
.recommendation-card > p { color:#d7e7e0; font-size:11px; line-height:1.5; max-width:70%; margin:0 0 17px; }
.recommendation-card ul { list-style:none; margin:0; padding:0; display:grid; gap:8px; font-size:11px; }
.recommendation-card li { display:flex; align-items:center; gap:8px; }
.recommendation-card li span { width:19px; height:19px; border-radius:50%; display:grid; place-items:center; background:#ffffff1c; color:var(--lime); }
.recommendation-note { margin-top:18px; padding:11px 12px; border-radius:11px; background:#ffffff10; color:#caddd5; font-size:9px; line-height:1.4; display:flex; gap:9px; align-items:flex-start; }
.recommendation-note span { flex:0 0 18px; height:18px; border:1px solid #ffffff55; border-radius:50%; display:grid; place-items:center; font-family:var(--serif); }
.recommendation-glass { position:absolute; width:155px; height:90px; top:20px; right:10px; color:var(--lime); transform:rotate(-8deg); opacity:.82; }
.recommendation-glass i { position:absolute; width:68px; height:48px; border:5px solid currentColor; border-radius:25% 25% 42% 42%; top:24px; }
.recommendation-glass i:first-child { left:3px; }
.recommendation-glass i:nth-child(2) { right:3px; }
.recommendation-glass b { position:absolute; width:26px; border-top:5px solid currentColor; border-radius:50%; top:41px; left:65px; }
.lens-suggestions-button { align-self:flex-start; min-height:39px; margin:0 0 120px; border:1px solid #a9bdb3; border-radius:10px; background:#fff; color:var(--green); padding:8px 13px; font-size:10px; font-weight:800; cursor:pointer; box-shadow:0 4px 12px #173b2d0b; }
.lens-suggestions-button span { font-size:14px; margin-right:4px; }
.lens-suggestions-button:active { background:#edf2e6; transform:scale(.985); }
.dual-action { display:grid; grid-template-columns:minmax(190px,.72fr) 1.28fr; gap:12px; }
.secondary-button { min-height:68px; border:1.5px solid var(--green); border-radius:14px; background:#fff; color:var(--green); font-weight:800; padding:0 18px; cursor:pointer; }
.secondary-button:active { background:#eaf2ed; transform:scale(.985); }
.secondary-button:disabled { border-color:#aab6b0; color:#8c9993; background:#f2f2ef; cursor:not-allowed; }
.question-list { display:grid; grid-template-columns:1fr 1fr; gap:13px; margin:24px 0 115px; }
.question-card { min-height:176px; border:1px solid var(--line); border-radius:18px; background:#fff; padding:18px; }
.question-title { display:flex; align-items:center; gap:12px; }
.question-icon { flex:0 0 48px; width:48px; height:48px; border-radius:13px; background:#edf2e6; display:grid; place-items:center; }
.question-icon svg { width:29px; fill:none; stroke:var(--green); stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.question-icon.sun { background:#f3efcf; }
.question-title small { color:var(--green); font-size:8px; font-weight:900; letter-spacing:.1em; }
.question-title h3 { font-family:var(--serif); font-size:17px; line-height:1.1; margin:3px 0 0; }
.answer-group { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; margin-top:18px; }
.answer-group button { min-height:42px; border:1px solid #ccd4cf; border-radius:10px; background:#fafbf9; color:var(--muted); font-size:10px; font-weight:750; padding:5px; cursor:pointer; }
.answer-group button.selected { border-color:var(--green); background:var(--green); color:#fff; box-shadow:0 5px 12px #0c5a4320; }
.analysis-profile { margin-top:9px!important; padding:9px 11px; border-radius:9px; background:#edf2e6; color:var(--green-dark)!important; }
.processing-screen { display:none; align-items:center; justify-content:center; text-align:center; }
.processing-screen.active { display:flex; }
.processing-content { width:min(520px, 100%); margin:auto; padding:40px 16px 70px; }
.processing-content .eyebrow { margin-bottom:14px; }
.processing-content h2 { font-family:var(--serif); font-size:46px; line-height:.98; letter-spacing:-.035em; margin:0; }
.processing-content h2 em { color:var(--green); font-weight:400; }
.processing-intro { max-width:390px; margin:18px auto 34px; color:var(--muted); font-size:12px; line-height:1.55; }
.milie-spinner { width:150px; height:150px; position:relative; display:grid; place-items:center; margin:0 auto 36px; }
.spinner-orbit { position:absolute; inset:0; border:2px solid #dbe5dc; border-radius:50%; animation:milie-spin 2.8s linear infinite; }
.spinner-orbit::before,.spinner-orbit::after { content:""; position:absolute; border-radius:50%; border:1px solid #c7d7ca; }
.spinner-orbit::before { inset:16px; }
.spinner-orbit::after { inset:34px; }
.spinner-orbit i { position:absolute; width:12px; height:12px; border-radius:50%; background:var(--lime); box-shadow:0 0 0 6px #d9ee9a33; }
.spinner-orbit i:first-child { top:-6px; left:69px; }
.spinner-orbit i:nth-child(2) { right:5px; bottom:24px; background:var(--green); }
.spinner-orbit i:nth-child(3) { left:5px; bottom:24px; background:#9fbea9; }
.spinner-core { width:72px; height:72px; border-radius:50%; display:grid; place-items:center; background:var(--green); color:#fff; font-family:var(--serif); font-size:31px; box-shadow:0 12px 32px #0c5a4333; animation:milie-pulse 1.6s ease-in-out infinite; }
.processing-messages { min-height:92px; position:relative; display:grid; place-items:center; }
.processing-message { position:absolute; width:100%; display:flex; align-items:center; justify-content:center; gap:10px; margin:0; color:var(--ink); font-family:var(--serif); font-size:19px; line-height:1.25; opacity:0; transform:translateY(12px); transition:opacity .42s ease, transform .42s ease; }
.processing-message span { width:7px; height:7px; flex:0 0 7px; border-radius:50%; background:var(--lime); box-shadow:0 0 0 5px #d9ee9a2e; }
.processing-message.active { opacity:1; transform:translateY(0); }
.processing-message.done { opacity:0; transform:translateY(-12px); }
.processing-status { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
@keyframes milie-spin { to { transform:rotate(360deg); } }
@keyframes milie-pulse { 0%,100% { transform:scale(.96); } 50% { transform:scale(1.04); } }
.lens-tech-list { display:grid; grid-template-columns:1fr 1fr; gap:13px; margin:24px 0 115px; }
.tech-card { min-height:210px; border:1.5px solid var(--line); border-radius:18px; background:#fff; padding:18px; position:relative; display:flex; flex-direction:column; text-align:left; cursor:pointer; transition:.2s; }
.tech-card.selected { border-color:var(--green); background:#fbfdf8; box-shadow:0 7px 22px #153c2e14; }
.tech-badge { align-self:flex-start; border-radius:20px; padding:5px 8px; background:#edf0ec; color:var(--muted); font-size:8px; font-weight:900; letter-spacing:.08em; }
.tech-badge.recommended { background:var(--lime); color:var(--green-dark); }
.tech-icon { width:70px; height:58px; display:grid; place-items:center; margin:9px 0 2px; }
.tech-icon svg { width:54px; height:54px; fill:none; stroke:var(--green); stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.tech-icon.photochromic { border-radius:50%; background:linear-gradient(135deg,#edf2e6 50%,#b8c9be 50%); }
.tech-icon.digital { border-radius:14px; background:#e9f0f5; }
.tech-copy { display:flex; flex-direction:column; gap:5px; margin-top:auto; }
.tech-copy b { font-family:var(--serif); font-size:20px; }
.tech-copy small { min-height:31px; color:var(--muted); font-size:10px; line-height:1.4; }
.tech-copy > span { display:flex; gap:7px; align-items:center; flex-wrap:wrap; color:var(--green); font-size:8px; font-weight:750; }
.tech-copy i { width:15px; height:15px; border-radius:50%; display:grid; place-items:center; background:#e6f1e7; font-style:normal; }
.tech-select { display:none; position:absolute; right:14px; top:14px; width:27px; height:27px; border-radius:50%; background:var(--green); color:#fff; text-align:center; line-height:27px; }
.tech-card.selected .tech-select { display:block; }
.sticky-action { position:absolute; z-index:10; left:0; right:0; bottom:0; padding:20px 42px max(28px, env(safe-area-inset-bottom)); background:linear-gradient(#f6f2eb00, var(--paper) 28%); }
.compact .progress { margin-bottom:23px; }
.frame-grid { display:grid; grid-template-columns:1fr 1fr; gap:13px; margin:25px 0 116px; }
.product-card { min-height:225px; border:1.5px solid var(--line); background:#fff; border-radius:18px; padding:17px; display:flex; flex-direction:column; align-items:flex-start; position:relative; text-align:left; cursor:pointer; overflow:hidden; }
.product-card.selected { border-color:var(--green); background:#fbfdf8; box-shadow:0 6px 20px #153c2e14; }
.tag { position:absolute; top:12px; left:12px; border-radius:20px; padding:5px 8px; background:var(--lime); color:var(--green-dark); font-size:8px; font-weight:900; letter-spacing:.08em; }
.tag.new { background:#f3d8cd; color:#7b342c; }
.mini-frame { width:100%; height:105px; position:relative; display:block; color:#6b3427; margin-top:15px; filter:drop-shadow(0 7px 6px #17282122); }
.mini-frame i { position:absolute; width:44%; height:43%; border:7px solid currentColor; border-radius:25% 25% 42% 42%; top:35%; }
.mini-frame i:first-child { left:4%; transform:rotate(3deg); }
.mini-frame i:nth-child(2) { right:4%; transform:rotate(-3deg); }
.mini-frame b { position:absolute; width:18%; height:13px; border-top:6px solid currentColor; border-radius:50%; top:49%; left:41%; }
.mini-frame.tortoise { color:#6f3021; }
.mini-frame.tortoise i { border-color:#633022; box-shadow:inset 8px 3px 0 #c1703a, inset -4px -3px 0 #321c1a; }
.mini-frame.black { color:#1c2522; }
.mini-frame.gold { color:#b1904d; }
.mini-frame.gold i { border-width:4px; border-radius:50%; }
.mini-frame.gold b { border-width:4px; }
.mini-frame.wine { color:#742e3b; }
.mini-frame.cat i { border-radius:8% 32% 45% 45%; transform:skewY(6deg)!important; }
.product-info { display:flex; flex-direction:column; gap:4px; margin-top:auto; }
.product-info b { font-family:var(--serif); font-size:20px; }
.product-info small { color:var(--muted); font-size:11px; }
.product-info strong { color:var(--green); font-size:14px; margin-top:3px; }
.product-check { display:none; position:absolute; right:12px; top:12px; width:25px; height:25px; border-radius:50%; background:var(--green); color:#fff; text-align:center; line-height:25px; }
.product-card.selected .product-check { display:block; }
.frame-filter-list { display:grid; grid-template-columns:1fr 1fr; gap:13px; margin:24px 0 115px; }
.filter-group { border:1px solid var(--line); border-radius:18px; background:#fff; padding:17px; }
.filter-title { display:flex; align-items:center; gap:11px; }
.filter-icon { width:45px; height:45px; border-radius:12px; background:#edf2e6; display:grid; place-items:center; }
.filter-icon svg { width:27px; fill:none; stroke:var(--green); stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.filter-title small { color:var(--green); font-size:8px; font-weight:900; letter-spacing:.1em; }
.filter-title h3 { font-family:var(--serif); font-size:19px; margin:2px 0 0; }
.filter-chips { display:flex; flex-wrap:wrap; gap:7px; margin-top:15px; }
.filter-chip { min-height:38px; border:1px solid #cdd5d0; border-radius:20px; background:#fafbf9; color:var(--muted); padding:7px 12px; font-size:10px; font-weight:750; cursor:pointer; }
.filter-chip.selected { border-color:var(--green); background:var(--green); color:#fff; box-shadow:0 4px 10px #0c5a431b; }
.frame-result-grid { display:grid; grid-template-columns:1fr 1fr; gap:13px; margin:24px 0 115px; }
.result-frame-card { min-height:225px; border:1.5px solid var(--line); border-radius:18px; background:#fff; padding:17px; display:flex; flex-direction:column; align-items:flex-start; position:relative; text-align:left; cursor:pointer; }
.result-frame-card[hidden] { display:none; }
.result-frame-card.selected { border-color:var(--green); background:#fbfdf8; box-shadow:0 6px 20px #153c2e14; }
.result-frame-card.selected .product-check { display:block; }
.result-brand { color:var(--green); font-size:8px; font-weight:900; letter-spacing:.12em; }
.result-frame-card .mini-frame { margin-top:4px; }
.result-info { display:flex; flex-direction:column; gap:4px; margin-top:auto; }
.result-info b { font-family:var(--serif); font-size:19px; }
.result-info small { color:var(--muted); font-size:10px; }
.result-info strong { color:var(--green); font-size:14px; margin-top:2px; }
.mini-frame.aviator i { height:52%; border-width:4px; border-radius:50% 50% 48% 48%; }
.empty-results { margin:35px auto 130px; text-align:center; max-width:380px; padding:32px; border:1px dashed #b9c4bd; border-radius:18px; }
.empty-results span { width:55px; height:55px; border-radius:50%; background:#edf2e6; color:var(--green); display:grid; place-items:center; margin:auto; font-size:28px; }
.empty-results h3 { font-family:var(--serif); font-size:22px; margin:14px 0 6px; }
.empty-results p { color:var(--muted); font-size:11px; margin:0; }
.summary-heading { margin-bottom:20px; }
.summary-card { background:#fff; border:1px solid var(--line); border-radius:22px; overflow:hidden; box-shadow:0 12px 34px #23342a0c; }
.summary-visual { height:145px; background:var(--lime); display:grid; place-items:center; padding:0 60px; overflow:hidden; }
.summary-visual .large { width:100%; height:150px; transform:rotate(-3deg); margin:0; }
.summary-items { padding:8px 24px; }
.summary-items > div { display:grid; grid-template-columns:1fr auto; padding:16px 0; border-bottom:1px solid #e5e8e4; }
.summary-items span { grid-column:1 / -1; color:var(--muted); font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.12em; margin-bottom:4px; }
.summary-items b { font-family:var(--serif); font-size:17px; }
.summary-items strong { font-size:15px; color:var(--green); }
.summary-total { display:flex; justify-content:space-between; align-items:center; padding:18px 24px 22px; }
.summary-total span { font-size:13px; font-weight:750; }
.summary-total small { display:block; max-width:245px; color:var(--muted); font-size:9px; font-weight:400; margin-top:4px; }
.summary-total strong { font-family:var(--serif); color:var(--green); font-size:26px; }
.advisor-note { display:flex; gap:13px; align-items:center; margin:18px 4px; }
.advisor-avatar { flex:0 0 43px; width:43px; height:43px; border-radius:50%; background:var(--green); color:#fff; display:grid; place-items:center; font-size:11px; font-weight:800; border:3px solid #dbe9d0; }
.advisor-note p { font-size:12px; line-height:1.45; color:var(--muted); margin:0; }
.advisor-note b { color:var(--ink); font-size:13px; }
.summary-actions { margin-top:auto; }
.text-button { border:0; background:none; color:var(--green); font-weight:750; width:100%; padding:18px; cursor:pointer; }
.bell { font-size:22px; transform:rotate(45deg); }
.toast { position:fixed; z-index:50; left:50%; bottom:34px; transform:translate(-50%, 30px); max-width:590px; width:calc(100% - 60px); padding:18px 22px; border-radius:14px; background:var(--ink); color:#fff; text-align:center; font-weight:650; opacity:0; pointer-events:none; transition:.3s; }
.toast.show { opacity:1; transform:translate(-50%, 0); }
dialog { width:min(520px, calc(100% - 54px)); border:0; border-radius:24px; padding:42px 34px 32px; text-align:center; color:var(--ink); box-shadow:0 20px 80px #15261f52; }
dialog::backdrop { background:#11251d99; backdrop-filter:blur(4px); }
.dialog-close { position:absolute; right:18px; top:14px; border:0; background:none; font-size:32px; color:var(--muted); cursor:pointer; }
.dialog-icon { width:62px; height:62px; margin:0 auto 16px; border-radius:50%; background:var(--lime); color:var(--green); display:grid; place-items:center; font-family:var(--serif); font-size:32px; }
dialog h3 { font-family:var(--serif); font-size:31px; margin:0 0 10px; }
dialog p { color:var(--muted); line-height:1.5; margin:0 0 25px; }
.lgpd-dialog { width:min(650px, calc(100% - 38px)); max-height:calc(100svh - 34px); overflow:auto; padding:38px 34px 30px; text-align:left; }
.lgpd-dialog .dialog-icon,.lgpd-dialog > .eyebrow,.lgpd-dialog > h3,.lgpd-dialog > .lgpd-lead { text-align:center; }
.lgpd-dialog > h3 { font-size:34px; }
.privacy-icon svg { width:34px; fill:none; stroke:var(--green); stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.lgpd-lead { font-size:11px; margin-top:-4px!important; }
.legal-config-warning { border:1px solid #e5c981; border-radius:12px; background:#fff6d8; color:#755b1f; padding:12px 14px; margin-bottom:17px; font-size:9px; line-height:1.5; }
.lgpd-content { display:grid; gap:12px; }
.lgpd-content section { border-bottom:1px solid #e2e6e2; padding-bottom:11px; }
.lgpd-content h4 { font-family:var(--serif); font-size:15px; margin:0 0 5px; }
.lgpd-content p { font-size:10px; line-height:1.55; margin:0; }
.lgpd-contact { margin:16px 0!important; padding:12px; border-radius:10px; background:#edf2e6; color:var(--green-dark)!important; font-size:10px; }
.prescription-dialog { width:min(600px, calc(100% - 44px)); max-height:calc(100svh - 40px); overflow:auto; padding:42px 34px 32px; }
.prescription-dialog h3 { font-size:38px; line-height:1.02; }
.prescription-icon svg { width:35px; fill:none; stroke:var(--green); stroke-width:1.6; stroke-linejoin:round; }
.prescription-methods { display:grid; gap:12px; margin-top:24px; }
.method-button { border:1.5px solid var(--line); background:#fff; border-radius:16px; min-height:92px; padding:15px; display:grid; grid-template-columns:54px 1fr 22px; grid-template-rows:auto auto; column-gap:14px; text-align:left; align-items:center; cursor:pointer; }
.method-button > span { grid-row:1 / 3; width:54px; height:54px; border-radius:13px; background:#edf2e6; display:grid; place-items:center; }
.method-button svg { width:30px; fill:none; stroke:var(--green); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.method-button b { align-self:end; font-family:var(--serif); font-size:19px; }
.method-button small { align-self:start; color:var(--muted); font-size:11px; margin-top:3px; }
.method-button i { grid-column:3; grid-row:1 / 3; font-size:21px; font-style:normal; color:var(--green); }
.method-button.whatsapp > span { background:#e6f6e9; }
.method-button.manual > span { background:#edf0f7; }
.method-button.manual svg { stroke:#344d78; }
.later-button,.qr-back { margin-top:18px; border:0; background:none; color:var(--green); font-weight:750; cursor:pointer; padding:10px; }
.visually-hidden { position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.camera-result img { width:100%; max-height:330px; object-fit:cover; border-radius:16px; border:1px solid var(--line); }
.success-badge { width:58px; height:58px; border-radius:50%; display:grid; place-items:center; margin:-30px auto 15px; position:relative; background:var(--green); color:#fff; border:5px solid #fff; font-size:24px; }
.camera-result p { word-break:break-word; }
.whatsapp-qr .qr-back { display:block; margin:-20px 0 15px -10px; }
.qr-shell { width:min(270px, 75vw); aspect-ratio:1; margin:16px auto; padding:14px; border:1px solid var(--line); border-radius:20px; background:#fff; box-shadow:0 10px 30px #152a2014; }
.qr-shell img { display:block; width:100%; height:100%; }
.whatsapp-qr ol { width:max-content; max-width:100%; margin:18px auto 24px; padding-left:22px; text-align:left; color:var(--muted); font-size:12px; line-height:1.8; }
.whatsapp-confirm { background:#18894b; }
.lens-alternatives-dialog { width:min(650px, calc(100% - 40px)); max-height:calc(100svh - 36px); overflow:auto; padding:40px 32px 26px; }
.lens-alternatives-dialog > h3 { line-height:1.02; }
.alternative-icon { background:var(--green); color:#fff; font-size:22px; }
.alternative-lens-list { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:22px 0 8px; text-align:left; }
.alternative-lens-card { border:1px solid var(--line); border-radius:16px; background:#fff; padding:17px; position:relative; display:flex; flex-direction:column; min-height:290px; }
.alternative-number { position:absolute; right:14px; top:14px; width:31px; height:31px; border-radius:50%; display:grid; place-items:center; background:var(--lime); color:var(--green-dark); font-family:var(--serif); font-size:17px; }
.alternative-lens-card small { color:var(--green); font-size:8px; font-weight:900; letter-spacing:.08em; }
.alternative-lens-card h4 { font-family:var(--serif); font-size:21px; margin:10px 0 7px; }
.alternative-lens-card p { min-height:62px; color:var(--muted); font-size:10px; line-height:1.45; margin:0; padding-right:4px; }
.alternative-lens-card ul { list-style:none; padding:0; margin:12px 0 17px; color:var(--green); font-size:9px; line-height:1.8; }
.choose-lens-alternative { width:100%; min-height:44px; margin-top:auto; border:1px solid var(--green); border-radius:10px; background:#fff; color:var(--green); font-size:11px; font-weight:800; cursor:pointer; }
.choose-lens-alternative:hover,.choose-lens-alternative.selected { background:var(--green); color:#fff; }
.manual-prescription { text-align:left; }
.manual-prescription > h3,.manual-prescription > p { text-align:center; }
.manual-prescription > .qr-back { text-align:left; }
.rx-section { border:1px solid var(--line); border-radius:16px; overflow:hidden; margin:22px 0 14px; background:#fff; }
.rx-section-title { padding:14px 15px; background:#edf2e6; display:flex; align-items:center; justify-content:space-between; }
.rx-section-title b { font-family:var(--serif); font-size:17px; }
.rx-section-title span { color:var(--muted); font-size:9px; }
.rx-head,.rx-row { display:grid; grid-template-columns:52px repeat(3, 1fr); gap:7px; align-items:center; padding:9px 11px; }
.rx-head { color:var(--muted); font-size:9px; font-weight:800; text-transform:uppercase; letter-spacing:.05em; border-bottom:1px solid var(--line); }
.rx-row + .rx-row { border-top:1px solid var(--line); }
.rx-row > b { color:var(--green); font-size:14px; }
.rx-row > b small { display:block; color:var(--muted); font-size:8px; font-weight:400; }
.rx-row label span { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); }
.rx-row input,.rx-extras input,.rx-notes textarea { width:100%; border:1px solid #ccd3ce; border-radius:9px; background:#fafbf9; color:var(--ink); padding:11px 8px; font-size:14px; outline:none; }
.rx-row input:focus,.rx-extras input:focus,.rx-notes textarea:focus { border-color:var(--green); box-shadow:0 0 0 3px #0c5a4312; }
.rx-extras { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.rx-extras label,.rx-notes { display:flex; flex-direction:column; gap:5px; font-size:11px; font-weight:750; }
.rx-extras small { color:var(--muted); font-size:8px; font-weight:400; }
.rx-notes { margin:14px 0 0; }
.rx-notes textarea { resize:none; font-family:var(--sans); }
.rx-required { font-size:9px!important; text-align:left!important; margin:10px 0 16px!important; }
.prescription-summary b { grid-column:1 / -1; color:var(--green); }
@media (max-width:480px) {
  .prescription-dialog { padding-left:20px; padding-right:20px; }
  .rx-head,.rx-row { grid-template-columns:44px repeat(3, 1fr); gap:5px; padding-left:7px; padding-right:7px; }
  .rx-row input { padding:10px 5px; font-size:12px; }
}
@media (min-width:700px) and (min-height:1050px) {
  .topbar { height:132px; padding:42px clamp(52px, 7vw, 82px) 20px; }
  .screen { min-height:calc(100svh - 132px); padding-left:clamp(60px, 8vw, 92px); padding-right:clamp(60px, 8vw, 92px); }
  h1 { font-size:clamp(72px, 8.5vw, 96px); }
  h2 { font-size:clamp(58px, 7vw, 78px); }
  .hero-copy { padding-top:5vh; }
  .hero-subtitle { font-size:21px; }
  .hero-art { margin-left:clamp(-92px, -8vw, -60px); margin-right:clamp(-92px, -8vw, -60px); }
  .sticky-action { padding-left:clamp(60px, 8vw, 92px); padding-right:clamp(60px, 8vw, 92px); }
  .choice-card { min-height:150px; }
  .frame-grid { gap:18px; }
  .product-card { min-height:260px; }
}
@media (max-height:800px) {
  .topbar { height:80px; padding:16px 28px 8px; }
  .screen { min-height:calc(100svh - 80px); padding:10px 34px 24px; }
  .hero-copy { padding-top:0; }
  .hero-subtitle { margin-top:13px; font-size:15px; }
  .hero-art { min-height:250px; margin-left:-34px; margin-right:-34px; }
  .home-actions .primary-button,.primary-button { min-height:58px; }
  .step-heading h2 { font-size:38px; }
  .progress { margin-bottom:16px; }
  .option-list { margin-top:16px; gap:8px; }
  .choice-card { min-height:102px; padding:12px; }
  .frame-grid { margin-top:14px; }
  .product-card { min-height:190px; }
}
@media (max-width:560px) {
  .dual-action { grid-template-columns:1fr; }
  .dual-action .secondary-button { min-height:52px; }
  .lens-tech-list { grid-template-columns:1fr; }
  .tech-card { min-height:175px; }
  .question-list { grid-template-columns:1fr; }
  .frame-filter-list,.frame-result-grid { grid-template-columns:1fr; }
  .alternative-lens-list { grid-template-columns:1fr; }
}