@font-face{font-family:Pretendard;font-weight:100 900;font-style:normal;font-display:swap;src:url('./assets/PretendardVariable.woff2') format('woff2')}
.button-label{display:block;text-align:center;line-height:inherit}
.icon-label{display:inline-flex;align-items:center;justify-content:center;gap:var(--icon-label-gap,8px);max-width:100%;vertical-align:middle}
.icon-label-icon{display:inline-flex;align-items:center;justify-content:center;flex:none;line-height:0}
.icon-label-icon>img,.icon-label-icon>svg{display:block;flex:none}
.icon-label-text{display:block;line-height:inherit;text-align:inherit;white-space:nowrap}
:root{--primary:#0068d7;--primary-soft:#eef6ff;--nav-active:#00b8e6;--text:#182230;--muted:#526071;--background:#f7f9fc;--surface:#fff;--border:#d8e0ea;--pale:#eef2f6;--navy:#071a36;--danger:#d92d20;--danger-soft:#fff1f2;--radius:8px;--font:Pretendard,-apple-system,BlinkMacSystemFont,sans-serif;font-family:var(--font);color:var(--text);background:var(--background);font-synthesis:none;color-scheme:light}
*{box-sizing:border-box}body{margin:0}button,input,select{font:inherit;color:inherit}button{cursor:pointer}button:disabled{cursor:default;opacity:.45}button,input,select{-webkit-tap-highlight-color:transparent}button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid var(--nav-active);outline-offset:3px}button{touch-action:manipulation}a{color:var(--primary)}h1,h2,h3,p{margin:0}h1{font-size:28px;line-height:1.3;letter-spacing:-.6px}h2{font-size:20px;line-height:1.4;letter-spacing:-.3px}h3{font-size:16px;line-height:1.5}p{font-size:14px;line-height:1.6}img{display:block;max-width:100%}[hidden]{display:none!important}.muted{color:var(--muted)}
.button{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:12px 22px;border:1px solid transparent;border-radius:var(--radius);font-size:14px;font-weight:600;line-height:20px;white-space:nowrap;transition:background-color .15s,box-shadow .15s}.button-primary{color:#fff;background:var(--primary);border-color:var(--primary)}.button-secondary{background:#fff;border-color:var(--border)}.button-outline{color:var(--primary);background:#fff;border-color:var(--primary)}.button-danger{color:var(--danger);background:#fff;border-color:var(--danger)}.button-navy{color:#fff;background:var(--navy)}.button-ghost{background:transparent;color:var(--muted)}.button:active:not(:disabled){filter:brightness(.94)}.actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.card{border:1px solid var(--border);border-radius:var(--radius);background:var(--surface)}
.field{display:flex;flex-direction:column;gap:8px;font-size:14px;font-weight:500}.field input{width:100%;height:52px;border:1px solid var(--border);border-radius:var(--radius);padding:14px 16px;font-size:15px;background:#fff;font-weight:400;min-width:0}.field input::placeholder{color:#8b95a1}.field small{color:var(--danger);font-size:12px}.checkbox{display:inline-flex;align-items:center;gap:8px;font-size:14px;line-height:22px;cursor:pointer}.checkbox input{appearance:none;width:22px;height:22px;flex:none;border:1px solid var(--border);border-radius:5px;background:#fff;margin:0;cursor:pointer}.checkbox input:checked{border:0;background:var(--primary) url('./assets/vector-65-6044.svg') center/100% 100%}.checkbox input:disabled{opacity:.45}.inline-message{padding:12px 16px;background:var(--primary-soft);border-radius:var(--radius);color:var(--muted);margin:12px 0;line-height:1.6}.inline-message.error{background:var(--danger-soft);color:#b42318}.badge{display:inline-flex;align-items:center;min-height:28px;padding:5px 16px;font-size:12px;font-weight:600;background:var(--primary-soft);color:var(--primary);border-radius:5px}
.brand{display:flex;align-items:center;gap:12px;white-space:nowrap;font-size:20px;font-weight:600;letter-spacing:-.3px}.brand img{width:33px;height:28px;object-fit:contain}.app-header{height:72px;display:flex;align-items:center;justify-content:space-between;padding:0 32px;gap:32px;border-bottom:1px solid var(--border);background:#fff}.app-header nav{display:flex;align-items:stretch;height:100%;gap:8px}.app-header nav button{position:relative;background:transparent;border:0;padding:0 16px;font-size:14px;font-weight:500;white-space:nowrap;color:var(--muted)}.app-header nav button[aria-current=page]{color:var(--primary)}.app-header nav button[aria-current=page]::after{content:'';position:absolute;height:2px;bottom:14px;left:4px;right:4px;background:var(--nav-active)}.page{width:100%;max-width:1600px;margin:0 auto;padding:24px 48px 28px}.page-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin-bottom:32px}.page-heading p{color:var(--muted);margin-top:4px}.page-footnote{text-align:center;color:var(--muted);font-size:12px;margin-top:16px}.page-heading .actions{justify-content:flex-end}.app-loading{min-height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;padding:24px;text-align:center}.spinner{display:inline-block;flex:none;width:18px;height:18px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}
.login-page{min-height:100dvh;display:grid;grid-template-columns:minmax(340px,41%) 1fr}.login-brand{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;padding:56px clamp(32px,5vw,80px);background:var(--primary-soft)}.login-logo{width:160px;height:160px;border-radius:24px;background:#fff;overflow:hidden;margin-bottom:36px}.login-logo img{width:100%;height:100%;object-fit:contain}.login-brand h1{font-size:28px;line-height:1.45;margin-bottom:16px}.login-brand p{font-size:15px;color:var(--muted);line-height:1.75}.login-content{padding:48px;display:grid;place-items:center}.login-form{width:100%;max-width:392px}.login-form .eyebrow{color:var(--primary);font-size:14px;font-weight:600;margin-bottom:12px}.login-form h2{font-size:32px;font-weight:700;margin-bottom:8px}.form-fields{display:flex;flex-direction:column;gap:20px;margin:32px 0 20px}.login-submit{width:100%;height:52px;margin-top:28px}.mobile-brand{display:none}
.camera-panel{position:relative;height:clamp(320px,calc(100dvh - 250px),720px);overflow:hidden;border:1px solid var(--border);border-radius:var(--radius);background:var(--pale)}.camera-panel video{width:100%;height:100%;object-fit:contain;transform:scaleX(-1)}.camera-placeholder{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:28px;padding:32px;text-align:center;color:var(--muted)}.camera-placeholder img{width:150px;opacity:.4}.camera-capture{position:absolute;bottom:24px;left:0;right:0;display:flex;justify-content:center}.camera-capture .button{min-width:160px;box-shadow:0 4px 20px #071a3630}.comparison-grid{position:relative;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;height:max(320px,calc(100dvh - 250px));padding:0}.comparison-grid.grid-1{grid-template-columns:1fr}.grid-tools{position:absolute;left:0;right:0;top:0;display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:13px;color:var(--muted)}.grid-tools .button{min-height:36px;padding:7px 14px}.comparison-grid.grid-3,.comparison-grid.grid-4{grid-template-rows:repeat(2,minmax(0,1fr))}.photo-card{position:relative;min-width:0;min-height:0;background:var(--pale);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}.photo-card.selected{border:3px solid var(--primary)}.photo-select{position:absolute;inset:0;width:100%;height:100%;padding:0;border:0;background:transparent}.photo-select img{width:100%;height:100%;object-fit:cover}.photo-number{position:absolute;top:12px;left:12px;display:grid;place-items:center;min-width:28px;height:28px;padding:4px 8px;color:var(--text);background:#fffe;border-radius:6px;font-size:13px;font-weight:600}.photo-actions{position:absolute;bottom:24px;left:12px;right:12px;display:flex;gap:4px;justify-content:center}.photo-actions .button{width:112px;min-height:42px;padding:10px 16px}.comparison-grid:fullscreen{height:100dvh;width:100vw;padding:70px 24px 24px;background:var(--background)}.comparison-grid:fullscreen .grid-tools{top:16px;left:24px;right:24px}
.lens-preview{position:relative;display:flex;align-items:center;justify-content:center;height:clamp(300px,calc(100dvh - 374px),620px);overflow:hidden;border-radius:var(--radius);border:1px solid var(--border);background:var(--pale)}.lens-preview-image{width:100%;height:100%;object-fit:contain}.lens-overlay-top{position:absolute;top:16px;left:16px;right:16px;display:flex;align-items:flex-start;justify-content:space-between;gap:12px}.lens-overlay-top .actions{gap:8px}.status-pill{font-size:12px;font-weight:600;padding:10px 14px;background:#fffe;border-radius:6px;white-space:nowrap}.status-pill.ready::before{content:'';display:inline-block;width:8px;height:8px;border-radius:50%;background:#16a34a;margin-right:8px}.original-toggle{position:absolute;left:16px;bottom:16px;background:#ffff;border:1px solid var(--border);border-radius:6px;padding:10px 16px;min-height:40px;font-size:12px;font-weight:600}.original-toggle[aria-pressed=true]{background:var(--navy);color:white;border-color:var(--navy)}.recognition-progress{position:absolute;inset:0;background:#ffffffdf;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:18px;color:var(--primary)}.colour-panel{display:flex;align-items:center;gap:28px;padding:20px;margin-top:24px}.colour-intro{width:190px;flex:none;align-self:flex-start}.colour-intro h2{font-size:15px}.colour-intro p{font-size:12px;color:var(--muted);margin-top:10px}.colour-controls{flex:1;min-width:0}.colour-swatches{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-bottom:16px}.colour-swatch{width:36px;height:36px;flex:none;border:3px solid transparent;border-radius:50%;padding:0}.colour-swatch[aria-pressed=true]{outline:3px solid var(--primary);outline-offset:3px}.colour-swatches .button{min-height:36px;font-size:12px;padding:6px 12px}.opacity-control{display:flex;align-items:center;gap:24px;color:var(--muted);font-size:13px}.opacity-control span{white-space:nowrap;min-width:68px}.opacity-control strong{font-weight:500}.opacity-control input{flex:1;min-width:0;accent-color:var(--primary);height:28px;margin:0}.colour-apply{min-width:148px;align-self:flex-end}
.dialog{width:440px;max-width:calc(100vw - 32px);max-height:calc(100dvh - 32px);padding:30px 32px 26px;border:0;border-radius:20px;color:var(--text);background:#fff;box-shadow:0 16px 50px #0003;overflow:auto}.dialog::backdrop{background:#071a366b}.dialog>header{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:16px}.dialog h2{font-size:22px}.dialog-close{width:32px;height:32px;flex:none;border:0;border-radius:6px;background:var(--pale);font-size:24px;font-weight:400;line-height:1}.dialog-body>p,.dialog-body form>p{font-size:15px;line-height:1.65;color:var(--muted)}.dialog-body .field{margin:24px 0 20px}.dialog-body .checkbox{font-size:13px;align-items:flex-start}.dialog>footer,.dialog-form-actions{display:flex;gap:12px;justify-content:flex-end;margin-top:24px}.dialog>footer .button,.dialog-form-actions .button{flex:1;min-height:48px}.dialog-wide{width:900px}.dialog-wide .camera-panel{height:clamp(280px,65dvh,620px)}
.account-card{padding:32px;margin-top:40px;margin-bottom:24px}.account-card h2{font-size:22px}.account-card p{color:var(--muted);margin:10px 0 14px}.account-actions{padding:26px}.account-actions>h2{font-size:18px}.setting-row{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:22px 0}.setting-row+.setting-row{border-top:1px solid var(--border);padding-bottom:0}.setting-row p{color:var(--muted);font-size:14px}.setting-row h3{margin:4px 0 8px}.setting-row .button{width:180px;min-height:48px;flex:none}.version{font-size:12px;color:var(--muted);margin-top:48px}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:56px 24px;text-align:center;min-height:340px}.empty-state img{width:130px;opacity:.45;margin-bottom:12px}.empty-state p{color:var(--muted);max-width:400px}.empty-state .button{margin-top:8px}.slideshow-empty{min-height:calc(100dvh - 280px);display:grid;align-items:center}.slide-player{border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;background:#fff}.slide-stage{position:relative;height:clamp(300px,calc(100dvh - 365px),700px);background:var(--navy)}.slide-stage>img,.slide-stage>video{width:100%;height:100%;object-fit:contain}.slide-count{position:absolute;right:16px;top:16px;background:#071a36b3;color:#fff;font-size:13px;padding:8px 12px;border-radius:6px}.slide-controls{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 20px;flex-wrap:wrap}.slide-transport{display:flex;gap:8px}.slide-transport>.button:first-child,.slide-transport>.button:last-child{font-size:24px;padding:8px 16px}.interval-select{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted)}.interval-select select{height:44px;padding:8px 12px;border:1px solid var(--border);border-radius:var(--radius);background:#fff;min-width:74px}.slide-player:fullscreen{width:100vw;height:100dvh;border:0;border-radius:0;display:flex;flex-direction:column}.slide-player:fullscreen .slide-stage{height:auto;flex:1;min-height:0}.slide-player:fullscreen .slide-controls{flex:none}.slide-details{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-top:20px}.slide-details p{min-width:0}.slide-details strong{display:block;max-width:60vw;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-weight:500}.slide-details span{display:block;margin-top:4px;font-size:12px;color:var(--muted)}
.pd-guide{min-height:clamp(380px,calc(100dvh - 210px),740px);padding:40px 24px;display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;gap:20px}.pd-guide>img{width:220px;max-height:140px;object-fit:contain;margin:12px 0}.pd-guide p{color:var(--muted)}.pd-guide>.button{margin-top:8px;min-width:220px}.pd-guide>.muted{font-size:12px}.thickness-form{padding:28px 32px}.thickness-form fieldset{padding:0 0 24px;margin:0 0 24px;border:0;border-bottom:1px solid var(--border)}.thickness-form fieldset:last-child{border:0;margin:0;padding:0}.thickness-form legend{font-size:15px;font-weight:600;margin-bottom:16px;padding:0}.thickness-form legend span{margin-left:10px;font-size:12px;font-weight:400;color:var(--muted)}.choice-group{display:flex;gap:10px;flex-wrap:wrap}.choice{min-width:58px;min-height:40px;padding:10px 12px;background:#fff;border:1px solid var(--border);border-radius:6px;font-size:14px}.choice[aria-pressed=true]{color:#fff;background:var(--primary);border-color:var(--primary)}.calculation-summary{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:24px 0}.calculation-summary p{color:var(--muted);display:flex;gap:18px;flex-wrap:wrap}.calculation-summary strong{color:var(--text)}
@media(min-width:1400px){.page{padding-top:32px}.colour-intro{width:230px}.login-form{max-width:420px}.login-brand h1{font-size:32px}}
@media(max-width:1000px){.page{padding-left:28px;padding-right:28px}.app-header{padding:0 24px;gap:16px}.app-header nav{gap:0}.app-header nav button{padding:0 12px}.colour-intro{width:145px}.colour-panel{gap:20px}.colour-apply{min-width:100px}.colour-swatches{gap:12px}.login-content{padding:36px}.login-brand{padding:40px 28px}}
@media(max-width:760px){.app-header{height:auto;flex-wrap:wrap;padding:16px 20px 0;gap:12px}.app-header nav{width:100%;height:48px;overflow-x:auto;justify-content:space-between}.app-header nav button{padding:0 10px;font-size:13px}.app-header nav button[aria-current=page]::after{bottom:0}.page{padding:24px 20px}.page-heading{margin-bottom:24px;gap:16px;flex-wrap:wrap}.page-heading h1{font-size:25px}.page-heading .actions{justify-content:flex-start}.login-page{grid-template-columns:1fr}.login-brand{display:none}.login-content{padding:40px 24px;min-height:100dvh}.mobile-brand{display:block;margin-bottom:48px}.login-form h2{font-size:30px}.comparison-grid{gap:16px;height:max(400px,calc(100dvh - 310px))}.comparison-grid.grid-2{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:1fr}.photo-actions{gap:6px;bottom:10px}.photo-actions .button{padding:8px 12px;font-size:12px;min-height:40px}.colour-panel{flex-wrap:wrap;padding:18px}.colour-intro{width:100%}.colour-intro p{margin-top:4px}.colour-controls{min-width:calc(100% - 130px)}.lens-preview{height:clamp(340px,52dvh,660px)}.lens-overlay-top{top:12px;left:12px;right:12px;flex-wrap:wrap}.lens-overlay-top .button{padding:9px 12px;min-height:40px;font-size:12px}.status-pill{font-size:11px;padding:9px 12px}.account-card{margin-top:0;padding:24px}.account-actions{padding:24px}.setting-row{align-items:flex-start;flex-wrap:wrap;gap:16px}.setting-row .button{width:100%}.slide-controls{gap:12px;padding:14px}.slide-controls>.checkbox{font-size:12px}.slide-transport{order:3;width:100%;justify-content:center}.slide-controls>.button{font-size:12px;padding:10px 12px}.slide-stage{height:50dvh;min-height:260px}.slide-details{align-items:flex-start}.slide-details .button{font-size:12px;padding:8px}.thickness-form{padding:24px}.calculation-summary{flex-direction:column;align-items:stretch}.pd-guide h2{font-size:18px}}
@media(prefers-reduced-motion:reduce){.button{transition:none}.spinner{animation-duration:1.6s}}
.mask-dialog,.notice-dialog{font-family:Pretendard,sans-serif;background:#fff;border:0;border-radius:20px;padding:30px 32px 26px;color:#182230;box-shadow:0 16px 50px #0003}
dialog::backdrop{background:rgba(7,26,54,.42)}
.notice-dialog{width:440px;max-width:calc(100vw - 32px)}
.notice-dialog h2{font-size:22px;line-height:1.2;margin:0 0 16px}.notice-dialog p{font-size:15px;line-height:22px;color:#6b7684;margin:0 0 24px}.notice-dialog>div{display:flex;justify-content:flex-end}
.mask-dialog button,.notice-dialog button{min-height:44px;padding:10px 18px;border:1px solid #d8e0ea;border-radius:8px;font-size:14px;font-weight:600;background:#fff;white-space:nowrap}
.mask-dialog button.primary,.notice-dialog button.primary{background:#0068d7;color:#fff;border-color:#0068d7}
.mask-dialog button:disabled{opacity:.45}.mask-dialog button[aria-pressed=true]{border-color:#0068d7;background:#eef6ff;color:#0068d7}
.mask-dialog{width:min(1100px,calc(100vw - 32px));height:min(850px,calc(100dvh - 32px));max-height:none;padding:24px;overflow:hidden}
.mask-dialog[open]{display:flex;flex-direction:column;gap:16px}
.mask-dialog header{display:flex;align-items:center;justify-content:space-between;gap:16px}
.mask-dialog h2{margin:0;font-size:22px;line-height:1.2}.mask-dialog header p{margin:6px 0 0;font-size:14px;color:#526071}
.mask-toolbar,.mask-zoom{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.mask-toolbar label{display:flex;align-items:center;gap:8px;font-size:13px}.mask-toolbar input[type=range]{width:110px;accent-color:#0068d7}
.mask-toolbar input[type=number]{width:58px;height:44px;border:1px solid #d8e0ea;border-radius:6px;padding:8px;font-size:14px}
.toolbar-divider{height:24px;border-left:1px solid #d8e0ea;margin:0 4px}.mask-zoom output{min-width:40px;text-align:center;font-size:14px}
.mask-zoom span{color:#526071;font-size:12px;margin-left:8px}
.mask-viewport{position:relative;flex:1;min-height:150px;overflow:hidden;background:#eef2f6;border-radius:8px;touch-action:none;user-select:none;cursor:crosshair}
.mask-viewport[data-tool=pan]{cursor:grab}.mask-viewport[data-tool=pan]:active{cursor:grabbing}.mask-viewport.disabled{cursor:default}
.mask-viewport canvas{position:absolute;left:0;top:0;max-width:none;max-height:none;transform-origin:0 0;image-rendering:pixelated}
.brush-cursor{position:absolute;pointer-events:none;border:1px solid #16a34a;border-radius:50%;box-shadow:0 0 0 1px #fff}
.mask-viewport[data-tool=erase] .brush-cursor{border-color:#d92d20}
.mask-dialog footer{display:flex;align-items:center;justify-content:space-between;gap:16px}.mask-dialog footer p{color:#526071;font-size:13px;margin:0}.mask-dialog footer>div{display:flex;gap:8px}
@media(max-width:700px){.mask-dialog{padding:16px;gap:10px}.mask-dialog header p{display:none}.mask-dialog button{padding:8px 12px}.mask-dialog footer{align-items:flex-end}.mask-dialog footer p{font-size:12px}.mask-zoom span{display:none}}
.management-login{min-height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:28px;padding:48px 20px}.management-login-card{width:440px;max-width:100%;padding:40px;border-radius:10px}.management-login-card>p{font-size:15px;color:var(--muted);margin-top:12px}.management-login-card form{margin-top:24px}.management-login-card .field{margin-bottom:20px}.management-login-card .field input{height:48px}.management-login-card form>.button{width:100%;height:50px}.login-options{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:4px 0 20px}.login-options .checkbox{font-size:13px}.login-options .checkbox input{width:18px;height:18px;border-radius:4px}.login-options>button{background:transparent;border:0;color:var(--primary);font-size:13px;font-weight:500;padding:4px 0;min-height:32px}.management-login-note{font-size:12px;color:var(--muted);margin-top:20px}.quick-login{width:440px;max-width:100%}.quick-login h2{font-size:14px;color:var(--muted);font-weight:500;text-align:center;margin-bottom:14px}.quick-login>div{display:grid;grid-template-columns:1fr 1fr;gap:12px}.quick-login .button{padding:18px 12px;flex-direction:column;gap:6px}.quick-login strong{font-size:14px;font-weight:600}.quick-login span{font-size:12px;font-weight:400;color:var(--muted)}.stat-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;margin-bottom:24px}.stat-card{padding:24px}.stat-card p{color:var(--muted);margin-bottom:12px}.stat-card strong{font-size:32px}.management-table{padding:28px}.management-table h2{margin-bottom:12px}.management-table>.muted{font-size:13px;margin-bottom:16px}.table-scroll{overflow-x:auto}.management-table table{width:100%;border-collapse:collapse;font-size:14px;white-space:nowrap;text-align:left}.management-table th{font-weight:500;color:var(--muted);background:var(--background)}.management-table th,.management-table td{padding:16px;border-bottom:1px solid var(--border)}.management-empty{padding:32px 0;color:var(--muted)}
@media(max-width:760px){.management-login{padding:32px 20px}.management-login-card{padding:28px}.management-shell .app-header{padding-bottom:16px}.management-user{display:none}.stat-grid{grid-template-columns:1fr 1fr;gap:12px}.stat-card{padding:20px}.management-table{padding:20px}}

/* Figma comparison: 24px gutters, unselected photos, per-photo expansion, selected actions. */
.comparison-page>.page-heading .button{min-width:140px;height:44px}
.photo-expand{position:absolute;right:16px;top:16px;width:42px;height:42px;background:transparent;border:0;padding:0;z-index:2}
.photo-expand img{width:42px;height:42px}
.photo-recognition-status{position:absolute;left:16px;top:16px;max-width:calc(100% - 86px);display:flex;align-items:center;gap:8px;background:#ffff;border-radius:8px;padding:8px 10px;font-size:12px;line-height:20px;box-shadow:0 2px 6px #071a3610}
.photo-recognition-status>span:not(.spinner){min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.photo-recognition-status .spinner{width:14px;height:14px;color:var(--primary)}
.photo-recognition-status button{background:transparent;color:var(--muted);border:0;padding:2px;white-space:nowrap;font-size:12px}
.photo-recognition-error{position:absolute;left:16px;top:16px;right:72px;padding:8px 12px;background:var(--danger-soft);border:1px solid #fecdca;border-radius:8px;font-size:12px;color:var(--danger);text-align:left}
.photo-fullscreen{position:fixed;inset:0;width:100vw;height:100dvh;max-width:none;max-height:none;padding:16px 24px 24px;margin:0;border:0;border-radius:0;background:var(--background);color:var(--text)}
.photo-fullscreen[open]{display:flex;flex-direction:column;gap:18px}
.photo-fullscreen>header{display:flex;align-items:center;justify-content:space-between;padding:0 8px;min-height:42px;flex:none}
.photo-fullscreen>header strong{font-size:14px;font-weight:600}
.photo-fullscreen>header .button{width:88px;min-height:42px;padding:10px 16px}
.photo-fullscreen .comparison-grid{height:auto;flex:1;min-height:0;gap:24px;padding:0}
.photo-fullscreen .photo-card>img{width:100%;height:100%;object-fit:cover}
.lens-editor{margin-top:-2px}.lens-editor .page-heading{margin-bottom:25px}.lens-editor .page-heading h1{font-size:26px;line-height:31px;letter-spacing:0}.lens-editor .page-heading p{margin-top:5px;font-size:14px;line-height:17px}.lens-editor .lens-preview{height:clamp(300px,calc(100dvh - 358px),700px)}
.lens-overlay-top{top:17px;left:17px;right:17px}.status-pill{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-width:116px;height:36px;padding:0 12px;line-height:16px;background:#fff}.status-pill.ready::before{display:block;flex:none;margin:0}
.lens-masking-button{width:142px;height:44px;min-height:44px;padding:0 12px;gap:8px}.lens-masking-button img{width:13px;height:13px;flex:none;object-fit:contain}
.colour-panel{display:grid;grid-template-columns:216px minmax(0,1fr) 148px;grid-template-rows:36px 42px;column-gap:36px;row-gap:12px;align-items:start;padding:19px 23px 19px 19px;min-height:130px}.colour-intro{grid-column:1;grid-row:1 / 3;width:auto;margin-top:-2px}.colour-intro h2{font-size:16px;line-height:19px;letter-spacing:0}.colour-intro p{font-size:13px;line-height:16px;margin-top:11px}.colour-controls{display:contents}.colour-swatches{grid-column:2 / 4;grid-row:1;gap:16px;margin:0;flex-wrap:nowrap}.colour-swatch{border:0}.colour-swatch[aria-pressed=true]{border:4px solid var(--primary);outline:none}.colour-swatches .button{height:36px;padding:0 12px}
.opacity-control{grid-column:2;grid-row:2;height:36px;gap:34px;font-size:13px;font-weight:500}.opacity-control span{min-width:54px;line-height:16px}.opacity-control input{appearance:none;-webkit-appearance:none;width:100%;height:36px;padding:0;margin:0;border:0;background:transparent;cursor:pointer}.opacity-control input:disabled{cursor:default;opacity:.45}.opacity-control input::-webkit-slider-runnable-track{height:8px;border-radius:4px;background:linear-gradient(to right,var(--primary) 0 var(--opacity-fill),var(--pale) var(--opacity-fill) 100%)}.opacity-control input::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:20px;height:20px;box-sizing:border-box;border:4px solid var(--primary);border-radius:50%;background:#fff;margin-top:-6px}.opacity-control input::-moz-range-track{height:8px;border-radius:4px;background:var(--pale)}.opacity-control input::-moz-range-progress{height:8px;border-radius:4px;background:var(--primary)}.opacity-control input::-moz-range-thumb{width:20px;height:20px;box-sizing:border-box;border:4px solid var(--primary);border-radius:50%;background:#fff}
.colour-apply{grid-column:3;grid-row:2;align-self:start;width:148px;min-height:42px;height:42px;padding:0 12px}
@media(max-width:1000px){.colour-panel{grid-template-columns:minmax(0,1fr) 148px;grid-template-rows:auto auto 42px;gap:18px 24px;padding:20px}.colour-intro{grid-column:1 / 3;grid-row:1;margin:0}.colour-intro p{margin-top:6px}.colour-swatches{grid-column:1 / 3;grid-row:2;flex-wrap:wrap}.opacity-control{grid-column:1;grid-row:3;gap:16px}.colour-apply{grid-column:2;grid-row:3}}
@media(max-width:600px){.colour-panel{grid-template-columns:1fr;grid-template-rows:repeat(4,auto)}.colour-intro,.colour-swatches,.opacity-control,.colour-apply{grid-column:1}.colour-intro{grid-row:1}.colour-swatches{grid-row:2}.opacity-control{grid-row:3}.colour-apply{grid-row:4;justify-self:end}.lens-editor .page-heading p{line-height:20px}}
.crop-dialog{width:min(1100px,calc(100vw - 32px));height:min(900px,calc(100dvh - 32px));max-width:none;max-height:none;padding:24px;border:0;border-radius:20px;color:var(--text);background:var(--surface);box-shadow:0 16px 50px #0003;overflow:hidden}
.crop-dialog[open]{display:flex;flex-direction:column;gap:16px}
.crop-dialog>header{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex:none}
.crop-dialog h2{font-size:22px;line-height:1.3}.crop-dialog header p{font-size:14px;color:var(--muted);margin-top:6px;line-height:1.5}
.crop-toolbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;flex:none}.crop-toolbar label{display:flex;align-items:center;gap:12px;font-size:14px;font-weight:600}.crop-toolbar select{min-height:44px;padding:8px 32px 8px 12px;border:1px solid var(--border);border-radius:8px;background:#fff;color:var(--text);font:inherit}.crop-padding-note{font-size:13px;color:var(--muted)}
.crop-stage{display:flex;align-items:center;justify-content:center;flex:1;min-height:80px;overflow:hidden;border-radius:8px;background:var(--pale);padding:8px}
.crop-viewport{position:relative;flex:none;overflow:hidden;background:#fff;box-shadow:0 0 0 2px var(--primary);touch-action:none;cursor:grab;user-select:none;isolation:isolate}.crop-viewport:active{cursor:grabbing}.crop-viewport:focus-visible{outline:3px solid var(--primary);outline-offset:4px}.crop-viewport>img{position:absolute;left:0;top:0;max-width:none;pointer-events:none;user-select:none;will-change:transform}
.crop-guides{position:absolute;inset:0;pointer-events:none}.crop-guides i{position:absolute;background:#ffffff8c;box-shadow:0 0 1px #071a3670}.crop-guides i:nth-child(1),.crop-guides i:nth-child(2){top:0;bottom:0;width:1px}.crop-guides i:nth-child(1){left:33.333%}.crop-guides i:nth-child(2){left:66.667%}.crop-guides i:nth-child(3),.crop-guides i:nth-child(4){left:0;right:0;height:1px}.crop-guides i:nth-child(3){top:33.333%}.crop-guides i:nth-child(4){top:66.667%}
.crop-zoom{display:flex;align-items:center;justify-content:center;gap:16px;flex:none;font-size:14px}.crop-zoom input{min-width:0;flex:1;max-width:460px;height:32px;accent-color:var(--primary)}.crop-zoom output{width:48px;text-align:right;font-variant-numeric:tabular-nums}.crop-zoom .button{width:44px;padding:8px;font-size:20px}
.crop-dialog>footer{display:flex;align-items:center;justify-content:space-between;gap:16px;flex:none}.crop-pagination,.crop-commit{display:flex;align-items:center;gap:8px}.crop-pagination>span{font-size:14px;color:var(--muted);min-width:48px}.crop-commit .button{min-width:96px}.crop-dialog>.inline-message{margin:0;font-size:13px}
@media(max-width:700px){.crop-dialog{padding:16px;width:calc(100vw - 16px);height:calc(100dvh - 16px);gap:12px}.crop-dialog[open]{gap:12px}.crop-dialog h2{font-size:20px}.crop-dialog header p{font-size:12px}.crop-toolbar{gap:8px}.crop-toolbar label{font-size:13px;gap:8px}.crop-toolbar select{padding-right:16px}.crop-toolbar .button{padding:8px 12px}.crop-padding-note{width:100%;font-size:12px}.crop-zoom{gap:8px}.crop-zoom>span{display:none}.crop-dialog>footer{flex-wrap:wrap;gap:10px}.crop-pagination{justify-content:center;width:100%}.crop-commit{width:100%}.crop-commit .button{flex:1;padding:10px 12px;font-size:13px}}
.camera-expanded{position:fixed;inset:0;width:100vw;height:100dvh;border-radius:0;border:0;z-index:50;background:var(--pale)}
.tint-mode{display:flex;gap:4px;margin-top:12px;max-width:216px}.tint-mode .button{min-width:0;min-height:36px;padding:6px 12px;flex:1;font-size:13px}.tint-mode .button[aria-pressed=true]{color:var(--primary);border-color:var(--primary);background:var(--primary-soft)}
.colour-panel.has-gradient{grid-template-rows:36px 52px 52px}.colour-panel.has-gradient .colour-intro{grid-row:1 / 4}.colour-panel.has-gradient .colour-apply{grid-row:3;align-self:end}.colour-intro .gradient-help{font-size:12px;line-height:18px;margin-top:12px}
.gradient-sliders{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-column:2;grid-row:2 / 4;gap:12px 20px;min-width:0}.gradient-sliders .opacity-control{grid-column:auto;grid-row:auto;flex-direction:column;align-items:stretch;height:52px;gap:4px;min-width:0}.gradient-sliders .opacity-control span{min-width:0;line-height:16px}.gradient-sliders .opacity-control input{flex:none;height:32px}
.lens-editor.gradient-mode .lens-preview{height:clamp(260px,calc(100dvh - 432px),626px)}
@media(max-width:1000px){.colour-panel.has-gradient{grid-template-rows:auto auto 52px 52px;row-gap:12px}.colour-panel.has-gradient .colour-intro{grid-row:1}.gradient-sliders{grid-column:1;grid-row:3 / 5}.colour-panel.has-gradient .colour-apply{grid-row:4}}
@media(max-width:600px){.colour-panel.has-gradient{grid-template-rows:auto auto auto 42px}.gradient-sliders{grid-column:1;grid-row:3}.colour-panel.has-gradient .colour-apply{grid-row:4}}
@media(max-width:440px){.gradient-sliders{grid-template-columns:1fr}}