.gif-studio-card { overflow: hidden; }
.gif-studio-layout { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(280px, .85fr); gap: 1.25rem; align-items: start; }
.gif-preview { min-width: 0; }
.gif-preview__frame { min-height: 300px; display: grid; place-items: center; padding: 1rem; border: 1px solid rgba(148, 163, 184, .22); border-radius: 1rem; background: #0f172a; overflow: hidden; }
.gif-preview canvas, .gif-preview img { display: block; max-width: 100%; max-height: 480px; border-radius: .55rem; box-shadow: 0 18px 40px rgba(2, 6, 23, .3); }
.gif-preview canvas[hidden], .gif-preview img[hidden], .gif-actions [hidden] { display: none !important; }
.gif-preview img { image-rendering: auto; }
.gif-preview__empty { display: grid; gap: .35rem; text-align: center; color: #cbd5e1; }
.gif-preview__empty span { color: #94a3b8; font-size: .9rem; }
.gif-controls { display: grid; gap: 1rem; }
.gif-dropzone { display: grid; gap: .35rem; min-height: 100px; align-content: center; padding: 1rem; border: 1.5px dashed #38bdf8; border-radius: .9rem; background: rgba(14, 165, 233, .08); cursor: pointer; }
.gif-dropzone:hover, .gif-dropzone:focus-within, .gif-dropzone.is-dragging { background: rgba(14, 165, 233, .16); border-color: #fbbf24; }
.gif-dropzone span { color: #64748b; font-size: .88rem; }
.gif-dropzone input { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; clip-path: inset(50%); }
.gif-control-group { display: grid; gap: .8rem; padding: 1rem; border: 1px solid rgba(148, 163, 184, .25); border-radius: .85rem; }
.gif-control-group legend { padding-inline: .35rem; font-weight: 700; color: #0f172a; }
.gif-control-group label { display: grid; gap: .35rem; font-size: .92rem; font-weight: 600; color: #334155; }
.gif-control-row { display: grid; grid-template-columns: 1fr auto; gap: .75rem; align-items: end; }
.gif-control-group input[type='range'] { accent-color: #0891b2; min-height: 2.25rem; }
.gif-control-group select { min-height: 2.75rem; padding: .5rem .7rem; border: 1px solid #94a3b8; border-radius: .55rem; background: #fff; color: #0f172a; font: inherit; }
.gif-range-output { justify-self: end; color: #0e7490; font-variant-numeric: tabular-nums; }
.gif-switch { display: flex !important; grid-template-columns: auto 1fr; gap: .55rem !important; align-items: center; }
.gif-switch input { inline-size: 1.2rem; block-size: 1.2rem; accent-color: #0891b2; }
.gif-privacy { display: flex; gap: .6rem; padding: .85rem; border-radius: .7rem; background: #ecfeff; color: #155e75; font-size: .88rem; line-height: 1.45; }
.gif-actions { display: flex; flex-wrap: wrap; gap: .65rem; }
.gif-actions .gt-button { flex: 1 1 140px; }
.gt-button-small { min-height: 2.3rem; padding: .35rem .55rem; font-size: .8rem; }
.gif-frame-section { display: grid; gap: .65rem; margin-top: 1rem; }
.gif-frame-heading { display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; }
.gif-frame-heading h3 { margin: 0; font-size: 1rem; }
.gif-frame-heading span { color: #64748b; font-size: .85rem; }
.gif-frame-list { display: grid; gap: .55rem; margin: 0; padding: 0; list-style: none; }
.gif-frame-item { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: .7rem; align-items: center; padding: .55rem; border: 1px solid #cbd5e1; border-radius: .7rem; background: #fff; }
.gif-frame-item.is-selected { border-color: #0891b2; box-shadow: 0 0 0 2px rgba(8, 145, 178, .14); }
.gif-frame-thumb { width: 64px; height: 44px; object-fit: contain; border-radius: .35rem; background: #f8fafc; }
.gif-frame-meta { min-width: 0; display: grid; gap: .2rem; }
.gif-frame-meta strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .86rem; }
.gif-frame-meta span { color: #64748b; font-size: .78rem; }
.gif-frame-actions { display: flex; gap: .35rem; flex-wrap: wrap; justify-content: end; }
.gif-output-note { margin: .7rem 0 0; color: #475569; font-size: .9rem; }
.gif-status { min-height: 1.4rem; margin: 0; color: #0e7490; font-weight: 600; }
@media (max-width: 860px) {
  .gif-studio-layout { grid-template-columns: 1fr; }
  .gif-preview__frame { min-height: 220px; }
}
@media (max-width: 560px) {
  .gif-frame-item { grid-template-columns: 56px minmax(0, 1fr); }
  .gif-frame-thumb { width: 56px; height: 40px; }
  .gif-frame-actions { grid-column: 1 / -1; justify-content: stretch; }
  .gif-frame-actions .gt-button { flex: 1 1 0; }
  .gif-control-row { grid-template-columns: 1fr; }
}