.tool [hidden]{display:none!important}
.tool .i{width:1.5rem;height:1.5rem;flex:none}

/* inputs */
.tool input[type=password],.tool input[type=number]{width:100%;padding:.7rem .85rem;border:1px solid var(--border);border-radius:10px;background:var(--bg);color:var(--fg);font:14px/1.55 var(--mono);transition:border-color .15s,box-shadow .15s}
.tool input[type=password]:focus,.tool input[type=number]:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 4px var(--glow)}
.tool .panel{margin-top:1rem}
.tool label.check{display:flex;gap:.5rem;align-items:flex-start;margin:.9rem 0 .2rem;color:var(--fg)}
.tool label.check input{margin-top:.25rem;width:1rem;height:1rem;accent-color:var(--accent)}
.tool .hint,.tool .status{color:var(--muted);font-size:.85rem;margin:.6rem 0 0}

/* drop zone */
.tool .drop{position:relative;display:block;border:2px dashed var(--border);border-radius:var(--radius);background:var(--bg);transition:border-color .15s,background .15s,transform .1s}
.tool .drop:hover,.tool .drop.is-over{border-color:var(--accent);background:var(--glow)}
.tool .drop.is-over{transform:scale(1.01)}
.tool .drop:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:3px}
.tool .drop input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;z-index:1}
.tool .drop__empty{display:flex;flex-direction:column;align-items:center;gap:.4rem;padding:2.2rem 1rem;text-align:center}
.tool .drop__icon{display:grid;place-items:center;width:3.4rem;height:3.4rem;border-radius:50%;background:var(--card);border:1px solid var(--border);color:var(--accent);transition:transform .15s}
.tool .drop__icon .i{width:1.6rem;height:1.6rem}
.tool .drop:hover .drop__icon,.tool .drop.is-over .drop__icon{transform:translateY(-3px)}
.tool .drop__title{font-weight:700;font-size:1.05rem}
.tool .drop__sub{color:var(--muted);font-size:.85rem}

/* mode buttons */
.tool .modes{margin-top:1rem;display:grid;grid-template-columns:repeat(auto-fit,minmax(5.5rem,1fr));gap:.6rem}
.tool .modes--sub{margin-top:.2rem}
.tool label.mode{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.35rem;margin:0;padding:.8rem .4rem;min-height:4.5rem;border:1px solid var(--border);border-radius:1.4rem;background:var(--bg);color:var(--fg);cursor:pointer;text-align:center;box-shadow:0 2px 0 rgba(0,0,0,.12);transition:border-color .15s,background .15s,transform .1s,color .15s}
.tool .modes--sub label.mode{min-height:3.6rem;padding:.6rem .4rem}
.tool label.mode:hover{border-color:var(--accent)}
.tool label.mode:active{transform:translateY(2px)}
.tool label.mode input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.tool label.mode .txt{font-size:.85rem;font-weight:700}
.tool label.mode:has(input:checked){border-color:var(--accent);background:var(--glow);color:var(--accent);box-shadow:0 0 0 3px var(--glow),0 2px 0 rgba(0,0,0,.12)}
.tool label.mode:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:3px}
.tool label.mode:has(input:disabled){opacity:.4;cursor:not-allowed}
.tool label.mode input:disabled{cursor:not-allowed}

