.tools-brand { white-space:nowrap; flex-shrink:0; }
.png-workbench { border:1px solid var(--zh-border); border-radius:var(--zh-radius-lg); background:var(--zh-bg-elevated); }
.png-controlbar { padding:var(--zh-space-6); }
.png-page-title { margin:0; font-size:clamp(1.5rem,4vw,2rem); }
.tool-tabs { display:flex; gap:var(--zh-space-2); padding:0 var(--zh-space-6) var(--zh-space-4); border-bottom:1px solid var(--zh-border); }
.tool-tab { flex:1; padding:var(--zh-space-3); border:1px solid var(--zh-border); border-radius:var(--zh-radius-md); color:var(--zh-text-secondary); background:var(--zh-bg-subtle); cursor:pointer; font-weight:600; }
.tool-tab::after { content:attr(data-detail); display:block; font-size:.75rem; font-weight:400; margin-top:var(--zh-space-1); }
.tool-tab.is-active { border-color:var(--zh-color-primary); color:var(--zh-color-primary-text); background:var(--zh-color-primary-subtle); }
.png-workbench .tool-panel { border:0; margin:0; }
.tool-dropzone { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:var(--zh-space-3); padding:var(--zh-space-6); min-height:18rem; border:2px dashed var(--zh-border); border-radius:var(--zh-radius-lg); background:var(--zh-bg-subtle); cursor:pointer; text-align:center; }
.tool-dropzone:hover,.tool-dropzone.is-dragover { border-color:var(--zh-color-primary); }
.tool-dropzone:focus-visible,.tool-tab:focus-visible { outline:2px solid var(--zh-color-primary); outline-offset:3px; }
.png-drop-icon { width:2.5rem; height:2.5rem; color:var(--zh-color-primary-text); }
.png-drop-title { font-size:1.125rem; font-weight:600; }
.png-drop-sub,.png-formats { color:var(--zh-text-secondary); font-size:.875rem; }
.png-drop-action { padding:var(--zh-space-2) var(--zh-space-4); border-radius:var(--zh-radius-md); color:var(--zh-on-primary); background:var(--zh-color-primary); }
.png-result-toolbar { display:flex; justify-content:flex-end; margin-top:var(--zh-space-4); }
.png-row { display:grid; grid-template-columns:2rem minmax(0,1fr) auto; align-items:center; gap:var(--zh-space-3); padding:var(--zh-space-4) 0; border-bottom:1px solid var(--zh-border); font-size:.875rem; }
.png-row.is-complete { grid-template-columns:2rem minmax(0,1fr) auto auto auto auto; }
.png-row-number { color:var(--zh-text-secondary); font-variant-numeric:tabular-nums; }
.png-row-name { min-width:0; overflow-wrap:anywhere; font-weight:600; }
.png-row-size { color:var(--zh-text-secondary); font-variant-numeric:tabular-nums; }
.tool-pill { padding:var(--zh-space-1) var(--zh-space-2); border-radius:var(--zh-radius-sm); background:var(--zh-bg-subtle); color:var(--zh-text-secondary); white-space:nowrap; }
.png-pill--saved { color:var(--zh-color-primary-text); background:var(--zh-color-primary-subtle); }
.png-progress { grid-column:2 / -1; height:4px; overflow:hidden; border-radius:2px; background:var(--zh-bg-subtle); }
.png-progress-bar { height:100%; width:8%; background:var(--zh-color-primary); transition:width .18s; }
.png-faq { margin-top:var(--zh-space-7,var(--zh-space-6)); }
.png-faq h2 { font-size:1.125rem; }
.png-faq-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--zh-space-5); }
.png-faq-item h3 { margin-bottom:var(--zh-space-2); font-size:1rem; }
.png-faq-item p { color:var(--zh-text-secondary); line-height:1.7; }
.png-toast { position:fixed; bottom:24px; left:50%; transform:translateX(-50%); max-width:90vw; z-index:300; border:1px solid var(--zh-border); border-radius:var(--zh-radius-md); padding:var(--zh-space-3) var(--zh-space-4); color:var(--zh-text); background:var(--zh-bg-elevated); visibility:hidden; }
.png-toast.is-visible { visibility:visible; }
@media(max-width:48rem) {
    .png-controlbar { padding:var(--zh-space-4); }
    .tool-tabs { padding:0 var(--zh-space-4) var(--zh-space-4); }
    .png-row.is-complete { grid-template-columns:2rem minmax(0,1fr) auto; }
    .png-row.is-complete .png-row-size { grid-column:2; }
    .png-row.is-complete .png-recompress { grid-column:2; }
    .png-row.is-complete a { grid-column:3; }
    .png-faq-grid { grid-template-columns:minmax(0,1fr); }
}
