* { box-sizing: border-box; }

:root {
    color-scheme: dark;
    font: 100%/1.5 system-ui, sans-serif;
    color: #edf6f3;
    background: #0a1519;
    accent-color: #baf86b;
    --surface: #132429;
    --line: #30474d;
    --muted: #b1c7c5;
    --lime: #baf86b;
}

body {
    margin: 0;
    min-height: 100vh;
    background: radial-gradient(ellipse at top, #173c34 0, transparent 36rem), #0a1519;
}

main { max-width: 43rem; margin: auto; padding: clamp(.8rem, 4vw, 2rem) clamp(.75rem, 3vw, 1.5rem) 3rem; }

.hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    border: 1px solid #406453;
    border-radius: 1.5rem;
    margin-bottom: 1rem;
    padding: clamp(1.2rem, 5vw, 2.5rem);
    background:
        linear-gradient(110deg, #132d29 15%, #20463c 70%, #305744),
        #163930;
    box-shadow: 0 1rem 3rem #0003;
}

.hero::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;
    background-image: radial-gradient(#9be9a633 1px, transparent 1px);
    background-size: 17px 17px;
    mask-image: linear-gradient(90deg, transparent 35%, #000);
}

.hero-copy { position: relative; z-index: 1; }
.hero-copy p { max-width: 22ch; color: #d3e6dc; margin: .85rem 0 0; }
.hero h1 span { color: var(--lime); }
.hero-mark {
    position: absolute;
    width: clamp(6.4rem, 26vw, 12rem);
    right: clamp(.5rem, 4vw, 1.8rem);
    top: 50%;
    transform: translateY(-35%) rotate(-9deg);
    color: #baf86b;
    opacity: .37;
}

.eyebrow, .section-tag {
    color: var(--lime);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .15em;
    text-transform: uppercase;
}

.eyebrow { display: flex; align-items: center; gap: .6rem; }
.live-dot { width: .5rem; height: .5rem; border-radius: 50%; background: var(--lime); box-shadow: 0 0 1rem #baf86b99; }
h1, h2, h3 { line-height: 1.1; margin: .35rem 0 .6rem; }
h1 { font-size: clamp(2.6rem, 9vw, 4.6rem); letter-spacing: -.065em; margin-top: .8rem; }
h2 { font-size: clamp(1.35rem, 5vw, 1.85rem); letter-spacing: -.035em; }
p { margin: .3rem 0 .8rem; }

.panel, .notice {
    border: 1px solid var(--line);
    border-radius: 1.25rem;
    padding: clamp(1rem, 4vw, 1.6rem);
    margin: 0 0 1rem;
    background: var(--surface);
    box-shadow: 0 .65rem 1.7rem #0002;
}

.panel > p, .scan-tip { color: var(--muted); }
.notice { color: #e8ffd4; border-color: #537a48; background: #263e2c; }
form { display: grid; gap: .7rem; }
label { font-weight: 650; }
input, select, textarea, button { font: inherit; color: inherit; }

input:not([type=checkbox]), select, textarea, button {
    width: 100%;
    min-height: 3rem;
    border: 1px solid #49636a;
    border-radius: .8rem;
    padding: .62rem .8rem;
    background: #0d1d21;
}

textarea { resize: vertical; }
button {
    background: var(--lime);
    border-color: #baf86b;
    color: #17290c;
    font-weight: 800;
    cursor: pointer;
    transition: filter .15s, transform .15s;
}
button:hover:not(:disabled) { filter: brightness(1.1); }
button:active:not(:disabled) { transform: scale(.985); }
button.secondary { background: #1d3339; border-color: #49636a; color: #e5f1ee; }
button:disabled { opacity: .45; cursor: default; }
:focus-visible { outline: 3px solid #9bdaff; outline-offset: 3px; }
.login h2 { margin-bottom: .1rem; }
.stock { margin-top: 1rem; }
.stock-row {
    display: grid;
    grid-template-columns: .75rem minmax(0, 1fr) auto 1.8rem;
    align-items: center;
    gap: .7rem;
    padding: .6rem .7rem;
    border: 1px solid #334d52;
    border-radius: .85rem;
    background: #172d32;
}
.fraction-mixed { --fraction: #d4e0e5; }
.fraction-plastic { --fraction: #ffdb78; }
.fraction-paper { --fraction: #8cd0ff; }
.fraction-glass { --fraction: #8cf4ae; }
.fraction-bio { --fraction: #ffc599; }
.fraction-dot { width: .6rem; height: .6rem; border-radius: 50%; background: var(--fraction); align-self: start; margin-top: .52rem; }
.stock-row small { display: block; color: var(--muted); }
.stock-count {
    display: grid;
    place-items: center;
    min-width: 2.6rem;
    min-height: 2.6rem;
    padding: .15rem .35rem;
    border: 1px solid var(--fraction);
    border-radius: .5rem;
    background: #0d1d21;
    color: var(--fraction);
    font-size: 1.4rem;
    font-weight: 850;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.stock-row:not(:has(input)) { grid-template-columns: .75rem minmax(0, 1fr) auto; }
.stock-row input { width: clamp(3.5rem, 15vw, 5rem); font-variant-numeric: tabular-nums; }
.carousel {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 100%;
    grid-template-rows: auto auto auto;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    border-radius: 1rem;
    background: #0d1d21;
    border: 1px solid #365159;
}
.slide {
    min-width: 0;
    display: grid;
    grid-row: span 3;
    grid-template-rows: subgrid;
    scroll-snap-align: start;
    text-align: center;
    padding: .8rem .55rem 1rem;
}
.slide h3 { align-self: center; color: var(--fraction); }
.position { color: var(--muted); font-variant-numeric: tabular-nums; }
.qr canvas { display: block; margin: auto; width: min(100%, var(--qr-width)); height: auto; image-rendering: pixelated; }
.controls { display: flex; gap: .65rem; margin: .75rem 0; }
.check { display: flex; gap: .55rem; align-items: center; min-height: 2.8rem; }
.check input { width: 1.25rem; height: 1.25rem; flex: none; }
#reader { overflow: hidden; border-radius: .85rem; }
#scan-status, #qr-status { color: #e8ffd4; background: #223c33; border-radius: .65rem; padding: .55rem .7rem; margin: 0; }
#scan-status:empty, #qr-status:empty { display: none; }
.logout button { justify-self: end; width: auto; padding-inline: 1.25rem; }

@media (prefers-reduced-motion: reduce) {
    button { transition: none; }
}

#camera-overlay:not([hidden]) {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    gap: .65rem;
    padding: max(.75rem, env(safe-area-inset-top)) max(.75rem, env(safe-area-inset-right))
        max(.75rem, env(safe-area-inset-bottom)) max(.75rem, env(safe-area-inset-left));
    background: #071114;
}
body:has(#camera-overlay:not([hidden])) { overflow: hidden; }
.camera-toolbar { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.camera-toolbar button { width: auto; }
.camera-preview { display: grid; place-items: center; min-height: 0; overflow: hidden; }
.camera-preview #reader { width: 100%; }
.camera-preview video { display: block; width: 100% !important; max-height: 76dvh; object-fit: contain; }
.camera-hint { color: var(--muted); text-align: center; margin: 0; }

.quick-add {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    min-height: 2.75rem;
    margin-bottom: 1rem;
    padding: .35rem .85rem .35rem .4rem;
    border-radius: 2rem;
    background: var(--lime);
    color: #17290c;
    font-weight: 800;
    text-decoration: none;
}
.quick-add span {
    display: grid;
    place-items: center;
    width: 1.85rem;
    height: 1.85rem;
    border-radius: 50%;
    background: #203616;
    color: var(--lime);
    font-size: 1.35rem;
    line-height: 1;
}
#add-sticker { scroll-margin-top: 1rem; }

.stock-row input[type="checkbox"] { width: 1.4rem; height: 1.4rem; margin: .35rem; }
.scanner-heading { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.scanner-heading button { width: auto; font-size: .85rem; }

#install-app { width: auto; min-height: 2.75rem; margin: 0 0 1rem .35rem; border-radius: 2rem; font-size: .9rem; }

#passkey-panel summary { cursor: pointer; font-weight: 750; }
#passkey-panel > p { margin-top: .65rem; }
.passkey-actions { display: grid; gap: .65rem; }
#passkey-status:empty { display: none; }