.de-grid-heading { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.de-grid-heading small { font-weight: 400; font-size: 10px; color: #888; letter-spacing: 0; text-transform: none; }
.de-tool-card { touch-action: pan-y; }
.de-tool-card.de-card-moving { opacity: .22; border: 1px dashed #ff3546; }
.de-card-ghost { position: fixed !important; left: 0 !important; top: 0 !important; z-index: 100001 !important; pointer-events: none !important; margin: 0 !important; opacity: .96; box-shadow: 0 18px 40px #0008 !important; border-color: #ff3546 !important; transition: none !important; }
body.de-reordering, body.de-reordering * { cursor: grabbing !important; user-select: none !important; }
#tabLookOpen, #capLayoutOpen, [data-look="tabs"], [data-look="caps"], .smtc-offer, .smcl-offer { display: none !important; }
#contentKeyframes .de-ke-root { display: flex; flex-direction: column; height: 100%; min-height: 0; color: #eee; }
#contentKeyframes #curveScrollArea { padding: 0 3px 16px 0 !important; }
.de-ke-header { margin-bottom: 20px; padding-top: 6px; }
.de-ke-header h2 { font-size: 23px; font-weight: 600; margin: 0 0 5px; letter-spacing: -.5px; }
.de-ke-header p { color: #929298; font-size: 11px; margin: 0; }
.de-ke-section { max-width: 760px; margin: 0 auto 18px; }
.de-ke-section-title { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: #ccc; font-size: 11px; font-weight: 600; margin-bottom: 9px; }
.de-ke-section-title small { color: #777; font-size: 9px; font-weight: 400; }
.de-ke-types { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.de-ke-type-row { display: contents !important; }
#contentKeyframes .de-ke-types .layers-segment { border-radius: 6px; border: 1px solid #343437; background: #1c1c1f; padding: 10px 5px; font-size: 11px; min-width: 0; color: #aaa; }
#contentKeyframes .de-ke-types .layers-segment.active { background: #342127; border-color: #d84050; color: #ff6372; box-shadow: none; }
#contentKeyframes .curve-graph-card { margin: 12px 0 0; border: 1px solid #303035; border-radius: 8px; background: #151518; padding: 13px; box-shadow: none; position: relative; }
#contentKeyframes #curveSvg { display: block; max-height: 290px; height: 260px; }
#contentKeyframes .curve-readout { font: 10px/1.5 Consolas, monospace; text-align: right; color: #bcbcc2; }
#contentKeyframes .curve-path { stroke: #ff4559; stroke-width: 2.5; }
#contentKeyframes .curve-handle { fill: #ff4559; stroke: #151518; stroke-width: 2; cursor: grab; }
#contentKeyframes .curve-control-line { stroke: #7a3943; stroke-dasharray: 3 3; }
#contentKeyframes .curve-grid { stroke: #4a4a50; }
#contentKeyframes .curve-grid-dash { stroke: #2b2b31; }
#contentKeyframes .curve-axis-label { fill: #777; }
#contentKeyframes #curveParamsWrapper { min-height: 0 !important; margin: 12px 0; }
#contentKeyframes #curveParamsRow, #contentKeyframes #curveStepsRow { padding: 12px; border: 1px solid #303035; border-radius: 6px; background: #19191c; }
#contentKeyframes input[type=range] { accent-color: #ff4559; }
.de-ke-library-head { display: flex; align-items: center; gap: 10px; margin: 10px 0; }
#contentKeyframes #curveLibToggle { flex: 1; margin: 0; }
#contentKeyframes #curveLibToggle .layers-segment { border-radius: 5px; border-color: #343439; background: #202024; color: #999; }
#contentKeyframes #curveLibToggle .layers-segment.active { background: #342127; color: #ff6372; border-color: #8e3542; }
#contentKeyframes .de-ke-find { width: 42%; min-width: 90px; height: 30px; padding: 5px 9px; border: 1px solid #343439; border-radius: 5px; background: #141417; color: #ddd; outline: none; font-size: 10px; }
#contentKeyframes .de-ke-find:focus { border-color: #c93b4c; }
#contentKeyframes #curveLibList { margin: 0 !important; display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 7px; }
#contentKeyframes #curveLibList > * { border-radius: 6px; border: 1px solid #323237; background: #1b1b1e; min-height: 46px; margin: 0; }
#contentKeyframes #curveLibList > *:hover { border-color: #9a3b48; background: #252024; }
#contentKeyframes #curveLibList > [hidden] { display: none !important; }
.de-ke-footer { flex-shrink: 0; border-top: 1px solid #303035; background: #141416; padding: 13px 0 calc(4px + var(--pin-bar-h, 0px)); }
.de-ke-actions { display: flex; gap: 8px; }
#contentKeyframes #curveApplyBtn { flex: 1; justify-content: center; padding: 12px !important; border: 1px solid #ff4559; border-radius: 6px; background: #d7293c; color: #fff; font-size: 11px !important; }
#contentKeyframes #curveSaveBtn { border: 1px solid #414146; border-radius: 6px; background: #242428; color: #ccc; padding: 10px 15px !important; }
.de-ke-footer p { font-size: 10px; color: #888; line-height: 1.5; margin: 9px 0 0; }
#contentKeyframes #btnReverseAnim { padding: 10px 12px; border-radius: 6px; border: 1px solid #333338; background: #1c1c20; box-shadow: none; }
#contentKeyframes #btnReverseAnim .tool-card-title { font-size: 11px; color: #ddd; }
#contentKeyframes #btnReverseAnim .tool-card-desc { font-size: 10px; color: #888; }
@media(max-width: 600px) { .de-ke-types { grid-template-columns: repeat(3, 1fr); } }