:root{--bg-color:#0f172a;--surface-color:#1e293b;--surface-color-hover:#334155;--primary-color:#3b82f6;--primary-hover:#2563eb;--text-primary:#f8fafc;--text-secondary:#94a3b8;--border-color:#334155;--error-color:#ef4444;--success-color:#10b981}*{box-sizing:border-box;margin:0;padding:0}body{background-color:var(--bg-color);color:var(--text-primary);justify-content:center;align-items:center;min-height:100vh;font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;display:flex}.app-container{flex-direction:column;gap:2rem;width:100%;max-width:800px;padding:2rem;display:flex}.header{text-align:center;flex-direction:column;align-items:center;gap:.5rem;display:flex}.logo-container{align-items:center;gap:.75rem;display:flex}.logo-icon{color:var(--primary-color)}h1{background:linear-gradient(90deg,#60a5fa,#a78bfa);-webkit-text-fill-color:transparent;-webkit-background-clip:text;font-size:2.5rem;font-weight:700}.subtitle{color:var(--text-secondary);max-width:500px;font-size:1.1rem}.main-content{flex-direction:column;gap:2rem;display:flex}.upload-section{background-color:var(--surface-color);border:1px solid var(--border-color);border-radius:1rem;flex-direction:column;gap:1.5rem;padding:2rem;display:flex;box-shadow:0 10px 15px -3px #00000080}.drop-zone{border:2px dashed var(--border-color);text-align:center;cursor:pointer;background-color:#0f172a80;border-radius:.75rem;justify-content:center;align-items:center;min-height:250px;padding:3rem 2rem;transition:all .3s;display:flex}.drop-zone:hover{border-color:var(--primary-color);background-color:#1e293bcc}.drop-zone.has-image{border-style:solid;padding:0;overflow:hidden}.drop-zone-content{color:var(--text-secondary);flex-direction:column;align-items:center;gap:1rem;display:flex}.upload-icon{color:var(--primary-color)}.image-preview{object-fit:contain;width:100%;height:100%;max-height:400px}.hidden-input{display:none}.error-message{color:var(--error-color);background-color:#ef44441a;border-radius:.5rem;align-items:center;gap:.5rem;padding:.75rem 1rem;font-size:.9rem;display:flex}.analyze-button{background-color:var(--primary-color);color:#fff;cursor:pointer;border:none;border-radius:.5rem;justify-content:center;align-items:center;gap:.5rem;padding:1rem;font-size:1.1rem;font-weight:600;transition:all .2s;display:flex}.analyze-button:hover:not(:disabled){background-color:var(--primary-hover);transform:translateY(-2px)}.analyze-button:disabled{opacity:.5;cursor:not-allowed}.spinner{animation:1s linear infinite spin}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.result-section{background-color:var(--surface-color);border:1px solid var(--success-color);border-radius:1rem;padding:1.5rem;box-shadow:0 0 20px #10b9811a}.fade-in{animation:.5s ease-out forwards fadeIn}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.result-header{border-bottom:1px solid var(--border-color);align-items:center;gap:.75rem;margin-bottom:1.5rem;padding-bottom:1rem;display:flex}.success-icon{color:var(--success-color)}.result-details{flex-direction:column;gap:1.25rem;display:flex}.result-item{flex-direction:column;gap:.5rem;display:flex}.result-label{color:var(--text-secondary);text-transform:uppercase;letter-spacing:.05em;font-size:.9rem}.result-value.highlight{color:#a78bfa;text-transform:capitalize;font-size:1.5rem;font-weight:700}.confidence-bar-container{background-color:var(--border-color);border-radius:4px;width:100%;height:8px;overflow:hidden}.confidence-bar{background:linear-gradient(90deg, var(--primary-color), var(--success-color));border-radius:4px;height:100%;transition:width 1s cubic-bezier(.4,0,.2,1)}.confidence-text{color:var(--text-secondary);align-self:flex-end;font-size:.9rem}