body { background: #121212; color: #e0e0e0; font-family: 'Segoe UI', sans-serif; margin: 0; display: flex; flex-direction: column; align-items: center; }
.app-wrapper { padding: 40px; width: 100%; display: flex; justify-content: center; box-sizing: border-box; }
.card { background: #1e1e1e; border: 1px solid #333; padding: 30px; border-radius: 12px; width: 550px; text-align: center; box-shadow: 0 10px 30px rgba(0,0,0,0.5); }
.upload-area { border: 2px dashed #444; padding: 40px; margin: 20px 0; cursor: pointer; transition: 0.3s; border-radius: 8px; }
.upload-area:hover { border-color: #00ffcc; background: #1a2a27; }
.preview-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; margin-top: 20px; display: none; }
.preview-item img { background: #fff; padding: 5px; border-radius: 4px; width: 64px; height: 64px; object-fit: contain; border: 1px solid #444; }
button { background: #00ffcc; color: #000; border: none; padding: 15px 24px; border-radius: 6px; font-weight: bold; cursor: pointer; width: 100%; margin-top: 20px; font-size: 16px; }
button:hover { background: #00e6b8; transform: translateY(-1px); }
button:active { transform: translateY(0); }
code { display: block; background: #000; padding: 15px; text-align: left; font-size: 12px; color: #00ffcc; margin-top: 20px; border-radius: 4px; overflow-x: auto; white-space: pre; border: 1px solid #222; }
.status { margin-top: 10px; font-size: 14px; color: #888; }