*{box-sizing:border-box;margin:0;padding:0}:root{--primary-dark:#2b2d42;--primary-medium:#8d99ae;--primary-light:#edf2f4;--accent:#fff;--text-primary:#2b2d42;--text-secondary:#8d99ae;--border-light:#e5e7eb;--shadow-light:#2b2d4214;--shadow-medium:#2b2d421f}body{color:#2b2d42;color:var(--text-primary);font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif;line-height:1.6}.App,body{background-color:#edf2f4;background-color:var(--primary-light)}.App{min-height:100vh}.App-header{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background-color:#fff;background-color:var(--accent);border-bottom:1px solid #e5e7eb;border-bottom:1px solid var(--border-light);padding:1.5rem 2rem;position:-webkit-sticky;position:sticky;top:0;z-index:100}.App-header h1{color:#2b2d42;color:var(--primary-dark);font-size:1.75rem;font-weight:700;letter-spacing:-.025em}.App-main{margin:0 auto;max-width:1400px;padding:2rem;width:100%}.top-section{grid-gap:2rem;display:grid;gap:2rem;margin-bottom:2rem;transition:grid-template-columns .3s ease}.top-section.upload-only{grid-template-columns:1fr}.top-section.has-preview{grid-template-columns:1fr 1fr}.bottom-section,.preview-column,.upload-column{background-color:#fff;background-color:var(--accent);border:1px solid #e5e7eb;border:1px solid var(--border-light);border-radius:12px;box-shadow:0 1px 3px #2b2d4214;box-shadow:0 1px 3px var(--shadow-light);padding:2rem}.upload-section{margin-bottom:2rem}.upload-section h2{color:#2b2d42;color:var(--text-primary);font-size:1.25rem;font-weight:600;letter-spacing:-.025em;margin-bottom:1.5rem}.api-key-section{margin-bottom:2rem}.api-key-input{background-color:#fff;background-color:var(--accent);border:1px solid #e5e7eb;border:1px solid var(--border-light);border-radius:8px;color:#2b2d42;color:var(--text-primary);font-family:SF Mono,Monaco,Inconsolata,Roboto Mono,monospace;font-size:.9rem;padding:.875rem 1rem;transition:all .2s ease;width:100%}.api-key-input:focus{border-color:#2b2d42;border-color:var(--primary-dark);box-shadow:0 0 0 3px #2b2d421a;outline:none}.api-key-input::placeholder{color:#8d99ae;color:var(--primary-medium)}.api-key-help{color:#8d99ae;color:var(--text-secondary);font-size:.875rem;line-height:1.5;margin-top:.5rem}.api-key-help a{color:#2b2d42;color:var(--primary-dark);font-weight:500;text-decoration:none}.api-key-help a:hover{text-decoration:underline}.upload-area{background-color:#fafbfc;border:2px dashed #8d99ae;border:2px dashed var(--primary-medium);border-radius:8px;margin-bottom:1.5rem;padding:2rem;text-align:center;transition:all .2s ease}.upload-area:hover{background-color:#f8f9fa;border-color:#2b2d42;border-color:var(--primary-dark)}.file-input{display:none}.upload-label{cursor:pointer;display:block}.upload-placeholder{color:#8d99ae;color:var(--text-secondary)}.upload-placeholder p{font-size:1rem;font-weight:500;margin-bottom:.5rem}.upload-placeholder small{color:#8d99ae;color:var(--primary-medium);font-size:.875rem}.file-selected{text-align:center}.file-selected span{color:#2b2d42;color:var(--text-primary);display:block;font-size:.9rem;font-weight:600;margin-bottom:1rem}.image-preview{border:1px solid #e5e7eb;border:1px solid var(--border-light);border-radius:8px;box-shadow:0 2px 8px #2b2d4214;box-shadow:0 2px 8px var(--shadow-light);margin-top:1rem;max-height:400px;object-fit:contain;width:100%}.preview-container{height:100%;text-align:center;width:100%}.preview-container h2{color:#2b2d42;color:var(--text-primary);font-size:1.25rem;font-weight:600;letter-spacing:-.025em;margin-bottom:1rem}.placeholder-content{align-items:center;color:#8d99ae;color:var(--text-secondary);display:flex;flex-direction:column;height:100%;justify-content:center;min-height:400px;text-align:center}.placeholder-content h2{color:#2b2d42;color:var(--text-primary);font-size:1.25rem;font-weight:600;margin-bottom:1rem}.placeholder-content p{font-size:1rem;line-height:1.6;max-width:300px}.generate-btn{background-color:#2b2d42;background-color:var(--primary-dark);border:none;border-radius:8px;color:#fff;color:var(--accent);cursor:pointer;font-size:.9rem;font-weight:600;letter-spacing:.025em;padding:.875rem 1.5rem;transition:all .2s ease;width:100%}.generate-btn:hover:not(:disabled){background-color:#1a1c2e;box-shadow:0 4px 12px #2b2d421f;box-shadow:0 4px 12px var(--shadow-medium);transform:translateY(-1px)}.generate-btn:disabled{background-color:#8d99ae;background-color:var(--primary-medium);cursor:not-allowed;opacity:.6;transform:none}.download-btn,.preview-btn{border:none;border-radius:6px;cursor:pointer;font-size:.875rem;font-weight:600;letter-spacing:.025em;padding:.625rem 1.25rem;transition:all .2s ease}.download-btn{background-color:#2b2d42;background-color:var(--primary-dark);color:#fff;color:var(--accent)}.download-btn:hover{background-color:#1a1c2e;transform:translateY(-1px)}.preview-btn{background-color:initial;border:1px solid #8d99ae;border:1px solid var(--primary-medium);color:#2b2d42;color:var(--primary-dark)}.preview-btn:hover{background-color:#edf2f4;background-color:var(--primary-light);border-color:#2b2d42;border-color:var(--primary-dark)}.error-message{background-color:#fef2f2;border-left:4px solid #dc2626;border-radius:8px;color:#dc2626;font-size:.9rem;margin-bottom:2rem;padding:1rem}.results-header{align-items:center;display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;margin-bottom:1.5rem}.results-header h2{color:#2b2d42;color:var(--text-primary);font-size:1.25rem;font-weight:600;letter-spacing:-.025em}.action-buttons{display:flex;flex-wrap:wrap;gap:.75rem}.code-section{background-color:#1e1e1e;border:1px solid #e5e7eb;border:1px solid var(--border-light);border-radius:8px;max-height:600px;overflow:hidden;overflow-y:auto}.code-block{background-color:#1e1e1e;color:#e5e7eb;font-family:SF Mono,Monaco,Inconsolata,Roboto Mono,monospace;font-size:.875rem;line-height:1.6;margin:0;min-height:100%;overflow-x:auto;padding:1.5rem}.code-section::-webkit-scrollbar{width:8px}.code-section::-webkit-scrollbar-track{background:#2a2a2a;border-radius:4px}.code-section::-webkit-scrollbar-thumb{background:#8d99ae;background:var(--primary-medium);border-radius:4px}.code-section::-webkit-scrollbar-thumb:hover{background:#2b2d42;background:var(--primary-dark)}.preview-section{border:1px solid #e5e7eb;border:1px solid var(--border-light);border-radius:8px;overflow:hidden}.preview-iframe,.preview-section{background-color:#fff;background-color:var(--accent)}.preview-iframe{border:none;height:600px;width:100%}@media (max-width:1024px){.top-section{gap:1.5rem;grid-template-columns:1fr}.App-main{padding:1.5rem}}@media (max-width:768px){.App-header{padding:1rem 1.5rem}.App-header h1{font-size:1.5rem}.App-main{padding:1rem}.bottom-section,.preview-column,.upload-column{padding:1.5rem}.results-header{align-items:flex-start;flex-direction:column}.action-buttons{justify-content:flex-start;width:100%}.code-section{max-height:300px}.code-block{font-size:.8rem;padding:1rem}.preview-iframe{height:400px}.upload-area{padding:1.5rem}}html{scroll-behavior:smooth}.download-btn:focus,.generate-btn:focus,.preview-btn:focus{outline:2px solid #2b2d42;outline:2px solid var(--primary-dark);outline-offset:2px}.file-input:focus+.upload-label .upload-area{border-color:#2b2d42;border-color:var(--primary-dark);box-shadow:0 0 0 3px #2b2d421a}
/*# sourceMappingURL=main.a243bd06.css.map*/