/* 超级矢量 tab：左栏表单+队列/历史，中间原图/成品对照 */
.sv-root{display:flex;flex-direction:column;height:100%;min-height:0;}
.sv-topbar{display:flex;align-items:center;gap:12px;padding:8px 14px;flex-shrink:0;
  background:var(--bg-base);border-bottom:1px solid var(--border);}
.sv-title{display:flex;align-items:center;gap:7px;font-size:13.5px;flex-shrink:0;}
.sv-title-icon{display:inline-flex;color:var(--primary);}
.sv-title b{font-weight:700;}
.sv-job-state{display:flex;align-items:center;gap:7px;min-width:0;font-size:12px;color:var(--text-muted);
  background:var(--bg-card);border:1px solid var(--border);border-radius:8px;padding:5px 11px;}
.sv-job-state .sv-state-text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--text);}
.sv-job-state .sv-state-text.muted{color:var(--text-muted);}
.sv-top-actions{display:flex;align-items:center;gap:7px;margin-left:auto;}
.sv-btn{display:inline-flex;align-items:center;gap:5px;padding:6px 11px;border-radius:8px;border:1px solid var(--border);
  background:var(--bg-card);color:var(--text);font-size:12px;font-weight:600;cursor:pointer;text-decoration:none;transition:border-color .12s,color .12s,background .12s;white-space:nowrap;}
.sv-btn:hover{border-color:var(--primary);color:var(--primary);}
.sv-btn:disabled{opacity:.45;cursor:not-allowed;pointer-events:none;}

.sv-body{display:flex;flex:1;min-height:0;position:relative;}
.sv-side{width:236px;flex-shrink:0;display:flex;flex-direction:column;min-height:0;
  background:var(--bg-base);border-right:1px solid var(--border);}
.sv-side-sec{display:flex;flex-direction:column;gap:8px;padding:12px 12px 10px;border-bottom:1px solid var(--border);}
.sv-side-title{font-size:11px;font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px;}
.sv-history-sec{flex:1;min-height:0;padding-bottom:6px;border-bottom:none;}
.sv-form-row{display:flex;align-items:center;gap:8px;}
.sv-form-row label{font-size:12px;color:var(--text-muted);flex-shrink:0;width:52px;}
.sv-form-row select,.sv-form-row input{flex:1;min-width:0;padding:6px 8px;border-radius:7px;border:1px solid var(--border);background:var(--bg-deep);color:var(--text);font-size:12px;outline:none;}
.sv-form-row select:focus,.sv-form-row input:focus{border-color:var(--primary);}

.sv-upload-box{position:relative;border:1.5px dashed var(--border-light);border-radius:9px;overflow:hidden;cursor:pointer;
  transition:border-color .15s,background .15s;height:88px;
  background:repeating-conic-gradient(rgba(127,127,127,.14) 0% 25%, transparent 0% 50%) 50%/12px 12px,var(--bg-deep);}
.sv-upload-box:hover,.sv-upload-box.dragover{border-color:var(--primary);background-color:var(--primary-bg);}
.sv-upload-empty{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;color:var(--text-muted);}
.sv-upload-plus{font-size:22px;line-height:1;color:var(--primary);}
.sv-upload-empty span:last-child{font-size:11.5px;}
.sv-upload-thumb{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block;}
.sv-upload-del{position:absolute;top:4px;right:4px;width:20px;height:20px;border-radius:50%;border:none;background:rgba(0,0,0,.65);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;z-index:2;}
.sv-upload-del:hover{background:var(--red);}

