/* OptimizeGIF - GIF Maker: frame list + live preview */
.mk { display: grid; grid-template-rows: auto 1fr; gap: 14px; padding: 18px; background: var(--bg); min-width: 0; }
.mk__play { display: grid; place-items: center; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-ctrl); padding: 12px; }
.mk__screen { position: relative; width: 100%; max-width: 420px; background-color: #fff; overflow: hidden; border-radius: 4px; box-shadow: var(--shadow-1); }
.mk__screen.is-trans { background-color: var(--surface); background-image: linear-gradient(45deg, var(--surface-2) 25%, transparent 25%), linear-gradient(-45deg, var(--surface-2) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, var(--surface-2) 75%), linear-gradient(-45deg, transparent 75%, var(--surface-2) 75%); background-size: 16px 16px; background-position: 0 0, 0 8px, 8px -8px, -8px 0; }
.mk__screen img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.mk__cap { margin-top: 8px; font-family: var(--font-mono); font-size: .76rem; color: var(--muted); text-align: center; }
.mk__list { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; max-height: 330px; overflow-y: auto; padding: 2px; }
.mk__item { position: relative; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); overflow: hidden; cursor: grab; user-select: none; }
.mk__item.is-dragging { opacity: .4; }
.mk__item.is-over { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(var(--accent-rgb), .3); }
.mk__thumb { aspect-ratio: 1; display: grid; place-items: center; background: var(--surface-2); }
.mk__thumb img { max-width: 100%; max-height: 100%; pointer-events: none; }
.mk__bar { display: flex; align-items: center; justify-content: space-between; padding: 3px 4px 3px 7px; font-family: var(--font-mono); font-size: .7rem; color: var(--muted); border-top: 1px solid var(--line); }
.mk__btns { display: flex; gap: 1px; }
.mk__btns button { background: none; border: 0; color: var(--muted); padding: 3px; border-radius: 4px; cursor: pointer; display: grid; place-items: center; }
.mk__btns button:hover { color: var(--ink); background: var(--surface-2); }
.mk__btns svg { width: 13px; height: 13px; }