/* ReimaginePanel */
.root { display: flex; flex-direction: column; gap: var(--space-5); }
.reimagineBtn { align-self: flex-start; }
.presetsSection { display: flex; flex-direction: column; gap: var(--space-4); }
.presetGrid { display: flex; gap: var(--space-3); }
.presetTile { position: relative; display: flex; flex-direction: column; align-items: center; gap: var(--space-2); background: var(--glass-bg); border: var(--glass-border); border-radius: var(--radius-lg); padding: var(--space-3); cursor: pointer; transition: all var(--duration-fast) var(--ease-standard); width: 120px; flex-shrink: 0; }
.presetTile:hover { background: var(--glass-bg-hover); }
.selected { border-color: var(--color-violet) !important; }
.previewImg { width: 100%; height: 72px; border-radius: var(--radius-md); overflow: hidden; background: var(--glass-bg); }
.previewImg img { width: 100%; height: 100%; object-fit: cover; }
.presetLabel { font-size: 10px; font-weight: var(--font-medium); color: var(--color-text-secondary); text-align: center; }
.selectionRing { position: absolute; inset: -2px; border-radius: var(--radius-lg); border: 2px solid var(--color-violet); pointer-events: none; box-shadow: var(--glass-shadow-violet); }
.generateBtn { align-self: flex-start; }
/* Generating */
.generatingState { display: flex; flex-direction: column; gap: var(--space-4); }
.imageFrame { height: 200px; border-radius: var(--radius-xl); }
.generatingText { font-size: var(--text-sm); color: var(--color-text-secondary); margin: 0; }
/* Result */
.resultState { display: flex; flex-direction: column; gap: var(--space-4); }
.resultImage { border-radius: var(--radius-xl); overflow: hidden; }
.resultImage img { width: 100%; height: 200px; object-fit: cover; }
.resultActions { display: flex; gap: var(--space-3); }