:root{color-scheme:light dark}*{box-sizing:border-box}body{margin:0;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,Helvetica Neue,Arial,"Apple Color Emoji","Segoe UI Emoji"}.app{display:flex;flex-direction:column;height:100vh;min-height:600px}.header{flex-shrink:0}.content{flex:1;display:flex;flex-direction:column;padding:8px;overflow:hidden;min-height:0}.main-area{display:flex;gap:12px;flex:1;min-height:0;overflow:hidden}.left-panel{flex:1;display:flex;flex-direction:column;min-width:0;min-height:0}.middle-col{width:280px;display:flex;flex-direction:column;min-width:240px;max-height:100%;overflow-y:auto}.controls-row{background:#1a1a1a;border-radius:8px;flex-shrink:0}.canvas-wrap{display:grid;grid-template-rows:1fr auto;gap:8px;border:1px solid #2a2a2a;border-radius:8px;padding:8px}.canvas-area{position:relative;display:grid;place-items:center;background:#111;max-width:min(70vh,768px);max-height:min(70vh,768px);width:100%}.canvas-bounded{border:1px dashed #444}.canvas-area canvas,.canvas-area img{max-width:100%;max-height:100%}.prompt-row{display:flex;gap:8px}.prompt-row input[type=text]{flex:1;padding:8px;border-radius:6px;border:1px solid #2a2a2a}.sidebar{width:280px;border-left:1px solid #2a2a2a;padding-left:12px;display:flex;flex-direction:column;gap:10px;min-width:250px;overflow:hidden}.thumbs{display:grid;grid-template-columns:1fr;gap:8px;flex:1;overflow-y:auto;padding-right:6px}.thumbs::-webkit-scrollbar,.middle-col::-webkit-scrollbar{width:8px}.thumbs::-webkit-scrollbar-track,.middle-col::-webkit-scrollbar-track{background:#1a1a1a;border-radius:4px}.thumbs::-webkit-scrollbar-thumb,.middle-col::-webkit-scrollbar-thumb{background:#444;border-radius:4px}.thumbs::-webkit-scrollbar-thumb:hover,.middle-col::-webkit-scrollbar-thumb:hover{background:#555}.thumb{cursor:pointer;border:2px solid transparent;border-radius:6px;overflow:hidden}.thumb{width:100%;aspect-ratio:2 / 3;background:#0f0f0f}.thumb img{width:100%;height:100%;object-fit:cover;display:block}.thumb.selected{border-color:#4f46e5}.footer{display:flex;gap:8px;align-items:center;padding:8px 12px;border-top:1px solid #2a2a2a}.btn{padding:8px 12px;border:1px solid #2a2a2a;background:#1d1d1d;color:#fff;border-radius:6px;cursor:pointer}.btn.primary{background:#4f46e5;border-color:#4f46e5}.row{display:flex;gap:8px;align-items:center}.grow{flex:1}.small{font-size:12px;opacity:.75}.label{font-size:12px;opacity:.8}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#0009;display:grid;place-items:center;z-index:200}.overlay-card{background:#0d0d0d;padding:16px 20px;border:1px solid #2a2a2a;border-radius:8px}.status-pill{padding:6px 10px;border-radius:999px;border:1px solid #374151;background:#111827;color:#d1d5db;font-size:12px}.bottombar{position:fixed;left:0;right:0;bottom:0;padding:8px 12px;background:#0a0a0afa;border-top:1px solid #2a2a2a;z-index:100}.prompt-input{flex:1;padding:8px;border-radius:6px;border:1px solid #2a2a2a;background:#0f0f0f;color:#fff}.transform-controls{display:flex;flex-direction:column;gap:8px;padding:8px;background:#1a1a1a;border-radius:4px}.transform-row{display:flex;align-items:center;gap:8px}.scale-slider{flex:1;height:4px;background:#333;border-radius:2px;outline:none;-webkit-appearance:none}.scale-slider::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;background:#4f46e5;border-radius:50%;cursor:pointer}.scale-slider::-moz-range-thumb{width:16px;height:16px;background:#4f46e5;border-radius:50%;cursor:pointer;border:none}.preset-buttons{display:flex;gap:8px;flex-wrap:wrap}.preset-btn{padding:6px 12px;border:1px solid #2a2a2a;background:#1d1d1d;color:#fff;border-radius:6px;cursor:pointer;font-size:12px;transition:all .2s}.preset-btn.active{background:#4f46e5;border-color:#4f46e5}.preset-btn:hover{background:#2a2a2a}.preset-btn.active:hover{background:#6366f1}@media (max-width: 768px){.main-area{flex-direction:column}.left-panel{min-width:unset}.middle-col{width:100%;min-width:unset}.sidebar{width:100%;border-left:none;border-top:1px solid #2a2a2a;padding-left:0;padding-top:12px}.preset-buttons{justify-content:center}.preset-btn{flex:1;text-align:center;min-width:0}}@media (max-height: 600px){.canvas-container-responsive{max-height:min(400px,50vh)!important}}@media (max-width: 480px){.canvas-container-responsive{max-width:95vw!important;max-height:min(400px,50vh)!important}}