.goodietools-css-animation { color:#17324f; }
.goodietools-css-animation .gca-layout { display:grid; grid-template-columns:minmax(260px, .8fr) minmax(0,1.6fr); gap:18px; align-items:start; }
.goodietools-css-animation .gca-settings,.goodietools-css-animation .gca-workspace { display:flex; flex-direction:column; gap:16px; min-width:0; }
.goodietools-css-animation .gca-section,.goodietools-css-animation .gca-preview-panel,.goodietools-css-animation .gca-code-panel { padding:18px; border:1px solid #d7e2ef; border-radius:12px; background:#fff; box-shadow:0 2px 8px rgba(15,45,75,.05); }
.goodietools-css-animation h3 { margin:0; color:#123d69; font-size:17px; }
.goodietools-css-animation .gca-section > h3 { margin-bottom:14px; }
.goodietools-css-animation .gca-fields { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:13px; }
.goodietools-css-animation .gca-field { display:flex; flex-direction:column; gap:7px; min-width:0; font-weight:600; font-size:13px; }
.goodietools-css-animation .gca-field span { display:flex; justify-content:space-between; gap:8px; }
.goodietools-css-animation .gca-field input:not([type=range]):not([type=color]),.goodietools-css-animation .gca-field select { width:100%; min-height:40px; box-sizing:border-box; padding:8px 10px; border:1px solid #cbd5e1; border-radius:6px; background:#fff; color:#17324f; }
.goodietools-css-animation .gca-field input[type=range] { width:100%; accent-color:#0878d1; }
.goodietools-css-animation .gca-field.gca-color { flex-direction:row; align-items:center; justify-content:space-between; }
.goodietools-css-animation .gca-field input[type=color] { width:52px; height:38px; padding:3px; border:1px solid #cbd5e1; border-radius:6px; background:#fff; }
.goodietools-css-animation .gca-panel-heading { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px; margin-bottom:13px; }
.goodietools-css-animation .gca-panel-heading .goodietools-button { min-height:36px; padding:7px 13px; }
.goodietools-css-animation .gca-secondary { background:#52677d; }
.goodietools-css-animation .gca-stage { display:flex; align-items:center; justify-content:center; min-height:240px; overflow:hidden; border:1px dashed #b9cde0; border-radius:9px; background:linear-gradient(135deg,#f4f9ff,#e7f1fc); }
.goodietools-css-animation .gca-demo-element { display:flex; align-items:center; justify-content:center; min-width:150px; min-height:90px; max-width:80%; padding:18px 26px; box-sizing:border-box; border-radius:14px; box-shadow:0 9px 24px rgba(15,45,75,.2); font-size:18px; font-weight:700; text-align:center; }
.goodietools-css-animation .gca-demo-element.gca-demo-circle { width:110px; min-width:110px; height:110px; min-height:110px; padding:10px; }
.goodietools-css-animation .gca-demo-element.gca-demo-button { min-width:0; min-height:0; padding:14px 30px; }
.goodietools-css-animation .gca-demo-element.gca-demo-text { min-width:0; min-height:0; padding:8px; background:transparent!important; box-shadow:none; font-size:30px; }
.goodietools-css-animation .gca-help,.goodietools-css-animation .gca-privacy { margin:10px 0 0; color:#64748b; font-size:12px; line-height:1.5; }
.goodietools-css-animation .gca-keyframes { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.goodietools-css-animation .gca-frame-row { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; padding:12px; border:1px solid #e0e8f1; border-radius:8px; background:#f8fbff; }
.goodietools-css-animation .gca-frame-title { grid-column:1/-1; display:flex; justify-content:space-between; align-items:center; color:#174b7c; }
.goodietools-css-animation .gca-frame-title button { border:0; background:transparent; color:#b42318; font-size:22px; cursor:pointer; }
.goodietools-css-animation .gca-frame-row label { display:flex; align-items:center; justify-content:space-between; gap:5px; color:#52677d; font-size:11px; }
.goodietools-css-animation .gca-frame-row input { width:64px; min-width:0; padding:5px; border:1px solid #cbd5e1; border-radius:5px; }
.goodietools-css-animation .gca-code-actions { display:flex; flex-wrap:wrap; gap:8px; }
.goodietools-css-animation [data-gca-code] { display:block; width:100%; min-height:250px; box-sizing:border-box; padding:13px; resize:vertical; border:1px solid #243b53; border-radius:8px; background:#10243a; color:#e2efff; font:13px/1.55 Consolas,Monaco,monospace; tab-size:2; }
.goodietools-css-animation .gca-status { min-height:18px; margin-top:8px; color:#08723b; font-size:13px; }
.goodietools-css-animation .gca-privacy { text-align:center; margin-top:14px; }
@media(max-width:850px) { .goodietools-css-animation .gca-layout { grid-template-columns:1fr; } }
@media(max-width:560px) { .goodietools-css-animation .gca-fields,.goodietools-css-animation .gca-keyframes { grid-template-columns:1fr; } .goodietools-css-animation .gca-section,.goodietools-css-animation .gca-preview-panel,.goodietools-css-animation .gca-code-panel { padding:13px; } }