*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;background:linear-gradient(135deg,#667eea,#764ba2);min-height:100vh;padding:40px 20px}.container{max-width:1200px;margin:0 auto;background:#fff;border-radius:20px;padding:40px;box-shadow:0 20px 60px #0000004d}h1{text-align:center;color:#1a1a2e;margin-bottom:10px;font-size:2rem}.description{text-align:center;color:#666;margin-bottom:30px;font-size:1.1rem}.rules{display:flex;gap:20px;margin-bottom:30px}.rule{flex:1;display:flex;align-items:center;gap:15px;padding:20px;border-radius:12px;background:#f8f9fa}.rule.horizontal{border-left:4px solid #4f46e5}.rule.vertical{border-left:4px solid #ec4899}.rule .icon{font-size:2rem}.rule-content strong{display:block;color:#1a1a2e;margin-bottom:5px}.rule-content p{color:#666;font-size:.9rem}.upload-area{border:3px dashed #ddd;border-radius:16px;padding:60px 20px;text-align:center;cursor:pointer;transition:all .3s ease;background:#fafafa}.upload-area:hover{border-color:#4f46e5;background:#f0f4ff}.upload-area.dragover{border-color:#4f46e5;background:#e0e7ff;transform:scale(1.02)}.upload-icon{font-size:3rem;display:block;margin-bottom:15px}.upload-content p{color:#666;margin-bottom:8px}.upload-content .hint{font-size:.85rem;color:#999}.preview-section{animation:fadeIn .3s ease}@keyframes fadeIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.actions-top{display:flex;gap:15px;justify-content:center;margin-bottom:20px;padding:20px;background:#f8f9fa;border-radius:12px}.stats-bar{display:flex;justify-content:center;gap:30px;margin-bottom:20px;padding:15px;background:#f8f9fa;border-radius:12px}.stat-item{display:flex;flex-direction:column;align-items:center;gap:5px}.stat-value{font-size:1.8rem;font-weight:700;color:#1a1a2e}.stat-item.horizontal .stat-value{color:#4f46e5}.stat-item.vertical .stat-value{color:#ec4899}.stat-label{font-size:.9rem;color:#666}.progress-bar{position:relative;height:40px;background:#e5e7eb;border-radius:20px;margin-bottom:20px;overflow:hidden;align-items:center;justify-content:center;display:flex}.progress-fill{position:absolute;top:0;left:0;height:100%;background:linear-gradient(135deg,#4f46e5,#7c3aed);transition:width .3s ease;border-radius:20px}.progress-text{position:relative;z-index:1;font-weight:600;color:#1a1a2e}.image-list{display:flex;flex-direction:column;gap:20px;max-height:60vh;overflow-y:auto;padding-right:10px}.image-list::-webkit-scrollbar{width:8px}.image-list::-webkit-scrollbar-track{background:#f1f5f9;border-radius:4px}.image-list::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:4px}.image-list::-webkit-scrollbar-thumb:hover{background:#94a3b8}.image-card{background:#f8f9fa;border-radius:12px;padding:15px;border-left:4px solid #e5e7eb;animation:slideIn .3s ease}.image-card.horizontal{border-left-color:#4f46e5}.image-card.vertical{border-left-color:#ec4899}@keyframes slideIn{0%{opacity:0;transform:translate(-20px)}to{opacity:1;transform:translate(0)}}.card-header{display:flex;align-items:center;gap:12px;margin-bottom:15px}.orientation-tag{padding:4px 12px;border-radius:20px;font-size:.85rem;font-weight:600;white-space:nowrap}.orientation-tag.horizontal{background:linear-gradient(135deg,#4f46e5,#7c3aed);color:#fff}.orientation-tag.vertical{background:linear-gradient(135deg,#ec4899,#f43f5e);color:#fff}.file-name{font-weight:500;color:#374151;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.card-body{display:flex;align-items:center;gap:15px}.image-preview{flex:1;background:#fff;border-radius:8px;padding:10px;display:flex;flex-direction:column;align-items:center}.image-preview img{max-width:100%;max-height:150px;object-fit:contain;border-radius:4px}.image-preview .label{margin-top:8px;font-size:.8rem;color:#6b7280}.image-preview .size{font-size:.85rem;font-weight:600;color:#4f46e5}.arrow-icon{font-size:1.5rem;color:#9ca3af}.card-footer{margin-top:15px;text-align:right}.btn{padding:14px 32px;border-radius:10px;font-size:1rem;font-weight:600;cursor:pointer;border:none;transition:all .3s ease}.btn-primary{background:linear-gradient(135deg,#4f46e5,#7c3aed);color:#fff}.btn-primary:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 8px 20px #4f46e566}.btn-primary:disabled{opacity:.6;cursor:not-allowed}.btn-secondary{background:#f1f5f9;color:#475569}.btn-secondary:hover{background:#e2e8f0}.btn-small{padding:8px 16px;border-radius:6px;font-size:.85rem;font-weight:600;cursor:pointer;border:none;background:linear-gradient(135deg,#4f46e5,#7c3aed);color:#fff;transition:all .2s ease}.btn-small:hover{transform:translateY(-1px);box-shadow:0 4px 12px #4f46e54d}@media (max-width: 768px){.rules,.card-body{flex-direction:column}.arrow-icon{transform:rotate(90deg)}.container{padding:20px}h1{font-size:1.5rem}.stats-bar{gap:15px}.stat-value{font-size:1.5rem}.actions-top{flex-direction:column}.btn{width:100%}}