:root{font-family:system-ui,sans-serif;color:#15324a;background:#eef3f7}*{box-sizing:border-box}body{margin:0}header{display:flex;justify-content:space-between;align-items:center;padding:.7rem 1rem;background:#075c91;color:white}h1{font-size:1.2rem;margin:0}main{max-width:1000px;margin:auto;padding:1rem}.capture,.controls,.actions{display:flex;gap:.7rem;align-items:center;flex-wrap:wrap}.primary,button{border:1px solid #075c91;border-radius:.45rem;padding:.65rem .9rem;background:white;color:#075c91;font-weight:700;cursor:pointer}.primary{background:#075c91;color:white}input[type=file]{display:none}.canvas-wrap{position:relative;max-height:55vh;overflow:auto;background:#18232c;margin:.7rem 0}.canvas-wrap canvas{display:block;max-width:100%;height:auto}.canvas-wrap #overlay{position:absolute;inset:0}#preview{max-width:220px;max-height:220px;margin:.7rem 0;border:1px solid #789}#pages{display:flex;gap:.6rem;overflow:auto;padding:.5rem 0}.page{background:white;border:1px solid #ccd8e2;padding:.4rem;min-width:110px}.page img{display:block;width:100px;height:135px;object-fit:contain}.page button{padding:.3rem;margin-top:.3rem}@media(max-width:600px){main{padding:.6rem}.capture p{font-size:.85rem}.controls>*{flex:1 1 42%}}