*,*:before,*:after{box-sizing:border-box}html,body{margin:0;padding:0;height:100%}.app-container{display:flex;flex-direction:column;min-height:100vh;background-color:#f0f2f5}main{margin-bottom:4rem}body{background-color:#f0f2f5;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;color:#333;margin:0;padding:2rem 1rem}.checkin-container{max-width:1100px;margin:0 auto;display:flex;flex-direction:column;gap:1.5rem}h1,h2{color:#1c1e21;margin-top:0}h1{text-align:center;color:#009380;font-weight:600}h2{font-size:1.25rem;border-bottom:2px solid #e4e6e8;padding-bottom:.5rem;margin-bottom:1rem}.card{background-color:#fff;border-radius:8px;padding:1.5rem;box-shadow:0 2px 8px #0000001a}.main-content{display:flex;flex-direction:column}.top-row{display:flex;gap:2rem;align-items:flex-start}.setting-section{margin-top:12rem}.bottom-row{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem}.camera-container{position:relative;width:480px;flex-shrink:0;margin:0;border-radius:8px;overflow:hidden;box-shadow:0 2px 8px #0000001a;background-color:#000}.camera-container canvas{width:100%;height:auto;display:block}#rect-canvas{position:absolute;top:0;left:0}.card-result{flex:1}button{background-color:#009380;color:#fff;border:none;border-radius:6px;padding:.75rem 1.5rem;font-size:1rem;font-weight:600;cursor:pointer;transition:background-color .2s ease-in-out,box-shadow .2s ease;width:100%;box-shadow:0 1px 2px #0000001a}button:hover{background-color:#007a69;box-shadow:0 2px 4px #00000026}.data-management-buttons{display:flex;gap:1rem}input[type=file]{width:100%;margin-bottom:.5rem}input[type=file]::file-selector-button{background-color:#e4e6e8;color:#333;border:none;border-radius:6px;padding:.5rem 1rem;cursor:pointer;transition:background-color .2s ease}input[type=file]::file-selector-button:hover{background-color:#d1d3d6}#result p{background-color:#f0f2f5;padding:.75rem;border-radius:6px;margin:.5rem 0;font-weight:500;word-wrap:break-word}#result p:first-child{margin-top:0}@media (max-width: 992px){.top-row,.bottom-row{flex-direction:column;grid-template-columns:1fr;gap:1.5rem}.camera-container{width:100%;max-width:480px;margin:0 auto}}.footer{background-color:#2c3e50;color:#ecf0f1;padding:1.5rem 2rem;text-align:center;box-shadow:0 -2px 5px #0000001a;margin-top:auto}.footer p{margin:0;font-size:.9rem;font-weight:500}.footer a{color:inherit;text-decoration:underline}.footer a:hover,.footer a:visited{color:inherit}