.anim-box{ position:relative; width:100%; height:100%; overflow:hidden; border-radius:inherit; }
.anim-poster{ width:100%; height:100%; display:block; object-fit:contain; }
.animation-card[data-anim-fit="cover"] .anim-poster{ object-fit:cover; }
.anim-badge{ display:none; }
#framesContainer > .frame .anim-badge{
  position:absolute; left:16px; bottom:16px; display:inline-flex; align-items:center; gap:10px;
  padding:10px 18px; border-radius:999px; font-family:var(--font-regular); font-size:24px; line-height:1;
  color:#FFFFFF; background:rgba(20,26,34,.72); pointer-events:none;
}
#framesContainer > .frame .anim-badge i{ font-size:18px; }
.anim-empty, .anim-missing{
  position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px;
  border:2px dashed var(--slide-border, var(--md-neutral-stroke-2-rest)); border-radius:inherit;
  color:var(--slide-text-3, var(--md-neutral-foreground-3-rest)); font-family:var(--font-regular); font-size:24px; text-align:center; padding:24px;
}
.anim-empty i, .anim-missing i{ font-size:44px; }
.anim-missing{ display:none; background:var(--slide-surface, var(--md-neutral-background-2-rest)); }
.animation-card.anim-is-missing .anim-missing{ display:flex; }
.animation-card.anim-is-missing .anim-poster, .animation-card.anim-is-missing .anim-badge{ visibility:hidden; }

.anim-player-frame{ position:absolute; inset:0; width:100%; height:100%; border:0; background:transparent; opacity:0; transition:opacity .25s ease; color-scheme:normal; }
.anim-player-frame.is-shown{ opacity:1; }
.anim-box.anim-playing .anim-poster, .anim-panel-preview.anim-playing .anim-panel-poster{ visibility:hidden; }
.anim-box.anim-starting .anim-poster{ visibility:hidden; }

.anim-panel-preview{ position:relative; width:100%; aspect-ratio:16 / 10; border-radius:8px; overflow:hidden; background:var(--ui-surface-2, var(--md-neutral-background-2-rest)); margin-bottom:10px; }
.anim-panel-poster{ width:100%; height:100%; object-fit:contain; display:block; }
.anim-fit-seg{ width:100%; margin-bottom:14px; }
#animPanelPlay{ margin-bottom:14px; }
#animPanelPlay i{ margin-right:8px; }

.image-viewer-stage [hidden]{ display:none !important; }
.image-viewer-anim{ position:relative; width:100%; max-width:calc((100vh - 150px) * var(--anim-ratio, 1.6)); aspect-ratio:var(--anim-ratio, 1.6); border-radius:8px; overflow:hidden; }
.image-viewer-anim .image-viewer-anim-poster{ width:100%; height:100%; max-width:none; max-height:none; }
.image-viewer-anim.anim-playing .image-viewer-anim-poster{ visibility:hidden; }

.library-kind-seg{ width:100%; margin-bottom:12px; }
.library-kind-seg[hidden]{ display:none; }
#animationList{ display:flex; flex-direction:column; gap:18px; }
#animationList[hidden]{ display:none; }
.animation-thumb .thumb-preview{ padding:0; height:auto; aspect-ratio:16 / 10; }
.animation-thumb .thumb-preview img{ object-fit:cover; }
#libraryList[hidden]{ display:none; }

.anim-style-frame .deck-thumbnail-img{ object-fit:contain; }
.anim-style-frames-label{ margin-top:4px; font-size:var(--text-base); color:var(--ui-text); font-family:"lexend Regular"; }
.anim-style-frames{ display:grid; grid-template-columns:repeat(4, 1fr); gap:8px; }
.anim-style-frame-btn{ padding:3px; border:1px solid var(--ui-border); border-radius:8px; background:var(--md-neutral-background-2-rest); cursor:pointer; line-height:0; transition:border-color .15s, box-shadow .15s; }
.anim-style-frame-btn:hover{ border-color:var(--ui-muted); }
.anim-style-frame-btn.active{ border-color:var(--ui-accent); box-shadow:0 0 0 2px var(--ui-accent-soft, rgba(0,64,222,0.18)); }
.anim-style-frame-btn img{ width:100%; aspect-ratio:16 / 10; object-fit:contain; border-radius:5px; display:block; }
.anim-panel-play{
  position:absolute; left:50%; top:50%; z-index:2; width:44px; height:44px; margin:-22px 0 0 -22px; padding:0;
  border:0; border-radius:50%; display:flex; align-items:center; justify-content:center; cursor:pointer;
  font-size:15px; color:#FFFFFF; background:rgba(20,26,34,.72); box-shadow:0 2px 8px rgba(0,0,0,.25);
  transition:opacity .2s ease, transform .15s ease, background .15s ease;
}
.anim-panel-play:hover{ background:rgba(20,26,34,.88); transform:scale(1.06); }
.anim-panel-play:focus-visible{ outline:2px solid var(--ui-accent); outline-offset:2px; }
.anim-panel-play i{ margin-left:2px; }
.anim-panel-preview.is-playing .anim-panel-play{ opacity:0; }
.anim-panel-preview.is-playing:hover .anim-panel-play, .anim-panel-preview.is-playing .anim-panel-play:focus-visible{ opacity:1; }
.anim-panel-preview.is-playing .anim-panel-play i{ margin-left:0; }
.anim-panel-preview + .panel-replace-btn{ margin-bottom:6px; }