/* Редактор анимаций студии (public/js/anim/*.js): окно во весь экран в цветах тёмной темы Blender. */
#ae {
  --ae-bg: #1d1d1d; --ae-area: #282828; --ae-head: #303030; --ae-panel: #2e2e2e; --ae-box: #383838; --ae-field: #545454; --ae-field-h: #656565;
  --ae-text: #e5e5e5; --ae-dim: #9b9b9b; --ae-acc: #4772b3; --ae-acc2: #5680c2; --ae-sel: #ffaf29; --ae-line: #161616; --ae-menu: #1a1a1a;
  --ae-red: #c74a4a;
  position: fixed; inset: 0; z-index: 400; display: flex; flex-direction: column; background: var(--ae-bg); color: var(--ae-text);
  font: 12px/1.3 'Segoe UI', system-ui, sans-serif; user-select: none; -webkit-user-select: none;
}
#ae.hidden, #ae .hidden { display: none !important; }
#ae svg.ae-ic { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; flex: none; }
#ae button { font: inherit; color: inherit; }

/* верхняя полоса */
.ae-top { display: flex; align-items: center; gap: 2px; height: 30px; padding: 0 6px; background: #232323; border-bottom: 1px solid var(--ae-line); flex: none; }
.ae-logo { display: flex; align-items: center; gap: 6px; margin-right: 10px; color: #fff; font-weight: 600; }
.ae-ws { display: flex; gap: 1px; margin-left: 14px; }
.ae-ws button { background: transparent; border: 0; padding: 5px 12px; border-radius: 4px 4px 0 0; color: var(--ae-dim); cursor: pointer; }
.ae-ws button:hover { color: #fff; background: #2d2d2d; }
.ae-ws button.on { background: var(--ae-head); color: #fff; }
.ae-sp { flex: 1; }
.ae-hb { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px; background: transparent; border: 0; border-radius: 3px; cursor: pointer; white-space: nowrap; color: var(--ae-text); }
.ae-hb:hover { background: #3c3c3c; }
.ae-hb.ic { padding: 0 5px; min-width: 24px; justify-content: center; }
.ae-hb.on { background: var(--ae-acc); color: #fff; }
.ae-hb.on:hover { background: var(--ae-acc2); }
.ae-hb:disabled { opacity: .35; pointer-events: none; }
.ae-hb.rec.on { background: var(--ae-red); }
.ae-hsep { width: 1px; height: 16px; background: #444; margin: 0 4px; }
.ae-model { background: #3a3a3a; }
.ae-btn { display: inline-flex; align-items: center; justify-content: center; gap: 5px; height: 22px; padding: 0 10px; background: var(--ae-field); border: 1px solid #3d3d3d; border-radius: 4px; cursor: pointer; white-space: nowrap; }
.ae-btn:hover { background: var(--ae-field-h); }
.ae-btn.pri { background: var(--ae-acc); border-color: #3c63a0; color: #fff; }
.ae-btn.pri:hover { background: var(--ae-acc2); }
.ae-btn.danger { background: #8c3434; border-color: #6c2828; }
.ae-btn.wide { width: 100%; margin-top: 6px; }

/* области */
.ae-main { flex: 1; display: flex; min-height: 0; }
.ae-center { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.ae-right { display: flex; flex-direction: column; flex: none; min-width: 0; }
.ae-area { position: relative; display: flex; flex-direction: column; background: var(--ae-area); min-height: 0; min-width: 0; overflow: hidden; }
.ae-area > .ae-head { display: flex; align-items: center; gap: 2px; height: 26px; padding: 0 4px; background: var(--ae-head); border-bottom: 1px solid #222; flex: none; overflow: hidden; }
.ae-htitle { display: flex; align-items: center; gap: 5px; padding: 0 6px; color: var(--ae-dim); }
.ae-split { flex: none; background: var(--ae-line); }
.ae-split.h { height: 4px; cursor: row-resize; }
.ae-split.v { width: 4px; cursor: col-resize; }
.ae-split:hover { background: #3a3a3a; }
#ae.has-max .ae-area:not(.maxed), #ae.has-max .ae-split { display: none; }
#ae.has-max .ae-center, #ae.has-max .ae-right { flex: 1; width: auto !important; }
#ae.has-max .ae-right:not(:has(.maxed)), #ae.has-max .ae-center:not(:has(.maxed)) { display: none; }
#ae .ae-area.maxed { flex: 1 1 0 !important; height: auto !important; }

/* 3D-окно */
.ae-vbody { position: relative; flex: 1; min-height: 0; background: radial-gradient(ellipse at 50% 40%, #3d3d3d 0%, #303030 55%, #262626 100%); }
.ae-gl, .ae-2d { position: absolute; left: 0; top: 0; }
.ae-2d { cursor: default; }
.ae-tools { position: absolute; left: 6px; top: 48px; z-index: 3; display: flex; flex-direction: column; gap: 2px; padding: 3px; background: rgba(40, 40, 40, .9); border-radius: 6px; box-shadow: 0 2px 8px rgba(0, 0, 0, .4); }
.ae-tb { width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; background: transparent; border: 0; border-radius: 4px; cursor: pointer; }
.ae-tb:hover { background: #474747; }
.ae-tb.on { background: var(--ae-acc); }
.ae-tb svg.ae-ic { width: 18px; height: 18px; }
.ae-npanel { position: absolute; right: 6px; top: 6px; z-index: 3; width: 230px; max-height: calc(100% - 12px); overflow: auto; padding: 6px 8px; background: rgba(44, 44, 44, .95); border-radius: 6px; box-shadow: 0 2px 10px rgba(0, 0, 0, .45); }
.ae-mode { background: #3a3a3a; }

/* редакторы времени */
.ae-tbody { flex: 1; display: flex; min-height: 0; }
.ae-chans { width: 200px; flex: none; background: #2c2c2c; border-right: 1px solid #1c1c1c; overflow: hidden; position: relative; }
.ae-chans-pad { height: 24px; background: #232323; border-bottom: 1px solid #191919; position: relative; z-index: 1; }
.ae-chans-in { will-change: transform; }
.ae-row { display: flex; align-items: center; gap: 4px; height: 20px; padding: 0 4px; white-space: nowrap; overflow: hidden; cursor: default; border-bottom: 1px solid rgba(0, 0, 0, .15); }
.ae-row.sum { background: #3b3b47; font-weight: 600; }
.ae-row.grp { background: #353535; }
.ae-row.grp.sel { background: #3f4a5c; color: #fff; }
.ae-row.grp.act .ae-rname { color: #ffd890; }
.ae-row.ch { padding-left: 24px; color: #cfcfcf; }
.ae-row.ch.sel { background: #3d4655; color: #fff; }
.ae-rname { flex: 1; overflow: hidden; text-overflow: ellipsis; }
.ae-rbtns { display: flex; gap: 2px; }
.ae-rbtns b { display: flex; align-items: center; justify-content: center; width: 18px; height: 16px; font-weight: 400; color: var(--ae-dim); cursor: pointer; border-radius: 3px; }
.ae-rbtns b:hover { background: #4a4a4a; color: #fff; }
.ae-rbtns b.on { color: #ff7d7d; }
.ae-sw { width: 10px; height: 10px; border-radius: 2px; flex: none; }
.ae-tw { cursor: pointer; }
.ae-tcv { position: relative; flex: 1; min-width: 0; }
.ae-tcv canvas { position: absolute; left: 0; top: 0; }
.ae-gside { width: 230px; flex: none; overflow: auto; padding: 6px 8px; background: #2e2e2e; border-left: 1px solid #1c1c1c; }
.ae-actsel { background: #3a3a3a; max-width: 220px; }
.ae-actsel span { overflow: hidden; text-overflow: ellipsis; }
.ae-fcur { width: 64px; }
.ae-time .ae-head .ae-num { height: 20px; min-width: 76px; }

/* дерево */
.ae-scroll { flex: 1; overflow: auto; }
.ae-ohead { display: flex; align-items: center; gap: 5px; padding: 5px 8px; color: #fff; font-weight: 600; }
.ae-ogrp { display: flex; align-items: center; gap: 5px; padding: 6px 8px 3px; color: var(--ae-dim); font-size: 11px; text-transform: uppercase; letter-spacing: .03em; }
.ae-orow { display: flex; align-items: center; gap: 4px; height: 20px; padding-right: 6px; cursor: default; white-space: nowrap; }
.ae-orow:hover { background: #333; }
.ae-orow.sel { background: #334058; }
.ae-orow.act { background: #3d5277; color: #fff; }
.ae-orow.dim { color: var(--ae-dim); }
.ae-otw { width: 14px; display: flex; cursor: pointer; }
.ae-on { flex: 1; overflow: hidden; text-overflow: ellipsis; }
.ae-ocons { color: var(--ae-dim); font-size: 11px; display: flex; }
.ae-oeye { display: flex; color: var(--ae-dim); cursor: pointer; padding: 2px; }
.ae-oeye:hover { color: #fff; }

/* свойства */
.ae-props { flex-direction: row; }
.ae-ptabs { width: 30px; flex: none; display: flex; flex-direction: column; gap: 2px; padding: 4px 3px; background: #232323; border-right: 1px solid #1a1a1a; }
.ae-ptab { width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; background: transparent; border: 0; border-radius: 4px; cursor: pointer; color: var(--ae-dim); }
.ae-ptab:hover { background: #3a3a3a; color: #fff; }
.ae-ptab.on { background: var(--ae-panel); color: #fff; box-shadow: inset 2px 0 0 var(--ae-acc); }
.ae-pbody { flex: 1; overflow: auto; padding: 6px 8px 14px; background: var(--ae-panel); }
.ae-ptitle { display: flex; align-items: center; gap: 6px; margin: 10px 0 4px; color: #d0d0d0; font-weight: 600; }
.ae-ptitle:first-child { margin-top: 2px; }
.ae-prow { display: flex; align-items: center; gap: 6px; min-height: 24px; }
.ae-prow > span:first-child { color: var(--ae-dim); flex: 1; }
.ae-prow.wrap { flex-wrap: wrap; gap: 4px; padding: 4px 0; }
.ae-prow.dim { color: var(--ae-dim); font-size: 11px; }
.ae-big { font-size: 13px; color: #fff !important; display: flex; align-items: center; gap: 6px; }
.ae-pnote { margin: 8px 0 2px; color: var(--ae-dim); font-size: 11px; line-height: 1.4; }
.ae-col { display: flex; flex-direction: column; gap: 1px; }
.ae-col .ae-num:first-child { border-radius: 4px 4px 0 0; }
.ae-col .ae-num:last-child { border-radius: 0 0 4px 4px; }
.ae-num { position: relative; display: flex; align-items: center; height: 22px; padding: 0 8px; background: var(--ae-field); border-radius: 2px; cursor: ew-resize; overflow: hidden; }
.ae-num:hover { background: var(--ae-field-h); }
.ae-num.ae-wide { border-radius: 4px; margin-top: 3px; }
.ae-nl { color: #c8c8c8; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ae-nv { color: #fff; font-variant-numeric: tabular-nums; }
.ae-nin { position: absolute; inset: 0; width: 100%; border: 1px solid var(--ae-acc); background: #1f1f1f; color: #fff; padding: 0 8px; font: inherit; outline: none; }
.ae-num.ae-kf::after { content: ''; position: absolute; right: 0; top: 0; bottom: 0; width: 3px; }
.ae-num.k-anim { background: #4c6b3a; } .ae-num.k-anim:hover { background: #587a44; }
.ae-num.k-key { background: #8c7d2c; } .ae-num.k-key:hover { background: #9c8b34; }
.ae-num.k-chg { background: #9a5d22; } .ae-num.k-chg:hover { background: #a9692a; }
.ae-num.k-file { background: #4f5a46; }
.ae-sel { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 8px; background: #2a2a2a; border: 1px solid #444; border-radius: 4px; cursor: pointer; max-width: 170px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ae-sel:hover { background: #333; }
.ae-sel.wide { flex: 1; max-width: none; }
.ae-sel.sm { height: 18px; font-size: 11px; font-weight: 400; }
.ae-chk2 { display: flex; align-items: center; gap: 6px; height: 22px; cursor: pointer; }
.ae-chk2 input { accent-color: var(--ae-acc); margin: 0; }
.ae-cbox { margin-top: 8px; padding: 4px 6px 8px; background: var(--ae-box); border-radius: 5px; }
.ae-cbox.off { opacity: .55; }
.ae-chead { display: flex; align-items: center; gap: 4px; margin-bottom: 4px; }
.ae-vgl { max-height: 240px; overflow: auto; background: #252525; border-radius: 4px; padding: 2px; }
.ae-vg { display: flex; align-items: center; gap: 6px; height: 20px; padding: 0 6px; border-radius: 3px; cursor: default; }
.ae-vg:hover { background: #333; }
.ae-vg.act { background: var(--ae-acc); color: #fff; }
.ae-vg span { flex: 1; overflow: hidden; text-overflow: ellipsis; }
.ae-vg i { color: var(--ae-dim); font-style: normal; font-size: 11px; }
.ae-vg.act i { color: #e8eefb; }

/* строка состояния */
.ae-status { display: flex; align-items: center; gap: 10px; height: 22px; padding: 0 10px; background: #232323; border-top: 1px solid var(--ae-line); color: var(--ae-dim); flex: none; white-space: nowrap; overflow: hidden; }
.ae-st { color: #d8d8d8; overflow: hidden; text-overflow: ellipsis; }
.ae-dirty.on { color: var(--ae-sel); }
.ae-busy { position: absolute; inset: 0; z-index: 20; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, .35); font-size: 14px; }
.ae-busy > div { padding: 12px 22px; background: #2b2b2b; border-radius: 8px; box-shadow: 0 4px 18px rgba(0, 0, 0, .5); }

/* меню и окна (лежат в body поверх окна) */
.ae-menu { position: fixed; z-index: 1000; min-width: 190px; padding: 4px 0; background: var(--ae-menu, #1a1a1a); border: 1px solid #0c0c0c; border-radius: 6px; box-shadow: 0 6px 24px rgba(0, 0, 0, .55); color: #e5e5e5; font: 12px/1.3 'Segoe UI', system-ui, sans-serif; max-height: 80vh; overflow: auto; }
.ae-mh { padding: 4px 12px 5px; color: #8f8f8f; font-size: 11px; border-bottom: 1px solid #2c2c2c; margin-bottom: 3px; }
.ae-mi { display: flex; align-items: center; gap: 8px; height: 22px; padding: 0 10px 0 8px; cursor: default; white-space: nowrap; }
.ae-mi:hover { background: #4772b3; color: #fff; }
.ae-mi.off { color: #6d6d6d; pointer-events: auto; }
.ae-mi.off:hover { background: transparent; color: #6d6d6d; }
.ae-mt { flex: 1; }
.ae-mk { color: #8a8a8a; font-size: 11px; }
.ae-mi:hover .ae-mk { color: #dfe7f6; }
.ae-chk { width: 14px; text-align: center; color: #fff; }
.ae-msep { height: 1px; background: #2e2e2e; margin: 4px 0; }
.ae-menu svg.ae-ic { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.ae-modal { position: fixed; inset: 0; z-index: 1001; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, .45); font: 12px/1.4 'Segoe UI', system-ui, sans-serif; color: #e5e5e5; }
.ae-dlg { min-width: 340px; max-width: 520px; padding: 14px 16px; background: #2b2b2b; border: 1px solid #111; border-radius: 8px; box-shadow: 0 8px 32px rgba(0, 0, 0, .6); }
.ae-dh { font-size: 14px; font-weight: 600; color: #fff; margin-bottom: 8px; }
.ae-dhint, .ae-dtext { color: #b5b5b5; margin-bottom: 10px; }
.ae-din { width: 100%; box-sizing: border-box; height: 26px; padding: 0 8px; background: #1e1e1e; border: 1px solid #4772b3; border-radius: 4px; color: #fff; font: inherit; outline: none; }
.ae-dbtns { display: flex; gap: 6px; justify-content: flex-end; margin-top: 12px; }
.ae-dlg .ae-btn { display: inline-flex; align-items: center; height: 26px; padding: 0 14px; background: #545454; border: 1px solid #3d3d3d; border-radius: 4px; color: #e5e5e5; cursor: pointer; font: inherit; }
.ae-dlg .ae-btn:hover { background: #656565; }
.ae-dlg .ae-btn.pri { background: #4772b3; border-color: #3c63a0; color: #fff; }
.ae-dlg .ae-btn.danger { background: #8c3434; border-color: #6c2828; color: #fff; }