.tool-page{padding-block:var(--space-8) var(--space-16)}
.tool-page .container{max-width:960px}
.tool-header{margin-bottom:var(--space-6)}
.breadcrumb{font-size:var(--fs-sm);color:var(--color-text-muted);margin-bottom:var(--space-3)}
.breadcrumb ol{display:flex;flex-wrap:wrap;gap:var(--space-2);align-items:center;list-style:none;padding:0;margin:0}
.breadcrumb li+li::before{content:"/";color:var(--color-border-strong);margin-right:var(--space-2)}
.breadcrumb a{color:var(--color-text-muted)}
.breadcrumb a:hover{color:var(--color-primary)}
.breadcrumb [aria-current="page"]{color:var(--color-text);font-weight:500}
.tool-header h1{margin-bottom:var(--space-3)}
.tool-header .lead{max-width:720px}

.tool-workspace{
  background:var(--color-white);
  border:1px solid var(--color-border);
  border-radius:var(--radius-xl);
  padding:var(--space-6);
  margin-bottom:var(--space-8);
  box-shadow:var(--shadow-sm);
}

.drop-zone{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  gap:var(--space-3);
  padding:var(--space-12) var(--space-6);
  border:2px dashed var(--color-border-strong);
  border-radius:var(--radius-lg);
  background:var(--color-bg-subtle);
  cursor:pointer;
  transition:border-color var(--transition),background var(--transition);
  min-height:220px;
}
.drop-zone:hover,
.drop-zone:focus-visible{border-color:var(--color-primary);background:var(--color-light-blue);outline:none}
.drop-zone.is-dragover{border-color:var(--color-primary);background:var(--color-light-blue);box-shadow:var(--shadow-focus)}
.drop-zone h2{font-size:var(--fs-xl);margin:0}
.drop-zone p{color:var(--color-text-muted);font-size:var(--fs-sm);margin:0}
.drop-zone .drop-hint{font-size:var(--fs-xs);color:var(--color-text-muted);margin-top:var(--space-2)}
.drop-zone input[type="file"]{display:none}