/* results */
.tool .results{list-style:none;margin:1rem 0 0;padding:0;display:grid;gap:.6rem}
.tool .result{display:flex;gap:.9rem;align-items:center;padding:.7rem .9rem;border:1px solid var(--border);border-radius:12px;background:var(--bg)}
.tool .result__icon{color:var(--accent)}
.tool .result__body{flex:1;min-width:0}
.tool .result .name{font-family:var(--mono);font-size:.85rem;overflow-wrap:anywhere}
.tool .result .meta{color:var(--muted);font-size:.8rem}
.tool .dl{display:inline-flex;align-items:center;gap:.4rem;min-height:2.5rem;padding:.5rem 1.1rem;border-radius:10px;font-weight:700;font-size:.9rem;text-decoration:none;white-space:nowrap;color:var(--on-accent);background:linear-gradient(135deg,var(--accent),var(--accent-2));box-shadow:0 2px 0 rgba(0,0,0,.25);transition:filter .15s,transform .1s}
.tool .dl .i{width:1.1rem;height:1.1rem}
.tool .dl:hover{filter:brightness(1.08)}
.tool .dl:active{transform:translateY(2px);box-shadow:none}
.tool .dl:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* compression report */
.tool .report{display:grid;grid-template-columns:auto 1fr;gap:1.2rem 1.6rem;align-items:center;padding:1.3rem;border:1px solid var(--border);border-radius:var(--radius);background:var(--bg);position:relative;overflow:hidden}
.tool .report::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:linear-gradient(90deg,var(--accent),var(--accent-2))}
.tool .report--none::before{background:var(--border)}
.tool .report__hero{display:flex;flex-direction:column;align-items:center;min-width:7rem}
.tool .report__num{font:800 3.2rem/1 var(--mono);letter-spacing:-.04em;color:var(--accent);font-variant-numeric:tabular-nums}
.tool .report--none .report__num{color:var(--muted)}
.tool .report__label{margin-top:.35rem;font-size:.8rem;color:var(--muted)}
.tool .bars{display:grid;gap:.7rem;min-width:0}
.tool .bar{display:grid;grid-template-columns:3.6rem 1fr 5rem;gap:.7rem;align-items:center;font-size:.8rem}
.tool .bar__k{color:var(--muted)}
.tool .bar__v{font-family:var(--mono);text-align:right}
.tool .bar__track{height:.7rem;border-radius:99px;background:var(--border);overflow:hidden}
.tool .bar__fill{height:100%;width:0;border-radius:99px;background:var(--muted);transition:width .6s cubic-bezier(.2,.8,.2,1)}
.tool .bar__fill--new{background:linear-gradient(90deg,var(--accent),var(--accent-2))}
.tool .report--none .bar__fill--new{background:var(--muted)}
.tool .report__foot{grid-column:1/-1;display:flex;gap:.8rem;align-items:center;justify-content:space-between;flex-wrap:wrap}
.tool .report__file{min-width:0}
.tool .chip{display:inline-block;margin-top:.3rem;padding:.1rem .6rem;border:1px solid var(--border);border-radius:99px;font-size:.75rem;color:var(--muted)}
@media(max-width:520px){.tool .report{grid-template-columns:1fr}.tool .bar{grid-template-columns:3.2rem 1fr 4.4rem}}

/* drop zone: text block + compact mode once files are added */
.tool .drop__text{display:flex;flex-direction:column;align-items:center;gap:.2rem}
.tool .drop.is-compact{border-width:1px}
.tool .drop.is-compact .drop__empty{flex-direction:row;justify-content:center;gap:.8rem;padding:.8rem 1rem;text-align:left}
.tool .drop.is-compact .drop__text{align-items:flex-start}
.tool .drop.is-compact .drop__icon{width:2.4rem;height:2.4rem}
.tool .drop.is-compact .drop__icon .i{width:1.2rem;height:1.2rem}
.tool .drop.is-compact .drop__title{font-size:.95rem}

