html{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}:root{color:#17252a;background:#eef3f1;font-family:Inter,Noto Sans Thai,system-ui,sans-serif}*{box-sizing:border-box}body{min-width:320px;margin:0}button,input,select{font:inherit}.center,.login{place-items:center;min-height:100vh;padding:1.5rem;display:grid}.login{background:linear-gradient(145deg,#063f3b,#062f38)}.login form{background:#fff;border-radius:18px;gap:1rem;width:min(420px,100%);padding:2rem;display:grid}.logo{color:#fff;background:#0a766a;border-radius:11px;place-items:center;width:38px;height:38px;font-weight:800;display:inline-grid}.login h1{margin:.5rem 0 0}.login p{color:#6a7874;margin:0 0 1rem}.login label{gap:.45rem;font-weight:650;display:grid}.login input,.manual input,select{border:1px solid #ced9d5;border-radius:10px;width:100%;padding:.85rem 1rem}.login button,.scanner button,.manual button,.result button{color:#fff;background:#0a766a;border:0;border-radius:10px;padding:.9rem 1rem;font-weight:750}.error{color:#a3332b;background:#fff0ee;border-radius:9px;padding:.8rem}.app header{color:#fff;background:#063f3b;justify-content:space-between;align-items:center;height:66px;padding:0 clamp(1rem,5vw,3rem);display:flex}.app header>div{align-items:center;gap:.6rem;display:flex}.app header button{color:#fff;background:0 0;border:1px solid #ffffff4d;border-radius:8px;padding:.5rem .7rem}.content{width:min(760px,100%);margin:auto;padding:1.5rem}.welcome{justify-content:space-between;align-items:end;gap:1rem;margin-bottom:1.2rem;display:flex}.welcome span{color:#687772}.welcome h1{margin:.2rem 0}.welcome label{min-width:250px}.scanner{background:#102728;border-radius:18px;place-items:center;min-height:360px;display:grid;position:relative;overflow:hidden}.scanner video{object-fit:cover;width:100%;height:100%;position:absolute}.scanner .frame{border:3px solid #65e0c2;border-radius:18px;width:230px;height:230px;position:absolute;box-shadow:0 0 0 999px #00000059}.scanner button{position:absolute;bottom:1rem}.manual{background:#fff;border-radius:14px;margin:1rem 0;padding:1.2rem}.manual>span{color:#687772;margin-bottom:.6rem;display:block}.manual>div{grid-template-columns:1fr auto;gap:.6rem;display:grid}.result{text-align:center;background:#fff;border-radius:18px;padding:3rem 1.5rem}.result.success{background:#def6ec}.result.repeat{background:#fff2d9}.result.failed{background:#ffe8e5}.result-icon{color:#fff;background:#178565;border-radius:50%;place-items:center;width:72px;height:72px;margin:auto;font-size:2.2rem;display:grid}.repeat .result-icon{background:#c78825}.failed .result-icon{background:#ba4339}.result h2{margin:1rem 0 .3rem;font-size:2rem}.recent{background:#fff;border-radius:14px;margin-top:1rem;padding:1.2rem}.recent h2{font-size:1.1rem}.recent>div{border-top:1px solid #e8ecea;grid-template-columns:auto 1fr auto;align-items:center;gap:.7rem;padding:.7rem 0;display:grid}.recent small{color:#6d7a76}.dot{background:#ba4339;border-radius:50%;width:10px;height:10px}.dot.FIRST_SCAN{background:#178565}.dot.REPEAT_SCAN{background:#c78825}.empty{text-align:center;background:#fff;border-radius:14px;padding:3rem}@media (width<=600px){.welcome{flex-direction:column;align-items:stretch}.welcome label{width:100%;min-width:0}.scanner{min-height:330px}.content{padding:1rem}}