/* Video to GIF Maker — file-tool card. Shared bits from css/tool-base.css. */
.vtg-main-card { display: flex; flex-direction: column; gap: .9rem; }
.vtg-dropzone { border: 2px dashed var(--t-border); border-radius: 16px; padding: 2rem 1rem; text-align: center; cursor: pointer; transition: border-color .2s, background .2s; position: relative; }
.vtg-dropzone:hover, .vtg-dropzone.dragover { border-color: var(--t-accent); background: rgba(127,127,127,.06); }
.vtg-input-file { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.vtg-drop-icon { font-size: 2.2rem; }
.vtg-drop-title { font-weight: 700; margin: .4rem 0 0; }
.vtg-drop-sub { opacity: .7; margin: .2rem 0 0; font-size: .9rem; }
.vtg-drop-formats { opacity: .55; margin: .3rem 0 0; font-size: .8rem; }
.vtg-file-info { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; background: var(--t-bg-2, rgba(127,127,127,.12)); border-radius: 12px; padding: .6rem .9rem; }
.vtg-file-info #vtgFileName { font-weight: 700; }
.vtg-file-info #vtgFileMeta { opacity: .7; font-size: .85rem; }
.vtg-link-btn { background: none; border: 0; color: var(--t-accent); cursor: pointer; font-weight: 600; margin-inline-start: auto; }
.vtg-preview { width: 100%; max-height: 320px; border-radius: 12px; background: #000; }
.vtg-options-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: .8rem; }
.vtg-control-group legend { font-weight: 700; margin-bottom: .35rem; font-size: .9rem; }
.vtg-select, .vtg-input { width: 100%; padding: .6rem .8rem; border-radius: 12px; border: 1px solid var(--t-border); background: var(--t-bg); color: inherit; }
.vtg-hint { opacity: .7; font-size: .85rem; }
.vtg-progress-wrap { height: 18px; border-radius: 100px; background: var(--t-bg-2, rgba(127,127,127,.2)); overflow: hidden; position: relative; }
.vtg-progress-bar { height: 100%; width: 0%; background: linear-gradient(135deg, var(--t-accent), var(--t-accent-2)); transition: width .25s; }
.vtg-progress-pct { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: .65rem; font-weight: 800; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.5); pointer-events: none; }
.vtg-result-wrap { display: flex; flex-direction: column; gap: .6rem; border-radius: 14px; }
.vtg-result-wrap[hidden] { display: none; }
.vtg-result-wrap.ready { border: 1px solid rgba(16,185,129,.35); background: var(--t-green-light, rgba(16,185,129,.07)); padding: .8rem; animation: vtgPop .35s cubic-bezier(.16,1,.3,1); }
@keyframes vtgPop { from { opacity: 0; transform: translateY(6px) scale(.99); } to { opacity: 1; transform: none; } }
.vtg-result-info { font-size: .9rem; opacity: .85; }
.vtg-gif { max-width: 100%; border-radius: 12px; align-self: center; }
.vtg-actions { display: flex; gap: .5rem; flex-wrap: wrap; }
.vtg-action-btn { padding: .7rem 1.3rem; border-radius: 100px; border: 1px solid var(--t-border); background: var(--t-bg-2, rgba(127,127,127,.15)); color: inherit; font-weight: 700; cursor: pointer; }
.vtg-action-btn.primary { background: linear-gradient(135deg, var(--t-accent), var(--t-accent-2)); color: #fff; border: 0; }
.vtg-action-btn:disabled { opacity: .5; cursor: not-allowed; }
/* Ready = green CTA. Toggled from app.js via .download-ready when GIF is done. */
.vtg-action-btn.download-ready { background: linear-gradient(135deg, #10b981, #059669); color: #fff; border: 0; box-shadow: 0 4px 18px rgba(16,185,129,.45); animation: vtgPulse 1.6s ease-in-out 3; }
.vtg-action-btn.download-ready:hover:not(:disabled) { filter: brightness(1.08); transform: translateY(-1px); }
.vtg-action-btn.download-ready:focus-visible { outline: 2px solid #10b981; outline-offset: 2px; }
@keyframes vtgPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(16,185,129,.5); } 50% { box-shadow: 0 0 0 10px rgba(16,185,129,0); } }
.vtg-action-btn.is-busy { opacity: .75; cursor: wait; }
@media (prefers-reduced-motion: reduce) {
    .vtg-action-btn.download-ready, .vtg-result-wrap.ready { animation: none; }
    .vtg-progress-bar { transition: none; }
}