#animation-preview{position:relative;max-width:560px;margin:10px auto;background:#eaf1f8;border:1px solid #e1e8ee;border-radius:12px;overflow:hidden;box-shadow:0 15px 40px #233d5515}
#animation-preview.is-empty{min-height:320px;aspect-ratio:4/5;background:radial-gradient(ellipse at 70% 30%,#ffffffcc,transparent 55%),linear-gradient(150deg,#ecf5fc,#e0ebf4)}
#animation-result{display:block;width:100%;height:auto}
#animation-empty{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:35px;color:#638298}
.animation-empty-icon{display:grid;place-items:center;width:80px;height:80px;background:#ffffff90;border:1px solid #ffffff;border-radius:24px;font-size:34px;line-height:1;margin-bottom:25px;color:#2061a3;padding-left:5px}
#animation-empty strong{font-size:22px}#animation-empty p{font-size:13px;line-height:1.8;max-width:310px;color:#7893a6}
#animation-message{min-height:18px}#animation-message.error{color:#a44328}
#animation-progress-box{max-width:560px;margin:22px auto 0;border:1px solid #dbe8f2;border-radius:12px;padding:16px 18px;background:white}
.animation-progress-copy{display:flex;justify-content:space-between;gap:15px;font-size:12px;color:#426c8e;margin-bottom:10px}
#animation-progress{display:block;width:100%;height:8px;border:0;border-radius:8px;overflow:hidden;accent-color:#2061a3;background:#eaf0f5}
#animation-progress::-webkit-progress-bar{background:#eaf0f5;border-radius:8px}#animation-progress::-webkit-progress-value{background:linear-gradient(90deg,#2061a3,#0194e0);border-radius:8px}
#animation-progress-box .hint{margin-bottom:0}
.animation-result-actions{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;max-width:560px;margin:0 auto}
.animation-download{display:inline-block;text-decoration:none;color:#24455e;background:white;border:1px solid #d9e2ea;border-radius:9px;padding:10px 14px;font-size:13px}.animation-download:hover{background:#eef6fc}.animation-download:focus-visible{outline:3px solid #0194e070;outline-offset:2px}
#animation-refresh{display:block;max-width:560px;margin:auto}
.animation-templates{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.animation-template{padding:8px 6px 10px;font-size:11px;min-width:0;background:#f9fbfd}.animation-template strong{font-size:11px;line-height:1.5}
.animation-template.active{border-color:#0194e0;box-shadow:0 0 0 1px #0194e0;background:#eef8ff}
.animation-template-icon{display:block;position:relative;height:72px;background:linear-gradient(145deg,#c7e7f6,#7ea7c1);border-radius:5px;overflow:hidden;margin-bottom:8px}
.animation-template-icon:before{content:'';position:absolute;inset:10px 8px 22px;background:linear-gradient(150deg,transparent 47%,#497e9f 48%),linear-gradient(30deg,transparent 55%,#76a7bd 56%)}
.animation-template-icon i{display:block;position:absolute;bottom:16px;left:10%;width:72%;height:5px;background:white;border-radius:2px}.animation-template-icon i+i{bottom:7px;width:45%;height:3px;background:#ffffffb0}
.animation-template-icon.dynamic{transform:translateZ(0);background:linear-gradient(145deg,#2061a3,#0194e0)}.animation-template-icon.dynamic i{transform:skew(-10deg)}
.animation-template-icon.calm{background:linear-gradient(145deg,#dce7ee,#9bbdd1)}.animation-template-icon.calm i{left:16%;width:68%}.animation-template-icon.calm i+i{left:28%;width:44%}
.animation-template-icon.cards{background:#e1ecf5}.animation-template-icon.cards:before{inset:7px 10px 19px;border-radius:3px;box-shadow:3px 3px 0 #2061a330;background:linear-gradient(145deg,#8ec4dc,#507f9f)}.animation-template-icon.cards i{bottom:11px;background:#2061a3}.animation-template-icon.cards i+i{bottom:5px;background:#2061a370}
#animation-generate{margin-top:18px}#animation-cancel{margin-top:8px}
.animation-manual-settings{border:1px solid #dfe8ef;border-radius:11px;padding:13px 14px;margin:18px 0;background:#fcfdff}.animation-manual-settings>summary{cursor:pointer;color:#426580;font-size:12px;font-weight:600;line-height:1.6}.animation-manual-settings[open]>summary{margin-bottom:15px}.animation-manual-settings>summary:focus-visible{outline:3px solid #0194e070;outline-offset:4px}
#animation-scene-count{float:right}.animation-scene{border:1px solid #e1e8ee;border-radius:10px;padding:12px;margin-bottom:12px;background:white}.animation-scene-heading{display:flex;justify-content:space-between;align-items:center;gap:10px}.animation-scene-heading strong{font-size:12px;color:#426580}.animation-scene-heading button{font-size:11px;padding:4px 7px;color:#8b5460}.animation-scene label{margin-top:9px}.animation-scene textarea{padding:8px 10px}
#animation-upload-preview{display:flex;gap:10px;align-items:center;padding:9px;border:1px solid #e1e8ee;border-radius:9px;background:#f9fbfd;min-width:0}
#animation-upload-thumbnail{width:62px;height:62px;object-fit:contain;border-radius:6px;background:#e9eff4;flex:0 0 auto}#animation-upload-name{font-size:11px;overflow-wrap:anywhere;line-height:1.6;min-width:0;flex:1}#animation-upload-remove{padding:5px 9px;font-size:19px;color:#8b5460}
@media(min-width:1500px){#animation-preview,#animation-progress-box{max-width:620px}}
@media(max-width:760px){#animation-preview{max-width:380px}#animation-preview.is-empty{min-height:250px}.animation-result-actions>*{flex:1;text-align:center;font-size:12px}.animation-templates{gap:8px}.animation-template-icon{height:82px}#animation-progress-box{padding:14px 16px}}