/* Base resets */
* {box-sizing: border-box; margin:0; padding:0;}
body {font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; background:#fff; color:#333;}
.page {display:none; align-items:center; justify-content:center; flex-direction:column; height:100vh; padding:20px;}
.page.active {display:flex;}
h1 {font-size:2.4rem; margin-bottom:20px; color:#111;}
.input-group {display:flex; flex-direction:column; width:300px;}
.input-group input {padding:10px; margin-top:5px; font-size:1rem; border:1px solid #ccc; border-radius:4px;}
.input-group button {margin-top:10px; padding:10px; background:#a1c6ea; border:none; border-radius:4px; color:#fff; font-weight:bold; cursor:pointer; transition:background .3s;}
.input-group button:hover {background:#8fbbe3;}
.note {margin-top:10px; font-size:0.9rem; color:#666;}
#drop-area {border:2px dashed #ccc; padding:40px; border-radius:10px; text-align:center; width:100%; max-width:400px; cursor:pointer; transition:border-color .3s;}
#drop-area.hover {border-color:#a1c6ea;}
#drop-area p {font-size:1.1rem; color:#666;}
#fileInput {display:none;}
.spinner {width:50px; height:50px; border:6px solid #eee; border-top-color:#a1c6ea; border-radius:50%; animation:spin 1s linear infinite;}
@keyframes spin {to {transform:rotate(360deg);}}
#result-img {max-width:90%; max-height:60vh; margin:20px 0; border:1px solid #ccc;}
#download-btn, #new-btn {padding:10px 20px; margin:10px; background:#a1c6ea; border:none; border-radius:4px; color:#fff; font-weight:bold; text-decoration:none; cursor:pointer;}
#download-btn:hover, #new-btn:hover {background:#8fbbe3;}