:root{--bg-color: #121212;--card-bg: #1E1E1E;--surface-hover: #2A2A2A;--accent-primary: #CCFF00;--accent-secondary: #E0B0FF;--accent-tertiary: #4D4DFF;--text-main: #FFFFFF;--text-muted: rgba(255, 255, 255, .6);--font-display: "Outfit", "Inter", sans-serif;--radius-pill: 999px;--radius-card: 24px}*{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--font-display);background-color:var(--bg-color);color:var(--text-main);height:100vh;overflow:hidden;display:flex;justify-content:center;align-items:center}#app{width:100%;height:100%}.dopamine-split{display:grid;grid-template-columns:1.5fr 1fr;height:100vh;width:100%}@media(max-width:1024px){.dopamine-split{grid-template-columns:1fr;grid-template-rows:1fr auto;overflow-y:auto}.canvas-zone{min-height:50vh}}.canvas-zone{background-color:#000;border-right:1px solid rgba(255,255,255,.1);display:flex;justify-content:center;align-items:center;position:relative;overflow:hidden;background-image:radial-gradient(#333 1px,transparent 1px);background-size:20px 20px}.canvas-placeholder,.preview-stage{width:100%;height:100%;display:flex;justify-content:center;align-items:center}.upload-trigger{text-align:center;cursor:pointer;transition:transform .3s cubic-bezier(.34,1.56,.64,1)}.upload-trigger:hover{transform:scale(1.1) rotate(2deg)}.icon-upload{font-size:4rem;margin-bottom:1rem;filter:drop-shadow(0 0 10px var(--accent-primary))}.upload-text{font-size:1.5rem;font-weight:700;line-height:1.2}#image-preview{max-width:90%;max-height:90%;border-radius:var(--radius-card);box-shadow:0 20px 50px #00000080;object-fit:contain}.result-badge{position:absolute;top:2rem;background:var(--accent-primary);color:#000;padding:.5rem 1.5rem;border-radius:var(--radius-pill);font-weight:800;text-transform:uppercase;letter-spacing:1px;animation:popIn .5s cubic-bezier(.34,1.56,.64,1);z-index:10}.control-deck{padding:2rem;display:flex;flex-direction:column;gap:2rem;background:var(--bg-color);overflow-y:auto}.app-header h1{font-size:2.5rem;font-weight:900;letter-spacing:-1px}.highlight{color:transparent;background:linear-gradient(90deg,var(--accent-primary),var(--accent-secondary));-webkit-background-clip:text;background-clip:text}.subtitle{color:var(--text-muted);font-size:1rem}.style-picker h3{margin-bottom:1rem;font-size:.9rem;text-transform:uppercase;letter-spacing:1px;color:var(--text-muted)}.bento-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:.8rem}.style-card{background:var(--card-bg);border-radius:16px;padding:1rem .5rem;text-align:center;cursor:pointer;border:2px solid transparent;transition:all .3s cubic-bezier(.34,1.56,.64,1);display:flex;flex-direction:column;align-items:center;justify-content:center;aspect-ratio:1}.style-card:hover{background:var(--surface-hover);transform:translateY(-5px) scale(1.05);box-shadow:0 10px 20px #0000004d}.style-card.selected{border-color:var(--accent-primary);background:#ccff001a;box-shadow:0 0 15px #ccff004d}.style-emoji{font-size:2rem;margin-bottom:.5rem}.style-name{font-size:.8rem;font-weight:600}.action-dock{margin-top:auto;display:flex;gap:1rem}.pill-btn{border:none;font-family:var(--font-display);border-radius:var(--radius-pill);cursor:pointer;transition:transform .2s}.pill-btn:hover:not(:disabled){transform:scale(1.05)}.pill-btn:active:not(:disabled){transform:scale(.95)}.primary-action{flex:1;background:linear-gradient(135deg,var(--accent-primary),#A6FF00);color:#000;font-size:1.2rem;font-weight:900;padding:1.2rem;display:flex;justify-content:center;align-items:center;gap:.5rem}.primary-action:disabled{background:#333;color:#666;cursor:not-allowed}.secondary-action{width:60px;background:var(--card-bg);border:2px solid var(--accent-secondary);color:var(--accent-secondary);font-size:1.5rem;display:flex;align-items:center;justify-content:center}.hidden{display:none!important}.icon-btn{position:absolute;top:1rem;right:1rem;background:#000000b3;color:#fff;border:none;border-radius:50%;width:40px;height:40px;cursor:pointer;font-size:1.2rem;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);transition:all .2s}.icon-btn:hover{background:red;transform:rotate(90deg)}@keyframes popIn{0%{opacity:0;transform:scale(.5)}to{opacity:1;transform:scale(1)}}@keyframes spin{to{transform:rotate(360deg)}}.loader{width:20px;height:20px;border:3px solid rgba(0,0,0,.2);border-top-color:#000;border-radius:50%;animation:spin .8s linear infinite}.model-selection{margin-top:1.5rem}.model-selection h3{margin-bottom:.8rem;font-size:.9rem;text-transform:uppercase;letter-spacing:1px;color:var(--text-muted)}.model-options{display:flex;gap:1rem}.model-option{flex:1;position:relative;cursor:pointer}.model-option input{position:absolute;opacity:0;cursor:pointer}.model-option .model-card{display:flex;align-items:center;gap:.8rem;padding:1rem;background:var(--card-bg);border-radius:16px;border:2px solid transparent;transition:all .3s cubic-bezier(.34,1.56,.64,1);color:var(--text-muted)}.model-option input:checked+.model-card{border-color:var(--accent-secondary);background:#e0b0ff1a;color:var(--text-main);box-shadow:0 0 15px #e0b0ff33}.model-option .model-icon{font-size:1.5rem}.model-option .model-name{font-weight:600;font-size:.95rem}
