/* Navigation and batch workspace — all nine tools remain directly accessible. */
.workspace-nav{
  display:grid;
  grid-template-columns:4fr 5fr;
  gap:28px;
  margin-top:20px
}
.nav-group{
  min-width:0
}
.nav-label{
  display:block;
  margin:0 0 9px 4px;
  font-size:10px;
  letter-spacing:.08em;
  color:var(--muted)
}
.nav-tools{
  display:flex;
  gap:3px;
  padding:5px;
  border:1px solid var(--line);
  border-radius:11px;
  background:#fff
}
.workspace-link{
  display:flex;
  flex:1;
  min-width:0;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:7px;
  min-height:61px;
  padding:9px 3px;
  border:1px solid transparent;
  border-radius:7px;
  background:transparent;
  color:#657187;
  font-size:11px;
  font-weight:550;
  white-space:nowrap
}
.workspace-link svg{
  width:18px;
  height:18px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.6;
  stroke-linecap:round;
  stroke-linejoin:round
}
.workspace-link:hover{
  background:#f5f7fb;
  color:var(--accent)
}
.workspace-link.active{
  background:var(--soft);
  color:var(--accent);
  border-color:#dfe6f9
}
.batch-panel{
  border:1px solid var(--line);
  border-radius:16px;
  background:#fff;
  overflow:hidden;
  box-shadow:0 5px 24px #25395705
}
.upload-scene{
  display:grid;
  place-items:center;
  min-height:330px;
  padding:36px 24px;
  background:#f3e8da url('./assets/upload-photo-workspace-v2.webp') center/cover no-repeat
}
.batch-dropzone{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  width:min(450px,100%);
  min-height:245px;
  padding:28px 24px;
  border:1px solid #ffffff;
  border-radius:14px;
  background:#fffffffa;
  box-shadow:0 8px 32px #30435e14;
  cursor:pointer;
  text-align:center
}
.batch-dropzone::before{
  position:absolute;
  inset:8px;
  border:1px dashed #b6c4df;
  border-radius:9px;
  content:"";
  pointer-events:none
}
.batch-dropzone:hover::before,.batch-dropzone.is-dragging::before{
  border-color:var(--accent);
  background:#4264cb04
}
.upload-icon{
  display:grid;
  place-items:center;
  width:46px;
  height:46px;
  margin-bottom:14px;
  border:1px solid #e3e9f7;
  border-radius:12px;
  background:#f2f5fe;
  color:var(--accent)
}
.upload-icon svg{
  width:26px;
  height:26px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.7;
  stroke-linecap:round;
  stroke-linejoin:round
}
.batch-dropzone h2{
  margin:0;
  font-size:19px;
  line-height:1.4;
  font-weight:600;
  letter-spacing:-.025em
}
.batch-upload-copy p{
  margin:9px 0 10px;
  font-size:12px;
  color:var(--muted)
}
.batch-limit{
  display:flex;
  justify-content:center;
  align-items:center;
  flex-wrap:wrap;
  gap:8px;
  font-size:10px;
  color:var(--muted)
}
.batch-limit i{
  width:3px;
  height:3px;
  background:#a8b2c4;
  border-radius:50%
}
.batch-dropzone .primary-button{
  min-width:150px;
  margin-top:20px;
  position:relative
}
.batch-panel.has-files .upload-scene{
  min-height:152px;
  padding:22px 24px
}
.batch-panel.has-files .batch-dropzone{
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:18px;
  width:100%;
  min-height:105px;
  padding:24px 32px;
  text-align:left;
  box-shadow:0 3px 14px #30435e08
}
.batch-panel.has-files .upload-icon{
  margin:0
}
.batch-panel.has-files .batch-dropzone h2{
  font-size:16px
}
.batch-panel.has-files .batch-upload-copy p{
  margin:6px 0
}
.batch-panel.has-files .batch-limit{
  justify-content:start
}
.batch-panel.has-files .batch-dropzone .primary-button{
  margin:0;
  min-width:115px
}
.batch-settings{
  padding:22px 24px 0
}
.batch-panel:not(.has-files) .batch-settings{
  padding-top:0
}
.batch-panel:not(.has-files) .queue-card,.batch-panel:not(.has-files) .batch-results-footer{
  display:none
}
.batch-list-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  margin-bottom:20px
}
.queue-title{
  font-size:13px;
  font-weight:600
}
.queue-controls{
  display:flex;
  align-items:center;
  gap:18px
}
#batchCount{
  font-size:11px;
  color:var(--muted);
  font-variant-numeric:tabular-nums
}
.queue-controls .text-button{
  min-height:30px;
  font-size:11px
}
.batch-table-head,.batch-file{
  display:grid;
  grid-template-columns:minmax(140px,1.8fr) 72px minmax(130px,1.3fr) 72px 50px 56px 28px;
  align-items:center;
  gap:14px
}
.batch-table-head{
  padding:0 12px 11px;
  color:var(--muted);
  font-size:10px
}
.batch-table-head>:nth-child(2),.batch-table-head>:nth-child(4),.batch-table-head>:nth-child(6){
  text-align:right
}
.batch-table-head>:nth-child(3){
  text-align:center
}
.batch-file-list{
  margin:0;
  padding:0;
  list-style:none
}
.batch-file{
  min-height:58px;
  padding:12px;
  border-top:1px solid #edf0f5;
  background:#fff
}
.batch-file:hover{
  background:#fafbfe
}
.batch-file-name{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:#364259;
  font-size:12px;
  font-weight:550
}
.batch-file-name button{
  display:block;
  width:100%;
  min-height:28px;
  padding:0;
  overflow:hidden;
  text-align:left;
  text-overflow:ellipsis;
  white-space:nowrap;
  border:0;
  background:transparent;
  color:inherit;
  font:inherit
}
.batch-file-name button:hover{
  color:var(--accent);
  text-decoration:underline;
  text-underline-offset:3px
}
.batch-original-size,.batch-output-size,.batch-saving{
  font-size:11px;
  text-align:right;
  white-space:nowrap;
  color:var(--muted);
  font-variant-numeric:tabular-nums
}
.batch-saving{
  color:var(--accent);
  font-weight:600
}
.batch-status-meter{
  position:relative;
  display:grid;
  place-items:center;
  overflow:hidden;
  width:100%;
  height:25px;
  border-radius:5px;
  background:#f1f3f8
}
.batch-meter-fill{
  position:absolute;
  inset:0 auto 0 0;
  background:#e5ecfc;
  border-radius:5px;
  transition:width .2s
}
.batch-meter-label{
  position:relative;
  font-size:10px;
  color:var(--muted);
  white-space:nowrap
}
.is-complete .batch-meter-label{
  color:#4264a2
}
.is-processing .batch-meter-fill{
  background-image:linear-gradient(110deg,#dce6fc 25%,#edf2fe 50%,#dce6fc 75%);
  background-size:200% 100%;
  animation:processing 1.6s linear infinite
}
.is-processing .batch-meter-label{
  color:#3d5687
}
.is-failed .batch-status-meter{
  background:#fff0ef
}
.is-failed .batch-meter-label{
  color:#a24e4a
}
.batch-download{
  min-height:32px;
  padding:5px 8px;
  border:1px solid #e0e7f7;
  border-radius:6px;
  background:#f5f7fe;
  color:var(--accent);
  font-size:11px;
  font-weight:550
}
.batch-download:hover:not(:disabled){
  border-color:#bdcbee;
  background:#edf2ff
}
.batch-download:disabled{
  opacity:.35;
  background:transparent
}
.batch-remove{
  min-height:30px;
  width:28px;
  border:0;
  border-radius:6px;
  background:transparent;
  color:#8793a6;
  font-size:18px
}
.batch-remove:hover:not(:disabled){
  background:#f0f2f7;
  color:var(--ink)
}
.batch-file-note{
  grid-column:1/-1;
  margin-top:-2px;
  color:var(--muted);
  font-size:11px;
  line-height:1.6
}
.is-failed .batch-file-note{
  color:#a24e4a
}
.batch-progress-panel{
  margin:16px 12px 0;
  font-size:11px;
  color:var(--muted)
}
.batch-progress-head{
  display:flex;
  justify-content:space-between;
  gap:20px;
  line-height:1.6
}
#batchProgressPercent{
  font-weight:500
}
#batchProgressBar{
  display:block;
  width:100%;
  height:3px;
  margin-top:9px;
  border:0;
  border-radius:3px;
  background:#edf1f8;
  accent-color:var(--accent)
}
progress::-webkit-progress-bar{
  background:#edf1f8;
  border-radius:3px
}
progress::-webkit-progress-value{
  background:var(--accent);
  border-radius:3px
}
.batch-results-footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:12px;
  padding:24px 0 18px;
  border-top:1px solid var(--line);
  margin-top:20px
}
.batch-summary{
  font-size:12px;
  color:#4b5870;
  margin:0;
  line-height:1.7
}
.batch-results-footer .download-button{
  min-width:155px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px
}
.batch-download-hint{
  width:100%;
  font-size:11px;
  color:var(--muted)
}
.batch-advanced{
  border-top:1px solid var(--line);
  margin:0
}
.batch-advanced>summary{
  padding:18px 0;
  color:var(--muted);
  font-size:11px;
  list-style-position:inside
}
.batch-panel:not(.has-files) .batch-advanced{
  border:0
}
.batch-panel:not(.has-files) .batch-advanced>summary{
  text-align:center
}
.batch-options{
  max-width:480px;
  padding:8px 0 24px;
  margin:auto
}
.batch-task-options{
  padding:22px 24px;
  border-bottom:1px solid var(--line);
  background:#fff
}
.batch-task-options #batchFormatSlot{
  max-width:220px;
  margin-bottom:16px
}
.batch-operation-fields{
  display:flex;
  align-items:end;
  flex-wrap:wrap;
  gap:16px
}
.batch-operation-fields label{
  flex:1 1 120px;
  color:#4b5870;
  font-size:12px
}
.batch-operation-fields input,.batch-operation-fields select{
  margin-top:8px
}
.batch-operation-fields .watermark-copy{
  flex:3 1 250px
}
.batch-task-hint{
  margin:14px 0 0;
  font-size:11px;
  color:var(--muted);
  line-height:1.7
}
.batch-task-hint.is-error{
  color:#94623e
}
#batchLogoName{
  display:block;
  margin-top:6px;
  font-size:11px;
  max-width:260px;
  overflow-wrap:anywhere
}
#batchLogoRemove{
  min-height:30px;
  margin-top:8px;
  padding:5px 10px
}
.batch-transfer{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:10px;
  padding:0 0 20px;
  color:var(--muted);
  font-size:11px
}
.batch-transfer select{
  width:145px;
  height:36px
}
.batch-transfer button{
  min-height:36px;
  font-size:11px;
  padding:7px 12px
}
.result-dialog{
  width:min(900px,calc(100% - 32px));
  max-height:90dvh;
  overflow:auto;
  padding:28px;
  border:1px solid var(--line);
  border-radius:16px;
  color:var(--ink);
  background:white;
  box-shadow:0 24px 90px #12264430
}
.result-dialog::backdrop{
  background:#15223c66;
  backdrop-filter:blur(3px)
}
.result-heading{
  display:flex;
  align-items:start;
  justify-content:space-between;
  gap:24px
}
.result-heading h2{
  margin:8px 0 24px;
  font-size:20px;
  line-height:1.5;
  overflow-wrap:anywhere;
  max-width:65vw;
  font-weight:600
}
.result-images{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px
}
.result-images figure{
  min-width:0;
  margin:0
}
.result-images figcaption{
  font-size:12px;
  color:var(--muted);
  margin-bottom:10px
}
.result-images img{
  display:block;
  width:100%;
  height:280px;
  object-fit:contain;
  border:1px solid var(--line);
  border-radius:9px;
  background:repeating-conic-gradient(#f0f2f6 0% 25%,white 0% 50%) 0/16px 16px
}
.result-details,.result-message{
  font-size:12px;
  color:var(--muted);
  line-height:1.7;
  overflow-wrap:anywhere
}
.result-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:20px
}
.result-actions button{
  min-height:42px;
  margin:0;
  padding:9px 18px
}
.result-share{
  margin-top:18px
}
.batch-disclosure{
  flex:1 1 100%;
  padding-top:12px;
  border-top:1px solid var(--line);
  color:var(--muted);
  font-size:12px
}
.batch-disclosure[open]>summary{
  margin-bottom:16px
}
#batchFormatSlot:empty{
  display:none
}
.batch-disclosure .watermark-copy{
  flex:2 1 240px
}
@keyframes processing{
  to{
    background-position:-200% 0
  }
}
@media(max-width:1000px){
  .workspace-nav{
    gap:16px
  }
  .workspace-link{
    font-size:10px
  }
  .batch-table-head,.batch-file{
    grid-template-columns:minmax(110px,1.3fr) 62px minmax(100px,1fr) 62px 45px 46px 26px;
    gap:9px
  }
  .batch-settings{
    padding-inline:18px
  }
}
@media(max-width:760px){
  .workspace-nav{
    gap:14px;
    margin-top:20px;
    grid-template-columns:1fr
  }
  .nav-tools{
    padding:4px
  }
  .nav-label{
    margin-bottom:6px;
    font-size:10px
  }
  .workspace-link{
    flex-direction:row;
    gap:6px;
    min-height:42px;
    font-size:11px
  }
  .workspace-link svg{
    width:16px;
    height:16px
  }
  .batch-panel{
    border-radius:12px
  }
  .upload-scene{
    min-height:310px;
    padding:30px 16px;
    background-position:center
  }
  .batch-dropzone{
    min-height:245px;
    padding:24px 18px;
    width:min(410px,100%)
  }
  .batch-dropzone h2{
    font-size:18px
  }
  .batch-panel.has-files .upload-scene{
    padding:16px;
    min-height:130px
  }
  .batch-panel.has-files .batch-dropzone{
    grid-template-columns:1fr auto;
    gap:12px;
    min-height:100px;
    padding:22px
  }
  .batch-panel.has-files .upload-icon{
    display:none
  }
  .batch-panel.has-files .batch-dropzone h2{
    font-size:15px
  }
  .batch-panel.has-files .batch-upload-copy p{
    max-width:210px;
    font-size:10px;
    line-height:1.6
  }
  .batch-panel.has-files .batch-limit{
    display:none
  }
  .batch-panel.has-files .batch-dropzone .primary-button{
    min-width:90px;
    padding:10px 12px;
    font-size:12px
  }
  .batch-settings{
    padding:18px 14px 0
  }
  .batch-table-head{
    display:none
  }
  .batch-file{
    grid-template-columns:minmax(0,1fr) 85px 46px 26px;
    gap:10px;
    padding:14px 4px
  }
  .batch-file-name{
    grid-column:1/3;
    grid-row:1
  }
  .batch-saving{
    grid-column:3;
    grid-row:1
  }
  .batch-remove{
    grid-column:4;
    grid-row:1
  }
  .batch-original-size{
    grid-column:1;
    grid-row:2;
    text-align:left
  }
  .batch-original-size::before{
    content:'原图 ';
    color:var(--muted)
  }
  .batch-output-size{
    grid-column:2/5;
    grid-row:2
  }
  .batch-output-size::before{
    content:'处理后 '
  }
  .batch-status-meter{
    grid-column:1/3;
    grid-row:3
  }
  .batch-download{
    grid-column:3/5;
    grid-row:3
  }
  .batch-file-note{
    grid-column:1/-1
  }
  .batch-list-head{
    margin-bottom:10px
  }
  .queue-controls{
    gap:12px
  }
  .batch-results-footer{
    gap:14px;
    padding-top:20px
  }
  .batch-download-hint{
    line-height:1.7;
    font-size:10px
  }
  .batch-task-options{
    padding:20px 18px
  }
  .batch-task-options #batchFormatSlot{
    max-width:none
  }
  .batch-operation-fields .watermark-copy{
    flex-basis:100%
  }
  .batch-transfer{
    gap:8px
  }
  .batch-transfer label{
    width:100%
  }
  .result-dialog{
    padding:20px
  }
  .result-images{
    gap:10px
  }
  .result-images img{
    height:190px
  }
  .result-heading h2{
    font-size:17px
  }
  .result-actions button{
    flex:1 1 auto
  }
}
@media(max-width:480px){
  .workspace-link{
    flex-direction:column;
    font-size:10px;
    gap:5px;
    min-height:55px
  }
  .workspace-nav{
    gap:12px
  }
  .batch-dropzone h2{
    font-size:17px
  }
  .batch-limit{
    font-size:9px;
    gap:6px
  }
  .batch-summary{
    font-size:11px
  }
  .batch-results-footer .download-button{
    min-width:130px;
    padding:10px 15px;
    font-size:12px
  }
  .result-images img{
    height:155px
  }
}

