.frame-editor { margin-top: 22px; border: 1px solid var(--line); border-radius: 16px; background: #091713; padding: 16px; }
.editor-head, .editor-footer { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.editor-head > div:first-child { display: flex; flex-direction: column; gap: 5px; }
.editor-head small, .playback-controls small { color: var(--muted); }
.editor-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.mini-button { border: 1px solid var(--line); background: #122822; color: var(--text); border-radius: 9px; min-height: 34px; padding: 0 11px; font-weight: 700; cursor: pointer; }
.mini-button:hover { border-color: var(--green); }
.mini-button:disabled { opacity: .35; cursor: not-allowed; }
.mini-button.danger { color: #ffaaa6; border-color: #693b38; }
.mini-button.play-button { min-width: 104px; }
.editor-main { display: grid; grid-template-columns: minmax(220px, 360px) 1fr; gap: 18px; margin: 16px 0; }
.animation-preview { height: 300px; border-radius: 12px; display: grid; place-items: center; overflow: hidden; }
.animation-preview canvas { max-width: 100%; max-height: 100%; image-rendering: auto; cursor: grab; touch-action: none; }
.animation-preview canvas.dragging { cursor: grabbing; }
.playback-controls { display: flex; flex-direction: column; justify-content: center; gap: 14px; }
.playback-controls label { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; color: #bcd0ca; font-size: 13px; }
.playback-controls input { width: 100%; accent-color: var(--green2); }
.playback-controls output { color: var(--green); }
.crop-controls { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: #07130f; }
.crop-title, .crop-buttons { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.crop-buttons { justify-content: flex-start; }
.crop-controls label { margin: 0; }
.crop-controls output { font-variant-numeric: tabular-nums; }
.frame-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 9px; max-height: 430px; overflow: auto; padding: 10px; border-radius: 12px; background: #06100e; }
.frame-thumb { position: relative; min-width: 0; aspect-ratio: 1; border: 2px solid transparent; border-radius: 10px; background-color: #d7e0dc; background-image: linear-gradient(45deg,#aebbb6 25%,transparent 25%),linear-gradient(-45deg,#aebbb6 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#aebbb6 75%),linear-gradient(-45deg,transparent 75%,#aebbb6 75%); background-size: 16px 16px; background-position: 0 0,0 8px,8px -8px,-8px 0; overflow: hidden; cursor: crosshair; padding: 0; user-select: none; -webkit-user-drag: none; }
.frame-thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }
.frame-thumb:not(.selected) img { opacity: .4; filter: grayscale(.35); }
.frame-thumb span { position: absolute; left: 5px; bottom: 5px; border-radius: 6px; background: rgba(4,18,14,.82); color: #fff; font-size: 10px; padding: 3px 6px; }
.frame-thumb.selected { border-color: var(--green); box-shadow: 0 0 0 2px rgba(81,224,156,.2); }
.frame-thumb.selected::after { content: '✓'; position: absolute; right: 5px; top: 5px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--green); color: #052217; font-weight: 900; }
.editor-footer { align-items: flex-start; margin-top: 14px; flex-wrap: wrap; }
.editor-footer .primary { width: auto; min-width: 240px; margin-top: 0; padding: 0 18px; }
.editor-footer .secondary { width: auto; min-width: 210px; margin-top: 0; padding: 0 18px; }
.editor-footer .message { flex-basis: 100%; }
@media (max-width: 850px) {
  .editor-main { grid-template-columns: 1fr; }
  .animation-preview { height: 260px; }
  .editor-head { align-items: flex-start; flex-direction: column; }
}