.app{max-width:1200px;margin:0 auto;padding:20px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}.app-header{text-align:center;margin-bottom:40px;padding:20px;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border-radius:12px;box-shadow:0 4px 6px #0000001a}.app-header h1{margin:0 0 10px;font-size:2.5rem;font-weight:700}.app-header p{margin:0;font-size:1.1rem;opacity:.9}.app-main{display:flex;flex-direction:column;gap:30px}.upload-section{text-align:center;padding:40px;border:2px dashed #ddd;border-radius:12px;background:#fafafa;transition:all .3s ease}.upload-section:hover{border-color:#667eea;background:#f0f4ff}.file-input{display:none}.file-input-label{display:inline-block;padding:12px 24px;background:#667eea;color:#fff;border-radius:8px;cursor:pointer;font-weight:600;transition:background .3s ease}.file-input-label:hover{background:#5a6fd8}.loading{text-align:center;padding:40px}.spinner{width:40px;height:40px;border:4px solid #f3f3f3;border-top:4px solid #667eea;border-radius:50%;animation:spin 1s linear infinite;margin:0 auto 20px}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.error{padding:20px;background:#fee;border:1px solid #fcc;border-radius:8px;color:#c33;text-align:center}.image-preview{text-align:center}.image-preview h3{margin-bottom:20px;color:#333}.preview-image{max-width:100%;max-height:400px;border-radius:8px;box-shadow:0 4px 12px #00000026}.metadata-section{background:#fff;border-radius:12px;padding:30px;box-shadow:0 4px 12px #0000001a}.metadata-section h3{margin:0 0 30px;color:#333;font-size:1.5rem;text-align:center}.metadata-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px}.metadata-category{background:#f8f9fa;border-radius:8px;padding:20px;border-left:4px solid #667eea}.metadata-category h4{margin:0 0 15px;color:#667eea;font-size:1.1rem;font-weight:600}.metadata-items{display:flex;flex-direction:column;gap:8px}.metadata-item{display:flex;justify-content:space-between;align-items:flex-start;padding:8px 0;border-bottom:1px solid #eee}.metadata-item:last-child{border-bottom:none}.metadata-key{font-weight:600;color:#555;min-width:120px;margin-right:15px}.metadata-value{color:#333;text-align:right;word-break:break-word;max-width:200px}@media (max-width: 768px){.app{padding:10px}.app-header h1{font-size:2rem}.metadata-grid{grid-template-columns:1fr}.metadata-item{flex-direction:column;align-items:flex-start;gap:5px}.metadata-key{min-width:auto;margin-right:0}.metadata-value{text-align:left;max-width:none}}