.loft-image-compressor{width:100%;display:flex;flex-direction:column;gap:20px;container-type:inline-size;container-name:tool}.loft-image-compressor[data-state=empty]{--loft-fp-shell-empty-cap: 720px}.loft-ic__list{display:flex;flex-direction:column;gap:16px}.loft-ic__card{background:var(--bg-card);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);padding:16px;display:flex;flex-direction:column;gap:14px}.loft-ic__head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}.loft-ic__head-info{min-width:0;flex:1}.loft-ic__filename{font-weight:600;font-size:.95rem;color:var(--text-primary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.loft-ic__sub{font-size:.78rem;color:var(--text-muted);margin-top:2px}.loft-ic__remove{width:28px;height:28px;border-radius:var(--radius-sm);background:transparent;border:1px solid var(--border-subtle);color:var(--text-muted);cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background var(--duration-quick),color var(--duration-quick),border-color var(--duration-quick)}.loft-ic__remove:hover{background:var(--bg-card-elevated);color:var(--text-primary);border-color:var(--accent-violet)}.loft-ic__split{position:relative;width:100%;background:#000;border-radius:var(--radius-md);overflow:hidden;cursor:ew-resize;user-select:none;aspect-ratio:16 / 10;touch-action:none}.loft-ic__split-img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none}.loft-ic__split-overlay{position:absolute;inset:0;pointer-events:none}.loft-ic__split-handle{position:absolute;top:0;bottom:0;width:0;pointer-events:none}.loft-ic__split-line{position:absolute;top:0;bottom:0;left:-1px;width:2px;background:#ffffffe6;box-shadow:0 0 0 1px #0006}.loft-ic__split-knob{position:absolute;top:50%;left:0;transform:translate(-50%,-50%);width:32px;height:32px;border-radius:50%;background:#fff;color:#06060c;display:flex;align-items:center;justify-content:center;font-size:14px;box-shadow:0 2px 8px #0006;pointer-events:none}.loft-ic__split-tag{position:absolute;top:8px;padding:3px 8px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;background:#0009;color:#fff;border-radius:var(--radius-sm);pointer-events:none}.loft-ic__split-tag--left{left:8px}.loft-ic__split-tag--right{right:8px}.loft-ic__overlay-encoding{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#0000008c;color:#fff;font-size:.85rem;font-weight:500;letter-spacing:.5px}.loft-ic__quality{display:flex;flex-direction:column;gap:6px}.loft-ic__quality-label{font-size:.78rem;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:1px}.loft-ic__range{width:100%;accent-color:var(--accent-violet);cursor:pointer}.loft-ic__codecs{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.loft-ic__codec{display:flex;flex-direction:column;gap:4px;padding:12px;background:var(--bg-card-elevated);border:1px solid var(--border-subtle);border-radius:var(--radius-md);cursor:pointer;text-align:left;font:inherit;color:inherit;transition:border-color var(--duration-quick),background var(--duration-quick),transform var(--duration-quick)}.loft-ic__codec:hover:not(:disabled){border-color:var(--accent-violet);transform:translateY(-1px)}.loft-ic__codec--selected{border-color:var(--accent-cyan);box-shadow:0 0 0 1px var(--accent-cyan)}.loft-ic__codec--unsupported{opacity:.55;cursor:not-allowed}.loft-ic__codec-head{display:flex;justify-content:space-between;align-items:center;gap:8px}.loft-ic__codec-name{font-weight:700;font-size:.9rem;color:var(--text-primary)}.loft-ic__codec-best{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;padding:2px 6px;border-radius:var(--radius-pill);background:linear-gradient(135deg,var(--accent-cyan),var(--accent-blue));color:#06060c}.loft-ic__codec-size{font-size:.95rem;font-weight:600;color:var(--text-primary)}.loft-ic__codec-savings{font-size:.78rem;font-weight:600;color:var(--accent-cyan)}.loft-ic__codec-savings--neg{color:var(--accent-rose, #ef4444)}.loft-ic__codec-na{font-size:.78rem;color:var(--text-muted)}.loft-ic__codec-actions{margin-top:6px;display:flex;gap:6px}.loft-ic__codec-download{display:inline-flex;align-items:center;gap:4px;font-size:.78rem;font-weight:600;color:var(--text-muted);padding:4px 8px;border-radius:var(--radius-sm);background:transparent;cursor:pointer;transition:color var(--duration-quick),background var(--duration-quick)}.loft-ic__codec-download:hover{color:var(--text-primary);background:#ffffff0a}.loft-ic__bulk{display:flex;justify-content:center}.loft-ic__btn-primary{display:inline-flex;align-items:center;gap:8px;padding:10px 20px;background:linear-gradient(135deg,var(--accent-violet),var(--accent-cyan));color:#06060c;font-weight:600;font-size:.9rem;border:none;border-radius:var(--radius-md);cursor:pointer;transition:transform var(--duration-quick),opacity var(--duration-quick)}.loft-ic__btn-primary:hover:not(:disabled){transform:translateY(-1px)}.loft-ic__btn-primary:disabled{opacity:.55;cursor:not-allowed}@container tool (max-width: 36rem){.loft-ic__codecs{grid-template-columns:1fr}.loft-ic__split{aspect-ratio:4 / 3}}