* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { background: #000; overflow: hidden; width: 100%; height: 100%; }
#scanner-container { position: fixed; inset: 0; width: 100%; height: 100%; }
#video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* Version label — bottom center */
#version {
    position: absolute; bottom: calc(env(safe-area-inset-bottom, 0px) + 16px);
    left: 50%; transform: translateX(-50%);
    color: rgba(255,255,255,0.4); font-family: -apple-system, system-ui, sans-serif;
    font-size: 10px; font-weight: 400; letter-spacing: 0.3px;
    z-index: 10;
}

/* Viewfinder */
#viewfinder {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 70vmin; height: 70vmin; max-width: 300px; max-height: 300px;
}
.corner { position: absolute; width: 28px; height: 28px; border-color: #fff; border-style: solid; border-width: 0; }
.corner-tl { top: 0; left: 0; border-top-width: 3px; border-left-width: 3px; border-top-left-radius: 4px; }
.corner-tr { top: 0; right: 0; border-top-width: 3px; border-right-width: 3px; border-top-right-radius: 4px; }
.corner-bl { bottom: 0; left: 0; border-bottom-width: 3px; border-left-width: 3px; border-bottom-left-radius: 4px; }
.corner-br { bottom: 0; right: 0; border-bottom-width: 3px; border-right-width: 3px; border-bottom-right-radius: 4px; }

/* Status — hidden */
#status { display: none; }

/* Top bar buttons */
#btn-back, #btn-flash {
    position: absolute; top: calc(env(safe-area-inset-top, 44px) + 44px);
    width: 40px; height: 40px; border-radius: 50%; border: none;
    background: rgba(0,0,0,0.4); color: #fff; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    transition: background 150ms ease, transform 100ms ease;
    -webkit-tap-highlight-color: transparent;
    z-index: 10;
}
#btn-back { left: 16px; }
#btn-flash { right: 16px; }
#btn-back:active, #btn-flash:active {
    background: rgba(255,255,255,0.3);
    transform: scale(0.9);
}
#btn-back svg, #btn-flash svg {
    width: 22px; height: 22px; fill: #fff;
}

/* Flash overlay */
#flash-overlay { position: absolute; inset: 0; background: rgba(255,255,255,0.5); opacity: 0; pointer-events: none; transition: opacity 150ms ease-out; }
#flash-overlay.flash { opacity: 1; }

/* Debug overlay — hidden by default, enable via ?debug=1 */
#debug { display: none; }
#debug.visible {
    display: block;
    position: absolute; top: 40px; left: 8px; right: 8px;
    color: lime; font-size: 10px; font-family: monospace;
    background: rgba(0,0,0,0.8); padding: 8px; border-radius: 4px;
    max-height: 40vh; overflow-y: auto; z-index: 999; white-space: pre-wrap;
}

.hidden { display: none; }