:root{--color-bg: #0f0f12;--color-surface: #1a1a1f;--color-border: #2d2d35;--color-text: #e8e8ed;--color-text-muted: #8b8b9a;--color-accent: #6c5ce7;--color-accent-hover: #7d6ef7;--color-error: #e74c3c;--font-sans: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;--radius: 8px;--space-xs: .25rem;--space-sm: .5rem;--space-md: 1rem;--space-lg: 1.5rem;--space-xl: 2rem;--max-width: 720px}*{box-sizing:border-box}body{margin:0;font-family:var(--font-sans);font-size:16px;line-height:1.5;color:var(--color-text);background:var(--color-bg);min-height:100vh}.app{min-height:100vh;padding:var(--space-md)}@media (min-width: 640px){.app{padding:var(--space-lg)}}.page{max-width:var(--max-width);margin:0 auto;padding:var(--space-xl) 0}.page h1{margin:0 0 var(--space-lg);font-size:1.75rem;font-weight:600}@media (min-width: 640px){.page h1{font-size:2rem}}.page p{margin:0;color:var(--color-text-muted)}.page__subtitle{margin-bottom:var(--space-lg)}.page--login{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:80vh;text-align:center}.login-form{width:100%;max-width:320px;text-align:left}.login-form__label{display:block;margin-bottom:var(--space-xs);font-size:.875rem;color:var(--color-text-muted)}.login-form__input{width:100%;padding:var(--space-sm) var(--space-md);margin-bottom:var(--space-md);font:inherit;font-size:1rem;color:var(--color-text);background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius);outline:none}.login-form__input:focus{border-color:var(--color-accent)}.login-form__input::placeholder{color:var(--color-text-muted)}.login-form__error{margin:0 0 var(--space-md);font-size:.875rem;color:var(--color-error)}.login-form__submit{width:100%;padding:var(--space-sm) var(--space-lg);font:inherit;font-size:1rem;font-weight:500;color:#fff;background:var(--color-accent);border:none;border-radius:var(--radius);cursor:pointer}.login-form__submit:hover:not(:disabled){background:var(--color-accent-hover)}.login-form__submit:disabled{opacity:.7;cursor:not-allowed}.page--generate{min-height:80vh}.generate-form{margin-top:var(--space-lg);max-width:560px}.generate-form__label{display:block;margin-bottom:var(--space-xs);font-size:.875rem;color:var(--color-text-muted)}.generate-form__required{color:var(--color-error)}.generate-form__textarea{width:100%;min-height:120px;padding:var(--space-sm) var(--space-md);margin-bottom:var(--space-md);font:inherit;font-size:1rem;line-height:1.5;color:var(--color-text);background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius);resize:vertical;outline:none}.generate-form__textarea:focus{border-color:var(--color-accent)}.generate-form__textarea::placeholder{color:var(--color-text-muted)}.generate-form__error{margin:0 0 var(--space-md);font-size:.875rem;color:var(--color-error)}.generate-form__submit{padding:var(--space-sm) var(--space-lg);font:inherit;font-size:1rem;font-weight:500;color:#fff;background:var(--color-accent);border:none;border-radius:var(--radius);cursor:pointer}.generate-form__submit:hover:not(:disabled){background:var(--color-accent-hover)}.generate-form__submit:disabled{opacity:.5;cursor:not-allowed}.aspect-ratio-select{margin:var(--space-lg) 0}.aspect-ratio-select__input{width:100%;max-width:280px;padding:var(--space-sm) var(--space-md);font:inherit;font-size:1rem;color:var(--color-text);background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius);outline:none}.aspect-ratio-select__input:focus{border-color:var(--color-accent)}.model-select{margin:var(--space-lg) 0}.model-select__input{width:100%;max-width:400px;padding:var(--space-sm) var(--space-md);font:inherit;font-size:1rem;color:var(--color-text);background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius);outline:none}.model-select__input:focus{border-color:var(--color-accent)}.reference-upload{margin:var(--space-lg) 0}.reference-upload__list{display:flex;flex-wrap:wrap;gap:var(--space-md);align-items:flex-start}.reference-upload__item{position:relative;flex-shrink:0}.reference-upload__preview{display:block;width:80px;height:80px;object-fit:cover;border-radius:var(--radius);border:1px solid var(--color-border);background:var(--color-surface)}.reference-upload__remove{position:absolute;top:-6px;right:-6px;width:24px;height:24px;padding:0;font-size:1.25rem;line-height:1;color:var(--color-text);background:var(--color-surface);border:1px solid var(--color-border);border-radius:50%;cursor:pointer}.reference-upload__remove:hover{background:var(--color-error);border-color:var(--color-error);color:#fff}.reference-upload__add{display:flex;align-items:center;justify-content:center;width:80px;height:80px;border:1px dashed var(--color-border);border-radius:var(--radius);cursor:pointer;background:var(--color-surface)}.reference-upload__add:hover{border-color:var(--color-accent);color:var(--color-accent)}.reference-upload__input{position:absolute;width:0;height:0;opacity:0}.reference-upload__add-label{font-size:.875rem;color:var(--color-text-muted)}.generate-result{margin-top:var(--space-xl);padding:var(--space-lg);border-radius:var(--radius);border:1px solid var(--color-border);background:var(--color-surface)}.generate-result--error{border-color:var(--color-error);color:var(--color-error)}.generate-result--error p{margin:0}.generate-result__label{margin:0 0 var(--space-md);font-size:.875rem;color:var(--color-text-muted)}.generate-result__image{display:block;max-width:100%;height:auto;border-radius:var(--radius)}.generate-history{margin-top:var(--space-xl);padding-top:var(--space-xl);border-top:1px solid var(--color-border)}.generate-history__title{margin:0 0 var(--space-md);font-size:1.125rem;font-weight:600}.generate-history__empty{margin:0;color:var(--color-text-muted);font-size:.875rem}.generate-history__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--space-md)}.generate-history__item{display:flex;align-items:center;gap:var(--space-md);padding:var(--space-sm);background:var(--color-surface);border-radius:var(--radius);border:1px solid var(--color-border)}.generate-history__thumb{width:64px;height:64px;object-fit:cover;border-radius:var(--radius);flex-shrink:0}.generate-history__meta{flex:1;min-width:0}.generate-history__prompt,.generate-history__model{margin:0;font-size:.875rem}.generate-history__model{color:var(--color-text-muted);margin-top:var(--space-xs)}.generate-history__delete{flex-shrink:0;width:32px;height:32px;padding:0;font-size:1.25rem;line-height:1;color:var(--color-text-muted);background:transparent;border:1px solid var(--color-border);border-radius:var(--radius);cursor:pointer}.generate-history__delete:hover{color:var(--color-error);border-color:var(--color-error)}