@import url(https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Roboto+Mono:wght@400;500&display=swap);body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;margin:0}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}.login-container{align-items:center;background-color:var(--bg-primary);display:flex;justify-content:center;min-height:100vh;position:relative}.login-card{background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:12px;box-shadow:var(--shadow-lg);max-width:400px;padding:2.5rem;position:relative;width:100%;z-index:1}.login-header{margin-bottom:2rem;text-align:center}.login-logo{align-items:center;display:flex;font-size:1.5rem;font-weight:600;justify-content:center;letter-spacing:.05em;margin-bottom:1.5rem}.login-card h2{color:var(--text-primary);font-size:1.25rem;font-weight:600;margin-bottom:.5rem;text-align:center}.input-wrapper{position:relative}.login-button{background-color:var(--accent-primary);border:none;border-radius:6px;color:#fff;font-size:.875rem;font-weight:500;margin-top:1rem;padding:.75rem;transition:all var(--transition-fast);width:100%}.login-button:hover{background-color:var(--accent-secondary)}.button-text{position:relative;z-index:1}.login-footer{color:var(--text-tertiary);font-size:.75rem;margin-top:2rem;text-align:center}.system-status{font-size:.75rem;margin-top:.5rem}.status-online{color:var(--success-color)}@media (max-width:500px){.login-card{margin:0 1rem;padding:2rem 1.5rem}.login-logo{font-size:1.25rem}.login-card h2{font-size:1.125rem}}.generate-container{margin:0 auto;max-width:1000px;padding:1rem 0}.generate-card,.results-card{background-color:var(--bg-secondary);border:1px solid var(--border-color);border-radius:12px;box-shadow:var(--shadow-md);margin-bottom:2rem;padding:1.5rem}.card-header{align-items:center;border-bottom:1px solid var(--border-color);display:flex;margin-bottom:1.5rem;padding-bottom:1rem}.header-icon{color:var(--accent-primary);font-size:1.25rem;margin-right:.75rem}.card-header h2{color:var(--text-primary);font-size:1.25rem;font-weight:600;margin:0}.file-drop-area{background-color:var(--bg-tertiary);border:2px dashed var(--border-color);border-radius:8px;cursor:pointer;padding:2rem;text-align:center;transition:all var(--transition-normal)}.file-drop-area.drag-active,.file-drop-area:hover{background-color:#3a86ff0d;border-color:var(--accent-primary)}.drop-icon{font-size:1.5rem}.file-drop-area p{color:var(--text-secondary);font-size:.875rem;margin:0}.modality-select{appearance:none;background-color:var(--bg-tertiary);background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='%23adb5bd' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-position:right .75rem center;background-repeat:no-repeat;background-size:1em;border:1px solid var(--border-color);border-radius:6px;color:var(--text-primary);font-size:.875rem;padding:.625rem .75rem;width:100%}.generate-button{align-items:center;background-color:var(--accent-primary);border:none;border-radius:6px;color:#fff;cursor:pointer;display:flex;font-size:.875rem;font-weight:500;justify-content:center;padding:.625rem;transition:all var(--transition-fast);width:100%}.generate-button.loading,.generate-button:hover{background-color:var(--accent-secondary)}.result-item{border-radius:8px;margin-bottom:1.25rem;padding:1rem}.result-label{color:var(--text-secondary);font-size:.75rem;font-weight:500;letter-spacing:.05em;margin-bottom:.5rem;text-transform:uppercase}.result-value{color:var(--text-primary);font-size:.875rem}.embeddings-display{word-wrap:normal;background-color:var(--bg-primary);border:1px solid var(--border-color);border-radius:6px;color:var(--text-secondary);font-family:var(--font-mono);font-size:.75rem;max-height:150px;overflow-wrap:normal;overflow-x:auto;padding:.75rem;white-space:nowrap}.attention-map{margin-top:1rem}.attention-grid{flex-direction:column}.attention-grid,.attention-row{display:flex;gap:2px}.attention-cell{border-radius:2px;height:20px;width:20px}.result-actions{display:flex;gap:1rem;margin-top:1.5rem}.download-button,.save-button{align-items:center;border-radius:6px;cursor:pointer;display:flex;flex:1 1;font-size:.875rem;font-weight:500;justify-content:center;padding:.625rem;transition:all var(--transition-fast)}.save-button{background-color:var(--bg-tertiary);border:1px solid var(--success-color);color:var(--success-color)}.save-button:hover{background-color:#10b9811a}.download-button{background-color:var(--bg-tertiary);border:1px solid var(--accent-primary);color:var(--accent-primary)}.download-button:hover{background-color:#3a86ff1a}.button-icon{margin-right:.5rem}@media (max-width:600px){.result-actions{flex-direction:column}.download-button,.save-button{margin-bottom:.5rem}}.classification-tag{background-color:var(--success-color);border-radius:20px;color:#fff;display:inline-block;font-size:.875rem;font-weight:500;padding:.4rem .8rem}.embeddings-container{display:flex;flex-direction:column;gap:.5rem}.embeddings-header{align-items:center;margin-bottom:.25rem}.embeddings-header,.embeddings-info{display:flex;justify-content:space-between}.embeddings-info{color:var(--text-secondary);font-size:.75rem;padding:.25rem 0}.similar-files-list{gap:.75rem;margin-top:.75rem}.similar-file,.similar-files-list{display:flex;flex-direction:column}.similar-file{background-color:var(--bg-primary);border:1px solid var(--border-color);border-radius:6px;gap:.5rem;padding:.75rem}.similar-file-name{align-items:center;color:var(--text-primary);display:flex;font-size:.875rem;font-weight:500}.similar-file-score{align-items:center;display:flex;font-size:.75rem;gap:.75rem}.score-label{color:var(--text-secondary);min-width:70px}.score-bar-container{background-color:var(--bg-tertiary);border-radius:3px;flex-grow:1;height:6px;overflow:hidden}.score-bar{background-color:var(--accent-primary);border-radius:3px;height:100%}.score-value{font-feature-settings:"tnum";color:var(--text-secondary);font-variant-numeric:tabular-nums;min-width:60px;text-align:right}.copy-button{align-items:center;background-color:var(--bg-primary);border:1px solid var(--border-color);border-radius:4px;color:var(--text-primary);cursor:pointer;display:flex;font-size:.75rem;font-weight:500;padding:.25rem .5rem;transition:all var(--transition-fast)}.copy-button:hover{background-color:var(--bg-tertiary);border-color:var(--accent-primary);color:var(--accent-primary)}.copy-button .button-icon{font-size:.875rem;margin-right:.25rem}.database-container{margin:0 auto;max-width:1200px;padding:1rem 0}.filters{background-color:var(--bg-secondary);border:1px solid var(--border-color);border-radius:12px;box-shadow:var(--shadow-md);display:flex;gap:1rem;margin-bottom:1.5rem;padding:1.25rem}.filter-group{flex:1 1;position:relative}.filter-icon{color:var(--text-tertiary);font-size:1rem;left:.75rem;position:absolute;top:50%;transform:translateY(-50%)}.select-filter,.text-filter{background-color:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:6px;color:var(--text-primary);font-size:.875rem;padding:.625rem 2rem;transition:all var(--transition-fast);width:100%}.select-filter:focus,.text-filter:focus{border-color:var(--accent-primary);box-shadow:0 0 0 2px #3a86ff33;outline:none}.select-filter{appearance:none;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='%23adb5bd' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-position:right .75rem center;background-repeat:no-repeat;background-size:1em}.loading-container{align-items:center;background-color:var(--bg-secondary);border:1px solid var(--border-color);border-radius:12px;display:flex;flex-direction:column;justify-content:center;padding:3rem 2rem}.loading-spinner{border:3px solid #3a86ff1a;border-top:3px solid var(--accent-primary);height:40px;margin-bottom:1rem;width:40px}.loading-text{color:var(--text-secondary);font-size:.875rem}.table-container{background-color:var(--bg-secondary);border:1px solid var(--border-color);border-radius:12px;box-shadow:var(--shadow-md);overflow-x:auto}.data-table{border-collapse:initial;border-spacing:0;width:100%}.data-table td,.data-table th{font-size:.875rem;padding:.75rem 1rem;text-align:left}.data-table th{background-color:var(--bg-tertiary);border-bottom:1px solid var(--border-color);color:var(--text-secondary);font-size:.75rem;font-weight:500;letter-spacing:.05em;text-transform:uppercase}.data-table tr{transition:background-color var(--transition-fast)}.data-table tr:nth-child(2n){background-color:#0000000d}.data-table tr:hover{background-color:#3a86ff0d}.link{border-radius:4px;color:var(--accent-primary);display:inline-block;font-weight:500;padding:.25rem .5rem;text-decoration:none;transition:all var(--transition-fast)}.link:hover{background-color:#3a86ff1a;text-decoration:underline}.modality-badge{border-radius:4px;display:inline-block;font-size:.75rem;font-weight:500;padding:.25rem .5rem;text-align:center}.modality-badge.ftir{background-color:#3a86ff1a;border:1px solid #3a86ff33;color:var(--accent-primary)}.modality-badge.raman{background-color:#10b9811a;border:1px solid #10b98133;color:var(--success-color)}.modality-badge.hsi{background-color:#f59e0b1a;border:1px solid #f59e0b33;color:var(--warning-color)}.action-button{align-items:center;border:1px solid #0000;border-radius:4px;cursor:pointer;display:inline-flex;font-size:.75rem;font-weight:500;justify-content:center;margin-right:.5rem;padding:.25rem .5rem;transition:all var(--transition-fast)}.action-button.delete{background-color:#ef44441a;border-color:#ef444433;color:var(--error-color)}.action-button.delete:hover{background-color:#ef444433}.action-button.export{background-color:#10b9811a;border-color:#10b98133;color:var(--success-color)}.action-button.export:hover{background-color:#10b98133}.button-icon{margin-right:.25rem}.no-data{color:var(--text-tertiary);font-style:italic;padding:2rem;text-align:center}@media (max-width:768px){.filters{flex-direction:column}.action-button{font-size:.75rem;margin-bottom:.25rem;padding:.25rem .375rem;width:100%}.data-table td,.data-table th{font-size:.75rem;padding:.625rem .5rem}}.navbar{align-items:center;background-color:var(--bg-secondary);border-bottom:1px solid var(--border-color);box-shadow:var(--shadow-md);color:var(--text-primary);display:flex;justify-content:space-between;padding:1rem 2rem;position:sticky;top:0;z-index:100}.navbar-brand{font-size:1.25rem;font-weight:600}.logo{align-items:center;display:flex}.logo-text{color:var(--text-primary);letter-spacing:.05em}.logo-highlight{color:var(--accent-primary);margin:0 .25rem;position:relative}.navbar-menu{gap:.5rem}.navbar-item,.navbar-menu{align-items:center;display:flex}.navbar-item{border-radius:6px;color:var(--text-secondary);font-size:.875rem;font-weight:500;padding:.5rem .75rem;text-decoration:none;transition:all var(--transition-fast)}.navbar-item:hover{background-color:var(--bg-tertiary);color:var(--text-primary)}.nav-icon{color:var(--accent-primary);font-size:1rem;margin-right:.5rem}.logout-button{align-items:center;background-color:initial;border:1px solid #0000;border-radius:6px;color:var(--text-secondary);display:flex;font-size:.875rem;font-weight:500;padding:.5rem .75rem}.logout-button:hover{background-color:#ef44441a;border-color:#ef444433;color:var(--error-color)}@media (max-width:768px){.navbar{flex-direction:column;padding:1rem}.navbar-brand{margin-bottom:1rem}.navbar-menu{justify-content:space-between;width:100%}.logout-button,.navbar-item{font-size:.75rem;padding:.5rem}.nav-icon{margin-right:.25rem}}:root{--bg-primary:#0f1116;--bg-secondary:#161922;--bg-tertiary:#1e2230;--accent-primary:#3a86ff;--accent-secondary:#4361ee;--text-primary:#f8f9fa;--text-secondary:#adb5bd;--text-tertiary:#6c757d;--border-color:#2a2f3a;--success-color:#10b981;--error-color:#ef4444;--warning-color:#f59e0b;--font-primary:"Inter",-apple-system,BlinkMacSystemFont,sans-serif;--font-mono:"Roboto Mono",monospace;--shadow-sm:0 1px 2px #0000001a;--shadow-md:0 4px 6px #0000001a;--shadow-lg:0 10px 15px #0000001a;--transition-fast:0.15s ease;--transition-normal:0.3s ease}*{box-sizing:border-box;margin:0;padding:0}body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:#0f1116;background-color:var(--bg-primary);color:#f8f9fa;color:var(--text-primary);font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif;font-family:var(--font-primary);line-height:1.6;overflow-x:hidden}.app-container{display:flex;flex-direction:column;min-height:100vh;position:relative}.content{flex:1 1;margin:0 auto;max-width:1200px;padding:2rem;position:relative;width:100%;z-index:1}h1,h2,h3,h4,h5,h6{color:#f8f9fa;color:var(--text-primary);font-weight:600;letter-spacing:-.02em;margin-bottom:1rem}h1{font-size:2rem;margin-bottom:1.5rem}h2{font-size:1.5rem;margin-bottom:1rem}button{align-items:center;background-color:#1e2230;background-color:var(--bg-tertiary);border:1px solid #2a2f3a;border:1px solid var(--border-color);border-radius:6px;color:#f8f9fa;color:var(--text-primary);cursor:pointer;display:inline-flex;font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif;font-family:var(--font-primary);font-size:.875rem;font-weight:500;justify-content:center;padding:.625rem 1rem;transition:all .15s ease;transition:all var(--transition-fast)}button:hover{background-color:#161922;background-color:var(--bg-secondary);border-color:#3a86ff;border-color:var(--accent-primary)}button:focus{box-shadow:0 0 0 2px #3a86ff4d;outline:none}button:disabled{cursor:not-allowed;opacity:.6}input,select{background-color:#1e2230;background-color:var(--bg-tertiary);border:1px solid #2a2f3a;border:1px solid var(--border-color);border-radius:6px;color:#f8f9fa;color:var(--text-primary);font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif;font-family:var(--font-primary);font-size:.875rem;padding:.625rem .75rem;transition:all .15s ease;transition:all var(--transition-fast);width:100%}input:focus,select:focus{border-color:#3a86ff;border-color:var(--accent-primary);box-shadow:0 0 0 2px #3a86ff33;outline:none}label{color:#adb5bd;color:var(--text-secondary);display:block;font-size:.875rem;font-weight:500;margin-bottom:.5rem}.error-message{border-radius:6px;color:#ef4444}.grid-overlay{background-image:linear-gradient(90deg,#2a2f3a0d 1px,#0000 0),linear-gradient(180deg,#2a2f3a0d 1px,#0000 0);background-size:40px 40px;bottom:0;left:0;pointer-events:none;position:fixed;right:0;top:0;z-index:0}@media (max-width:768px){.content{padding:1.5rem 1rem}h1{font-size:1.75rem}h2{font-size:1.25rem}}.upload-tab{color:var(--text-primary)}.file-input-container{margin-bottom:1.25rem;position:relative}.file-input{height:.1px;opacity:0;overflow:hidden;position:absolute;width:.1px;z-index:-1}.file-input-label{align-items:center;background-color:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:6px;color:var(--text-primary);cursor:pointer;display:flex;font-size:.875rem;justify-content:center;padding:.75rem;transition:all var(--transition-fast)}.file-input-label:hover{background-color:#3a86ff0d;border-color:var(--accent-primary)}.file-icon{font-size:1rem;margin-right:.5rem}.preview-container{margin-bottom:1.5rem}.preview-container h3{color:var(--text-primary);font-size:1rem;font-weight:600;margin-bottom:.75rem}.image-previews{grid-gap:.75rem;display:grid;gap:.75rem;grid-template-columns:repeat(auto-fill,minmax(120px,1fr))}.image-preview{background-color:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:6px;overflow:hidden;transition:all var(--transition-fast)}.image-preview:hover{border-color:var(--accent-primary);box-shadow:var(--shadow-sm)}.image-preview img{display:block;height:100px;object-fit:cover;width:100%}.image-name{color:var(--text-secondary);display:block;font-size:.75rem;overflow:hidden;padding:.5rem;text-align:center;text-overflow:ellipsis;white-space:nowrap}.upload-button{align-items:center;background-color:var(--accent-primary);border:none;border-radius:6px;color:#fff;cursor:pointer;display:flex;font-size:.875rem;font-weight:500;justify-content:center;margin-bottom:1.5rem;padding:.625rem;transition:all var(--transition-fast);width:100%}.upload-button:hover{background-color:var(--accent-secondary)}.upload-results{background-color:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:8px;padding:1.25rem}.upload-results h3{color:var(--text-primary);font-size:1rem;font-weight:600;margin-bottom:.75rem}.result-item{align-items:center;border-radius:4px;display:flex;font-size:.875rem;margin-bottom:.5rem;padding:.625rem}.result-item.success{background-color:#10b9811a;border:1px solid #10b98133}.result-item.error{background-color:#ef44441a;border:1px solid #ef444433}.result-icon{font-size:1rem;margin-right:.5rem}.result-item.success .result-icon{color:var(--success-color)}.result-item.error .result-icon{color:var(--error-color)}@media (max-width:600px){.image-previews{grid-template-columns:repeat(auto-fill,minmax(90px,1fr))}.image-preview img{height:70px}}.search-results{border-top:1px solid var(--border-color);margin-top:2rem;padding-top:1.5rem}.search-results h2{color:var(--text-primary);font-size:1.25rem;font-weight:600;margin-bottom:1.25rem}.results-summary{background-color:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:8px;display:flex;flex-wrap:wrap;gap:1rem;margin-bottom:1.5rem;padding:1rem}.summary-item{flex:1 1;min-width:150px}.summary-label{color:var(--text-secondary);display:block;font-size:.75rem;letter-spacing:.05em;margin-bottom:.25rem;text-transform:uppercase}.summary-value{color:var(--text-primary);font-size:.875rem;font-weight:500}.results-grid{grid-gap:1rem;gap:1rem;grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}.result-card{background-color:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:8px;overflow:hidden;position:relative;transition:all var(--transition-fast)}.result-card:hover{border-color:var(--accent-primary);box-shadow:var(--shadow-md);transform:translateY(-2px)}.result-rank{background-color:var(--accent-primary);border-radius:4px;color:#fff;font-size:.75rem;font-weight:500;padding:.25rem .5rem;position:absolute;right:.5rem;top:.5rem;z-index:1}.result-image-container{border-bottom:1px solid var(--border-color);height:150px}.result-image{object-fit:cover}.result-card:hover .result-image{transform:scale(1.05)}.result-details{padding:.75rem}.result-filename{font-size:.875rem;font-weight:500;margin-bottom:.5rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.result-score-container{align-items:center;display:flex;flex-wrap:wrap;gap:.5rem}.result-score-label{color:var(--text-secondary);font-size:.75rem}.result-score-bar-container{background-color:var(--bg-primary);border-radius:3px;flex:1 1;height:6px;overflow:hidden}.result-score-bar{background:var(--accent-primary);border-radius:3px;height:100%}.result-score-value{color:var(--accent-primary);font-size:.75rem;font-weight:500;min-width:40px;text-align:right}@media (max-width:600px){.results-grid{grid-template-columns:1fr}}.search-tab{color:var(--text-color)}.tab-description{color:#e0f2ffcc;margin-bottom:2rem}.range-input{background:#001428b3;border:1px solid var(--neon-blue);border-radius:4px;height:8px}.range-input::-webkit-slider-thumb{background:var(--neon-blue);box-shadow:0 0 10px #00a2ff80;height:20px;width:20px}.range-input::-moz-range-thumb{background:var(--neon-blue);border:none;box-shadow:0 0 10px #00a2ff80;height:20px;width:20px}.range-value{background-color:#00a2ff1a;border:1px solid var(--neon-blue);color:var(--neon-blue);font-weight:700;padding:5px 10px}.query-preview{margin:1.5rem 0}.query-preview h3{color:var(--neon-blue);font-size:1.2rem;margin-bottom:1rem}.preview-image-container{background-color:#001428b3;border:1px solid var(--neon-blue);border-radius:8px;box-shadow:0 0 15px #00a2ff4d;max-width:300px}.search-button{background-color:#00a2ff1a;border:1px solid var(--neon-blue);border-radius:4px;color:var(--neon-blue);font-size:1rem;font-weight:700;padding:.75rem;transition:all .3s ease}.search-button:hover{background-color:#00a2ff33;box-shadow:0 0 15px #00a2ff80}.loading-spinner{border:2px solid #00a2ff4d;border-top:2px solid var(--neon-blue);margin-right:10px}.search-tab{color:var(--text-primary)}.tab-description{color:var(--text-secondary);font-size:.875rem;margin-bottom:1.5rem}.range-container{align-items:center;display:flex;gap:1rem}.range-input{appearance:none;background:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:3px;flex:1 1;height:6px;outline:none}.range-input::-webkit-slider-thumb{appearance:none;background:var(--accent-primary);border:2px solid #fff;border-radius:50%;cursor:pointer;height:16px;width:16px}.range-input::-moz-range-thumb{background:var(--accent-primary);border:2px solid #fff;border-radius:50%;cursor:pointer;height:16px;width:16px}.range-value{background-color:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:4px;color:var(--text-primary);font-size:.875rem;font-weight:500;min-width:30px;padding:.25rem .5rem;text-align:center}.query-preview{margin:1.25rem 0}.query-preview h3{color:var(--text-primary);font-size:1rem;font-weight:600;margin-bottom:.75rem}.preview-image-container{background-color:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:6px;box-shadow:var(--shadow-sm);margin:0 auto;max-width:250px;overflow:hidden}.preview-image-container img{display:block;height:auto;width:100%}.search-button{align-items:center;background-color:var(--accent-primary);border:none;border-radius:6px;color:#fff;cursor:pointer;display:flex;font-size:.875rem;font-weight:500;justify-content:center;margin-bottom:1.5rem;padding:.625rem;transition:all var(--transition-fast);width:100%}.search-button:hover{background-color:var(--accent-secondary)}.loading-spinner{animation:spin 1s linear infinite;border:2px solid #ffffff4d;height:16px;margin-right:.5rem;width:16px}@media (max-width:600px){.preview-image-container{max-width:100%}}.rag-container{margin:0 auto;max-width:1000px;padding:1rem 0}.tabs{background-color:var(--bg-secondary);border:1px solid var(--border-color);border-radius:8px;margin-bottom:1.5rem;overflow:hidden}.tab,.tabs{display:flex}.tab{align-items:center;border-bottom:2px solid #0000;color:var(--text-secondary);cursor:pointer;flex:1 1;font-size:.875rem;font-weight:500;justify-content:center;padding:.75rem;text-align:center;transition:all var(--transition-fast)}.tab:hover{color:var(--text-primary)}.tab.active,.tab:hover{background-color:var(--bg-tertiary)}.tab.active{border-bottom:2px solid var(--accent-primary);color:var(--accent-primary)}.tab-icon{font-size:1rem;margin-right:.5rem}.tab-content{background-color:var(--bg-secondary);border:1px solid var(--border-color);border-radius:12px;box-shadow:var(--shadow-md);padding:1.5rem}@media (max-width:600px){.tab{font-size:.75rem;padding:.625rem .5rem}.tab-icon{margin-right:.25rem}.tab-content{padding:1.25rem 1rem}}.visualization-container{display:flex;flex-direction:column;height:100vh;position:relative;width:100%}.canvas-container{background-color:#111;border-radius:8px;box-shadow:0 4px 12px #0003;flex:1 1;height:calc(100% - 60px);overflow:hidden;position:relative;width:100%}.controls{background-color:#222;border-radius:8px;display:flex;gap:20px;margin-bottom:10px;padding:10px}.filter-group{align-items:center;display:flex;gap:8px}.filter-group label{color:#eee;font-weight:700;min-width:100px}.filter-group select{background-color:#333;border:1px solid #444;border-radius:4px;color:#fff;padding:6px 10px}.loading{font-size:18px;left:50%;padding:16px 24px;top:50%;transform:translate(-50%,-50%)}.loading,.tooltip{background-color:#000c;border-radius:8px;color:#fff;position:absolute;z-index:1000}.tooltip{animation:fade-in .2s ease-in-out;max-width:300px;padding:12px}.detail-panel,.tooltip{box-shadow:0 4px 12px #0000004d;right:10px;top:10px}.detail-panel{background-color:#000c;border-radius:8px;color:#fff;max-width:350px;padding:16px;position:absolute;z-index:1000}.detail-panel h3{border-bottom:1px solid #444;margin-top:0;padding-bottom:8px}.preview-image{border-radius:4px;margin-top:10px;max-width:100%}.detail-panel button{background-color:#4ecdc4;border:none;border-radius:4px;color:#000;cursor:pointer;margin-top:16px;padding:8px 16px}.data-label{background-color:#000000b3;border-radius:4px;color:#fff;font-size:12px;padding:4px 8px;pointer-events:none;transform:translate3d(-50%,-30px,0);white-space:nowrap}.legend{background-color:#000c;border-radius:8px;bottom:20px;color:#fff;left:20px;max-width:200px;padding:10px;position:absolute;z-index:10}.legend h4{border-bottom:1px solid #444;margin-top:0;padding-bottom:6px}.legend-section{margin-top:10px}.legend-section h5{font-size:14px;margin:0 0 6px}.legend-item{align-items:center;display:flex;margin-bottom:6px}.color-box{border-radius:4px}.color-box,.shape-box{height:16px;margin-right:8px;width:16px}.shape-box{background-color:#f5f5f5;position:relative}.shape-box.sphere{border-radius:50%}.shape-box.cube{border-radius:2px}.shape-box.tetrahedron{clip-path:polygon(50% 0,0 100%,100% 100%)}@keyframes fade-in{0%{opacity:0}to{opacity:1}}.container{margin:0 auto;max-width:1000px;padding:1rem 0}.page-title{color:var(--text-primary);display:inline-block;font-size:2rem;font-weight:700;left:50%;margin-bottom:1.5rem;position:relative;text-align:center;transform:translateX(-50%)}.page-title:after{background:linear-gradient(90deg,var(--accent-primary),#0000);border-radius:3px;bottom:-8px;content:"";height:3px;left:0;position:absolute;width:100%}.upload-card{background-color:var(--bg-secondary);border:1px solid var(--border-color);border-radius:12px;box-shadow:var(--shadow-md);margin-bottom:2rem;padding:1.5rem;transition:transform var(--transition-normal),box-shadow var(--transition-normal)}.upload-card:hover{box-shadow:0 8px 24px #00000026}.upload-card h2{border-bottom:1px solid var(--border-color);color:var(--text-primary);font-size:1.25rem;font-weight:600;margin-bottom:1.5rem;padding-bottom:.75rem;position:relative}.upload-card h2:before{color:var(--accent-primary);content:"⟲";font-weight:400;margin-right:10px}.form-group{margin-bottom:1.5rem}.form-label{color:var(--text-secondary);display:block;font-weight:500;margin-bottom:.625rem}.modality-options{display:flex;flex-wrap:wrap;gap:1rem}.radio-button-container{flex:1 1;min-width:150px}.radio-button{align-items:center;border:1px solid var(--border-color);border-radius:8px;cursor:pointer;display:flex;overflow:hidden;padding:.75rem 1rem;position:relative;transition:all var(--transition-fast)}.radio-button.active{background-color:#3a86ff1a}.radio-button.active,.radio-button:hover{border-color:var(--accent-primary)}.radio-button input{height:0;opacity:0;position:absolute;width:0}.radio-icon{align-items:center;border:2px solid var(--text-secondary);border-radius:50%;display:flex;height:20px;justify-content:center;margin-right:.625rem;transition:all var(--transition-fast);width:20px}.radio-button.active .radio-icon{border-color:var(--accent-primary)}.radio-button.active .radio-icon:after{background-color:var(--accent-primary);border-radius:50%;content:"";height:10px;width:10px}.radio-label{color:var(--text-primary);font-size:.875rem;font-weight:500}.drop-zone{background-color:var(--bg-tertiary);border:2px dashed var(--border-color);border-radius:12px;cursor:pointer;margin-bottom:1.5rem;overflow:hidden;padding:2rem;position:relative;text-align:center;transition:all var(--transition-normal)}.drop-zone.active,.drop-zone:hover{background-color:#3a86ff0d;border-color:var(--accent-primary)}.drop-icon{color:var(--accent-primary);font-size:2.5rem;margin-bottom:1rem;transition:transform var(--transition-normal)}.drop-zone.active .drop-icon,.drop-zone:hover .drop-icon{transform:translateY(-10px)}.drop-text{color:var(--text-primary);font-size:1.125rem;font-weight:500;margin:0 0 .5rem}.drop-subtext{color:var(--text-secondary);font-size:.875rem}.file-info{align-items:center;background-color:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:8px;display:flex;margin-top:1rem;padding:.75rem 1rem}.file-info-icon{color:var(--accent-primary);font-size:1.25rem;margin-right:.75rem}.file-info-text{flex:1 1}.file-info-name{color:var(--text-primary);font-size:.875rem;font-weight:500;margin-bottom:.25rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.file-info-size{color:var(--text-secondary);font-size:.75rem}.error-message{align-items:center;background-color:#ef44441a;border:1px solid #ef444433;border-radius:8px;color:var(--error-color);display:flex;font-size:.875rem;margin-bottom:1rem;padding:.75rem}.error-icon{font-size:1.125rem;margin-right:.625rem}.submit-button{align-items:center;background-color:var(--accent-primary);border:none;border-radius:8px;color:#fff;cursor:pointer;display:flex;font-size:1rem;font-weight:500;justify-content:center;overflow:hidden;padding:.875rem;position:relative;transition:all var(--transition-fast);width:100%}.submit-button:hover{background-color:var(--accent-secondary);box-shadow:0 4px 12px #3a86ff40;transform:translateY(-2px)}.submit-button:active{transform:translateY(0)}.submit-button:after{background:radial-gradient(circle,#fff3 0,#0000 70%);content:"";height:200%;left:-50%;opacity:0;position:absolute;top:-50%;transition:opacity var(--transition-fast);width:200%}.submit-button:hover:after{opacity:1}.submit-button:disabled{background-color:var(--text-tertiary);box-shadow:none;cursor:not-allowed;transform:none}.loading-spinner{animation:spin 1s ease-in-out infinite;border:3px solid #ffffff4d;border-radius:50%;border-top-color:#fff;display:inline-block;height:20px;margin-right:.75rem;width:20px}@keyframes spin{to{transform:rotate(1turn)}}.results-card{animation:slideUp .5s ease-out forwards;background-color:var(--bg-secondary);border:1px solid var(--border-color);border-radius:12px;box-shadow:var(--shadow-md);padding:1.5rem}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.results-card h2{border-bottom:1px solid var(--border-color);color:var(--text-primary);font-size:1.25rem;font-weight:600;margin-bottom:1.5rem;padding-bottom:.75rem;position:relative}.results-card h2:before{color:var(--success-color);content:"✓";margin-right:10px}.results-grid{grid-gap:1.5rem;display:grid;gap:1.5rem;grid-template-columns:1fr 1fr}.result-item{background-color:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:12px;overflow:hidden;transition:transform var(--transition-normal),box-shadow var(--transition-normal)}.result-item:hover{box-shadow:0 8px 24px #00000026;transform:translateY(-5px)}.result-header{background-color:#0003;border-bottom:1px solid var(--border-color);padding:1rem}.result-title{align-items:center;color:var(--text-primary);display:flex;font-size:1rem;font-weight:600;margin:0}.modality-icon{align-items:center;background-color:var(--bg-secondary);border-radius:50%;display:inline-flex;font-size:.875rem;height:24px;justify-content:center;margin-right:.75rem;width:24px}.ftir-icon{color:#3a86ff}.raman-icon{color:#10b981}.result-image-container{height:200px;overflow:hidden;position:relative;width:100%}.result-image{background-color:var(--bg-secondary);height:100%;object-fit:contain;padding:1rem;transition:transform var(--transition-normal);width:100%}.result-item:hover .result-image{transform:scale(1.05)}.image-overlay{background:linear-gradient(0deg,#0000004d,#0000 50%);bottom:0;left:0;pointer-events:none;position:absolute;right:0;top:0}.result-details{padding:1rem}.detail-row{align-items:center;display:flex;margin-bottom:.5rem}.detail-label{color:var(--text-secondary);flex:0 0 100px;font-size:.75rem;font-weight:500}.detail-value{color:var(--text-primary);font-size:.875rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.classification-badge{background-color:#10b9811a;border:1px solid #10b98133;border-radius:4px;color:var(--success-color);display:inline-flex;font-size:.75rem;font-weight:500;padding:.25rem .5rem}.download-link{align-items:center;background-color:var(--bg-secondary);border-top:1px solid var(--border-color);color:var(--accent-primary);display:flex;font-size:.875rem;font-weight:500;justify-content:center;padding:.625rem;text-decoration:none;transition:all var(--transition-fast)}.download-link:hover{background-color:#3a86ff1a}.download-icon{margin-right:.5rem}@media (max-width:768px){.results-grid{grid-template-columns:1fr}.modality-options{flex-direction:column}.result-item{margin-bottom:1rem}}.glow-container{position:relative}.glow-effect{border-radius:12px;bottom:0;filter:blur(15px);left:0;opacity:0;position:absolute;right:0;top:0;transition:opacity var(--transition-normal);z-index:-1}.ftir-glow{background:radial-gradient(circle at top left,#3a86ff33,#0000 70%)}.raman-glow{background:radial-gradient(circle at top right,#10b98133,#0000 70%)}.glow-container:hover .glow-effect{opacity:1}.results-section{display:flex;flex-direction:column;gap:1.5rem}.results-grid.three-items{grid-template-columns:repeat(3,1fr)}@media (max-width:992px){.results-grid.three-items{grid-template-columns:1fr 1fr}}@media (max-width:768px){.results-grid.three-items{grid-template-columns:1fr}}.visualization-card{animation:slideUp .5s ease-out forwards;background-color:var(--bg-secondary);border:1px solid var(--border-color);border-radius:12px;box-shadow:var(--shadow-md);overflow:hidden;padding:1.5rem}.visualization-card h2{border-bottom:1px solid var(--border-color);color:var(--text-primary);font-size:1.25rem;font-weight:600;margin-bottom:1rem;padding-bottom:.75rem;position:relative}.visualization-card h2:before{content:"🔄";margin-right:10px}.visualization-image{box-shadow:var(--shadow-sm);max-height:400px;object-fit:contain;padding:1rem;width:100%}.visualization-image,.viz-details{background-color:var(--bg-tertiary);border-radius:8px}.viz-details{align-items:center;border:1px solid var(--border-color);display:flex;margin-top:1rem;padding:.5rem}.viz-label{color:var(--text-secondary);font-weight:500;margin-right:.5rem}.viz-value{color:var(--text-primary);font-weight:600}.download-viz-button{align-items:center;background-color:var(--bg-secondary);border:1px solid var(--border-color);border-radius:6px;color:var(--accent-primary);display:flex;font-size:.875rem;font-weight:500;margin-left:auto;padding:.5rem 1rem;text-decoration:none;transition:all var(--transition-fast)}.download-viz-button:hover{background-color:#3a86ff1a;transform:translateY(-2px)}.action-buttons{display:flex;justify-content:flex-end;margin-bottom:1rem}.sample-button{align-items:center;background-color:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:8px;color:var(--text-primary);cursor:pointer;display:flex;font-size:.875rem;font-weight:500;padding:.5rem 1rem;transition:all var(--transition-fast)}.sample-button:hover{background-color:var(--bg-quaternary);box-shadow:var(--shadow-sm)}.sample-selector-modal{animation:fadeIn .3s ease-out forwards;background-color:var(--bg-secondary);border:1px solid var(--border-color);border-radius:12px;box-shadow:var(--shadow-lg);display:flex;flex-direction:column;margin-bottom:1.5rem;max-height:500px;overflow:hidden;position:relative}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.sample-selector-header{align-items:center;border-bottom:1px solid var(--border-color);display:flex;justify-content:space-between;padding:1rem}.sample-selector-header h3{color:var(--text-primary);font-size:1rem;margin:0}.close-button{align-items:center;background-color:initial;border:none;border-radius:50%;color:var(--text-secondary);cursor:pointer;display:flex;font-size:1.5rem;height:28px;justify-content:center;padding:0;transition:all var(--transition-fast);width:28px}.close-button:hover{background-color:#0000001a;color:var(--text-primary)}.sample-tabs{background-color:var(--bg-tertiary);border-bottom:1px solid var(--border-color);display:flex}.tab-button{background-color:initial;border:none;color:var(--text-secondary);cursor:pointer;flex:1 1;font-size:.875rem;font-weight:500;padding:.75rem 1rem;position:relative;transition:all var(--transition-fast)}.tab-button:hover{background-color:#0000000d;color:var(--text-primary)}.tab-button.active{background-color:var(--bg-secondary);color:var(--accent-primary)}.tab-button.active:after{background-color:var(--accent-primary);bottom:-1px;content:"";height:2px;left:0;position:absolute;right:0}.tab-button.special{background-color:#3a86ff1a;color:var (--accent-primary)}.sample-grid{grid-gap:1rem;display:grid;gap:1rem;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));max-height:350px;overflow-y:auto;padding:1rem}.sample-item{background-color:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:8px;box-shadow:var(--shadow-sm);cursor:pointer;overflow:hidden;transition:all var(--transition-fast)}.sample-item:hover{border-color:var(--accent-primary);box-shadow:var(--shadow-md);transform:translateY(-5px)}.sample-item img{background-color:var(--bg-secondary);height:100px;object-fit:cover;width:100%}.sample-details{padding:.5rem}.sample-class{color:var(--accent-primary);display:block;font-size:.75rem;font-weight:600;margin-bottom:.25rem}.sample-name{color:var(--text-secondary);display:block;font-size:.7rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sample-pair{background-color:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:8px;grid-column:1/-1;overflow:hidden;padding:.5rem}.sample-pair h4{color:var(--text-primary);font-size:.875rem;margin:0 0 .5rem;padding-left:.5rem}.pair-container{display:flex;gap:.5rem}.sample-item.half{flex:1 1;margin:0}.sample-item.half img{height:80px}.embedding-section{border-top:1px solid var(--border-color);margin-top:2rem;padding-top:1rem}.embedding-section h3{color:var(--text-primary);font-size:1rem;margin-bottom:1rem}.embedding-info{align-items:center;color:var(--text-secondary);display:flex;font-size:.875rem;justify-content:space-between;margin-bottom:.5rem}.copy-embedding-btn{background-color:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:4px;color:var(--text-primary);cursor:pointer;font-size:.75rem;padding:.25rem .5rem;transition:all var(--transition-fast)}.copy-embedding-btn:hover{background-color:var(--bg-quaternary);color:var(--accent-primary)}.embedding-visualization{align-items:flex-end;background-color:var(--bg-tertiary);border-radius:8px;display:flex;gap:2px;height:100px;padding:.5rem}.embedding-value{background-color:var(--accent-primary);border-radius:2px 2px 0 0;flex:1 1;min-width:2px;transition:height .3s ease}.embedding-more{align-self:center;color:var(--text-secondary);font-size:.75rem;margin-left:.5rem}@media (max-width:768px){.sample-grid{grid-template-columns:repeat(auto-fill,minmax(120px,1fr))}}
/*# sourceMappingURL=main.043c1ce5.css.map*/