/* Installed and browser experiences share the same clear photograph and compact glass controls. */
.result-heading{position:absolute;z-index:1;left:4.5%;top:20px;max-width:calc(100% - 146px);padding:10px 14px;border-radius:22px;background:var(--surface);box-shadow:inset 0 1px 2px #ffffff60;backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);color:var(--ink)}
.result-heading h1{font:500 clamp(23px,5.8cqw,48px)/1.1 var(--heading);letter-spacing:-.04em;margin:0 0 5px}.result-heading p{font:400 clamp(12px,3.1cqw,25px)/1.3 'Segoe UI',sans-serif;margin:0}
:root .result .result-tools{top:auto;left:4.5%;right:4.5%;bottom:calc(82px + env(safe-area-inset-bottom,0px));height:48px;flex-wrap:nowrap;justify-content:space-between;gap:10px}
:root .result .result-tools button{font-size:14px;padding:9px 13px;min-height:44px}.result-tools [role=group] button{min-width:60px}
:root .result .actions{left:4.5%;right:4.5%;bottom:calc(18px + env(safe-area-inset-bottom,0px));height:52px;gap:12px;border:0;border-radius:0;background:none;box-shadow:none;backdrop-filter:none}
:root .result .actions:after{display:none}:root .result .actions .button{font-size:16px;min-height:48px;gap:10px;border:1px solid var(--surface-edge);background:var(--surface);box-shadow:var(--surface-shadow);backdrop-filter:var(--refraction);-webkit-backdrop-filter:var(--refraction)}
:root .result .actions .button svg{width:24px;height:24px}
:root .result #finish{right:calc(4.5% + var(--settings-size,48px) + 8px);top:20px;width:44px;height:44px;min-height:44px;border:1px solid var(--surface-edge);border-radius:16px;background:var(--surface);box-shadow:var(--surface-shadow);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);opacity:1}
:root .result #finish:after{font-size:24px}.result #finish{font-size:0}
:root[data-kiosk=true] .result-heading{left:var(--layout-edge);top:max(18px,env(safe-area-inset-top));max-width:calc(100% - var(--layout-edge)*2 - var(--settings-size)*2 - 16px)}
:root[data-kiosk=true] .result .result-tools,:root[data-kiosk=true] .result .actions{left:var(--layout-edge);right:var(--layout-edge)}
:root[data-kiosk=true] .result #finish{right:calc(var(--layout-edge) + var(--settings-size) + 8px);top:max(18px,env(safe-area-inset-top))}
:root .capture #camera-backdrop{opacity:1;filter:blur(24px);inset:-4%;width:108%;height:108%}
:root .capture #camera-video{left:0;top:0;width:100%;height:100%;object-fit:contain;mask-image:linear-gradient(transparent,#000 9%,#000 91%,transparent)}
:root .capture .camera-preview:after{background:linear-gradient(180deg,#ffffff08,transparent 18%,transparent 85%,#ffffff08)!important}
:root .capture>h1{top:24px;left:5%;right:calc(5% + 62px);width:fit-content;max-width:calc(90% - 62px);margin:0;padding:10px 14px;border-radius:20px;font-size:clamp(22px,5.6cqw,44px);line-height:1.1;background:var(--surface);color:var(--ink);text-shadow:none;backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px)}
:root .capture .camera-instruction{top:90px;left:5%;right:5%;min-height:44px;padding:9px 14px;font-size:clamp(14px,3.7cqw,24px);width:fit-content;max-width:90%;box-sizing:border-box}
:root .capture .count-panel{top:auto;bottom:calc(82px + env(safe-area-inset-bottom,0px));left:5%;right:5%;height:78px;min-height:0;padding:10px 16px;grid-template-columns:56px 1fr;column-gap:16px;border-radius:26px}
:root .capture .count{width:50px;height:50px;font-size:32px;border-width:4px}:root .capture #capture-status{font-size:15px!important;line-height:1.2}:root .capture #camera-help{font-size:12px!important;line-height:1.3;margin-top:3px}
:root .capture #cancel{left:5%;right:5%;bottom:calc(18px + env(safe-area-inset-bottom,0px));height:52px;min-height:48px;font-size:16px;padding:8px 14px}
:root .capture .framing{inset:16% 5% 21%}:root .capture[data-state=error] .count-panel{height:auto;min-height:160px;bottom:82px;padding:20px;gap:12px}:root .capture[data-state=error] #capture-status{font-size:17px!important}
#product-reasons{width:min(620px,calc(100% - 24px));max-height:72dvh;margin:auto auto max(12px,env(safe-area-inset-bottom));border-radius:28px;padding:24px!important}#product-reasons-list article{display:grid;grid-template-columns:70px 1fr;column-gap:16px;align-items:center}#product-reasons-list .product-thumbnail{grid-column:1;grid-row:1/5;width:70px;height:110px;object-fit:contain}#product-reasons-list article>*:not(.product-thumbnail){grid-column:2}
#install-app{display:flex;align-items:center;gap:12px}#install-app svg{width:24px;height:24px;flex-shrink:0}#install-guide{max-width:440px}#install-guide ol{padding-left:24px;line-height:1.6}#install-guide p{line-height:1.5}#install-guide .install-actions{display:flex;justify-content:flex-end;gap:12px;margin-top:20px}
@media(min-width:700px) and (max-aspect-ratio:1/1){
 :root .result .actions{height:72px;bottom:calc(24px + env(safe-area-inset-bottom,0px))}:root .result .result-tools{bottom:calc(112px + env(safe-area-inset-bottom,0px));height:60px}:root .result .actions .button,:root .result .result-tools button{font-size:clamp(18px,2.4cqw,32px)}:root .result .result-tools button{min-height:56px}:root .result .actions .button svg{width:30px;height:30px}
 :root .capture .count-panel{height:108px;bottom:118px;grid-template-columns:80px 1fr}:root .capture .count{width:68px;height:68px;font-size:44px}:root .capture #capture-status{font-size:clamp(20px,2.8cqw,36px)!important}:root .capture #camera-help{font-size:clamp(16px,2cqw,28px)!important}:root .capture #cancel{height:72px;font-size:24px;bottom:24px}:root .capture .camera-instruction{top:118px;font-size:clamp(20px,2.8cqw,36px)}
}
@media(min-aspect-ratio:1/1){
 :root[data-kiosk=true] .result-heading{left:61%;max-width:calc(39% - var(--layout-edge) - 96px)}:root[data-kiosk=true] .result .result-tools{left:61%;height:48px;bottom:calc(6% + var(--layout-button) + 12px)}:root[data-kiosk=true] .result .actions{left:61%;height:var(--layout-button);bottom:6%}
 :root[data-kiosk=true] .capture #camera-video{left:0;top:0;width:58%;height:100%;mask-image:linear-gradient(90deg,#000 0%,#000 90%,transparent)}:root[data-kiosk=true] .capture>h1{top:6%;left:61%;right:calc(var(--layout-edge) + var(--settings-size) + 8px);max-width:none;font-size:clamp(22px,4cqw,40px)}:root[data-kiosk=true] .capture .camera-instruction{top:29%;left:61%;right:var(--layout-edge);max-width:none;font-size:16px}
 :root[data-kiosk=true] .capture .count-panel{left:61%;right:var(--layout-edge);bottom:22%;height:88px}:root[data-kiosk=true] .capture #cancel{left:61%;right:var(--layout-edge);bottom:6%;height:var(--layout-button)}:root[data-kiosk=true] .capture .framing{inset:6% 45% 6% 3%}
}
@media(prefers-reduced-transparency:reduce){.result-heading{background:var(--panel);backdrop-filter:none;-webkit-backdrop-filter:none}}

:root #open-settings{top:max(18px,env(safe-area-inset-top,0px));right:4.5%}:root:not([data-kiosk=true]) .result #finish{right:calc(4.5% + 60px)}
:root[data-kiosk=true] #open-settings{top:max(18px,env(safe-area-inset-top,0px));right:var(--layout-edge)}

:root:not([data-kiosk=true]) .result #finish{top:max(18px,env(safe-area-inset-top,0px))}
@media(max-aspect-ratio:1/1){
 :root[data-kiosk=true] .capture>h1{top:24px;left:5%;right:calc(5% + 62px);font-size:clamp(22px,5.6cqw,44px);max-width:calc(90% - 62px)}
 :root[data-kiosk=true] .capture .camera-instruction{top:100px;font-size:clamp(14px,3.7cqw,24px);padding:9px 14px;gap:12px}
}
@media(min-width:700px) and (max-aspect-ratio:1/1){:root[data-kiosk=true] .capture .camera-instruction{top:118px;font-size:clamp(20px,2.8cqw,36px)}}
:root .capture #camera-backdrop{object-fit:fill;filter:blur(38px)}:root .capture #camera-video{mask-image:linear-gradient(transparent,#000 9%,#000 91%,transparent)}
:root .capture #camera-backdrop{display:none}:root .capture #camera-ambient{position:absolute;inset:0;width:100%;height:100%;filter:blur(22px);pointer-events:none}
/* Product recommendations are always visible; detail sheets are supplementary. */
:root[data-kiosk=true] .shell::after{display:none;content:none;border:0;box-shadow:none}
:root[data-kiosk=true] .shell,:root[data-kiosk=true] .screen,:root[data-kiosk=true] .result canvas{border:0;box-shadow:none;border-radius:0}
.result-recommendations{position:absolute;z-index:2;left:4.5%;right:4.5%;bottom:calc(84px + env(safe-area-inset-bottom,0px));padding:10px 12px 12px;border-radius:26px;background:var(--surface);border:1px solid var(--surface-edge);box-shadow:var(--surface-shadow);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);display:grid;gap:6px}
:root .result .result-recommendations .result-tools{position:relative;inset:auto;left:auto;right:auto;top:auto;bottom:auto;height:44px;min-width:0;margin:0}
:root .result .result-recommendations .result-tools button{font-size:13px;padding:8px 10px}:root .result .result-recommendations .result-tools [role=group]{padding:2px;box-shadow:none}:root .result .result-recommendations .result-tools [role=group] button{min-height:38px;min-width:55px}
#result-products{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}#result-products[data-count="1"]{grid-template-columns:minmax(0,1fr)}
.result-product{display:grid;grid-template-columns:46px minmax(0,1fr);align-items:center;gap:8px;min-width:0;min-height:88px;padding:0;border:0;border-radius:12px;background:transparent;text-align:left;box-shadow:none;color:var(--ink)}
.result-product .product-thumbnail{width:46px;height:88px;object-fit:contain}.result-product>div{min-width:0;display:grid;gap:3px}.result-product strong{font:550 14px/1.2 'Segoe UI',sans-serif;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.result-product span{font:400 11px/1.3 'Segoe UI',sans-serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.result-product b{font:550 14px/1.2 'Segoe UI',sans-serif;margin-top:4px}
.result-product:focus-visible{outline:2px solid var(--accent);outline-offset:3px}:root .result .result-recommendations .result-tools #product-explanations{background:transparent;box-shadow:none;border-color:transparent}
:root[data-kiosk=true] .result-recommendations{left:var(--layout-edge);right:var(--layout-edge)}
:root .processing>h1{width:fit-content;max-width:calc(91% - 68px);left:4.5%;right:auto;top:24px;margin:0;padding:10px 14px;border-radius:22px;font-size:clamp(24px,5.8cqw,44px);line-height:1.1;background:var(--surface);color:var(--ink);backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px)}
:root .processing .flow-mode{width:fit-content;max-width:91%;left:4.5%;right:auto;padding:8px 12px;border-radius:18px;font-size:clamp(12px,3.2cqw,24px);color:var(--ink);background:var(--surface);backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px)}
@media(max-aspect-ratio:1/1){:root[data-kiosk=true] .processing>h1{left:var(--layout-edge);right:auto;top:24px;font-size:clamp(24px,5.8cqw,44px)}:root[data-kiosk=true] .processing .flow-mode{left:var(--layout-edge);right:auto}}
@media(min-width:700px) and (max-aspect-ratio:1/1){
 .result-recommendations{bottom:calc(112px + env(safe-area-inset-bottom,0px));padding:16px 20px 20px;gap:12px}
 :root .result .result-recommendations .result-tools{height:56px}:root .result .result-recommendations .result-tools button{font-size:clamp(17px,2.2cqw,28px);min-height:48px}.result-product{grid-template-columns:80px minmax(0,1fr);min-height:124px;gap:16px}.result-product .product-thumbnail{width:80px;height:124px}.result-product strong{font-size:clamp(18px,2.4cqw,28px)}.result-product span{font-size:clamp(14px,1.8cqw,22px)}.result-product b{font-size:clamp(18px,2.4cqw,28px)}
}
@media(min-aspect-ratio:1/1){:root[data-kiosk=true] .result-recommendations{left:61%;right:var(--layout-edge);bottom:calc(6% + var(--layout-button) + 12px)}:root[data-kiosk=true] .processing>h1{left:61%;right:calc(var(--layout-edge) + var(--settings-size) + 8px);max-width:none;top:6%;font-size:clamp(22px,4cqw,40px)}:root[data-kiosk=true] .processing .flow-mode{left:61%;top:29%;max-width:calc(39% - var(--layout-edge));font-size:14px}}
@media(prefers-reduced-transparency:reduce){.result-recommendations{background:var(--panel);backdrop-filter:none;-webkit-backdrop-filter:none}}
:root .result .result-recommendations .result-tools{height:48px}:root .result .result-recommendations .result-tools [role=group] button{min-height:44px}
:root .result .result-product .product-thumbnail{position:static;inset:auto;max-height:none;border-radius:0;box-shadow:none}:root .result .result-product>div{grid-column:2}
.result-product{grid-template-columns:64px minmax(0,1fr);min-height:104px;gap:10px}.result-product .product-thumbnail{width:64px;height:104px}@media(max-width:360px){.result-product{grid-template-columns:48px minmax(0,1fr);min-height:96px;gap:8px}.result-product .product-thumbnail{width:48px;height:96px}.result-product strong,.result-product b{font-size:13px}}@media(min-width:700px) and (max-aspect-ratio:1/1){.result-product{grid-template-columns:80px minmax(0,1fr);min-height:124px;gap:16px}.result-product .product-thumbnail{width:80px;height:124px}}

/* A single sharp photograph reaches all four edges. Glass belongs to controls only. */
html[data-kiosk=true],html[data-kiosk=true] body{background:var(--system-chrome,#18211f)}
:root .capture #camera-video{left:0;top:0;width:100%;height:100%;object-fit:cover;mask-image:none;-webkit-mask-image:none}
:root .capture #camera-ambient,:root .capture .camera-preview:after{display:none}
:root[data-kiosk=true] .choose:before{display:none}
:root .capture>h1,:root[data-kiosk=true] .capture>h1{top:calc(18px + env(safe-area-inset-top,0px));left:var(--layout-edge,4.5%);right:auto;max-width:calc(100% - var(--layout-edge,4.5%)*2 - var(--settings-size,48px) - 12px);font-size:clamp(22px,4.6cqw,38px)}
:root .capture .camera-instruction,:root[data-kiosk=true] .capture .camera-instruction{left:var(--layout-edge,4.5%);right:auto;top:calc(96px + env(safe-area-inset-top,0px));max-width:calc(100% - var(--layout-edge,4.5%)*2);font-size:clamp(14px,3.3cqw,22px)}
:root .capture .framing,:root[data-kiosk=true] .capture .framing{inset:19% 5% 23%}
:root .capture .count-panel,:root[data-kiosk=true] .capture .count-panel{left:var(--layout-edge,4.5%);right:var(--layout-edge,4.5%);bottom:calc(82px + env(safe-area-inset-bottom,0px));height:78px;min-height:0;grid-template-columns:56px 1fr;padding:10px 16px}
:root .capture #cancel,:root[data-kiosk=true] .capture #cancel{left:var(--layout-edge,4.5%);right:var(--layout-edge,4.5%);bottom:calc(18px + env(safe-area-inset-bottom,0px));height:52px}
:root .capture .count{width:50px;height:50px;font-size:32px;border-width:4px}
:root .capture[data-state=error] .count-panel{height:auto;min-height:180px;gap:10px}
:root .processing>h1,:root[data-kiosk=true] .processing>h1{top:calc(18px + env(safe-area-inset-top,0px));left:var(--layout-edge,4.5%);right:auto;max-width:calc(100% - var(--layout-edge,4.5%)*2 - var(--settings-size,48px) - 12px);font-size:clamp(24px,5.6cqw,42px)}
:root .processing .flow-mode,:root[data-kiosk=true] .processing .flow-mode{left:var(--layout-edge,4.5%);right:auto;max-width:calc(100% - var(--layout-edge,4.5%)*2);font-size:clamp(12px,3cqw,18px)}
:root .processing .flow-actions,:root[data-kiosk=true] .processing .flow-actions{bottom:calc(18px + env(safe-area-inset-bottom,0px));left:var(--layout-edge,4.5%);right:var(--layout-edge,4.5%)}
:root .processing .flow-actions .button{min-height:52px;font-size:clamp(16px,3.5cqw,22px);padding:12px 18px}
:root .processing .flow-card,:root[data-kiosk=true] .processing .flow-card{bottom:calc(96px + env(safe-area-inset-bottom,0px));padding:18px 20px;border-radius:26px}
:root .processing .flow-summary{font-size:clamp(16px,3.8cqw,24px);margin:0 0 8px}:root .processing .flow-message{font-size:clamp(14px,3.3cqw,19px)}
:root .result-heading,:root[data-kiosk=true] .result-heading{left:var(--layout-edge,4.5%);top:calc(18px + env(safe-area-inset-top,0px));max-width:calc(100% - var(--layout-edge,4.5%)*2 - var(--settings-size,48px) - 60px)}
:root .result-heading h1{font-size:clamp(23px,5.6cqw,40px)}:root .result-heading p{font-size:clamp(12px,3cqw,21px)}
:root #open-settings,:root[data-kiosk=true] #open-settings,:root .result #finish,:root[data-kiosk=true] .result #finish{top:calc(18px + env(safe-area-inset-top,0px))}
:root .result .result-recommendations{padding:10px 14px 12px;gap:6px}:root .result .result-recommendations .result-tools{height:48px}
:root .result .result-product{grid-template-columns:64px minmax(0,1fr);min-height:96px;gap:10px}:root .result .result-product .product-thumbnail{width:64px;height:96px}
:root .result .result-product strong,:root .result .result-product b{font-size:clamp(14px,2.1cqw,21px)}:root .result .result-product span{font-size:clamp(11px,1.7cqw,16px)}
#screen-mode{display:flex;align-items:center;gap:12px}#screen-mode svg{width:24px;height:24px;flex-shrink:0}.screen-mode-status{max-width:400px;padding:0 16px;font-size:14px;line-height:1.5}
.photo-fit{position:absolute;z-index:2;left:var(--layout-edge,4.5%);padding:8px 14px;min-height:44px;border:1px solid var(--surface-edge);border-radius:20px;background:var(--surface);color:var(--ink);font:500 13px/1.2 'Segoe UI',sans-serif;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);box-shadow:var(--surface-shadow)}
#portrait,#flow-scene{touch-action:none;cursor:grab}#portrait:active,#flow-scene:active{cursor:grabbing}
@media(max-width:400px){:root .result .result-product{grid-template-columns:48px minmax(0,1fr);gap:8px}:root .result .result-product .product-thumbnail{width:48px;height:96px}}
@media(min-aspect-ratio:1/1){
 :root .result .result-recommendations,:root[data-kiosk=true] .result .result-recommendations{left:auto;right:var(--layout-edge);width:min(39%,540px);bottom:calc(82px + env(safe-area-inset-bottom,0px))}
 :root .result .actions,:root[data-kiosk=true] .result .actions{left:auto;right:var(--layout-edge);width:min(39%,540px);height:52px;bottom:calc(18px + env(safe-area-inset-bottom,0px))}
 :root .processing .flow-card,:root[data-kiosk=true] .processing .flow-card{left:auto;right:var(--layout-edge);width:min(39%,540px)}
 :root .processing .flow-actions,:root[data-kiosk=true] .processing .flow-actions{left:auto;right:var(--layout-edge);width:min(39%,540px)}
 :root .capture .count-panel,:root[data-kiosk=true] .capture .count-panel,:root .capture #cancel,:root[data-kiosk=true] .capture #cancel{left:auto;right:var(--layout-edge);width:min(39%,540px)}
}