:root{--bg-color: #f4f7f9;--card-bg: #ffffff;--text-color: #34495e;--primary-color: #f1c40f;--border-color: #e0e6ed;--shadow-color: rgba(0, 0, 0, .08);--font-family: "Be Vietnam Pro", sans-serif}*{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--font-family);background-color:var(--bg-color);color:var(--text-color);line-height:1.6;display:flex;flex-direction:column;height:100vh;overflow:hidden}header{display:flex;justify-content:space-between;align-items:center;padding:1rem 2rem;background-color:var(--card-bg);border-bottom:1px solid var(--border-color);box-shadow:0 2px 4px var(--shadow-color);z-index:10}header h1{font-size:1.5rem;color:var(--text-color)}main{flex-grow:1;display:flex;overflow:hidden}#editor-container{flex-grow:1;position:relative;padding:2rem;overflow:hidden;min-width:300px}#connector-svg{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:0}.node{position:absolute;width:280px;background-color:var(--card-bg);border-radius:12px;box-shadow:0 4px 12px var(--shadow-color);border:1px solid var(--border-color);z-index:1;cursor:move;transition:box-shadow .2s ease}.node:hover{box-shadow:0 8px 24px #0000001f}.node-header{display:flex;align-items:center;gap:.75rem;padding:.75rem 1rem;border-bottom:1px solid var(--border-color);border-top:4px solid var(--node-color);border-top-left-radius:12px;border-top-right-radius:12px}.node-header h2{font-size:1rem;font-weight:500}.node-icon{font-size:1.25rem}.node-content{padding:1rem}.upload-area{border:2px dashed var(--border-color);border-radius:8px;padding:1rem;text-align:center;cursor:pointer;transition:border-color .2s,background-color .2s;height:150px;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}.upload-area:hover{border-color:var(--primary-color);background-color:#fdfaf2}.upload-prompt{display:flex;flex-direction:column;align-items:center;justify-content:center;color:#7f8c8d}.upload-icon{font-size:2rem;line-height:1}.image-preview{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover}.tabs{display:flex;margin-bottom:1rem}.tab-button{flex:1;padding:.5rem;border:none;background-color:transparent;cursor:pointer;font-size:.9rem;font-family:var(--font-family);color:#7f8c8d;border-bottom:2px solid transparent;transition:color .2s,border-color .2s}.tab-button.active{color:var(--text-color);border-bottom-color:var(--primary-color);font-weight:500}.tab-content{display:none}.tab-content.active{display:block}select,textarea{width:100%;padding:.75rem;border-radius:8px;border:1px solid var(--border-color);font-family:var(--font-family);font-size:.9rem;background-color:var(--bg-color)}textarea{resize:vertical}#result-panel{width:350px;min-width:300px;max-width:70vw;background-color:var(--card-bg);padding:1.5rem;display:flex;flex-direction:column;flex-shrink:0}#resizer{width:6px;cursor:col-resize;background-color:var(--border-color);transition:background-color .2s ease;flex-shrink:0}#resizer:hover{background-color:var(--primary-color)}#result-panel h2{text-align:center;font-weight:500;margin-bottom:1rem}#result-image-container{flex-grow:1;border-radius:12px;background-color:var(--bg-color);display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;min-height:250px;cursor:default}#result-image-container.pannable{cursor:grab}#result-image-container.panning{cursor:grabbing}#result-placeholder{color:#95a5a6;text-align:center;padding:1rem}#result-image{width:100%;height:100%;object-fit:contain;transform-origin:top left;transition:transform .1s ease-out}#download-button{position:absolute;top:10px;right:10px;background-color:#0009;color:#fff;border:none;border-radius:6px;padding:.5rem .75rem;cursor:pointer;opacity:0;transition:opacity .3s ease;font-size:.8rem;z-index:2}#result-image-container:hover #download-button{opacity:1}#zoom-controls{position:absolute;bottom:10px;left:50%;transform:translate(-50%);background-color:#0009;border-radius:8px;padding:4px;display:flex;gap:4px;opacity:0;transition:opacity .3s ease;z-index:2}#result-image-container:hover #zoom-controls{opacity:1}#zoom-controls button{background-color:transparent;border:none;color:#fff;width:30px;height:30px;border-radius:6px;cursor:pointer;font-size:1.2rem;font-weight:700;display:flex;align-items:center;justify-content:center;transition:background-color .2s}#zoom-controls button:hover{background-color:#fff3}.output-settings{margin-top:1rem;margin-bottom:1rem}.output-settings label{display:block;margin-bottom:.5rem;font-weight:500;font-size:.9rem}#generate-button{width:100%;padding:1rem;background-color:var(--primary-color);color:var(--text-color);border:none;border-radius:8px;font-size:1.1rem;font-weight:700;cursor:pointer;transition:background-color .2s,transform .1s;margin-top:auto}#generate-button:hover:not(:disabled){background-color:#e1b30e}#generate-button:active:not(:disabled){transform:scale(.98)}#generate-button:disabled{background-color:#bdc3c7;cursor:not-allowed}.lang-toggle{display:flex;align-items:center;gap:.5rem}.switch{position:relative;display:inline-block;width:50px;height:28px}.switch input{opacity:0;width:0;height:0}.slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:#ccc;transition:.4s}.slider:before{position:absolute;content:"";height:20px;width:20px;left:4px;bottom:4px;background-color:#fff;transition:.4s}input:checked+.slider{background-color:var(--primary-color)}input:checked+.slider:before{transform:translate(22px)}.slider.round{border-radius:34px}.slider.round:before{border-radius:50%}#loading-spinner{border:4px solid rgba(0,0,0,.1);border-left-color:var(--primary-color);border-radius:50%;width:50px;height:50px;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}@media (max-width: 1200px){.node{position:relative;left:auto!important;top:auto!important;margin-bottom:1.5rem}#editor-container{display:flex;flex-direction:column;align-items:center;overflow-y:auto}#connector-svg{display:none}}@media (max-width: 768px){body{height:auto}main{flex-direction:column}#resizer{width:100%;height:6px;cursor:row-resize}#result-panel{width:100%;min-height:400px;border-left:none;border-top:1px solid var(--border-color)}}