:root{--background-color: #ffffff;--text-color: #111827;--text-color-light: #6b7280;--primary-color: #4f46e5;--primary-hover-color: #4338ca;--card-background: #f9fafb;--border-color: #e5e7eb;--border-radius: 12px;--box-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--box-shadow-hover: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);--font-sans: "Inter", sans-serif}[data-theme=dark]{--background-color: #111827;--text-color: #f9fafb;--text-color-light: #9ca3af;--primary-color: #6366f1;--primary-hover-color: #4f46e5;--card-background: #1f2937;--border-color: #374151;--box-shadow-hover: 0 10px 15px -3px rgb(0 0 0 / .2), 0 4px 6px -4px rgb(0 0 0 / .2)}*{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--font-sans);background-color:var(--background-color);color:var(--text-color);transition:background-color .3s ease,color .3s ease}#root{width:100%;min-height:100vh;display:flex;justify-content:center;align-items:flex-start;padding:1rem}main{width:100%;max-width:1200px;display:grid;grid-template-columns:1fr;gap:2rem;padding:1rem 0}@media (min-width: 1024px){#root{align-items:center}main{grid-template-columns:1fr 1fr;gap:4rem;padding:0}.controls-panel{max-height:calc(100vh - 4rem);overflow-y:auto;padding-right:1rem}.result-panel{height:calc(100vh - 4rem)}}.controls-panel{display:flex;flex-direction:column;gap:2rem}.controls-panel::-webkit-scrollbar{width:8px}.controls-panel::-webkit-scrollbar-track{background:transparent}.controls-panel::-webkit-scrollbar-thumb{background:var(--border-color);border-radius:4px}.controls-panel::-webkit-scrollbar-thumb:hover{background:var(--text-color-light)}header{display:flex;justify-content:space-between;align-items:center}.title-group{display:flex;align-items:center;gap:.75rem}h1{font-size:2rem;font-weight:900}.theme-toggle,.info-toggle{background:none;border:none;cursor:pointer;padding:.5rem;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--text-color-light);transition:background-color .2s ease,color .2s ease}.theme-toggle{font-size:1.5rem}.info-toggle{font-size:14px;border:1px solid #000;padding:0 7px;font-weight:400;color:#000;line-height:22px}.theme-toggle:hover,.info-toggle:hover{background-color:var(--border-color);color:var(--text-color)}.card{background-color:var(--card-background);border-radius:var(--border-radius);padding:1.5rem;border:1px solid var(--border-color);transition:background-color .3s ease,border-color .3s ease}.card h2{font-size:1.125rem;font-weight:600;margin-bottom:1rem}.upload-area{border:2px dashed var(--border-color);border-radius:var(--border-radius);padding:2.5rem 1rem;cursor:pointer;transition:border-color .2s ease,background-color .2s ease;color:var(--text-color-light);display:flex;flex-direction:column;justify-content:center;align-items:center}.upload-area:hover,.upload-area.dragging{border-color:var(--primary-color);background-color:color-mix(in srgb,var(--primary-color) 5%,transparent)}.upload-area span{font-size:2rem;display:block;margin-bottom:.5rem}.image-preview{position:relative;margin-top:1rem;text-align:center}.image-preview img{max-width:100%;max-height:200px;border-radius:var(--border-radius)}.remove-image-btn{position:absolute;top:.5rem;right:.5rem;background-color:#ffffffb3;color:var(--text-color);border:1px solid var(--border-color);border-radius:50%;width:2rem;height:2rem;font-size:1rem;cursor:pointer;display:flex;align-items:center;justify-content:center;line-height:1;transition:all .2s ease;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.remove-image-btn:hover{background-color:#fff;transform:scale(1.1)}[data-theme=dark] .remove-image-btn{background-color:#00000080;color:#fff}[data-theme=dark] .remove-image-btn:hover{background-color:#000c}.surface-selector{display:grid;grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:.75rem}.surface-card{aspect-ratio:1 / 1;border-radius:var(--border-radius);border:2px solid var(--border-color);padding:0;background-color:var(--background-color);cursor:pointer;position:relative;transition:all .25s cubic-bezier(.4,0,.2,1);display:flex;flex-direction:column;align-items:center;justify-content:center;height:115px;overflow:hidden}.surface-card:hover{border-color:var(--primary-color);box-shadow:var(--box-shadow-hover)}.surface-card.selected{border-color:var(--primary-color);box-shadow:0 0 0 3px color-mix(in srgb,var(--primary-color) 40%,transparent);transform:translateY(-6px)}.surface-preview-image{height:auto;transition:transform .3s ease;max-height:115px;width:100%;object-fit:cover}.surface-card:hover .surface-preview-image{transform:scale(1.1)}.surface-label{position:absolute;bottom:0;left:0;right:0;background:#00000080;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);color:#fff;font-size:.7rem;font-weight:400;padding:.5rem .25rem;text-align:center;display:flex;align-items:center;justify-content:center;gap:.3rem;transition:background .3s ease}.surface-card.selected .surface-label{background:var(--primary-color)}#api-key-input,.api-key-toggle,.api-key-save,.action-button{width:100%;padding:1rem;font-size:1.125rem;font-weight:600;background-color:var(--primary-color);color:#fff;border:none;border-radius:var(--border-radius);cursor:pointer;transition:background-color .2s ease,transform .2s ease,box-shadow .2s ease;display:flex;align-items:center;justify-content:center;gap:.5rem;margin-top:1rem}.api-key-toggle{font-size:1rem;font-weight:400;margin-top:auto;padding:.5rem 1rem;width:auto}#api-key-input{background-color:transparent;border:1px solid var(--primary-color)}#api-key-input:focus{outline:none;border-color:var(--primary-hover-color);box-shadow:0 0 5px var(--primary-color)}.api-key-save{width:auto}.api-key-toggle:hover:not(:disabled),.action-button:hover:not(:disabled){background-color:var(--primary-hover-color);box-shadow:var(--box-shadow)}.action-button:disabled{background-color:var(--border-color);color:var(--text-color-light);cursor:not-allowed}.result-panel{background-color:var(--card-background);border-radius:var(--border-radius);border:1px solid var(--border-color);display:flex;flex-direction:column;justify-content:center;align-items:center;padding:2rem;min-height:300px;position:relative;overflow:hidden;transition:background-color .3s ease,border-color .3s ease}.result-placeholder{text-align:center;color:var(--text-color-light)}.result-placeholder-icon{font-size:4rem;margin-bottom:1rem;opacity:.5}.result-content{display:flex;flex-direction:column;align-items:center;gap:1.5rem;width:100%;height:100%}.result-content img{max-width:100%;max-height:calc(100vh - 12rem);object-fit:contain;border-radius:var(--border-radius)}.result-description{width:100%;max-width:600px;padding:1rem;font-style:italic;color:var(--text-color-light);background-color:color-mix(in srgb,var(--border-color) 50%,transparent);border-left:4px solid var(--primary-color);border-radius:0 calc(var(--border-radius) / 2) calc(var(--border-radius) / 2) 0;text-align:left}.loader,.loader:after{border-radius:50%;width:4em;height:4em}.loader{font-size:10px;position:relative;text-indent:-9999em;border-top:.5em solid color-mix(in srgb,var(--primary-color) 20%,transparent);border-right:.5em solid color-mix(in srgb,var(--primary-color) 20%,transparent);border-bottom:.5em solid color-mix(in srgb,var(--primary-color) 20%,transparent);border-left:.5em solid var(--primary-color);transform:translateZ(0);animation:load8 1.1s infinite linear}@keyframes load8{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.error{color:#f87171;background-color:#fef2f2;border:1px solid #fecaca;border-radius:var(--border-radius);padding:1rem;width:100%}[data-theme=dark] .error{color:#fecaca;background-color:#450a0a;border-color:#7f1d1d}.modal-backdrop{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#0009;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);display:flex;justify-content:center;align-items:center;z-index:1000;animation:fadeIn .3s ease}.modal-content{background-color:var(--card-background);border:1px solid var(--border-color);border-radius:var(--border-radius);padding:1.5rem 2rem;width:90%;max-width:500px;box-shadow:var(--box-shadow-hover);animation:scaleUp .3s ease}.modal-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.5rem;border-bottom:1px solid var(--border-color);padding-bottom:1rem}.modal-header h2{font-size:1.25rem;font-weight:600}.close-modal-btn{background:none;border:none;cursor:pointer;font-size:2rem;line-height:1;color:var(--text-color-light);transition:color .2s ease}.close-modal-btn:hover{color:var(--text-color)}.modal-body ol{padding-left:1.5rem;display:flex;flex-direction:column;gap:1rem;color:var(--text-color-light)}.modal-body .dinfo{font-size:.75rem;line-height:1rem;text-align:center;margin-top:1rem;padding-top:1rem;border-top:1px solid;--tw-border-opacity: 1;border-color:rgb(229 231 235 / var(--tw-border-opacity, 1));--tw-text-opacity: 1;color:rgb(107 114 128 / var(--tw-text-opacity, 1))}.modal-body li::marker{font-weight:700;color:var(--primary-color)}.modal-body strong{color:var(--text-color);font-weight:600}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes scaleUp{0%{transform:scale(.95);opacity:0}to{transform:scale(1);opacity:1}}