:root{--primary-color: #1a1a1a;--secondary-color: #333;--accent-color: #00bfa5;--font-family: "Roboto", sans-serif;--header-height: 10vh;--footer-height: 10vh;--border-radius: 8px;--transition-duration: .3s}body{margin:0;font-family:var(--font-family);background-color:var(--primary-color);color:#fff;display:flex;flex-direction:column;min-height:100vh}header{background-color:var(--secondary-color);height:var(--header-height);display:flex;align-items:center;justify-content:space-between;padding:0 20px}footer{background-color:var(--secondary-color);height:var(--footer-height);display:flex;align-items:center;justify-content:center}main{flex:1;display:flex;justify-content:center;align-items:center;padding:20px;max-height:80vh;height:74vh}nav a{color:var(--accent-color);text-decoration:none;margin:0 15px;transition:color var(--transition-duration)}nav a:hover{color:#fff}@media (max-width: 768px){header,footer{flex-direction:column;height:auto;padding:10px}nav a{margin:5px 0}}.overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#000c;display:flex;justify-content:center;align-items:center;z-index:1000}.overlay-content{position:relative;width:80%;height:80%;background:#fff;padding:20px;border-radius:10px;display:flex;flex-direction:column;align-items:center}.overlay-buttons{display:flex;justify-content:space-between;width:100%;margin-top:20px;z-index:1001}.overlay-button{padding:10px 20px;border:none;border-radius:5px;background-color:var(--accent-color);color:var(--primary-color);font-size:16px;cursor:pointer}.overlay-button:hover{background-color:var(--accent-color);opacity:.8}.crop-handles{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:10}.crop-handle{position:absolute;width:15px;height:15px;background-color:#fff;border:2px solid black;border-radius:50%;pointer-events:all}.crop-handle.top-left{top:-8px;left:-8px;cursor:nwse-resize}.crop-handle.top-right{top:-8px;right:-8px;cursor:nesw-resize}.crop-handle.bottom-left{bottom:-8px;left:-8px;cursor:nesw-resize}.crop-handle.bottom-right{bottom:-8px;right:-8px;cursor:nwse-resize}.upload-container{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px;background-color:var(--primary-color);border:2px solid var(--accent-color);border-radius:var(--border-radius);width:80%;max-width:600px;margin:0 auto;height:60vh}.upload-dropzone{width:100%;padding:20px;margin-bottom:20px;border:2px dashed var(--accent-color);border-radius:var(--border-radius);background-color:var(--secondary-color);color:#fff;text-align:center;cursor:pointer;position:relative;transition:background-color var(--transition-duration)}.upload-dropzone:hover{background-color:#444}.upload-input{position:absolute;top:0;left:0;width:100%;height:100%;opacity:0;cursor:pointer}.uploaded-file{display:flex;flex-direction:column;align-items:center;width:100%;margin-top:20px}.image-container{position:relative}.edit-button{position:absolute;top:-10px;right:-10px;background-color:var(--accent-color);border:none;border-radius:50%;padding:5px;cursor:pointer;font-size:16px;transition:background-color var(--transition-duration)}.edit-button:hover{background-color:#00897b}.uploaded-image-small{max-width:100px;max-height:100px;border-radius:var(--border-radius)}.warning-text{margin-top:10px;color:var(--accent-color);font-size:14px;text-align:center}.extract-button{padding:10px 20px;border:none;border-radius:var(--border-radius);background-color:var(--accent-color);color:var(--primary-color);font-size:16px;cursor:pointer;margin-top:10px;transition:background-color var(--transition-duration)}.extract-button:hover{background-color:#00897b}.extracted-text{margin-top:20px;width:100%;height:200px;border:1px solid var(--accent-color);border-radius:var(--border-radius);background-color:var(--secondary-color);color:#fff;font-size:16px;padding:10px;resize:none}@media (max-width: 768px){.upload-container{width:100%;padding:10px}.uploaded-image-small{max-width:80px;max-height:80px}.extract-button{width:100%;padding:15px}}