.animation-builder { display: grid; gap: 1.25rem; }
.animation-builder h2 { margin: 0; font-size: 1.2rem; }
.animation-preview-panel, .control-panel, .output-panel { background: var(--card-bg); border: 1px solid var(--border-color); border-radius: 18px; padding: 1.25rem; }
.panel-heading-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.panel-heading-row.compact { align-items: end; }
.eyebrow { margin: 0 0 .2rem; color: var(--primary-color); font-size: .72rem; font-weight: 800; letter-spacing: .12em; }
.preview-actions { display: flex; gap: .6rem; flex-wrap: wrap; }
.primary-action, .secondary-action, .copy-code { border: 0; border-radius: 9px; padding: .7rem 1rem; font-weight: 700; cursor: pointer; }
.primary-action { background: var(--primary-color); color: #fff; }
.secondary-action, .copy-code { background: var(--background-color); color: var(--text-color); border: 1px solid var(--border-color); }
.preview-stage { min-height: 245px; border-radius: 14px; display: grid; place-items: center; overflow: hidden; background: radial-gradient(circle at 50% 45%, rgba(124,58,237,.18), transparent 45%), linear-gradient(135deg, #0f172a, #020617); }
.preview-object { width: 96px; height: 96px; display: grid; place-items: center; border-radius: 24px; color: #fff; font-size: 2rem; font-weight: 900; background: linear-gradient(135deg, #8b5cf6, #2563eb); box-shadow: 0 18px 45px rgba(37,99,235,.35); }
.animation-summary { min-height: 1.5em; margin: .85rem 0 0; color: var(--text-muted); font-size: .9rem; }
.builder-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 1.25rem; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .85rem; }
.field, .keyframe-card label, .preset-field { display: grid; gap: .35rem; color: var(--text-muted); font-size: .82rem; font-weight: 700; }
.field-wide { grid-column: 1 / -1; }
.field input, .field select, .keyframe-card input, .preset-field select { width: 100%; box-sizing: border-box; padding: .72rem .8rem; border: 1px solid var(--border-color); border-radius: 9px; background: var(--background-color); color: var(--text-color); font: inherit; }
.field small { font-weight: 400; }
.keyframe-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .75rem; }
.keyframe-card { min-width: 0; margin: 0; padding: .9rem; border: 1px solid var(--border-color); border-radius: 12px; }
.keyframe-card legend { padding: 0 .35rem; color: var(--primary-color); font-weight: 800; }
.keyframe-card label + label { margin-top: .7rem; }
.include-middle { grid-template-columns: auto 1fr; align-items: center; justify-content: start; }
.include-middle input { width: auto; }
.output-grid { display: grid; grid-template-columns: .75fr 1.25fr; gap: 1rem; }
.code-block { min-width: 0; overflow: hidden; border: 1px solid var(--border-color); border-radius: 12px; background: #0b1020; }
.code-heading { display: flex; justify-content: space-between; align-items: center; padding: .65rem .8rem; color: #e2e8f0; border-bottom: 1px solid #263147; }
.copy-code { padding: .35rem .65rem; color: #cbd5e1; background: #182238; border-color: #334155; }
.code-block pre { margin: 0; padding: 1rem; overflow: auto; color: #bfdbfe; font-size: .82rem; line-height: 1.6; }
.copy-status { min-height: 1.4em; margin: .75rem 0 0; color: var(--primary-color); font-weight: 700; }
@media (max-width: 900px) { .builder-grid, .output-grid { grid-template-columns: 1fr; } .keyframe-grid { grid-template-columns: 1fr; } }
@media (max-width: 620px) { .panel-heading-row { align-items: stretch; flex-direction: column; } .form-grid { grid-template-columns: 1fr; } .field-wide { grid-column: auto; } .preview-actions { display: grid; grid-template-columns: 1fr 1fr; } }
@media (prefers-reduced-motion: reduce) { .preview-object { animation-duration: .01ms !important; animation-iteration-count: 1 !important; } }