:root{--bg-primary: #1a1a1a;--bg-secondary: #2d2d2d;--bg-gradient: #131313;--text-primary: #e9ecef;--text-secondary: #adb5bd;--text-light: #ffffff;--border-color: #495057;--shadow: 0 20px 40px rgba(0,0,0,.3);--input-bg: #2d2d2d;--input-border: #495057;--input-focus: #667eea;--status-loading-bg: #3d2c02;--status-loading-color: #ffd43b;--status-loading-border: #664d03;--status-success-bg: #0f5132;--status-success-color: #75b798;--status-success-border: #146c43;--status-error-bg: #4c0d0d;--status-error-color: #ea868f;--status-error-border: #842029;--spinner-border: #2d2d2d;--spinner-top: #667eea;--bg-button: #33606a;--bg-button-disabled: #adb5bd}[data-theme=light]{--bg-primary: #ffffff;--bg-secondary: #f8f9fa;--bg-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);--text-primary: #495057;--text-secondary: #6c757d;--text-light: #ffffff;--border-color: #e9ecef;--shadow: 0 20px 40px rgba(0,0,0,.1);--input-bg: #ffffff;--input-border: #e9ecef;--input-focus: #667eea;--status-loading-bg: #fff3cd;--status-loading-color: #856404;--status-loading-border: #ffeaa7;--status-success-bg: #d4edda;--status-success-color: #155724;--status-success-border: #c3e6cb;--status-error-bg: #f8d7da;--status-error-color: #721c24;--status-error-border: #f5c6cb;--spinner-border: #f3f3f3;--spinner-top: #667eea;--bg-button: #33606a;--bg-button-disabled: #adb5bd}*{margin:0;padding:0;box-sizing:border-box;transition:background-color .3s ease,color .3s ease,border-color .3s ease}body{font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;background:var(--bg-gradient);min-height:100vh;color:var(--text-primary)}#root{min-height:100vh}.container{max-width:1200px;margin:20px auto;background:var(--bg-primary);border-radius:15px;box-shadow:var(--shadow);overflow:hidden;transition:all .3s ease}.header{background:var(--bg-gradient);color:var(--text-light);padding:30px;text-align:center}.header h1{font-size:2.5em;margin-bottom:10px}.header p{font-size:1.1em;opacity:.9}.main-content{display:grid;grid-template-columns:1fr 1fr;gap:30px;padding:30px}.form-section{background:var(--bg-secondary);padding:25px;border-radius:10px;border:1px solid var(--border-color);transition:all .3s ease}.form-section h2{color:var(--text-primary);margin-bottom:20px;font-size:1.5em}.form-group{margin-bottom:20px}.form-group label{display:block;margin-bottom:8px;font-weight:600;color:var(--text-primary)}.form-group input,.form-group textarea,.form-group select{width:100%;padding:12px;border:2px solid var(--input-border);border-radius:8px;font-size:14px;background:var(--input-bg);color:var(--text-primary);transition:all .3s ease}.form-group input:focus,.form-group textarea:focus,.form-group select:focus{outline:none;border-color:var(--input-focus);box-shadow:0 0 0 3px #667eea1a}.form-group textarea{resize:vertical;min-height:100px}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:15px}.btn{background:var(--bg-button);color:var(--text-light);border:none;padding:15px 30px;border-radius:8px;font-size:16px;font-weight:600;cursor:pointer;transition:transform .2s,box-shadow .2s;width:100%}.btn:hover{transform:translateY(-2px);box-shadow:0 10px 20px #667eea4d}.btn:disabled{background:var(--bg-button-disabled);cursor:not-allowed;transform:none;box-shadow:none}.btn-secondary{background:#6c757d}.btn-secondary:hover{box-shadow:0 10px 20px #6c757d4d}.results-section{background:var(--bg-secondary);padding:25px;border-radius:10px;border:1px solid var(--border-color);transition:all .3s ease}.results-section h2{color:var(--text-primary);margin-bottom:20px;font-size:1.5em}.status{padding:15px;border-radius:8px;margin-bottom:20px;font-weight:600}.status.loading{background:var(--status-loading-bg);color:var(--status-loading-color);border:1px solid var(--status-loading-border)}.status.success{background:var(--status-success-bg);color:var(--status-success-color);border:1px solid var(--status-success-border)}.status.error{background:var(--status-error-bg);color:var(--status-error-color);border:1px solid var(--status-error-border)}.image-container{text-align:center;margin-top:20px}.generated-image{max-width:100%;max-height:400px;border-radius:10px;box-shadow:0 10px 30px #0003;margin-bottom:15px}.download-btn{background:#28a745;color:#fff;border:none;padding:10px 20px;border-radius:5px;cursor:pointer;font-weight:600;margin-top:10px;transition:background .3s ease}.download-btn:hover{background:#218838}.parameters-display{background:var(--bg-primary);padding:15px;border-radius:8px;border:1px solid var(--border-color);margin-top:15px;font-family:monospace;font-size:12px;color:var(--text-primary);transition:all .3s ease}.spinner{border:4px solid var(--spinner-border);border-top:4px solid var(--spinner-top);border-radius:50%;width:30px;height:30px;animation:spin 1s linear infinite;margin:0 auto 15px}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.auth-container{max-width:400px;margin:50px auto;background:var(--bg-primary);border-radius:15px;box-shadow:var(--shadow);overflow:hidden;transition:all .3s ease}.auth-header{background:var(--bg-gradient);color:var(--text-light);padding:30px;text-align:center}.auth-header h1{font-size:2em;margin-bottom:10px}.auth-form{padding:30px}.auth-form .form-group{margin-bottom:20px}.auth-form .btn{margin-top:10px}.auth-links{text-align:center;margin-top:20px;padding:20px;border-top:1px solid var(--border-color)}.auth-links a{color:var(--input-focus);text-decoration:none;font-weight:600}.auth-links a:hover{text-decoration:underline}.navbar{background:var(--bg-primary);border-bottom:1px solid var(--border-color);padding:15px 30px;display:flex;justify-content:space-between;align-items:center;box-shadow:0 2px 10px #0000001a}.navbar-brand{font-size:1.5em;font-weight:700;color:var(--text-primary);text-decoration:none}.navbar-nav{display:flex;gap:20px;align-items:center}.navbar-nav a{color:var(--text-primary);text-decoration:none;font-weight:500;padding:8px 16px;border-radius:5px;transition:background .3s ease}.navbar-nav a:hover{background:var(--bg-secondary)}.navbar-nav .btn{width:auto;padding:8px 16px;font-size:14px}@media (max-width: 768px){.main-content,.form-row{grid-template-columns:1fr}.header h1{font-size:2em}.navbar{flex-direction:column;gap:15px}.navbar-nav{width:100%;justify-content:center}}