.drop-zone {
 border: 2px dashed #ccc;
 border-radius: 4px;
 padding: 40px 20px;
 text-align: center;
 transition: all 0.3s ease;
 cursor: pointer;
}

.drop-zone:hover, .drop-zone.drag-over {
 background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Crect width='10' height='10' fill='%23f0f0f0'/%3E%3Crect x='10' y='10' width='10' height='10' fill='%23f0f0f0'/%3E%3C/svg%3E");
 background-size: 10px 10px !important;
 transition: background-image 0.3s ease, background-color 0.3s ease;
 border-color: #23527c;
}

.drop-zone-icon {
 font-size: 48px;
 color: #337ab7;
 margin-bottom: 15px;
}

.file-list {
 margin-top: 20px;
 max-height: 500px;
 overflow-y: auto;
}

.file-item {
 background: white;
 border-radius: 4px;
 padding: 15px;
 margin-bottom: 10px;
 box-shadow: 0 1px 3px rgba(0,0,0,0.1);
 display: flex;
 align-items: center;
 transition: all 0.3s ease;
}

.file-item:hover {
 box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}

.file-item.processing {
 border-left: 4px solid #f0ad4e;
}

.file-item.done {
 border-left: 4px solid #5cb85c;
}

.file-item.error {
 border-left: 4px solid #d9534f;
}

.file-preview {
 width: 60px;
 height: 60px;
 object-fit: contain;
 border-radius: 4px;
 margin-right: 15px;
 background-image: linear-gradient(45deg,#ccc 25%,transparent 25%),
                linear-gradient(-45deg,#ccc 25%,transparent 25%),
                linear-gradient(45deg,transparent 75%,#ccc 75%),
                linear-gradient(-45deg,transparent 75%,#ccc 75%);
 background-size: 10px 10px;
}

.file-info {
 flex: 1;
}

.file-name {
 font-weight: 600;
 margin-bottom: 5px;
 white-space: nowrap;
 overflow: hidden;
 text-overflow: ellipsis;
 max-width: 300px;
}

.file-stats {
 font-size: 12px;
 color: #777;
}

.file-actions {
 display: flex;
 gap: 8px;
}

.loading-overlay {
 position: fixed;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background: rgba(0,0,0,0.7);
 display: none;
 align-items: center;
 justify-content: center;
 z-index: 9999;
}

.loading-overlay.active {
 display: flex;
}

.progress-bar-container {
 width: 100px;
 height: 6px;
 background: #eee;
 border-radius: 3px;
 overflow: hidden;
 margin-top: 5px;
}

.progress-bar {
 height: 100%;
 background: #5cb85c;
 width: 0%;
 transition: width 0.3s ease;
}

.stats-summary {
 background: white;
 border-radius: 4px;
 padding: 20px;
 margin: 20px 0;
 box-shadow: 0 1px 3px rgba(0,0,0,0.1);
 border: 1px solid #ddd;
 display: none;
}

.stats-summary.show {
 display: block;
}

.opencv-status {
 padding: 10px;
 border-radius: 4px;
 margin-bottom: 15px;
 font-weight: bold;
}

.opencv-loading {
 background-color: #fcf8e3;
 border-left: 4px solid #f0ad4e;
 color: #8a6d3b;
}

.opencv-ready {
 background-color: #dff0d8;
 border-left: 4px solid #5cb85c;
 color: #3c763d;
}

.threshold-slider {
 margin-top: 15px;
}

.advanced-toggle {
 cursor: pointer;
 color: #337ab7;
 font-weight: 500;
 margin-top: 15px;
 display: inline-block;
}

.advanced-toggle:hover {
 text-decoration: underline;
}

.advanced-settings {
 margin-top: 15px;
 padding-top: 15px;
 border-top: 1px dashed #ddd;
 display: none;
}

.advanced-settings.show {
 display: block;
}