/* file list */
.tool #files{margin-top:1rem}
.tool .fhead{display:flex;align-items:center;justify-content:space-between;gap:.8rem}
.tool .fsum{font-size:.85rem;color:var(--muted);font-weight:600}
.tool button.ghost{display:inline-flex;align-items:center;gap:.35rem;min-height:2.25rem;padding:.3rem .7rem;background:none;box-shadow:none;color:var(--muted);font-weight:600;font-size:.85rem;border:1px solid transparent}
.tool button.ghost:hover{filter:none;color:var(--accent);border-color:var(--border)}
.tool button.ghost .i{width:1rem;height:1rem}
.tool .flist{list-style:none;margin:.5rem 0 0;padding:0;display:grid;gap:.4rem}
.tool .frow{position:relative;display:flex;align-items:center;gap:.6rem;padding:.5rem .5rem .5rem .3rem;border:1px solid var(--border);border-radius:12px;background:var(--bg);transition:opacity .15s,border-color .15s}
.tool .frow:hover{border-color:var(--accent)}
.tool .frow.is-dragging{opacity:.4}
.tool .frow.drop-before::before,.tool .frow.drop-after::after{content:"";position:absolute;left:.4rem;right:.4rem;height:3px;border-radius:2px;background:var(--accent)}
.tool .frow.drop-before::before{top:-.3rem}
.tool .frow.drop-after::after{bottom:-.3rem}
.tool .frow__grip{display:grid;place-items:center;width:1.8rem;align-self:stretch;color:var(--muted);cursor:grab}
.tool .frow__grip:active{cursor:grabbing}
.tool .frow__grip .i{width:1.1rem;height:1.1rem}
.tool .frow__idx{flex:none;display:grid;place-items:center;width:1.6rem;height:1.6rem;border-radius:50%;background:var(--card);border:1px solid var(--border);font:700 .75rem var(--mono);color:var(--muted)}
.tool .frow__body{display:flex;flex-direction:column;min-width:0;flex:1}
.tool .frow__name{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tool .frow__meta{font-size:.8rem;color:var(--muted)}
.tool button.icon-btn{display:grid;place-items:center;flex:none;width:2.5rem;height:2.5rem;min-height:0;padding:0;background:none;box-shadow:none;color:var(--muted);border:0;border-radius:10px}
.tool button.icon-btn .i{width:1.1rem;height:1.1rem}
.tool button.icon-btn:hover:not(:disabled){filter:none;color:var(--accent);background:var(--glow)}
.tool button.icon-btn:disabled{opacity:.3;cursor:not-allowed}
@media(max-width:480px){.tool .frow__grip{display:none}}

/* batch results */
.tool .result--error{border-color:#ef4444}
.tool .result--error .result__icon{color:#ef4444}
.tool .result--error .meta{color:#ef4444}
.tool .result--all{border-color:var(--accent);background:var(--glow)}

/* thumbnails */
.tool button.frow__thumb{flex:none;display:grid;place-items:center;width:2.6rem;height:3.4rem;min-height:0;padding:0;border:1px solid var(--border);border-radius:6px;background:#fff;color:var(--muted);box-shadow:none;overflow:hidden;cursor:zoom-in}
.tool button.frow__thumb:hover:not(:disabled){filter:none;border-color:var(--accent)}
.tool button.frow__thumb:disabled{cursor:not-allowed;background:var(--card)}
.tool button.frow__thumb img{width:100%;height:100%;object-fit:cover;display:block}
.tool button.frow__thumb .i{width:1.1rem;height:1.1rem}
.tool .report__actions{display:flex;gap:.4rem;align-items:center}

/* preview dialog */
.pv{width:min(92vw,56rem);height:min(90vh,52rem);padding:0;border:1px solid var(--border);border-radius:var(--radius);background:var(--card);color:var(--fg);box-shadow:0 20px 60px rgba(0,0,0,.35)}
.pv[open]{display:flex;flex-direction:column}
.pv::backdrop{background:rgba(0,0,0,.55)}
.pv__head,.pv__foot{display:flex;align-items:center;gap:.6rem;padding:.5rem .8rem}
.pv__head{justify-content:space-between;border-bottom:1px solid var(--border)}
.pv__foot{justify-content:center;border-top:1px solid var(--border)}
.pv__title{font-weight:700;font-size:.9rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pv__pos{min-width:5rem;text-align:center;font:600 .85rem var(--mono);color:var(--muted)}
.pv__stage{position:relative;flex:1;min-height:0;display:grid;place-items:center;padding:12px;overflow:auto;background:var(--bg)}
.pv__stage canvas{display:block;box-shadow:0 2px 14px rgba(0,0,0,.25);background:#fff}
.pv__stage canvas[hidden]{display:none}
.pv__msg{position:absolute;margin:0;color:var(--muted);font-size:.9rem}
.pv button.icon-btn{display:grid;place-items:center;width:2.5rem;height:2.5rem;min-height:0;padding:0;border:0;border-radius:10px;background:none;box-shadow:none;color:var(--fg);cursor:pointer}
.pv button.icon-btn .i{width:1.2rem;height:1.2rem}
.pv button.icon-btn:hover:not(:disabled){background:var(--glow);color:var(--accent)}
.pv button.icon-btn:disabled{opacity:.3;cursor:not-allowed}
.pv button.icon-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media(max-width:480px){.pv{width:100vw;height:100dvh;max-width:none;max-height:none;border-radius:0}}

/* top-level functions: square tiles; sub-options stay rectangles */
.tool .modes:not(.modes--sub){grid-template-columns:repeat(auto-fill,minmax(5.6rem,1fr))}
.tool .modes:not(.modes--sub) label.mode{aspect-ratio:1/1;min-height:0;gap:.5rem}
.tool .modes:not(.modes--sub) label.mode .i{width:1.9rem;height:1.9rem}
.tool .modes:not(.modes--sub) label.mode .txt{font-size:.8rem}

/* narrow screens */
.tool .flist{grid-template-columns:minmax(0,1fr)}
.tool .frow{min-width:0}
@media(max-width:480px){
  .tool .modes--sub{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tool button.icon-btn{width:2.25rem}
  .tool .frow{gap:.4rem}
}
@media(max-width:480px){
  .tool .frow{flex-wrap:wrap}
  .tool .frow__body{flex:1 1 8rem}
  .tool .frow button.icon-btn:first-of-type{margin-left:auto}
}