:root{--primary-color: #42b883;--secondary-color: #35495e;--background-color: #f4f7f6;--text-color: #333;--light-gray: #e0e0e0;--white: #ffffff;--danger-color: #e74c3c}body{font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;margin:0;background-color:var(--background-color);color:var(--text-color)}#app-container{max-width:1200px;margin:0 auto;padding:1rem 2rem}.app-header{text-align:center;margin-bottom:2rem;border-bottom:1px solid var(--light-gray);padding-bottom:1rem}.app-header h1{color:var(--secondary-color);margin:0}.app-header p{color:#666}.main-content{display:flex;flex-direction:column;gap:2rem}.controls{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:1.5rem;padding:1.5rem;background-color:var(--white);border-radius:8px;box-shadow:0 2px 8px #0000000d}input[type=file]{display:none}.file-upload-label{background-color:var(--primary-color);color:var(--white);padding:12px 20px;border-radius:5px;cursor:pointer;font-weight:700;transition:background-color .3s;white-space:nowrap}.file-upload-label:hover{background-color:#36a873}.refresh-btn{background-color:var(--secondary-color);color:var(--white);padding:12px 20px;border-radius:5px;cursor:pointer;font-weight:700;border:none;transition:background-color .3s}.refresh-btn:hover:not(:disabled){background-color:#2c3e50}.refresh-btn:disabled{background-color:var(--light-gray);cursor:not-allowed}.threshold-control,.domain-control{display:flex;align-items:center;gap:.5rem;color:var(--secondary-color)}.domain-control input{padding:8px 12px;border:1px solid var(--light-gray);border-radius:5px;min-width:280px;font-size:1em}input[type=range]{cursor:pointer}.status-indicator{text-align:center;padding:1rem;border-radius:8px;font-weight:500;display:flex;justify-content:center;align-items:center;gap:1rem}.error-message{color:var(--danger-color);background-color:#fbecec;justify-content:space-between}.retry-btn{background-color:var(--primary-color);color:var(--white);border:none;padding:8px 16px;border-radius:5px;cursor:pointer;font-weight:700;transition:background-color .3s;white-space:nowrap}.retry-btn:hover{background-color:#36a873}.loader{border:4px solid #f3f3f3;border-top:4px solid var(--primary-color);border-radius:50%;width:20px;height:20px;animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.results-area{display:grid;grid-template-columns:2fr 1fr;gap:2rem;align-items:flex-start}.image-display{background-color:var(--white);padding:1rem;border-radius:8px;box-shadow:0 2px 8px #0000000d}.image-preview-container{position:relative;max-width:100%;display:inline-block}.image-preview-container img{max-width:100%;max-height:70vh;height:auto;width:auto;display:block;border-radius:4px;margin:0 auto}.bbox{position:absolute;border:2px solid var(--primary-color);box-sizing:border-box;transition:all .2s ease-in-out}.bbox:hover{border-width:3px;box-shadow:0 0 10px #42b88380}.bbox-label{position:absolute;bottom:100%;left:-2px;margin-bottom:4px;background-color:var(--primary-color);color:#fff;padding:3px 6px;font-size:12px;font-weight:700;white-space:nowrap;border-radius:3px}.detections-list{background-color:var(--white);padding:1.5rem;border-radius:8px;box-shadow:0 2px 8px #0000000d;max-height:60vh;overflow-y:auto}.detections-list h3{margin-top:0;color:var(--secondary-color);border-bottom:1px solid var(--light-gray);padding-bottom:.5rem}.detections-list ul{list-style:none;padding:0;margin:0}.detections-list li{display:flex;justify-content:space-between;align-items:center;padding:.75rem 0;border-bottom:1px solid var(--light-gray)}.detections-list li:last-child{border-bottom:none}.detection-info{display:flex;flex-direction:column}.class-name{font-weight:700}.confidence{font-size:.9em;color:#555}.download-btn{background-color:var(--secondary-color);color:var(--white);border:none;padding:8px 12px;border-radius:5px;cursor:pointer;transition:background-color .3s}.download-btn:hover{background-color:#2c3e50}.placeholder{text-align:center;padding:4rem;background-color:var(--white);border-radius:8px;box-shadow:0 2px 8px #0000000d;color:#888}@media (max-width: 992px){.results-area{grid-template-columns:1fr}.controls{flex-direction:column;gap:1.5rem}.domain-control input{width:100%;min-width:unset}}
