.notice{margin:0 0 1rem;padding:.7rem .95rem;border-radius:var(--radius-sm);font-size:.875rem;line-height:1.4;background:var(--accent-soft);border:1px solid var(--border);color:var(--text)}.notice[data-level=warn]{background:#eab3081f;border-color:#eab30880}.notice[data-level=error]{background:#dc26261a;border-color:#dc262680}.count-badge{font-size:.78rem;color:var(--text-muted);padding:.25rem .55rem;background:var(--surface-2);border:1px solid var(--border);border-radius:999px;white-space:nowrap}.files-meta{display:flex;align-items:center;justify-content:flex-end}.files-meta[hidden]{display:none}.progress-wrap{margin-bottom:1rem}.progress-bar{height:8px;background:var(--surface-2);border-radius:999px;overflow:hidden}.progress-fill{height:100%;width:0%;background:var(--accent);border-radius:999px;transition:width .15s ease-out}.progress-text{margin:.4rem 0 0;font-size:.875rem;color:var(--text-muted)}.summary{margin:0 0 1rem;padding:.75rem 1rem;background:var(--accent-soft);border-radius:var(--radius-sm);font-size:.9rem;font-weight:500}.file-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:1rem;margin:0;padding:0;list-style:none}.compressor-stage{margin-bottom:1.25rem}.compressor-stage[hidden]{display:none}.compressor-layout{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:1.25rem;align-items:start}@media(max-width:900px){.compressor-layout{grid-template-columns:1fr}}.compressor-files-col{min-width:0;display:flex;flex-direction:column;gap:.75rem}.compressor-files-scroll{position:sticky;top:5rem;height:calc(100vh - 6rem);overflow-y:auto;padding:.75rem;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow)}@media(max-width:900px){.compressor-files-scroll{position:static;height:70vh}}.compressor-files-scroll[hidden]{display:none}.compressor-files-scroll .file-grid{grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:.6rem}.compressor-files-scroll .file-card{border-radius:var(--radius-sm);box-shadow:none}.compressor-files-scroll .file-info{padding:.4rem .5rem}.compressor-files-scroll .file-name{font-size:.78rem}.compressor-files-scroll .file-sizes{font-size:.72rem}.compressor-settings-col{display:flex;flex-direction:column;gap:.85rem;padding:1rem 1.25rem;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);position:sticky;top:5rem}.compressor-settings-col .controls-row{grid-template-columns:1fr}.compressor-settings-col .preview-compare{grid-template-columns:1fr;gap:.5rem}@media(max-width:900px){.compressor-settings-col{position:static}}.file-card{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}.file-card.error{border-color:var(--danger)}.file-card.warning{border-color:#eab308a6}.file-badge{position:absolute;bottom:6px;left:6px;padding:.15rem .4rem;font-size:.65rem;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:#111;background:#eab308eb;border-radius:4px;z-index:1}.file-thumb-wrap{position:relative;aspect-ratio:1;background:var(--surface-2)}.file-thumb{width:100%;height:100%;object-fit:cover;display:block}.file-thumb-skel{position:absolute;inset:0;background:linear-gradient(90deg,var(--surface-2) 0%,var(--border) 50%,var(--surface-2) 100%);background-size:200% 100%;animation:thumb-shimmer 1.2s linear infinite}@keyframes thumb-shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}.file-remove{position:absolute;top:6px;right:6px;width:28px;height:28px;padding:0;border:none;border-radius:50%;background:#0000008c;color:#fff;font-size:1.1rem;line-height:1;opacity:0;transition:opacity .15s}.file-card:hover .file-remove{opacity:1}.file-info{padding:.65rem .75rem;font-size:.8rem}.file-name{margin:0 0 .25rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.file-sizes{margin:0;color:var(--text-muted)}.file-sizes.saved{color:var(--success)}.file-error{margin:.25rem 0 0;color:var(--danger);font-size:.75rem}.app.busy .drop-zone{pointer-events:none}
