@import url('base.css');

.controls-row{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-bottom:16px}
.filter-input{min-width:220px}
.two-column{display:grid;grid-template-columns:1fr 360px;gap:24px}
@media(max-width:1100px){.two-column{grid-template-columns:1fr}}
.images-section{max-height:calc(100vh - 280px);overflow-y:auto;padding-right:8px}
.images-section::-webkit-scrollbar{width:6px}.images-section::-webkit-scrollbar-thumb{background:rgba(148,163,184,.2);border-radius:3px}
.image-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px}
.image-card{background:rgba(30,41,59,.6);border:1px solid rgba(148,163,184,.1);border-radius:12px;overflow:hidden;transition:all .2s;cursor:pointer}.image-card:hover{border-color:rgba(102,126,234,.3);transform:translateY(-2px);box-shadow:0 8px 25px rgba(0,0,0,.3)}.image-card.selected{border-color:#667eea;box-shadow:0 0 0 2px rgba(102,126,234,.25)}
.image-card.processing{animation:pulse-border 2s infinite}@keyframes pulse-border{0%,100%{border-color:rgba(102,126,234,.3)}50%{border-color:rgba(102,126,234,.7)}}
.image-wrapper{position:relative;width:100%;aspect-ratio:4/3;overflow:hidden;background:rgba(15,23,42,.8)}.image-wrapper img{width:100%;height:auto;display:block}
.processing-overlay{position:absolute;inset:0;background:rgba(15,23,42,.7);display:flex;align-items:center;justify-content:center;gap:8px;color:#a5b4fc;font-size:14px;font-weight:600;backdrop-filter:blur(4px)}
.image-info{padding:12px}.image-name{font-size:13px;font-weight:600;color:#e2e8f0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.checkbox-wrapper{padding:8px 12px 12px}.checkbox-wrapper label{display:flex;align-items:center;gap:8px;font-size:13px;color:#94a3b8;cursor:pointer}.checkbox-wrapper input{cursor:pointer;width:16px;height:16px;accent-color:#667eea}
.actions-wrapper{display:flex;gap:8px;padding:0 12px 12px}.btn-action{flex:1;text-align:center;padding:6px 10px;border-radius:6px;font-size:12px;font-weight:600;border:none;cursor:pointer;transition:all .2s}.btn-action-view{background:rgba(102,126,234,.15);color:#a5b4fc}.btn-action-view:hover{background:rgba(102,126,234,.25)}.btn-action-extract{background:rgba(72,187,120,.15);color:#68d391}.btn-action-extract:hover{background:rgba(72,187,120,.25)}
.queue-panel{background:rgba(30,41,59,.6);border:1px solid rgba(148,163,184,.1);border-radius:12px;padding:20px;position:sticky;top:84px;max-height:calc(100vh - 120px);overflow-y:auto}.queue-panel::-webkit-scrollbar{width:6px}.queue-panel::-webkit-scrollbar-thumb{background:rgba(148,163,184,.2);border-radius:3px}
.queue-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;padding-bottom:12px;border-bottom:1px solid rgba(148,163,184,.1)}.queue-header h2{font-size:18px;font-weight:700;color:#e2e8f0}.queue-stats{display:flex;gap:12px;font-size:12px;color:#94a3b8}
.queue-list{display:flex;flex-direction:column;gap:8px}.queue-item{padding:10px 12px;border-radius:8px;font-size:13px;display:flex;justify-content:space-between;align-items:center;animation:fadeIn .3s}.queue-item:hover{background:rgba(148,163,184,.05)}
.queue-item.status-pending{background:rgba(237,137,54,.1);color:#ed8936;border:1px solid rgba(237,137,54,.15)}
.queue-item.status-running{background:rgba(102,126,234,.1);color:#a5b4fc;border:1px solid rgba(102,126,234,.15);animation:pulse 2s infinite}@keyframes pulse{0%,100%{opacity:1}50%{opacity:.7}}
.queue-item.status-completed{background:rgba(56,161,105,.1);color:#68d391;border:1px solid rgba(56,161,105,.15)}
.queue-item.status-failed{background:rgba(197,48,48,.1);color:#fc8181;border:1px solid rgba(197,48,48,.15)}
.queue-name{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:200px}.queue-status{font-size:11px;font-weight:600;text-transform:uppercase}.queue-time{font-size:11px;color:#64748b}
.progress-bar{height:6px;background:rgba(148,163,184,.1);border-radius:3px;overflow:hidden;margin-top:12px}.progress-fill{height:100%;background:linear-gradient(90deg,#667eea,#764ba2);border-radius:3px;transition:width .5s}
.expand-btn{background:rgba(148,163,184,.1);border:none;border-radius:6px;padding:4px 8px;color:#94a3b8;cursor:pointer;font-size:11px;margin-left:8px;transition:all .2s}.expand-btn:hover{background:rgba(148,163,184,.2)}
.queue-detail{background:rgba(15,23,42,.4);border-radius:6px;padding:8px 12px;margin-top:6px;font-size:12px;white-space:pre-wrap;overflow-wrap:break-word;max-height:200px;overflow-y:auto;color:#94a3b8}
.btn-expand{position:absolute;bottom:8px;right:8px;background:rgba(0,0,0,.5);color:#fff;border:none;width:32px;height:32px;border-radius:50%;font-size:14px;cursor:pointer;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .2s}.image-wrapper:hover .btn-expand{opacity:1}
#image-modal .modal-content{background:transparent;border:none;padding:0}#image-modal .modal-content img{max-width:90vw;max-height:85vh;object-fit:contain;display:block;border-radius:8px}
.load-more-btn{width:100%;padding:14px;border-radius:10px;background:rgba(102,126,234,.1);color:#a5b4fc;font-weight:600;font-size:14px;border:1px solid rgba(102,126,234,.15);cursor:pointer;transition:all .2s;margin-top:16px}.load-more-btn:hover{background:rgba(102,126,234,.2)}