:root{--bg-color: #161b22;--card-bg: #1f242c;--text-color: #c9d1d9;--heading-color: #ffffff;--primary-color: #58a6ff;--secondary-color: #79c0ff;--accent-color: #c9d1d9;--border-color: #30363d;--input-bg: #0d1117;--input-border: #30363d;--button-text: #ffffff;--button-hover-bg: #79c0ff;--user-msg-bg: #213f7a;--bot-msg-bg: #30363d;--error-bg: #491a21;--error-text: #ff99a9;--link-color: var(--secondary-color);--link-hover-color: var(--accent-color);--shadow-color: rgba(0, 0, 0, .4);--carousel-bg: #0d1117;--carousel-border: var(--border-color);--carousel-arrow-color: var(--primary-color);--carousel-dot-color: var(--secondary-color);--carousel-dot-active-color: var(--primary-color)}body{font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;margin:0;padding:20px;background-color:var(--bg-color);color:var(--text-color);line-height:1.6}.App{max-width:1200px;margin:0 auto;background-color:var(--card-bg);padding:30px;border-radius:10px;box-shadow:0 5px 15px var(--shadow-color);border:1px solid var(--border-color)}h1,h2,h3{color:var(--heading-color);border-bottom:1px solid var(--border-color);padding-bottom:10px;margin-bottom:20px}h1{text-align:center;font-size:2.5em;color:var(--primary-color);border-bottom:none;margin-bottom:30px}h2{font-size:1.8em}h3{font-size:1.4em;color:var(--accent-color)}.container{display:block;margin-top:20px}.upload-section,.operations-section,.result-section{display:none}.uploaded-list{margin-top:20px;padding:15px;background-color:var(--input-bg);border:1px solid var(--border-color);border-radius:5px}.uploaded-list h3{margin-top:0;border-bottom:1px solid var(--border-color)}.uploaded-list ul{list-style:none;padding:0;margin:0}.uploaded-list li{display:flex;align-items:center;gap:10px;margin-bottom:8px;font-size:.9em;color:var(--text-color)}.uploaded-list img{border:1px solid var(--border-color);border-radius:3px;background-color:var(--bg-color)}input[type=text],textarea,select{width:calc(100% - 22px);padding:10px;margin-bottom:15px;border:1px solid var(--input-border);border-radius:4px;font-size:1em;background-color:var(--input-bg);color:var(--text-color)}input[type=text]:focus,textarea:focus,select:focus{outline:none;border-color:var(--primary-color);box-shadow:0 0 5px var(--primary-color)}textarea{min-height:80px;resize:vertical}button{background-color:var(--primary-color);color:var(--button-text);padding:12px 18px;border:none;border-radius:5px;cursor:pointer;font-size:1em;font-weight:700;transition:background-color .2s ease,transform .1s ease;text-transform:uppercase;letter-spacing:.5px}button:hover{background-color:var(--button-hover-bg);transform:translateY(-1px);box-shadow:0 3px 8px #58a6ff66}button:active{transform:translateY(0)}button:disabled{background-color:var(--border-color);color:#666;cursor:not-allowed;transform:none;box-shadow:none}hr{border:none;border-top:1px solid var(--border-color);margin:30px 0}.error-message{color:var(--error-text);background-color:var(--error-bg);padding:10px;border-radius:4px;margin-top:10px;font-size:.9em;border:1px solid var(--error-text)}.loading-message{color:var(--accent-color);margin-top:10px;font-style:italic;text-align:center}.chat-container{display:flex;flex-direction:column;border:1px solid var(--border-color);border-radius:8px;margin-top:20px;background-color:var(--bg-color);box-shadow:0 3px 10px var(--shadow-color)}.chat-messages{flex-grow:1;overflow-y:auto;padding:20px;display:flex;flex-direction:column;gap:12px;min-height:300px;max-height:60vh}.message{padding:12px 18px;border-radius:18px;max-width:80%;word-wrap:break-word;line-height:1.4}.message.user_prompt,.message.user_edit{background-color:var(--user-msg-bg);color:var(--heading-color);align-self:flex-end;border-bottom-right-radius:5px}.message.bot_image{background-color:var(--bot-msg-bg);color:var(--text-color);align-self:flex-start;border-bottom-left-radius:5px;padding:8px}.message.error{background-color:var(--error-bg);color:var(--error-text);align-self:center;width:fit-content;max-width:90%;text-align:center;border:1px solid var(--error-text)}.message.loading{align-self:center;color:var(--accent-color);font-style:italic;background:none;padding:5px}.image-message img{max-width:100%;max-height:400px;height:auto;display:block;border-radius:10px;border:2px solid var(--border-color)}.chat-input-area{padding:20px;border-top:1px solid var(--border-color);background-color:var(--card-bg)}.component-box{padding:20px;border:1px solid var(--border-color);border-radius:8px;background-color:var(--bg-color);margin-bottom:20px}.component-box h3{margin-top:0;margin-bottom:15px;font-size:1.2em;color:var(--secondary-color);border-bottom:1px dashed var(--border-color)}.form-group{margin-bottom:15px}.form-group label{display:block;margin-bottom:8px;font-weight:700;font-size:.95em;color:var(--accent-color)}.component-box input[type=text],.component-box select{width:calc(100% - 22px);margin-bottom:10px}.component-box button{width:100%;margin-top:10px}.carousel-container{margin-top:30px;padding:20px;background-color:var(--carousel-bg);border:1px solid var(--carousel-border);border-radius:8px}.carousel-container.empty{text-align:center;color:var(--text-color);padding:30px;font-style:italic}.carousel-slide{padding:0 8px;box-sizing:border-box;outline:none}.carousel-slide img{width:100%;height:150px;object-fit:cover;border:2px solid var(--carousel-border);border-radius:6px;background-color:var(--card-bg);cursor:pointer;transition:transform .2s ease-in-out,border-color .2s ease}.carousel-slide img:hover{transform:scale(1.05);border-color:var(--primary-color)}.slick-dots li button:before{font-size:12px;color:var(--carousel-dot-color);opacity:.6}.slick-dots li.slick-active button:before{opacity:1;color:var(--carousel-dot-active-color)}.slick-prev,.slick-next{z-index:1}.slick-prev:before,.slick-next:before{font-size:24px;color:var(--carousel-arrow-color);opacity:.8;transition:opacity .2s ease}.slick-prev:hover:before,.slick-next:hover:before{opacity:1}@media (max-width: 768px){body{padding:10px}.App{padding:15px}h1{font-size:2em}.chat-messages{padding:15px;max-height:50vh}.message{max-width:90%}.chat-input-area,.component-box{padding:15px}.tabs{flex-wrap:wrap;gap:10px}.tab-button{padding:8px 12px;font-size:.9em}}.spinner{display:inline-block;width:1em;height:1em;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:spin .75s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.tabs{display:flex;justify-content:center;margin-bottom:30px;gap:15px}.tab-button{background-color:transparent;color:var(--text-color);padding:10px 20px;border:1px solid var(--border-color);border-radius:5px;cursor:pointer;font-size:1em;transition:background-color .2s ease,color .2s ease}.tab-button:hover{background-color:var(--border-color);color:var(--heading-color)}.tab-button.active{background-color:var(--primary-color);color:var(--button-text);border-color:var(--primary-color);font-weight:700}
