.ai-layout{gap:var(--sp-xl);padding:var(--sp-xl);grid-template-columns:1fr 1fr;display:grid}.ai-input-pane,.ai-output-pane{gap:var(--sp-md);flex-direction:column;display:flex}.dropzone{border:2px dashed var(--rule);border-radius:var(--radius);text-align:center;cursor:pointer;background:var(--bg-card);min-height:200px;transition:all var(--dur-fast);color:var(--ink-2);flex-direction:column;flex:1;justify-content:center;align-items:center;display:flex}.dropzone.dragover{border-color:var(--accent);background:color-mix(in srgb, var(--accent) 5%, transparent);color:var(--accent-text)}.dropzone-icon{margin-bottom:var(--sp-md);color:currentColor}.dropzone p{margin-bottom:var(--sp-xs);color:var(--ink);font-weight:500}.dropzone-sub{font-size:var(--fs-sm);color:var(--ink-3)}.preview-wrapper,.ai-output-box{background:var(--bg-card);border:1px solid var(--rule);border-radius:var(--radius);min-height:400px;padding:var(--sp-md);flex:1;justify-content:center;align-items:center;display:flex;position:relative;overflow:hidden}.image-preview{object-fit:contain;border-radius:var(--radius);max-width:100%;max-height:100%}.pane-meta{font-size:var(--fs-sm);color:var(--ink-2);margin:0;line-height:1.5}.pane-meta-output{min-height:42px}.result-wrapper canvas{object-fit:contain;border-radius:var(--radius);max-width:100%;max-height:100%}.ai-controls{padding-top:var(--sp-md);justify-content:space-between;align-items:center;display:flex}.output-toolbar{justify-content:space-between;align-items:center;gap:var(--sp-md);padding-top:var(--sp-sm);flex-wrap:wrap;display:flex}.visualization-controls{gap:var(--sp-sm);flex-wrap:wrap;display:flex}.visualization-controls .btn.active,.visualization-controls .btn[aria-pressed=true]{background:var(--accent);color:var(--accent-ink);border-color:#0000}.spin{animation:1s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}@media (width<=900px){.ai-layout{padding:var(--sp-md);grid-template-columns:1fr}.output-toolbar{align-items:stretch}}