*{margin:0;padding:0;box-sizing:border-box}:root{--color-bg: #f8f8f6;--color-surface: #ffffff;--color-border: #e8e8e6;--color-text: #18181b;--color-text-secondary: #71717a;--color-text-muted: #a1a1aa;--color-accent: #18181b;--color-accent-hover: #27272a;--color-accent-light: #f4f4f5;--radius-sm: 8px;--radius-md: 10px;--radius-lg: 14px}body{font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif;line-height:1.5;color:var(--color-text);background:var(--color-bg);min-height:100vh}.app{max-width:1200px;margin:0 auto;padding:32px 24px}.upload-zone{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:calc(100vh - 200px);border-radius:var(--radius-lg)}.upload-zone.hidden{display:none}.preview-container{display:flex;flex-direction:column;align-items:center;gap:24px;padding:32px;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);box-shadow:0 1px 2px #0000000a;transition:border-color .2s,box-shadow .2s;width:100%;max-width:560px}.preview-container.dragover{border-color:var(--color-text-muted);box-shadow:0 4px 12px #00000014}.preview-container img{max-width:100%;max-height:480px;border-radius:var(--radius-sm);object-fit:contain}.generate-btn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;padding:16px 24px;background:var(--color-accent);color:#fff;border:none;border-radius:var(--radius-sm);font-size:16px;font-weight:500;letter-spacing:-.01em;cursor:pointer;transition:background .15s,transform .1s}.generate-btn:hover{background:var(--color-accent-hover)}.generate-btn:active{transform:scale(.98)}.generate-btn svg{flex-shrink:0;width:18px;height:18px}.upload-own-btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:14px 20px;background:transparent;color:var(--color-text);border:1px solid var(--color-border);border-radius:var(--radius-sm);font-size:15px;font-weight:500;cursor:pointer;transition:border-color .15s,background .15s}.upload-own-btn:hover{border-color:var(--color-text-muted);background:var(--color-accent-light)}.upload-own-btn svg{flex-shrink:0}.upload-zone input{display:none}.back-btn{display:none;position:fixed;top:20px;left:20px;width:40px;height:40px;align-items:center;justify-content:center;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-sm);cursor:pointer;transition:background .15s,border-color .15s;z-index:100;box-shadow:0 1px 3px #0000000f}.back-btn.visible{display:flex}.back-btn:hover{background:var(--color-accent-light);border-color:var(--color-text-muted)}.back-btn svg{color:var(--color-text);width:18px;height:18px}.gallery{display:flex;flex-direction:column;gap:16px;max-width:600px;margin:0 auto}.gallery:empty{display:none}.gallery-item{position:relative;border-radius:var(--radius-md);overflow:hidden;background:var(--color-surface);border:1px solid var(--color-border)}.gallery-item img{width:100%;height:auto;display:block}.gallery-label{position:absolute;top:10px;left:10px;padding:5px 10px;background:#18181bbf;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);color:#fff;font-size:11px;font-weight:500;border-radius:6px;letter-spacing:.02em;z-index:10}.gallery-item .download-btn{position:absolute;bottom:10px;right:10px;display:flex;align-items:center;justify-content:center;width:32px;height:32px;background:#ffffffe6;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);border-radius:6px;color:var(--color-text);text-decoration:none;opacity:0;transition:opacity .15s,background .15s}.gallery-item:hover .download-btn{opacity:1}.gallery-item .download-btn:hover{background:#fff}.gallery-item.loading{aspect-ratio:1 / 1;background:linear-gradient(90deg,#f4f4f5 25%,#e4e4e7,#f4f4f5 75%);background-size:200% 100%;animation:shimmer 1.8s ease-in-out infinite}.gallery-item.loading .gallery-label{background:#18181b66}@keyframes shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}.error-message{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:14px;padding:28px 32px;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);box-shadow:0 8px 24px #0000001a;text-align:center;z-index:200}.error-message svg{color:var(--color-text-secondary);width:24px;height:24px}.error-message p{font-size:14px;color:var(--color-text);max-width:260px;line-height:1.5}.error-message .error-dismiss{padding:10px 20px;background:var(--color-accent);color:#fff;border:none;border-radius:var(--radius-sm);font-size:13px;font-weight:500;cursor:pointer;transition:background .15s}.error-message .error-dismiss:hover{background:var(--color-accent-hover)}.progress-indicator{position:fixed;bottom:20px;right:20px;display:none;flex-direction:column;gap:8px;padding:14px 18px;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-sm);box-shadow:0 2px 8px #00000014;z-index:100;min-width:180px}.progress-indicator.visible{display:flex}.progress-text{font-size:12px;font-weight:500;color:var(--color-text-secondary)}.progress-bar{width:100%;height:4px;background:var(--color-accent-light);border-radius:2px;overflow:hidden}.progress-fill{height:100%;width:0%;background:var(--color-accent);border-radius:2px;transition:width .3s ease-out}@media (max-width: 640px){.app{padding:16px}.upload-zone{min-height:calc(100vh - 140px)}.preview-container{padding:20px;gap:20px}.preview-container img{max-height:320px}.generate-btn{padding:14px 20px;font-size:15px}.upload-own-btn{padding:12px 16px;font-size:14px}.gallery{gap:12px}.back-btn{top:16px;left:16px}.progress-indicator{bottom:16px;right:16px;left:16px;min-width:unset}}