.batch-options-heading {
  margin: 0 0 20px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}
@media (min-width: 900px) {
  .batch-panel:has(#batchTaskOptions:not([hidden])) {
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr);
  }
  .batch-panel:has(#batchTaskOptions:not([hidden])) .batch-task-options {
    border-bottom: 0;
    border-right: 1px solid var(--line);
    padding: 24px;
  }
  .batch-panel:has(#batchTaskOptions:not([hidden])) .upload-scene {
    min-height: 350px;
  }
  .batch-panel:has(#batchTaskOptions:not([hidden])) .batch-settings {
    grid-column: 1 / -1;
    border-top: 1px solid var(--line);
  }
  .batch-panel:has(#batchTaskOptions:not([hidden])) .batch-operation-fields label {
    flex-basis: 100%;
  }
  .batch-panel:has(#batchTaskOptions:not([hidden])) .batch-dropzone {
    max-width: 410px;
  }
  .batch-panel.has-files:has(#batchTaskOptions:not([hidden])) .batch-dropzone {
    display: flex;
    text-align: center;
    min-height: 200px;
  }
  .batch-panel.has-files:has(#batchTaskOptions:not([hidden])) .upload-icon {
    display: none;
  }
  .batch-panel.has-files:has(#batchTaskOptions:not([hidden])) .batch-limit {
    justify-content: center;
  }
}