.sv-submit-btn{padding:9px 14px;border:none;border-radius:8px;background:var(--primary);color:#fff;font-size:13px;font-weight:700;cursor:pointer;transition:opacity .15s,transform .1s;letter-spacing:.5px;}
.sv-submit-btn:hover{opacity:.9;}
.sv-submit-btn:active{transform:translateY(1px);}
.sv-submit-btn:disabled{opacity:.5;cursor:not-allowed;}
.sv-cost-tip{font-size:10.5px;color:var(--text-muted);text-align:center;margin-top:-3px;}

.sv-queue-sec{background:var(--bg-card);border:1px solid var(--border);border-radius:10px;padding:10px 10px 8px;margin:2px 0;}
.sv-queue-list{display:flex;flex-direction:column;gap:8px;}
.sv-queue-item{display:flex;gap:8px;align-items:center;}
.sv-queue-thumb{width:40px;height:40px;flex-shrink:0;border-radius:7px;object-fit:cover;display:block;
  background:repeating-conic-gradient(rgba(127,127,127,.22) 0% 25%, transparent 0% 50%) 50%/8px 8px,var(--bg-deep);}
.sv-queue-thumb-empty{display:flex;align-items:center;justify-content:center;color:var(--text-dim);}
.sv-queue-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px;}
.sv-queue-line1{display:flex;align-items:baseline;gap:7px;}
.sv-queue-line1 b{font-size:12px;color:var(--text);font-weight:600;}
.sv-queue-phase{font-size:10.5px;color:var(--primary);}
.sv-queue-elapsed{font-size:10.5px;color:var(--text-dim);margin-left:auto;font-variant-numeric:tabular-nums;}
.sv-queue-bar{height:4px;border-radius:2px;background:var(--bg-deep);overflow:hidden;}
.sv-queue-bar-fill{height:100%;border-radius:2px;background:linear-gradient(90deg,var(--primary),#3fb950);transition:width .6s linear;}
.sv-queue-pct{font-size:10px;color:var(--text-dim);font-variant-numeric:tabular-nums;}

.sv-hist-list{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:2px;margin:0 -4px;padding:0 4px;}
.sv-hist-list::-webkit-scrollbar{width:8px;}
.sv-hist-list::-webkit-scrollbar-thumb{background:var(--border);border-radius:4px;}
.sv-hist-empty,.sv-hist-loading{font-size:12px;color:var(--text-dim);padding:8px 2px;}
.sv-hist-item{display:flex;align-items:center;gap:8px;padding:7px 8px;border-radius:8px;cursor:pointer;border:1px solid transparent;transition:background .1s,border-color .1s;}
.sv-hist-item:hover{background:var(--bg-hover);}
.sv-hist-item.active{background:var(--primary-bg);border-color:var(--primary);}
.sv-hist-status{width:18px;height:18px;flex-shrink:0;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:10.5px;font-weight:700;}
.sv-hist-status.ok{background:var(--green-bg);color:var(--green);}
.sv-hist-status.error{background:rgba(248,81,73,.15);color:var(--red);}
.sv-hist-status.timeout{background:rgba(210,153,34,.18);color:#c9a227;}
.sv-hist-status.running{background:transparent;color:var(--primary);}
.sv-hist-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px;}
.sv-hist-line1{display:flex;align-items:baseline;gap:6px;}
.sv-hist-line1 b{font-size:12px;font-weight:600;color:var(--text);}
.sv-hist-time{font-size:10.5px;color:var(--text-dim);margin-left:auto;font-variant-numeric:tabular-nums;}
.sv-hist-line2{font-size:11px;color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.sv-hist-item.error .sv-hist-line2{color:var(--red);}
.sv-hist-item.timeout .sv-hist-line2{color:#c9a227;}

.sv-stage{flex:1;min-width:0;display:flex;gap:16px;padding:16px;background:var(--bg-deep);position:relative;}
.sv-pane{flex:1;min-width:0;display:flex;flex-direction:column;gap:8px;}
.sv-pane-label{font-size:11px;font-weight:700;color:var(--text-muted);letter-spacing:.4px;display:flex;align-items:baseline;gap:8px;}
.sv-pane-hint{font-weight:400;font-size:11px;color:var(--text-dim);}
.sv-frame{flex:1;min-height:0;border:1px solid var(--border);border-radius:12px;background:
  repeating-conic-gradient(rgba(127,127,127,.18) 0% 25%, transparent 0% 50%) 50%/16px 16px,var(--bg-card);
  display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative;}
.sv-frame img,.sv-frame iframe,.sv-frame object{max-width:100%;max-height:100%;object-fit:contain;display:block;}
.sv-frame iframe,.sv-frame object{width:100%;height:100%;border:0;background:#fff;}
.sv-empty{text-align:center;color:var(--text-muted);padding:24px;pointer-events:none;}
.sv-empty b{display:block;color:var(--text);font-size:14px;margin:10px 0 4px;}
.sv-empty span{font-size:12px;line-height:1.7;}
.sv-dl-fallback{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;color:var(--text-muted);padding:20px;text-align:center;}
.sv-loading{position:absolute;inset:0;display:none;flex-direction:column;align-items:center;justify-content:center;gap:12px;
  background:rgba(0,0,0,.45);backdrop-filter:blur(3px);z-index:8;font-size:13px;color:var(--text);}
.sv-loading.show{display:flex;}
.sv-spinner{width:18px;height:18px;border:2px solid currentColor;border-top-color:transparent;border-radius:50%;display:inline-block;animation:svSpin 1s linear infinite;}
@keyframes svSpin{to{transform:rotate(360deg);}}

@media (max-width: 900px){
  .sv-side{width:210px;}
  .sv-stage{flex-direction:column;}
}