[hidden]{display:none!important}
:root{--nav-height:64px}
body{margin:0;min-height:100dvh}
main{padding:var(--gutter);padding-top:max(var(--gutter),env(safe-area-inset-top));padding-bottom:calc(var(--nav-height) + env(safe-area-inset-bottom) + var(--space-3));max-width:1200px;margin:auto}
h1{font-size:var(--text-h2)}
#payload{width:100%;margin-bottom:var(--space-2)}
#codes{display:flex;flex-direction:column;gap:var(--space-2);margin-bottom:var(--space-3)}
article{display:grid;grid-template-columns:minmax(80px,160px) minmax(0,1fr) auto auto;align-items:center;gap:var(--space-2);min-width:0}
article h2{grid-column:2;grid-row:1;margin:0;font-size:var(--text-body)}
article .code{grid-column:1;grid-row:1/span 2}
article details{grid-column:2/-1;grid-row:2;font-size:var(--text-min)}
article>a,article>.t-btn{grid-row:1}
article p{font-size:var(--text-min);overflow-wrap:anywhere}
.code{display:block;padding:0;border:0;background:none;width:100%;cursor:zoom-in}
.code img{display:block;width:100%;aspect-ratio:1;object-fit:contain}
.actions{display:flex;gap:var(--space-2);flex-wrap:wrap;margin:var(--space-2) 0}
article .t-btn{display:inline-flex;gap:var(--space-1);align-items:center}
.t-btn svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:square;stroke-linejoin:miter}
.round-code{filter:invert(1)}
@media(prefers-color-scheme:dark){.round-code{filter:none}.matrix-code{filter:invert(1)}}
.bottom-nav{position:fixed;inset:auto 0 0;z-index:3;display:flex;justify-content:center;background:var(--bg);padding-bottom:env(safe-area-inset-bottom);min-height:var(--nav-height)}
.bottom-nav button{flex:1;max-width:600px;min-height:var(--nav-height)}
.bottom-nav [aria-current]{border-top:var(--line-4) solid var(--primary);font-weight:var(--weight-loud)}
#scanner{position:fixed;inset:0;background:var(--bg)}
#video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.scan-heading{position:absolute;top:env(safe-area-inset-top);left:0;right:0;display:flex;justify-content:space-between;align-items:center;padding:var(--gutter);gap:var(--space-2)}
.scan-heading h1,.scan-heading button{background:var(--bg);margin:0}
.scan-controls{position:absolute;bottom:calc(var(--nav-height) + env(safe-area-inset-bottom));left:var(--gutter);right:var(--gutter);max-width:800px;margin:auto;background:var(--bg);padding:var(--space-1);overflow-wrap:anywhere}
.scan-controls p{margin:var(--space-1) 0}
#result{border-left:var(--line-4) solid var(--success);padding-left:var(--space-2)}
#result-content{max-height:25dvh;overflow:auto}
.file-input{position:absolute;width:1px;height:1px;clip-path:inset(50%);overflow:hidden}
.actions:has(.file-input:focus-visible) label[for=file]{outline:var(--line-4) double var(--ink);outline-offset:var(--space-1)}
dialog{color:var(--ink);background:var(--bg);padding:var(--space-3);padding-top:max(var(--space-3),env(safe-area-inset-top));padding-bottom:max(var(--space-3),env(safe-area-inset-bottom));width:100vw;height:100dvh;max-width:none;max-height:none;margin:0;border:0;overflow:auto}
dialog[open]{display:flex;flex-direction:column;gap:var(--space-1)}
dialog::backdrop{background:var(--bg)}
#close{align-self:flex-end}
#big-title,#big-payload,#big-compat{margin:0;overflow-wrap:anywhere}
#big-img{display:block;width:100%;flex:1;min-height:80px;object-fit:contain;overflow:hidden;cursor:zoom-out}
#big-download{align-self:flex-start}
@media(max-width:600px){article{grid-template-columns:minmax(96px,38vw) minmax(0,1fr) auto;gap:var(--space-1)}article h2{grid-column:2/-1}article>.t-btn{grid-column:2;grid-row:2}article>a{grid-column:3;grid-row:2}article details{grid-row:3}article .t-btn{padding:var(--space-half);gap:var(--space-half)}}

.t-skip{z-index:5}

#status:empty{display:none}

#scanner:has(#video[hidden])::before{content:'';position:absolute;inset:0;background:url('assets/scanner-idle.png') center/cover no-repeat;filter:blur(8px)}

#result{max-height:55dvh;overflow:auto}#result-image{display:block;width:100%;max-height:24dvh;object-fit:cover}.result-heading{display:flex;gap:var(--space-1);align-items:center}#result-icon{width:32px;height:32px;object-fit:contain}#result-format,#result-destination{color:var(--ink-muted);font-size:var(--text-min)}