/* GIF Converter — card, trim, order, progress and result. Tokens are the page's own. */
.gc-notice { margin: .75rem 0; padding: .6rem .8rem; border-radius: 8px; border: 1px solid var(--border-color, rgba(128,128,128,.3)); background: var(--bg-panel); color: var(--text-main); }
.gc-notice a { color: var(--accent-primary); font-weight: 600; }
.gc-toolbar { display: flex; flex-wrap: wrap; gap: .5rem; margin: .75rem 0; }
.gc-card .gc-media { display: block; width: 100%; max-height: 260px; object-fit: contain; background: repeating-conic-gradient(rgba(128,128,128,.18) 0 25%, transparent 0 50%) 0 0 / 16px 16px; border-radius: 6px; }
.gc-preview { position: relative; }
.gc-scrub { position: absolute; inset: 0; height: 100%; }
.gc-card .gc-name { margin-bottom: .5rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gc-trim { position: relative; margin: .75rem 0 .25rem; }
.gc-trim input[type=range] { width: 100%; margin: 0; }
.gc-trim-label { font-size: .85rem; color: var(--text-muted); margin-top: .25rem; font-variant-numeric: tabular-nums; }
.gc-order { display: flex; flex-wrap: wrap; gap: .4rem; list-style: none; padding: 0; margin: .75rem 0; }
.gc-thumb { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; width: 64px; padding: 4px; border: 1px solid var(--border-color, rgba(128,128,128,.3)); border-radius: 6px; cursor: grab; }
.gc-thumb canvas { grid-column: 1 / -1; width: 56px; height: 56px; }
.gc-thumb button { min-height: 28px; border: 0; border-radius: 4px; background: var(--bg-panel); color: var(--text-main); cursor: pointer; }
.gc-thumb button:disabled { opacity: .35; cursor: default; }
.gc-progress-wrap { display: flex; align-items: center; gap: .5rem; margin: .5rem 0; }
.gc-progress { flex: 1; height: 8px; }
.gc-progress-text { font-size: .85rem; color: var(--text-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.gc-limit, .gc-stale { margin: .5rem 0; font-size: .9rem; color: var(--text-main); }
.gc-error { margin: .5rem 0; font-size: .9rem; color: #b91c1c; }
:root.dark .gc-error { color: #fca5a5; }
.gc-result { margin: .75rem 0; display: grid; gap: .5rem; }
.gc-result-stats { font-size: .85rem; color: var(--text-muted); margin: 0; }
.gc-format-note { font-size: .8rem; color: var(--text-muted); margin: .35rem 0 0; }
/* These boxes set display, which beats the hidden attribute -- the progress bar stayed on screen
   after every conversion (memory/traps/hidden-attribute-vs-display.md). */
.gc-toolbar[hidden], .gc-progress-wrap[hidden], .gc-result[hidden], .gc-notice[hidden] { display: none; }
/* The page's .card-preview-area is a centring flex box, so a 64 px GIF stayed 64 px wide in a 338 px
   preview. The source preview fills its box and keeps its shape. */
.tool-scope .gc-preview > .gc-media { width: 100%; height: 100%; max-height: none; object-fit: contain; border-radius: 0; }
/* Two 44 px arrows did not fit a 64 px thumb: each spilled onto the next one. */
.gc-thumb { width: 104px; }
.gc-thumb canvas { width: 96px; height: 56px; object-fit: contain; }
.gc-thumb button { min-width: 0; padding: 0; }