:root{--bg-base: #f8fafc;--bg-card: #ffffff;--bg-hover: #f1f5f9;--bg-banner-checking: #e2e8f0;--bg-banner-success: #dcfce7;--bg-banner-error: #fee2e2;--bg-overlay: rgba(255, 255, 255, .8);--text-main: #0f172a;--text-muted: #64748b;--text-banner-checking: #334155;--text-banner-success: #166534;--text-banner-error: #991b1b;--text-inverse: #ffffff;--border-color: #e2e8f0;--border-dashed: #cbd5e1;--border-focus: #3b82f6;--primary-main: #2563eb;--primary-hover: #1d4ed8;--primary-active: #1e40af;--secondary-main: #f1f5f9;--secondary-hover: #e2e8f0;--secondary-text: #475569;--badge-bg: #f1f5f9;--badge-text: #475569;--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, .05);--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -1px rgba(0, 0, 0, .06);--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -2px rgba(0, 0, 0, .05);--radius-md: .5rem;--radius-lg: 1rem;--radius-full: 9999px;--transition: .2s ease-in-out}@media(prefers-color-scheme:dark){:root{--bg-base: #0f172a;--bg-card: #1e293b;--bg-hover: #334155;--bg-banner-checking: #334155;--bg-banner-success: #064e3b;--bg-banner-error: #7f1d1d;--bg-overlay: rgba(30, 41, 59, .8);--text-main: #f8fafc;--text-muted: #94a3b8;--text-banner-checking: #e2e8f0;--text-banner-success: #34d399;--text-banner-error: #fca5a5;--border-color: #334155;--border-dashed: #475569;--border-focus: #60a5fa;--primary-main: #3b82f6;--primary-hover: #2563eb;--primary-active: #1d4ed8;--secondary-main: #334155;--secondary-hover: #475569;--secondary-text: #e2e8f0;--badge-bg: #334155;--badge-text: #e2e8f0;--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, .3), 0 2px 4px -1px rgba(0, 0, 0, .2);--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, .4), 0 4px 6px -2px rgba(0, 0, 0, .2)}}*{box-sizing:border-box;margin:0;padding:0}body{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;background-color:var(--bg-base);color:var(--text-main);line-height:1.5;min-height:100vh;display:flex;flex-direction:column;align-items:center;padding:2rem 1rem}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.hidden{display:none!important}.app-header{text-align:center;margin-bottom:2rem;width:100%;max-width:600px}.header-content{display:flex;flex-direction:column;align-items:center;gap:1rem}.logo-icon{color:var(--primary-main)}.app-header h1{font-size:1.875rem;font-weight:600;letter-spacing:-.025em;margin-bottom:.5rem}.app-header p{color:var(--text-muted)}.app-main{width:100%;max-width:600px;display:flex;flex-direction:column;gap:1.5rem;flex:1}.support-banner{display:flex;align-items:center;gap:.75rem;padding:.75rem 1rem;border-radius:var(--radius-md);font-size:.875rem;font-weight:500;transition:var(--transition)}.support-banner.checking{background-color:var(--bg-banner-checking);color:var(--text-banner-checking)}.support-banner.supported{background-color:var(--bg-banner-success);color:var(--text-banner-success)}.support-banner.unsupported{background-color:var(--bg-banner-error);color:var(--text-banner-error)}.spin{animation:spin 2s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.card{background-color:var(--bg-card);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);border:1px solid var(--border-color);overflow:hidden;transition:box-shadow var(--transition)}.upload-zone{padding:3rem 2rem;text-align:center;cursor:pointer;border:2px dashed var(--border-dashed);border-radius:calc(var(--radius-lg) - 2px);margin:1rem;transition:var(--transition);outline:none}.upload-zone:hover,.upload-zone:focus-visible{border-color:var(--primary-main);background-color:var(--bg-hover)}.upload-zone.drag-active{border-color:var(--primary-main);background-color:var(--bg-hover);transform:scale(.99)}.upload-content{display:flex;flex-direction:column;align-items:center;pointer-events:none}.upload-icon{color:var(--primary-main);margin-bottom:1rem;opacity:.8}.upload-text{font-weight:500;font-size:1.125rem;margin-bottom:.25rem}.upload-subtext{color:var(--text-muted);font-size:.875rem;margin-bottom:1rem}.upload-formats{font-size:.75rem;color:var(--text-muted);background-color:var(--badge-bg);padding:.25rem .5rem;border-radius:var(--radius-full)}.preview-zone{display:flex;flex-direction:column}.image-container{background-color:var(--bg-hover);position:relative;width:100%;height:300px;display:flex;align-items:center;justify-content:center;border-bottom:1px solid var(--border-color);overflow:hidden}#image-preview{max-width:100%;max-height:100%;object-fit:contain;background-image:linear-gradient(45deg,#ccc 25%,transparent 25%),linear-gradient(-45deg,#ccc 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#ccc 75%),linear-gradient(-45deg,transparent 75%,#ccc 75%);background-size:20px 20px;background-position:0 0,0 10px,10px -10px,-10px 0px}.image-loading{position:absolute;inset:0;background-color:var(--bg-overlay);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem;font-weight:500;color:var(--text-main);z-index:10}.spinner{width:32px;height:32px;border:3px solid var(--border-color);border-top-color:var(--primary-main);border-radius:50%;animation:spin 1s linear infinite}.metadata-panel{padding:1.25rem 1.5rem}.meta-filename{font-size:1rem;font-weight:600;margin-bottom:.75rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.meta-details{display:flex;flex-wrap:wrap;gap:.5rem}.badge{display:inline-flex;align-items:center;background-color:var(--badge-bg);color:var(--badge-text);font-size:.75rem;font-weight:500;padding:.25rem .5rem;border-radius:var(--radius-md)}.actions{padding:0 1.5rem 1.5rem;display:flex;gap:1rem}.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;font-family:inherit;font-size:.875rem;font-weight:500;padding:.75rem 1.5rem;border-radius:var(--radius-md);cursor:pointer;border:none;transition:var(--transition);outline:none;flex:1}.btn:focus-visible{box-shadow:0 0 0 3px var(--bg-base),0 0 0 5px var(--border-focus)}.btn:disabled{opacity:.6;cursor:not-allowed}.btn-primary{background-color:var(--primary-main);color:var(--text-inverse)}.btn-primary:hover:not(:disabled){background-color:var(--primary-hover)}.btn-primary:active:not(:disabled){background-color:var(--primary-active)}.btn-secondary{background-color:var(--secondary-main);color:var(--secondary-text)}.btn-secondary:hover:not(:disabled){background-color:var(--secondary-hover)}.status-message{margin:0 1.5rem 1.5rem;padding:.75rem 1rem;border-radius:var(--radius-md);font-size:.875rem;font-weight:500}.status-message.success{background-color:var(--bg-banner-success);color:var(--text-banner-success)}.status-message.error{background-color:var(--bg-banner-error);color:var(--text-banner-error)}.app-footer{margin-top:3rem;text-align:center;font-size:.875rem;color:var(--text-muted)}@media(max-width:480px){.actions{flex-direction:column}.image-container{height:250px}}