@media (min-width:1001px) {
  .workspace-link {
    flex-direction: row;
    min-height: 48px;
    gap: 8px;
    font-size: 12px;
  }
}
.batch-download-hint {
  line-height: 1.7;
}
.batch-dropzone.is-dragging {
  box-shadow: 0 0 0 3px #4264cb22, 0 8px 32px #30435e14;
}
.result-actions .secondary-button {
  flex: 0 1 auto;
}
@media (max-width:760px) {
  .result-actions .secondary-button {
    flex: 1 1 auto;
  }
  .batch-download, .batch-remove {
    min-height: 40px;
  }
}

.result-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;background:#f7f9fd;border:1px solid #e7ebf3;border-radius:10px;padding:15px 18px;margin:0 0 23px}.result-stats span{display:block;font-size:11px;color:var(--muted);margin-bottom:7px}.result-stats strong{font-size:20px;font-weight:600;letter-spacing:-.025em;font-variant-numeric:tabular-nums}.result-stats>div:last-child strong{color:var(--accent)}
.result-view-bar{display:flex;align-items:center;gap:12px;font-size:11px;color:var(--muted);margin-bottom:14px}.result-view-bar>span{margin-right:auto}.result-view-bar .text-button{font-size:11px;min-height:28px;display:flex;align-items:center}
.result-images.is-single{grid-template-columns:1fr}.result-images.is-single figure:first-child{display:none}.result-images.is-single img{height:min(58dvh,540px)}
.result-continue{margin-top:16px;font-size:11px;color:var(--muted)}.result-continue summary{cursor:pointer}.result-continue>div{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}.result-continue button{font-size:11px;min-height:36px}
@media(max-width:480px){.result-stats{gap:8px;padding:12px}.result-stats strong{font-size:17px}.result-view-bar{gap:8px;flex-wrap:wrap}.result-view-bar>span{width:100%;margin:0}.result-dialog{padding:20px}.result-actions button{flex:1;padding:9px 11px}.result-actions .secondary-button{flex:1}.result-stats span{font-size:10px}}

/* Each batch task has its own composition; the upload card remains dominant. */
.batch-panel[data-mode="convert"] .upload-scene{background-color:#eae7de;background-image:url('./assets/upload-convert-v1.webp')}
.batch-panel[data-mode="batch-resize"] .upload-scene{background-color:#ede5d8;background-image:url('./assets/upload-resize-v1.webp')}
.batch-panel[data-mode="batch-watermark"] .upload-scene{background-color:#eee5dc;background-image:url('./assets/upload-watermark-v1.webp')}