:root{--color-primary: #0066cc;--color-primary-hover: #0052a3;--color-secondary: #f0f0f0;--color-success: #28a745;--color-error: #dc3545;--color-warning: #ffc107;--color-text: #333;--color-text-light: #666;--color-border: #ddd;--border-radius: 8px;--spacing-xs: .25rem;--spacing-sm: .5rem;--spacing-md: 1rem;--spacing-lg: 1.5rem;--spacing-xl: 2rem;--font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;--box-shadow: 0 2px 4px rgba(0, 0, 0, .1);--transition: all .3s ease}*{margin:0;padding:0;box-sizing:border-box}body{font-family:var(--font-family);color:var(--color-text);background-color:#f9f9f9;line-height:1.6;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.app{min-height:100vh;display:flex;flex-direction:column}.app-header{background:#fff;padding:var(--spacing-lg) var(--spacing-md);box-shadow:var(--box-shadow);text-align:center}.app-header h1{font-size:2rem;color:var(--color-primary);margin:0}.tagline{color:var(--color-text-light);margin:var(--spacing-xs) 0 0;font-size:.95rem}.app-main{flex:1;max-width:800px;width:100%;margin:0 auto;padding:var(--spacing-lg) var(--spacing-md)}.app-footer{background:#fff;padding:var(--spacing-md);border-top:1px solid var(--color-border);text-align:center}.service-status{display:flex;gap:var(--spacing-lg);justify-content:center;font-size:.875rem}.service-indicator{display:flex;align-items:center;gap:var(--spacing-xs)}.service-indicator:before{content:"";width:8px;height:8px;border-radius:50%;background:var(--color-error)}.service-indicator.online:before{background:var(--color-success)}.service-indicator.offline:before{background:var(--color-error)}.status-message{display:flex;align-items:center;gap:var(--spacing-sm);padding:var(--spacing-md);margin-bottom:var(--spacing-lg);border-radius:var(--border-radius);transition:var(--transition)}.status-success{background:#d4edda;color:#155724;border:1px solid #c3e6cb}.status-error{background:#f8d7da;color:#721c24;border:1px solid #f5c6cb}.status-warning{background:#fff3cd;color:#856404;border:1px solid #ffeaa7}.status-loading{background:#cfe2ff;color:#084298;border:1px solid #b6d4fe}.status-icon{font-size:1.25rem;font-weight:700}.status-text{flex:1}.dismiss-button{background:none;border:none;font-size:1.5rem;padding:0 var(--spacing-sm);color:inherit;opacity:.5;cursor:pointer;transition:opacity .2s}.dismiss-button:hover{opacity:1}.prompt-form{background:#fff;padding:var(--spacing-lg);border-radius:var(--border-radius);box-shadow:var(--box-shadow)}.form-group{margin-bottom:var(--spacing-lg)}.form-label{display:block;margin-bottom:var(--spacing-sm);font-weight:500;color:var(--color-text)}.prompt-input{width:100%;padding:var(--spacing-sm);font-size:1rem;border:2px solid var(--color-border);border-radius:var(--border-radius);font-family:inherit;resize:vertical;transition:border-color .2s}.prompt-input:focus{outline:none;border-color:var(--color-primary)}.prompt-input.error{border-color:var(--color-error)}.prompt-input:disabled{background:var(--color-secondary);cursor:not-allowed}.form-helpers{display:flex;justify-content:space-between;margin-top:var(--spacing-xs);font-size:.875rem}.helper-text{color:var(--color-text-light)}.error-text{color:var(--color-error)}.char-counter{color:var(--color-text-light)}.char-counter.warning{color:var(--color-warning)}.generate-button,.primary-button,.secondary-button{display:inline-flex;align-items:center;justify-content:center;gap:var(--spacing-sm);padding:var(--spacing-sm) var(--spacing-lg);font-size:1rem;font-weight:500;border:none;border-radius:var(--border-radius);cursor:pointer;transition:var(--transition);min-height:44px;min-width:120px}.generate-button,.primary-button{background:var(--color-primary);color:#fff}.generate-button:hover:not(:disabled),.primary-button:hover:not(:disabled){background:var(--color-primary-hover);transform:translateY(-1px);box-shadow:0 4px 8px #00000026}.secondary-button{background:var(--color-secondary);color:var(--color-text)}.secondary-button:hover:not(:disabled){background:#e0e0e0}button:disabled{opacity:.6;cursor:not-allowed;transform:none!important}.regenerate-button{background-color:#6c757d;border:1px solid #5a6268;color:#fff;position:relative}.regenerate-button:hover:not(:disabled){background-color:#5a6268;border-color:#545b62;transform:translateY(-1px);box-shadow:0 4px 8px #00000026}.regenerate-button:active:not(:disabled){background-color:#545b62;transform:translateY(0)}.regenerate-button:disabled{background-color:#6c757d;border-color:#5a6268;opacity:.6;cursor:not-allowed}.icon-regenerate{font-size:1.1em;margin-right:.25em}.form-group{position:relative;display:flex;flex-direction:column}.form-group .textarea-container{position:relative;display:flex;align-items:flex-start;gap:var(--spacing-sm)}.form-group .prompt-input{flex:1;min-height:120px;resize:vertical}.voice-input-button{background:var(--color-primary);color:#fff;border:none;border-radius:50%;width:44px;height:44px;min-width:44px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:var(--transition);align-self:flex-start;margin-top:var(--spacing-sm)}.voice-input-button:hover:not(:disabled){background:var(--color-primary-hover);transform:scale(1.1)}.voice-input-button--recording{background:#dc3545;animation:pulse 1.5s infinite}.voice-input-button--processing{background:#ffc107;cursor:not-allowed}.voice-input-button:disabled{opacity:.6;cursor:not-allowed}.voice-input-button svg{width:20px;height:20px;fill:currentColor}.processing-icon .processing-circle{animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes pulse{0%{box-shadow:0 0 #dc3545b3}70%{box-shadow:0 0 0 10px #dc354500}to{box-shadow:0 0 #dc354500}}@media (max-width: 768px){.voice-input-button{width:48px;height:48px;min-width:48px}.voice-input-button svg{width:22px;height:22px}}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.image-display{background:#fff;padding:var(--spacing-lg);border-radius:var(--border-radius);box-shadow:var(--box-shadow)}.image-container{position:relative;width:100%;max-width:600px;margin:0 auto var(--spacing-lg);background:var(--color-secondary);border-radius:var(--border-radius);overflow:hidden;min-height:300px;display:flex;align-items:center;justify-content:center}.image-loading,.image-error{text-align:center;padding:var(--spacing-xl)}.generated-image{width:100%;height:auto;display:block;border-radius:var(--border-radius)}.image-prompt{margin-bottom:var(--spacing-lg);padding:var(--spacing-md);background:var(--color-secondary);border-radius:var(--border-radius)}.prompt-label{font-size:.875rem;color:var(--color-text-light);margin:0 0 var(--spacing-xs)}.prompt-text{font-style:italic;color:var(--color-text);margin:0}.button-group{display:flex;gap:var(--spacing-md);justify-content:center;flex-wrap:wrap}.spinner{display:inline-block;width:1em;height:1em;border:2px solid transparent;border-top-color:currentColor;border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}@media (max-width: 768px){.app-header h1{font-size:1.5rem}.app-main,.prompt-form,.image-display{padding:var(--spacing-md)}.button-group{flex-direction:column;width:100%}.generate-button,.primary-button,.secondary-button,.regenerate-button{width:100%}.service-status{font-size:.75rem;gap:var(--spacing-md)}}@media (pointer: coarse){.prompt-input{font-size:16px}button{min-height:48px}}