:root{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;line-height:1.5;font-weight:400;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{margin:0;min-width:320px;min-height:100vh;overflow-x:hidden}#root{min-height:100vh}*{margin:0;padding:0;box-sizing:border-box}.app{min-height:100vh;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif}.fullscreen-container{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:2rem;background:#f5f5f7}.content-box{position:relative;z-index:1;max-width:480px;width:100%;text-align:center}.content-box h1{font-size:2rem;color:#1d1d1f;margin-bottom:.5rem;font-weight:600;letter-spacing:-.5px}.subtitle{color:#86868b;margin-bottom:2rem;font-size:1rem;font-weight:400}.input-field,.select-field{width:100%;padding:.875rem 1rem;font-size:1rem;border:1px solid #d2d2d7;border-radius:8px;margin-bottom:1rem;transition:all .2s ease;outline:none;background:#fff;color:#1d1d1f;font-weight:400}.input-field::placeholder{color:#86868b}.input-field:focus,.select-field:focus{border-color:#0071e3;box-shadow:0 0 0 4px #0071e31a}.select-field{cursor:pointer;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2386868b' d='M6 8L2 4h8z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 1rem center;padding-right:2.5rem}.select-field option{background:#fff;color:#1d1d1f;padding:.5rem}.primary-button,.update-button,.secondary-button{width:100%;padding:.875rem 1rem;font-size:1rem;font-weight:400;border:none;border-radius:8px;cursor:pointer;transition:all .2s ease;margin-bottom:.75rem}.primary-button{background:#0071e3;color:#fff}.primary-button:hover:not(:disabled){background:#0077ed}.primary-button:active:not(:disabled){background:#006edb}.primary-button:disabled{opacity:.4;cursor:not-allowed}.update-button{background:#0071e3;color:#fff}.update-button:hover:not(:disabled){background:#0077ed}.update-button:active:not(:disabled){background:#006edb}.update-button:disabled{opacity:.4;cursor:not-allowed}.secondary-button{background:transparent;color:#0071e3;border:1px solid #d2d2d7}.secondary-button:hover{background:#f5f5f7}.error-message{color:#d60000;background:#fff5f5;border:1px solid #ffcccb;font-size:.875rem;margin:-.5rem 0 1rem;padding:.75rem 1rem;border-radius:8px;text-align:left}.checkin-box{max-width:600px;width:100%}.progress-section{margin-bottom:2rem}.progress-section h2{color:#1d1d1f;margin-bottom:1.5rem;font-size:1.5rem;font-weight:600;letter-spacing:-.3px}.progress-info{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-bottom:1.5rem}.remaining-time,.percentage{background:#fff;padding:1rem;border-radius:8px;border:1px solid #d2d2d7;font-size:.8125rem;font-weight:400;color:#86868b;text-align:left;display:flex;flex-direction:column;gap:.25rem}.remaining-time strong,.percentage strong{font-size:1.5rem;font-weight:600;color:#1d1d1f;letter-spacing:-.5px}.progress-bar-container{width:100%;height:8px;background:#e5e5e7;border-radius:100px;overflow:hidden;margin-bottom:1.5rem}.progress-bar{height:100%;background:#0071e3;transition:width .3s ease;border-radius:100px}.mile-info{color:#86868b;font-size:.875rem;font-weight:400;background:#fff;padding:.75rem 1rem;border-radius:8px;border:1px solid #d2d2d7;margin-bottom:1.5rem}.info-section{margin-bottom:2rem}.info-section h2{color:#1d1d1f;margin-bottom:1rem;font-size:1.5rem;font-weight:600;letter-spacing:-.3px}.info-message{color:#1d1d1f;font-size:1rem;line-height:1.6;background:#fff;padding:1.25rem 1rem;border-radius:8px;border:1px solid #d2d2d7;font-weight:400}.primary-button:disabled,.update-button:disabled{position:relative}.primary-button:disabled:after,.update-button:disabled:after{content:"";position:absolute;width:14px;height:14px;top:50%;right:1rem;margin-top:-7px;border:2px solid rgba(255,255,255,.3);border-radius:50%;border-top-color:#fff;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}@media(max-width:768px){.fullscreen-container{padding:1.5rem}.content-box h1{font-size:2rem}.progress-info{grid-template-columns:1fr}.remaining-time strong,.percentage strong{font-size:1.25rem}}@media(max-width:480px){.fullscreen-container{padding:1rem}.content-box h1{font-size:1.75rem}.subtitle{font-size:1rem;margin-bottom:2rem}.progress-section h2,.info-section h2{font-size:1.5rem}}