:root{--primary-color: #36c;--secondary-color: #447ff5;--accent-color: #d33;--text-color: #222;--light-bg: #f8f9fa;--dark-bg: #202122;--border-color: #a2a9b1;--link-color: #0645ad;--link-visited: #0b0080;--link-active: #faa700;--heading-color: #000;--card-bg: #fff;--card-shadow: 0 1px 2px rgba(0, 0, 0, .1);--font-serif: "Linux Libertine", "Georgia", "Times", serif;--font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Lato", "Helvetica", "Arial", sans-serif}body{font-family:var(--font-sans);line-height:1.6;color:var(--text-color);margin:0;padding:0;overflow-x:hidden;background-color:#fff;font-size:14px}.container{width:100%;max-width:1200px;margin:0 auto;padding:0 24px;box-sizing:border-box}.navbar{background-color:#fff;padding:0;position:sticky;top:0;z-index:100;border-bottom:1px solid var(--border-color);box-shadow:0 1px 3px #0000001a}.nav-container{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;padding:.75rem 1rem}.logo{color:var(--text-color);font-size:1.25rem;font-weight:400;text-decoration:none;margin-right:20px;font-family:var(--font-serif);letter-spacing:-.5px}.nav-links{display:flex;list-style:none;margin:0;padding:0;flex-wrap:wrap}.nav-links li{margin:0}.nav-links a{color:var(--link-color);text-decoration:none;padding:.5rem 1rem;transition:all .2s;font-size:.875rem;border-bottom:2px solid transparent}.nav-links a:hover{background-color:var(--light-bg);border-bottom:2px solid var(--primary-color)}.nav-links a.active{border-bottom:2px solid var(--primary-color);font-weight:700}.page-container{min-height:calc(100vh - 70px);padding:1.5rem 0;background-color:#fff}.page-title{font-family:var(--font-serif);font-size:1.8rem;margin-bottom:1rem;color:var(--heading-color);border-bottom:1px solid #a2a9b1;padding-bottom:.5rem;font-weight:400}.content-section{margin-bottom:2rem;background-color:#fff;padding:0 0 1.5rem;border-bottom:1px solid #eaecf0;line-height:1.65}.content-section h2{font-family:var(--font-serif);font-size:1.5rem;margin:1.5rem 0 .75rem;color:var(--heading-color);font-weight:400;border-bottom:1px solid #eaecf0;padding-bottom:.25rem}.content-section h3{font-family:var(--font-serif);font-size:1.25rem;margin:1.25rem 0 .5rem;color:var(--heading-color);font-weight:400}.content-section p{margin:.75rem 0;font-size:.95rem}.image-gallery{display:flex;flex-wrap:wrap;gap:20px;margin:20px 0}.gallery-item{flex:1 1 300px;margin-bottom:20px}.gallery-item.large{flex:1 1 100%}.gallery-image{width:100%;height:auto;border-radius:8px;box-shadow:0 3px 10px #0000001a}.image-caption{margin-top:10px;font-size:.9rem;color:#666;text-align:center}.demo-container{display:flex;flex-direction:column;gap:2rem;margin-top:1.5rem}.upload-area{border:1px solid var(--border-color);background-color:var(--light-bg);padding:2rem;text-align:center;cursor:pointer;transition:all .2s}.upload-area:hover{border-color:var(--primary-color);background-color:#eaf3ff}.upload-icon{font-size:2.5rem;margin-bottom:1rem;color:var(--primary-color)}.upload-area h3{margin-top:0;font-weight:400;color:var(--heading-color)}.image-preview{max-width:100%;margin:1.5rem auto;text-align:center}.image-preview img{max-width:100%;max-height:400px;border:1px solid var(--border-color);padding:3px;background-color:#fff}.result-container{display:flex;flex-direction:column;gap:1.5rem;margin-top:1.5rem}.prediction-results{padding:1.5rem;background-color:var(--light-bg);border:1px solid var(--border-color)}.prediction-class{font-family:var(--font-serif);font-size:1.25rem;color:var(--heading-color);margin-bottom:1rem;font-weight:700}.confidence-bars{margin-top:1.5rem}.confidence-bars h4{font-family:var(--font-serif);font-size:1.1rem;margin-bottom:1rem;color:var(--heading-color);font-weight:400;border-bottom:1px solid #eaecf0;padding-bottom:.25rem}.confidence-bar{margin-bottom:.75rem}.bar-label{display:flex;justify-content:space-between;margin-bottom:.25rem;font-size:.875rem}.bar-label span:first-child{color:var(--link-color);font-weight:500}.bar-label span:last-child{color:#72777d}.bar-container{height:.75rem;background-color:#eaecf0;overflow:hidden;border:1px solid #c8ccd1}.bar-fill{height:100%;background-color:var(--primary-color)}.chatbot-container{display:flex;flex-direction:column;height:500px;border:1px solid #ddd;border-radius:8px;overflow:hidden}.chat-messages{flex:1;overflow-y:auto;padding:15px;background-color:#f9f9f9}.message{margin-bottom:15px;max-width:80%}.message.user{margin-left:auto}.message.bot{margin-right:auto}.message-content{padding:10px 15px;border-radius:18px;display:inline-block}.user .message-content{background-color:var(--primary-color);color:#fff;border-top-right-radius:4px}.bot .message-content{background-color:#e9e9e9;color:#333;border-top-left-radius:4px}.chat-input{display:flex;padding:10px;background-color:#fff;border-top:1px solid #ddd}.chat-input input{flex:1;padding:10px;border:1px solid #ddd;border-radius:20px;margin-right:10px}.chat-input button{padding:10px 20px;background-color:var(--primary-color);color:#fff;border:none;border-radius:20px;cursor:pointer}.chatbot-suggestions{margin-top:20px}.suggestion-buttons{display:flex;flex-wrap:wrap;gap:10px;margin-top:10px}.suggestion-buttons button{padding:8px 15px;background-color:#f0f0f0;border:1px solid #ddd;border-radius:20px;cursor:pointer;font-size:.9rem;transition:background-color .3s}.loading-container{position:fixed;top:0;left:0;right:0;bottom:0;background-color:#fff;display:flex;flex-direction:column;justify-content:center;align-items:center;z-index:1000;transition:opacity .5s}.loading-container.fade-out{opacity:0;pointer-events:none}.loading-spinner{width:50px;height:50px;border:5px solid #f3f3f3;border-top:5px solid var(--primary-color);border-radius:50%;animation:spin 1s linear infinite;margin-bottom:20px}.loading-text{font-size:1.2rem;color:var(--primary-color)}.typing{display:flex;align-items:center;justify-content:center;min-width:50px}.dot{width:8px;height:8px;background-color:#999;border-radius:50%;margin:0 3px;animation:bounce 1.5s infinite}@keyframes bounce{0%,60%,to{transform:translateY(0)}30%{transform:translateY(-5px)}}button,a,.clickable{min-height:44px;min-width:44px}.btn{display:inline-block;padding:.5rem 1rem;font-size:.875rem;font-weight:400;text-align:center;white-space:nowrap;vertical-align:middle;cursor:pointer;-webkit-user-select:none;user-select:none;border:1px solid transparent;transition:all .2s ease-in-out}.btn-primary{color:#fff;background-color:var(--primary-color);border-color:var(--primary-color)}.btn-primary:hover{background-color:#2a4b8d;border-color:#2a4b8d}.btn-secondary{color:#fff;background-color:var(--secondary-color);border-color:var(--secondary-color)}.btn-secondary:hover{background-color:#36c;border-color:#36c}.model-selector{display:flex;flex-wrap:wrap;gap:1rem;margin:1rem 0}.model-selector label{display:flex;align-items:center;padding:.5rem 1rem;border:1px solid var(--border-color);background-color:var(--light-bg);border-radius:2px;cursor:pointer;transition:all .2s}.model-selector label:hover{background-color:#eaf3ff;border-color:var(--primary-color)}.model-selector input[type=radio]{margin-right:.5rem}.input-mode-selector{display:flex;flex-wrap:wrap;gap:1rem;margin:1.5rem 0}.input-mode-selector label{display:flex;align-items:center;padding:.5rem 1rem;border:1px solid var(--border-color);background-color:var(--light-bg);border-radius:2px;cursor:pointer;transition:all .2s}.input-mode-selector label:hover{background-color:#eaf3ff;border-color:var(--primary-color)}.input-mode-selector input[type=radio]{margin-right:.5rem}@media (max-width: 992px){.page-title{font-size:2rem}.content-section{padding:20px}.result-container{flex-direction:column}}@media (max-width: 768px){.nav-container{flex-direction:column;align-items:flex-start}.logo{margin-bottom:10px}.nav-links{flex-direction:column;width:100%}.nav-links li{margin:5px 0}.mobile-menu-button{display:block;position:absolute;top:15px;right:20px}.nav-links{display:none}.nav-links.show{display:flex}.page-title{font-size:1.8rem}.gallery-item{flex:1 1 100%}.model-card{flex-direction:column}.chatbot-container{height:400px}.suggestion-buttons button{flex:1 1 calc(50% - 10px)}}@media (max-width: 480px){.page-title{font-size:1.5rem}.content-section{padding:15px}.chat-input{flex-direction:column}.chat-input input{margin-right:0;margin-bottom:10px}.suggestion-buttons button{flex:1 1 100%}.model-buttons{flex-direction:column}.model-buttons button{margin-bottom:5px}}@media (hover: none){.nav-links a{padding:10px 15px}.chat-input button{padding:12px 20px}.suggestion-buttons button{padding:12px 15px}}.page-container{padding-top:80px;min-height:100vh;background-color:var(--background-color)}.container{max-width:1200px;margin:0 auto;padding:20px}.page-title{font-size:2.5rem;color:var(--primary-color);margin-bottom:30px;text-align:center;position:relative}.page-title:after{content:"";display:block;width:100px;height:3px;background-color:var(--accent-color);margin:15px auto 0}.content-section{margin-bottom:50px;background-color:#fff;border-radius:10px;padding:30px;box-shadow:0 5px 15px #0000000d}.content-section h2{color:var(--primary-color);margin-bottom:20px;font-size:1.8rem}.content-section p{margin-bottom:20px;line-height:1.6;color:#333}.image-gallery{display:flex;flex-wrap:wrap;gap:20px;margin:30px 0;justify-content:center}.gallery-item{flex:1 1 calc(50% - 20px);max-width:calc(50% - 20px);background-color:#f8f9fa;border-radius:8px;overflow:hidden;box-shadow:0 3px 10px #0000001a;transition:transform .3s ease}.gallery-item:hover{transform:translateY(-5px)}.gallery-item.large{flex:1 1 100%;max-width:100%}.gallery-image{width:100%;height:auto;display:block}.image-caption{padding:10px 15px;background-color:#f8f9fa;color:#333;font-size:.9rem;text-align:center;border-top:1px solid #eee}.dataset-info{display:flex;justify-content:space-around;margin:30px 0;flex-wrap:wrap}.dataset-card{background-color:var(--primary-color);color:#fff;padding:20px;border-radius:10px;text-align:center;flex:1 1 200px;margin:10px;box-shadow:0 5px 15px #0000001a}.dataset-card h3{font-size:2.5rem;margin-bottom:10px}.dataset-card p{margin:0;color:#fff}.class-list{columns:2;column-gap:30px;list-style-type:none;margin:20px 0}.class-list li{margin-bottom:10px;padding-left:20px;position:relative}.class-list li:before{content:"•";color:var(--accent-color);font-size:1.5rem;position:absolute;left:0;top:-5px}.preprocessing-steps{padding-left:20px}.preprocessing-steps li{margin-bottom:15px}.preprocessing-steps strong{color:var(--primary-color)}.model-card{background-color:#fff;border-radius:10px;padding:25px;margin-bottom:30px;box-shadow:0 5px 15px #0000000d;border-left:5px solid var(--accent-color)}.model-card h3{color:var(--primary-color);margin-bottom:15px;font-size:1.5rem}.model-details{display:flex;flex-wrap:wrap;margin:20px 0;gap:15px}.detail-item{background-color:#f8f9fa;padding:10px 15px;border-radius:5px;flex:1 1 200px}.detail-label{font-weight:700;color:var(--primary-color);margin-right:10px}.training-details{list-style-type:none;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:15px}.training-details li{background-color:#f8f9fa;padding:15px;border-radius:5px;box-shadow:0 2px 5px #0000000d}.training-details strong{color:var(--primary-color)}.metrics-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:15px;list-style-type:none;padding:0;margin:20px 0}.metrics-list li{background-color:#f8f9fa;padding:15px;border-radius:5px;box-shadow:0 2px 5px #0000000d;text-align:center}.metrics-list strong{color:var(--primary-color);display:block;margin-bottom:5px}.results-summary{display:flex;flex-wrap:wrap;gap:20px;margin:30px 0}.result-card{flex:1 1 calc(33.333% - 20px);background-color:#f8f9fa;border-radius:10px;padding:20px;box-shadow:0 5px 15px #0000000d;text-align:center}.result-card.best{background-color:var(--primary-color);color:#fff}.result-card.best h3,.result-card.best .metric-label,.result-card.best .metric-value{color:#fff}.result-card h3{margin-bottom:10px;color:var(--primary-color)}.model-name{font-weight:700;margin-bottom:15px;font-size:1.1rem}.metric{margin:10px 0}.metric-label{font-weight:700;color:#555;margin-right:10px}.metric-value{color:var(--accent-color);font-weight:700}.architecture-details{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:20px;margin:30px 0}.detail-card{background-color:#f8f9fa;border-radius:8px;padding:20px;box-shadow:0 3px 10px #0000001a;text-align:center}.detail-card h3{color:var(--primary-color);margin-bottom:10px;font-size:1.2rem}.detail-card p{margin:5px 0;color:#555}.architecture-flow{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;margin:30px 0;gap:10px}.flow-item{background-color:#f8f9fa;border-radius:8px;padding:15px;text-align:center;box-shadow:0 3px 10px #0000001a;flex:0 0 auto}.flow-icon{font-size:2rem;margin-bottom:10px}.flow-text{color:var(--primary-color);font-weight:700}.flow-arrow{font-size:1.5rem;color:var(--accent-color);margin:0 5px}.demo-container{background-color:#fff;border-radius:10px;padding:30px;box-shadow:0 5px 15px #0000000d;margin-bottom:30px}.upload-area{border:2px dashed var(--primary-color);border-radius:10px;padding:40px 20px;text-align:center;cursor:pointer;transition:all .3s ease;margin-bottom:30px}.upload-area:hover{background-color:#007bff0d}.upload-icon{font-size:3rem;margin-bottom:15px;color:var(--primary-color)}.image-preview{max-width:400px;margin:0 auto 20px;border-radius:8px;overflow:hidden;box-shadow:0 3px 10px #0000001a}.image-preview img{width:100%;height:auto;display:block}.result-container{display:flex;flex-wrap:wrap;gap:30px;margin-top:30px}.prediction-class{font-size:1.5rem;font-weight:700;color:var(--primary-color);margin-bottom:10px}.confidence-bars{margin-top:20px}.confidence-bars h4{margin-bottom:15px;color:#333}.confidence-bar{margin-bottom:15px}.bar-label{display:flex;justify-content:space-between;margin-bottom:5px}.bar-container{height:10px;background-color:#e9ecef;border-radius:5px;overflow:hidden}.bar-fill{height:100%;background-color:var(--accent-color);border-radius:5px}.chatbot-container{background-color:#fff;border-radius:10px;overflow:hidden;box-shadow:0 5px 15px #0000000d;margin-bottom:30px;height:500px;display:flex;flex-direction:column}.chat-header{background-color:var(--primary-color);color:#fff;padding:15px 20px;font-weight:700;font-size:1.1rem}.chat-messages{flex:1;padding:20px;overflow-y:auto;display:flex;flex-direction:column;gap:15px}.message{max-width:80%;padding:12px 15px;border-radius:10px;position:relative}.user-message{background-color:var(--primary-color);color:#fff;align-self:flex-end;border-bottom-right-radius:0}.bot-message{background-color:#f1f1f1;color:#333;align-self:flex-start;border-bottom-left-radius:0}.chat-input{display:flex;border-top:1px solid #eee;padding:15px}.chat-input input{flex:1;padding:12px 15px;border:1px solid #ddd;border-radius:30px;margin-right:10px;font-size:1rem}.chat-input button{background-color:var(--primary-color);color:#fff;border:none;border-radius:30px;padding:12px 20px;cursor:pointer;font-weight:700;transition:background-color .3s ease}.chat-input button:hover{background-color:#0056b3}.topics-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:15px;margin-top:20px}@media (max-width: 768px){.gallery-item,.gallery-item.large{flex:1 1 100%;max-width:100%}.result-card{flex:1 1 100%}.class-list{columns:1}.architecture-flow{flex-direction:column}.flow-arrow{transform:rotate(90deg);margin:10px 0}}.neural-network-container{display:flex;flex-direction:column;width:100%;margin-bottom:2rem}.model-selector{margin-bottom:1rem;padding:1rem;background-color:#f5f5f5;border-radius:8px}.model-buttons{display:flex;flex-wrap:wrap;gap:.5rem;margin:1rem 0}.model-buttons button{padding:.5rem 1rem;background-color:#e0e0e0;border:none;border-radius:4px;cursor:pointer;transition:all .3s ease}.model-buttons button:hover{background-color:#d0d0d0}.model-buttons button.active{background-color:#4a90e2;color:#fff}.controls{margin-top:.5rem}.canvas-container{width:100%;height:500px;border-radius:8px;overflow:hidden;background-color:#1a1a2e;margin-bottom:1rem}.model-description{padding:1rem;background-color:#f5f5f5;border-radius:8px}.model-description ul{margin-left:1.5rem}.chatbot-container{width:100%;height:500px;border-radius:8px;overflow:hidden;display:flex;flex-direction:column;border:1px solid #ddd;background-color:#f9f9f9;margin-bottom:1rem}.chat-messages{flex:1;overflow-y:auto;padding:1rem;display:flex;flex-direction:column;gap:.5rem}.message{max-width:80%;padding:.75rem 1rem;border-radius:1rem;margin-bottom:.5rem}.message.user{align-self:flex-end;background-color:#4a90e2;color:#fff;border-bottom-right-radius:.25rem}.message.bot{align-self:flex-start;background-color:#e9e9eb;color:#333;border-bottom-left-radius:.25rem}.typing{display:flex;align-items:center;gap:.25rem}.dot{width:8px;height:8px;background-color:#999;border-radius:50%;animation:bounce 1.5s infinite}.dot:nth-child(2){animation-delay:.2s}.dot:nth-child(3){animation-delay:.4s}@keyframes bounce{0%,60%,to{transform:translateY(0)}30%{transform:translateY(-4px)}}.chat-input{display:flex;padding:1rem;border-top:1px solid #ddd;background-color:#fff}.chat-input input{flex:1;padding:.75rem;border:1px solid #ddd;border-radius:4px;margin-right:.5rem}.chat-input button{padding:.75rem 1.5rem;background-color:#4a90e2;color:#fff;border:none;border-radius:4px;cursor:pointer}.chat-input button:disabled{background-color:#a0a0a0;cursor:not-allowed}.chatbot-suggestions{margin-top:1rem}.suggestion-buttons{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.5rem}.suggestion-buttons button{padding:.5rem 1rem;background-color:#f0f0f0;border:1px solid #ddd;border-radius:20px;cursor:pointer;font-size:.9rem;transition:all .3s ease}.suggestion-buttons button:hover{background-color:#e0e0e0}@media (max-width: 768px){.canvas-container{height:400px}.chatbot-container{height:450px}.message{max-width:90%}.suggestion-buttons button{font-size:.8rem}}.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background-color:#000000bf;display:flex;justify-content:center;align-items:center;z-index:1000}.modal-content{background-color:#fff;padding:20px;border-radius:8px;max-width:90%;max-height:90%;overflow:auto;position:relative}.modal-close{position:absolute;top:10px;right:10px;background:none;border:none;font-size:24px;cursor:pointer;color:#333}.modal-image{max-width:100%;max-height:80vh;display:block;margin:0 auto}.modal-caption{margin-top:15px;text-align:center;font-style:italic}.gallery-image.clickable{cursor:pointer;transition:transform .3s ease}.gallery-image.clickable:hover{transform:scale(1.03)}.canvas-container{position:relative;border-radius:8px;overflow:hidden;box-shadow:0 4px 12px #0000001a;background-color:#f8f9fa}.canvas-instructions{position:absolute;bottom:10px;left:0;right:0;text-align:center;color:#666;font-size:.8rem;background-color:#ffffffb3;padding:5px}.loading-spinner-container{position:absolute;top:0;left:0;right:0;bottom:0;display:flex;flex-direction:column;justify-content:center;align-items:center;background-color:#fffc}@media (max-width: 768px){.model-buttons{flex-direction:column;align-items:stretch}.model-buttons button{margin:5px 0}.canvas-container{height:300px!important}.image-gallery{flex-direction:column}.gallery-item{width:100%;margin:10px 0}}@media (max-width: 480px){.canvas-container{height:250px!important}.model-description ul{padding-left:20px}}.canvas-container{position:relative;height:500px;border-radius:8px;overflow:hidden;box-shadow:0 4px 12px #00000026;background-color:#050505;margin-bottom:2rem}.canvas-controls{position:absolute;bottom:10px;left:0;right:0;display:flex;justify-content:space-between;padding:0 15px;color:#fff;z-index:10}.canvas-instructions{background-color:#00000080;padding:5px 10px;border-radius:4px;font-size:.8rem}.auto-rotate-toggle{background-color:#00000080;padding:5px 10px;border-radius:4px;display:flex;align-items:center}.auto-rotate-toggle input{margin-right:5px}.image-gallery{display:flex;flex-wrap:wrap;gap:15px;margin-top:20px}.gallery-item{width:150px;cursor:pointer;border-radius:6px;overflow:hidden;box-shadow:0 2px 8px #0003;transition:transform .2s ease,box-shadow .2s ease}.gallery-item:hover{transform:scale(1.05);box-shadow:0 4px 12px #0000004d}.gallery-item img{width:100%;height:auto;display:block}.gallery-caption{padding:8px;background-color:#f8f9fa;font-size:.8rem;text-align:center}.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background-color:#000c;display:flex;justify-content:center;align-items:center;z-index:1000;padding:20px}.modal-content{position:relative;max-width:90%;max-height:90%;background-color:#fff;border-radius:8px;overflow:hidden;box-shadow:0 5px 15px #00000080}.modal-close{position:absolute;top:10px;right:10px;background-color:#00000080;color:#fff;border:none;border-radius:50%;width:30px;height:30px;font-size:20px;cursor:pointer;display:flex;justify-content:center;align-items:center;z-index:10}.modal-image{display:block;max-width:100%;max-height:80vh;margin:0 auto}.modal-caption{padding:15px;text-align:center;background-color:#f8f9fa;margin:0}@media (max-width: 768px){.canvas-container{height:400px}.model-buttons{flex-wrap:wrap}.model-buttons button{flex:1 0 40%;margin:5px}.canvas-controls{flex-direction:column;align-items:center;gap:10px}.image-gallery{justify-content:center}}@media (max-width: 480px){.canvas-container{height:300px}.model-buttons button{flex:1 0 100%}.gallery-item{width:120px}}.loading-spinner-container{position:absolute;top:0;left:0;right:0;bottom:0;display:flex;flex-direction:column;justify-content:center;align-items:center;background-color:#050505;color:#fff}.loading-spinner{border:4px solid rgba(255,255,255,.1);border-radius:50%;border-top:4px solid #3498db;width:40px;height:40px;animation:spin 1s linear infinite;margin-bottom:15px}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.sample-categories{margin:2rem 0;border:1px solid #e0e0e0;border-radius:8px;overflow:hidden;box-shadow:0 2px 10px #0000000d}.category-tabs{display:flex;flex-wrap:wrap;background-color:#f5f5f5;border-bottom:1px solid #e0e0e0}.category-tab{padding:12px 16px;background:none;border:none;cursor:pointer;font-size:.9rem;color:#555;transition:all .2s ease;border-bottom:3px solid transparent}.category-tab:hover{background-color:#e9e9e9;color:#333}.category-tab.active{background-color:#fff;color:var(--primary-color);border-bottom:3px solid var(--accent-color);font-weight:700}.sample-gallery{padding:1.5rem;background-color:#fff}.sample-gallery h4{margin-top:0;color:var(--primary-color);font-size:1.2rem}.sample-description{color:#666;margin-bottom:1.5rem;font-style:italic}.sample-images{display:flex;gap:15px;margin-bottom:1.5rem;flex-wrap:wrap}.sample-image-container{width:150px;border-radius:8px;overflow:hidden;box-shadow:0 2px 8px #0000001a;cursor:pointer;transition:transform .2s ease,box-shadow .2s ease;position:relative}.sample-image-container:hover{transform:translateY(-5px);box-shadow:0 5px 15px #00000026}.sample-image-container.active{border:3px solid var(--accent-color)}.sample-image{width:100%;height:auto;display:block}.sample-index{position:absolute;bottom:0;left:0;right:0;background-color:#000000b3;color:#fff;padding:5px;font-size:.8rem;text-align:center}.analyze-sample-btn{display:block;margin:0 auto;padding:10px 20px}.sample-categories-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:15px;padding:1.5rem}.sample-category-card{border-radius:8px;overflow:hidden;box-shadow:0 2px 8px #0000001a;cursor:pointer;transition:transform .2s ease}.sample-category-card:hover{transform:translateY(-5px)}.category-thumbnail{width:100%;height:120px;object-fit:cover;display:block}.category-name{padding:10px;background-color:#f5f5f5;text-align:center;font-weight:700;color:#333;font-size:.9rem}.result-container{background-color:#fff;border-radius:10px;box-shadow:0 3px 15px #0000001a;margin-top:2rem;overflow:hidden}.result-header{display:flex;justify-content:space-between;align-items:center;padding:1rem 1.5rem;background-color:#f8f9fa;border-bottom:1px solid #e0e0e0}.result-header h3{margin:0;color:var(--primary-color)}.result-actions{display:flex;gap:10px}.result-content{display:flex;flex-wrap:wrap;padding:1.5rem;gap:2rem}.image-preview{flex:1 1 300px;position:relative}.image-info{margin-top:10px;padding:10px;background-color:#f8f9fa;border-radius:5px;font-size:.9rem}.image-category{color:var(--primary-color);font-weight:700;margin-bottom:5px}.timestamp{color:#666;font-size:.8rem}.prediction-results{flex:1 1 400px}.prediction-class{font-size:1.5rem;margin-bottom:15px;color:#333}.prediction-label{font-weight:700;color:var(--primary-color);margin-right:5px}.prediction-confidence{margin-bottom:10px}.confidence-value{font-weight:700}.confidence-value.high{color:#28a745}.confidence-value.medium{color:#ffc107}.confidence-value.low{color:#dc3545}.model-used{margin-bottom:20px;color:#555}.compare-models{margin-top:2rem;padding-top:1rem;border-top:1px solid #e0e0e0}.compare-models h4{margin-bottom:10px;color:#333}.model-comparison-buttons{display:flex;flex-wrap:wrap;gap:10px}.btn-outline-sm{padding:5px 10px;background-color:#fff;border:1px solid var(--primary-color);color:var(--primary-color);border-radius:4px;font-size:.9rem;cursor:pointer;transition:all .2s ease}.btn-outline-sm:hover{background-color:var(--primary-color);color:#fff}.history-container{margin-top:2rem;padding:1.5rem;background-color:#fff;border-radius:10px;box-shadow:0 3px 15px #0000001a}.history-container h3{margin-top:0;color:var(--primary-color);margin-bottom:1rem}.history-items{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:15px}.history-item{border:1px solid #e0e0e0;border-radius:8px;overflow:hidden;transition:transform .2s ease}.history-item:hover{transform:translateY(-5px);box-shadow:0 5px 15px #0000001a}.history-image{height:150px;overflow:hidden}.history-image img{width:100%;height:100%;object-fit:cover}.history-details{padding:10px;background-color:#f8f9fa}.history-prediction{font-weight:700;color:var(--primary-color);margin:0 0 5px}.history-confidence{color:#28a745;font-weight:700;margin:0 0 5px}.history-model{font-size:.8rem;color:#666;margin:0 0 5px}.history-time{font-size:.8rem;color:#999;margin:0}.error-message{background-color:#f8d7da;color:#721c24;padding:1rem;border-radius:5px;margin:1rem 0;border:1px solid #f5c6cb}.btn{padding:10px 20px;border-radius:5px;cursor:pointer;font-weight:700;transition:all .2s ease;border:none}.btn-primary{background-color:var(--primary-color);color:#fff}.btn-primary:hover{background-color:#0056b3}.btn-secondary{background-color:#6c757d;color:#fff}.btn-secondary:hover{background-color:#5a6268}.btn-outline{background-color:transparent;border:1px solid var(--primary-color);color:var(--primary-color)}.btn-outline:hover{background-color:var(--primary-color);color:#fff}.connection-status{display:flex;align-items:center;justify-content:flex-end;margin-top:-10px;margin-bottom:10px;font-size:.8rem;color:#666}.status-indicator{width:10px;height:10px;border-radius:50%;margin-right:5px}.status-indicator.connected{background-color:#28a745;box-shadow:0 0 5px #28a745;animation:pulse 2s infinite}.status-indicator.disconnected{background-color:#dc3545}.status-text{font-weight:500}@keyframes pulse{0%{box-shadow:0 0 #28a745b3}70%{box-shadow:0 0 0 5px #28a74500}to{box-shadow:0 0 #28a74500}}:root{--primary-color: #3498db;--secondary-color: #2c3e50;--accent-color: #e74c3c;--light-bg: #f8f9fa;--dark-bg: #343a40;--text-color: #333;--light-text: #f8f9fa}.container{width:100%;max-width:1200px;margin:0 auto;padding:0 20px}html{font-size:16px}@media (max-width: 768px){html{font-size:15px}}@media (max-width: 480px){html{font-size:14px}}.navbar{background-color:var(--secondary-color);padding:.8rem 0;position:sticky;top:0;z-index:1000;box-shadow:0 2px 10px #0000001a}.nav-container{display:flex;justify-content:space-between;align-items:center}.logo{color:#fff;font-size:1.5rem;font-weight:700;text-decoration:none}.nav-links{display:flex;list-style:none;margin:0;padding:0}.nav-links li{margin-left:1.5rem}.nav-links a{color:#fff;text-decoration:none;font-size:1rem;transition:color .3s}.nav-links a:hover{color:var(--primary-color)}.mobile-menu-button{display:none;background:none;border:none;color:#fff;font-size:1.5rem;cursor:pointer}@media (max-width: 992px){.mobile-menu-button{display:block}.nav-links{position:fixed;top:60px;left:0;right:0;background-color:var(--secondary-color);flex-direction:column;align-items:center;padding:1rem 0;transform:translateY(-100%);transition:transform .3s ease-in-out;z-index:999}.nav-links.active{transform:translateY(0)}.nav-links li{margin:.5rem 0}}.content-section{padding:2rem 0}.content-section h2{margin-bottom:1.5rem;color:var(--secondary-color)}.content-section p{line-height:1.6;margin-bottom:1.2rem}.grid-container{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:2rem;margin:2rem 0}@media (max-width: 768px){.grid-container{grid-template-columns:1fr;gap:1.5rem}}.card{background-color:#fff;border-radius:8px;box-shadow:0 4px 6px #0000001a;overflow:hidden;transition:transform .3s,box-shadow .3s}.card:hover{transform:translateY(-5px);box-shadow:0 10px 20px #00000026}.card-image{width:100%;height:200px;object-fit:cover}.card-content{padding:1.5rem}.card-title{font-size:1.25rem;margin-bottom:.75rem;color:var(--secondary-color)}.responsive-table{width:100%;border-collapse:collapse;margin:1.5rem 0}.responsive-table th,.responsive-table td{padding:.75rem;text-align:left;border-bottom:1px solid #ddd}.responsive-table th{background-color:var(--light-bg);font-weight:700}@media (max-width: 768px){.responsive-table{display:block;overflow-x:auto;white-space:nowrap}}.responsive-image{max-width:100%;height:auto;display:block;margin:1.5rem 0}.button{display:inline-block;padding:.75rem 1.5rem;background-color:var(--primary-color);color:#fff;border:none;border-radius:4px;cursor:pointer;font-size:1rem;text-decoration:none;transition:background-color .3s}.button:hover{background-color:#2980b9}@media (max-width: 480px){.button{display:block;width:100%;text-align:center;margin-bottom:.75rem}}.reference-section{margin-bottom:2.5rem}.reference-section h3{color:var(--secondary-color);border-bottom:2px solid var(--primary-color);padding-bottom:.5rem;margin-bottom:1rem}.reference-list{list-style:none;padding:0}.reference-list li{margin-bottom:1.5rem;padding-bottom:1.5rem;border-bottom:1px solid #eee}.reference-list li:last-child{border-bottom:none}.reference-title{display:block;font-weight:700;font-size:1.1rem;margin-bottom:.3rem;color:var(--secondary-color)}.reference-authors{display:block;font-style:italic;margin-bottom:.3rem}.reference-publication,.reference-description{display:block;margin-bottom:.3rem}.reference-list a{color:var(--primary-color);text-decoration:none}.reference-list a:hover{text-decoration:underline}.page-navigation{margin-top:3rem;padding-top:1.5rem;border-top:2px solid #eee}.page-links{display:flex;flex-wrap:wrap;gap:1rem}.page-link{display:inline-block;padding:.5rem 1rem;background-color:var(--light-bg);color:var(--secondary-color);border-radius:4px;text-decoration:none;transition:background-color .3s,color .3s}.page-link:hover{background-color:var(--primary-color);color:#fff}@media (max-width: 768px){.page-links{flex-direction:column}.page-link{text-align:center}}@media (max-width: 992px){.nav-links{display:none}.nav-links.active{display:flex}}