.frame-animation-create,
.frame-animation-editor { position:fixed; inset:0; z-index:12000; display:none; color:var(--text-primary,#111827); }
.frame-animation-create.show,
.frame-animation-editor.show { display:flex; }
.frame-animation-backdrop { position:absolute; inset:0; background:rgba(15,23,42,.62); backdrop-filter:blur(8px); }
.frame-animation-create-panel { position:relative; margin:auto; width:min(920px,calc(100vw - 32px)); max-height:calc(100vh - 48px); overflow:auto; border:1px solid var(--border-color,#dbe2ea); border-radius:18px; background:var(--bg-card,#fff); box-shadow:0 24px 80px #0005; padding:22px; }
.frame-animation-create-head,.frame-animation-editor-head,.frame-animation-editor-actions,.frame-animation-properties { display:flex; align-items:center; gap:10px; }
.frame-animation-create-head { justify-content:space-between; margin-bottom:14px; }
.frame-animation-create-head h2,.frame-animation-editor-head h2 { margin:0; font-size:18px; }
.frame-animation-sort { display:flex; gap:10px; overflow-x:auto; padding:10px 2px 18px; min-height:148px; }
.frame-animation-sort-item { flex:0 0 124px; position:relative; padding:8px; border:1px solid var(--border-color,#dbe2ea); border-radius:12px; background:var(--bg-soft,#f8fafc); cursor:grab; }
.frame-animation-sort-item.dragging { opacity:.35; }
.frame-animation-sort-item img { display:block; width:108px; height:92px; object-fit:contain; border-radius:8px; background:#111827; }
.frame-animation-sort-item span { display:block; margin-top:6px; font-size:12px; text-align:center; }
.frame-animation-create .frame-animation-sort-item button { position:absolute; right:3px; top:3px; width:24px; height:24px; padding:0; border:0; border-radius:50%; background:#ef4444; color:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center; line-height:1; font-size:14px; z-index:2; }
.frame-animation-create-actions { display:flex; justify-content:flex-end; gap:10px; }
.frame-animation-create button,.frame-animation-editor button { border:1px solid var(--border-color,#dbe2ea); border-radius:9px; background:var(--bg-soft,#f8fafc); color:inherit; padding:8px 12px; cursor:pointer; }
.frame-animation-create button.primary,.frame-animation-editor button.primary { background:var(--accent,#7c3aed); color:var(--accent-text,#fff); border-color:transparent; }
.frame-animation-create button:disabled,.frame-animation-editor button:disabled { opacity:.45; cursor:not-allowed; }
.frame-animation-editor { flex-direction:column; background:var(--bg-page,#f3f4f6); }
.frame-animation-editor-head { position:relative; z-index:1; min-height:58px; padding:0 18px; justify-content:space-between; border-bottom:1px solid var(--border-color,#dbe2ea); background:var(--bg-card,#fff); }
.frame-animation-editor-main { position:relative; z-index:1; flex:1; min-height:0; display:grid; grid-template-columns:minmax(0,1fr) 250px; }
.frame-animation-stage-shell { min-width:0; min-height:0; display:flex; flex-direction:column; background:color-mix(in srgb,var(--bg-page,#eef2f7) 88%,#111827); }
.frame-animation-stage { flex:1; min-height:220px; position:relative; overflow:hidden; background-image:linear-gradient(45deg,#94a3b820 25%,transparent 25%),linear-gradient(-45deg,#94a3b820 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#94a3b820 75%),linear-gradient(-45deg,transparent 75%,#94a3b820 75%); background-size:24px 24px; background-position:0 0,0 12px,12px -12px,-12px 0; }
.frame-animation-stage canvas { display:block; width:100%; height:100%; }
.frame-animation-properties { padding:12px 14px; flex-direction:column; align-items:stretch; overflow:auto; border-left:1px solid var(--border-color,#dbe2ea); background:var(--bg-card,#fff); }
.frame-animation-properties label { display:grid; grid-template-columns:72px 1fr 64px; gap:8px; align-items:center; font-size:12px; }
.frame-animation-properties input { min-width:0; }
.frame-animation-stage-meta { padding:8px 14px; font-size:12px; color:var(--text-muted,#64748b); border-top:1px solid var(--border-color,#dbe2ea); }
.frame-animation-timeline-wrap { position:relative; z-index:1; height:180px; border-top:1px solid var(--border-color,#dbe2ea); background:var(--bg-card,#fff); padding:10px 14px; }
.frame-animation-timeline { height:142px; display:flex; gap:8px; overflow-x:auto; overflow-y:hidden; }
.frame-animation-frame { flex:0 0 112px; position:relative; border:2px solid transparent; border-radius:10px; background:var(--bg-soft,#f8fafc); padding:6px; cursor:pointer; }
.frame-animation-frame.active { border-color:var(--accent,#7c3aed); }
.frame-animation-frame.dragging { opacity:.35; }
.frame-animation-frame img { display:block; width:96px; height:78px; object-fit:contain; border-radius:6px; background:#111827; }
.frame-animation-frame-row { display:flex; gap:4px; align-items:center; margin-top:5px; font-size:11px; }
.frame-animation-frame-row input { width:58px; }
.frame-animation-frame-delete { position:absolute; right:4px; top:4px; width:22px; height:22px; padding:0!important; border:0!important; background:#ef4444!important; color:#fff!important; }
.frame-animation-generate-panel { width:min(720px,calc(100vw - 32px)); }
.frame-animation-generate-form { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.frame-animation-generate-form label { display:flex; flex-direction:column; gap:6px; color:var(--text-muted,#64748b); font-size:12px; }
.frame-animation-generate-form .wide,.frame-animation-generate-form p { grid-column:1/-1; }
.frame-animation-generate-form select,.frame-animation-generate-form textarea { border:1px solid var(--border-color,#dbe2ea); border-radius:9px; background:var(--bg-soft,#f8fafc); color:inherit; padding:9px; }
.frame-animation-generate-form textarea { min-height:88px; resize:vertical; }
.frame-animation-generate-form p,.frame-animation-export-panel p { margin:0; min-height:20px; color:var(--text-muted,#64748b); font-size:12px; }
.frame-animation-export-panel { width:min(560px,calc(100vw - 32px)); }
.frame-animation-export-options { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:12px 0; }
.frame-animation-export-options button { min-height:70px; }
.frame-animation-generation { display:grid; grid-template-columns:minmax(160px,auto) minmax(120px,1fr) auto; gap:10px; align-items:center; margin-bottom:8px; font-size:12px; }
.frame-animation-generation.hidden { display:none; }
.frame-animation-generation>div { height:8px; overflow:hidden; border-radius:999px; background:var(--bg-page,#e5e7eb); }
.frame-animation-generation i { display:block; width:0; height:100%; border-radius:inherit; background:var(--accent,#7c3aed); transition:width .25s ease; }
.frame-animation-generation.failed { color:#b91c1c; }
.frame-animation-editor.is-generating .frame-animation-stage,.frame-animation-editor.is-generating .frame-animation-properties,.frame-animation-editor.is-generating .frame-animation-timeline { pointer-events:none; opacity:.72; }
.smart-animation-loop { position:absolute; right:10px; bottom:10px; z-index:2; padding:4px 8px; border-radius:999px; background:#111827cc; color:#fff; font-size:11px; pointer-events:none; }
@media(max-width:800px){.frame-animation-editor-head{align-items:flex-start;padding:8px;gap:8px}.frame-animation-editor-actions{flex-wrap:wrap;justify-content:flex-end}.frame-animation-editor-main{grid-template-columns:1fr}.frame-animation-properties{position:absolute;right:8px;top:8px;width:220px;max-height:calc(100% - 16px);border:1px solid var(--border-color,#dbe2ea);border-radius:12px}.frame-animation-timeline-wrap{height:184px}.frame-animation-generate-form,.frame-animation-export-options{grid-template-columns:1fr}.frame-animation-generate-form .wide,.frame-animation-generate-form p{grid-column:auto}.frame-animation-generation{grid-template-columns:1fr auto}.frame-animation-generation>div{grid-column:1/-1;grid-row:2}}