.file-toolbar{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);margin-top:var(--space-5);flex-wrap:wrap}
.file-summary{font-size:var(--fs-sm);color:var(--color-text-muted)}
.file-warnings{font-size:var(--fs-sm);padding:var(--space-3) var(--space-4);border-radius:var(--radius-md);margin-top:var(--space-3)}
.file-warnings[data-level="warn"]{background:#FEF3C7;color:#92400E;border:1px solid #FCD34D}
.file-warnings[data-level="danger"]{background:#FEE2E2;color:#991B1B;border:1px solid #FCA5A5}

.file-list{list-style:none;padding:0;margin:var(--space-4) 0 0;display:grid;gap:var(--space-3)}
.file-card{
  display:flex;
  align-items:center;
  gap:var(--space-3);
  padding:var(--space-3) var(--space-4);
  background:var(--color-white);
  border:1px solid var(--color-border);
  border-radius:var(--radius-md);
  transition:border-color var(--transition);
}
.file-card:hover{border-color:var(--color-border-strong)}
.file-card-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.file-card-info strong{font-size:var(--fs-sm);color:var(--color-text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.file-card-info span{font-size:var(--fs-xs);color:var(--color-text-muted)}
.icon-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:32px;
  height:32px;
  border-radius:var(--radius-sm);
  color:var(--color-text-muted);
  background:transparent;
  transition:background var(--transition),color var(--transition);
  font-size:var(--fs-base);
  line-height:1;
  flex-shrink:0;
}
.icon-btn:hover{background:var(--color-bg-muted);color:var(--color-primary)}
.icon-btn.remove:hover{background:#FEE2E2;color:var(--color-error)}

.options-panel{
  margin-top:var(--space-5);
  padding:var(--space-5);
  border:1px solid var(--color-border);
  border-radius:var(--radius-lg);
  background:var(--color-bg-subtle);
  display:grid;
  gap:var(--space-4);
}
.options-panel legend{font-weight:600;font-size:var(--fs-sm);text-transform:uppercase;letter-spacing:0.05em;color:var(--color-text-muted);padding:0 var(--space-2)}
.options-panel .field{display:flex;flex-direction:column;gap:var(--space-2)}
.options-panel label{font-size:var(--fs-sm);font-weight:500;color:var(--color-text)}
.options-panel input[type="text"],
.options-panel input[type="number"],
.options-panel input[type="password"],
.options-panel select,
.options-panel textarea{
  padding:var(--space-3) var(--space-4);
  border:1px solid var(--color-border-strong);
  border-radius:var(--radius-md);
  background:var(--color-white);
  font-size:var(--fs-sm);
  color:var(--color-text);
  transition:border-color var(--transition),box-shadow var(--transition);
}
.options-panel input:focus-visible,
.options-panel select:focus-visible,
.options-panel textarea:focus-visible{
  outline:none;
  border-color:var(--color-primary);
  box-shadow:var(--shadow-focus);
}
.options-panel small{font-size:var(--fs-xs);color:var(--color-text-muted)}

.tool-actions{display:flex;flex-wrap:wrap;gap:var(--space-3);margin-top:var(--space-5)}
.tool-actions .btn{min-width:160px}
.tool-actions .btn[disabled]{opacity:.55;cursor:not-allowed}

.progress{margin-top:var(--space-5);display:flex;flex-direction:column;gap:var(--space-2)}
.progress-track{width:100%;height:10px;background:var(--color-bg-muted);border-radius:var(--radius-full);overflow:hidden}
.progress-bar{height:100%;background:var(--color-primary);border-radius:var(--radius-full);transition:width 200ms ease;width:0%}
.progress-label{font-size:var(--fs-sm);color:var(--color-text-muted);text-align:right}

.status{font-size:var(--fs-sm);padding:var(--space-3) var(--space-4);border-radius:var(--radius-md);margin-top:var(--space-4);border:1px solid transparent}
.status[data-level="error"]{background:#FEE2E2;color:#991B1B;border-color:#FCA5A5}
.status[data-level="warn"]{background:#FEF3C7;color:#92400E;border-color:#FCD34D}
.status[data-level="success"]{background:#DCFCE7;color:#166534;border-color:#86EFAC}

.result-panel{margin-top:var(--space-5);padding:var(--space-5);border:1px solid #86EFAC;border-radius:var(--radius-lg);background:#F0FDF4}
.result-panel h2{font-size:var(--fs-lg);margin-bottom:var(--space-2);color:#166534}
.result-panel p{font-size:var(--fs-sm);color:#166534;margin-bottom:var(--space-3)}

.preview-panel{margin-top:var(--space-5);display:grid;gap:var(--space-3)}
.preview-panel canvas{border:1px solid var(--color-border);border-radius:var(--radius-md);max-width:100%;height:auto;box-shadow:var(--shadow-sm)}

.tool-content{margin-top:var(--space-12);display:grid;gap:var(--space-8)}
.tool-content section h2{font-size:var(--fs-2xl);margin-bottom:var(--space-4)}
.tool-content section h3{font-size:var(--fs-lg);margin-top:var(--space-5);margin-bottom:var(--space-2)}
.tool-content section p,
.tool-content section li{color:var(--color-text-muted);line-height:1.65}
.tool-content ol,.tool-content ul{margin:var(--space-3) 0 var(--space-3) var(--space-5);padding:0}
.tool-content ol{list-style:decimal}
.tool-content ul{list-style:disc}
.tool-content li+li{margin-top:var(--space-2)}

.tool-limits{background:#FEF3C7;border:1px solid #FCD34D;border-radius:var(--radius-md);padding:var(--space-4) var(--space-5);color:#92400E}
.tool-limits h3{color:#78350F;font-size:var(--fs-base);margin-bottom:var(--space-2)}
.tool-limits ul{margin-left:var(--space-5);color:#92400E}

.related-tools{margin-top:var(--space-10)}
.related-tools h2{font-size:var(--fs-2xl);margin-bottom:var(--space-5)}
.related-tools ul{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-4);list-style:none;padding:0;margin:0}
.related-tools li a{display:block;padding:var(--space-4);background:var(--color-white);border:1px solid var(--color-border);border-radius:var(--radius-lg);font-weight:600;font-size:var(--fs-sm);transition:border-color var(--transition),box-shadow var(--transition)}
.related-tools li a:hover{border-color:var(--color-primary);box-shadow:var(--shadow-md)}

@media (max-width:767px){
  .tool-workspace{padding:var(--space-4)}
  .drop-zone{padding:var(--space-8) var(--space-4);min-height:180px}
  .tool-actions .btn{flex:1 1 100%;min-width:0}
  .related-tools ul{grid-template-columns:1fr}
  .file-card{padding:var(--space-2) var(--space-3)}
}
@media (max-width:374px){
  .drop-zone{padding:var(--space-6) var(--space-3)}
  .tool-header h1{font-size:var(--fs-2xl)}
}