/* ==========================================================================
   MoonLayers — After Effects simulado + painel MoonLayers (recriação)
   ========================================================================== */

.sim-section { overflow: hidden; }
.sim-section::before { content: ""; position: absolute; left: 50%; top: 40%; width: 1200px; height: 700px; transform: translateX(-50%); background: radial-gradient(closest-side, rgba(124,92,255,.14), transparent); pointer-events: none; }
.aesim-wrap { position: relative; width: 100%; max-width: calc(1480px + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); }
.aesim { position: relative; }
.aesim.is-fs { background: #08080b; padding: 0; }

/* --------------------------------------------------------------------------
   Janela do After
   -------------------------------------------------------------------------- */
.ae {
  --ae-bg: #0c0c10; --ae-pnl: #15151b; --ae-line: #000; --ae-soft: rgba(255,255,255,.06);
  --ae-text: #cfccdb; --ae-dim: #7d7a90; --ae-blue: #5eb0ff; --ae-acc: #8b5cf6;
  position: relative; display: flex; flex-direction: column; height: 820px; border-radius: 14px; overflow: hidden;
  background: var(--ae-bg); color: var(--ae-text); font: 12px/1.35 var(--font);
  border: 1px solid var(--line-2);
  box-shadow: 0 0 0 1px rgba(0,0,0,.6), 0 60px 140px -40px rgba(0,0,0,.95), 0 40px 160px -60px rgba(124,92,255,.45);
  user-select: none; -webkit-user-select: none; outline: none;
}
.aesim.is-fs .ae { height: 100vh; border-radius: 0; border: 0; }
.ae button { cursor: pointer; font: inherit; color: inherit; }
.ae input, .ae select, .ae textarea { font: inherit; color: inherit; user-select: text; -webkit-user-select: text; }
.ae svg { display: inline-block; }
.ae-empty { padding: 14px; color: var(--ae-dim); line-height: 1.5; }

.ae-menubar { display: flex; align-items: center; gap: 6px; height: 34px; padding: 0 8px; background: #0a0a0d; border-bottom: 1px solid var(--ae-line); flex: none; }
.ae-logo { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 5px; background: linear-gradient(135deg, #2b1f6b, #120e2a); color: #c9bbff; font-weight: 700; font-size: 11px; box-shadow: inset 0 0 0 1px rgba(167,139,250,.5); flex: none; }
.ae-menus { display: flex; gap: 1px; min-width: 0; overflow: hidden; }
.ae-menus button { padding: 5px 9px; border-radius: 5px; color: #c3c0d0; white-space: nowrap; }
.ae-menus button:hover, .ae-menus button.is-on { background: rgba(255,255,255,.08); color: #fff; }
.ae-file { margin-left: auto; color: var(--ae-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.ae-file b { color: #fff; margin-left: 2px; }
.ae-badge { font-family: var(--mono); font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: #c9bbff; padding: 2px 7px; border-radius: 999px; border: 1px solid rgba(167,139,250,.35); flex: none; }
.ae-chip { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border-radius: 999px; border: 1px solid rgba(255,255,255,.12); font-size: 11.5px; white-space: nowrap; flex: none; transition: background-color .2s, border-color .2s; }
.ae-chip svg { width: 12px; height: 12px; }
.ae-chip:hover { background: rgba(255,255,255,.07); }
.ae-chip[aria-pressed="true"] { border-color: rgba(167,139,250,.6); background: rgba(124,92,255,.18); color: #fff; }
.ae-chip--icon { width: 26px; padding: 0; justify-content: center; }
.ae-menupop { position: absolute; z-index: 60; min-width: 270px; max-height: 70%; overflow: auto; padding: 5px; border-radius: 8px; background: #1f1f27; border: 1px solid rgba(255,255,255,.1); box-shadow: 0 20px 50px rgba(0,0,0,.6); }
.ae-menupop button { display: flex; justify-content: space-between; gap: 18px; width: 100%; padding: 6px 10px; border-radius: 5px; text-align: left; color: #e3e0ee; }
.ae-menupop button:hover { background: var(--ae-acc); color: #fff; }
.ae-menupop kbd { font: 10.5px var(--mono); color: var(--ae-dim); }
.ae-menupop button:hover kbd { color: #e9e3ff; }
.ae-menupop hr { border: 0; border-top: 1px solid rgba(255,255,255,.08); margin: 4px 6px; }

.ae-toolbar { display: flex; align-items: center; gap: 2px; height: 36px; padding: 0 8px; background: #111116; border-bottom: 1px solid var(--ae-line); flex: none; }
.ae-toolbar [data-tool] { display: grid; place-items: center; width: 30px; height: 26px; border-radius: 5px; color: #bdb9cc; flex: none; }
.ae-toolbar [data-tool] svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ae-toolbar [data-tool]:hover { background: rgba(255,255,255,.06); }
.ae-toolbar [data-tool][aria-pressed="true"] { background: rgba(94,176,255,.18); color: var(--ae-blue); }
.ae-tsep { width: 1px; height: 18px; margin: 0 6px; background: rgba(255,255,255,.1); flex: none; }
.ae-tool-hint { margin-left: 10px; color: var(--ae-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ae-mtabs { display: none; margin-left: auto; gap: 2px; padding: 2px; border-radius: 7px; background: #0a0a0e; flex: none; }
.ae-mtabs button { padding: 4px 9px; border-radius: 5px; font-size: 11px; color: var(--ae-dim); white-space: nowrap; }
.ae-mtabs button[aria-selected="true"] { background: #23232c; color: #fff; }

.ae-body {
  flex: 1; min-height: 0; display: grid; gap: 2px; background: var(--ae-line);
  grid-template-columns: 236px minmax(0, 1fr) 372px;
  grid-template-rows: minmax(0, 1fr) 286px;
  grid-template-areas: "project viewer panel" "timeline timeline panel";
}
.ae.no-panel .ae-body { grid-template-columns: 236px minmax(0, 1fr); grid-template-areas: "project viewer" "timeline timeline"; }
.ae.no-panel .ae-right { display: none; }
.ae-pnl { position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--ae-pnl); }
.ae-left { grid-area: project; } .ae-center { grid-area: viewer; } .ae-right { grid-area: panel; } .ae-bottom { grid-area: timeline; }
.ae-ptabs { display: flex; align-items: stretch; gap: 1px; height: 28px; flex: none; background: #101015; border-bottom: 1px solid var(--ae-line); overflow-x: auto; scrollbar-width: none; }
.ae-ptabs::-webkit-scrollbar { display: none; }
.ae-ptabs button, .ae-ptab-static { display: inline-flex; align-items: center; gap: 6px; padding: 0 12px; color: var(--ae-dim); white-space: nowrap; border-bottom: 2px solid transparent; }
.ae-ptabs button[aria-selected="true"], .ae-ptabs button.is-on, .ae-ptab-static { color: #fff; border-bottom-color: var(--ae-acc); background: var(--ae-pnl); }
.ae-ptabs button span { opacity: .5; margin-left: 2px; }
.ae-ptabs button span:hover { opacity: 1; }
.ae-ptab-menu { margin-left: auto; padding: 0 10px; display: flex; align-items: center; color: var(--ae-dim); }

.ae-proj, .ae-fx { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.ae-proj__info { display: flex; gap: 10px; padding: 8px; border-bottom: 1px solid rgba(255,255,255,.05); min-height: 64px; }
.ae-proj__info b { display: block; color: #fff; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 150px; }
.ae-proj__info small { display: block; color: var(--ae-dim); font-size: 10.5px; }
.pi-thumb { width: 54px; height: 40px; flex: none; border-radius: 3px; background: #26263a; }
.pi-thumb--comp { background: radial-gradient(60% 80% at 70% 20%, #3b2a7a, #0d0b1c); }
.pi-thumb--img { background: linear-gradient(180deg, #1c1640, #0a0816); }
.pi-thumb--vid { background: linear-gradient(135deg, #1f3b73, #0b1530); }
.pi-thumb--aud { background: repeating-linear-gradient(90deg, #4ade80 0 2px, transparent 2px 5px) center / 100% 40% no-repeat, #0f1a12; }
.pi-empty { color: var(--ae-dim); padding: 12px 4px; }
.ae-tree { flex: 1; overflow: auto; padding: 4px 0; margin: 0; list-style: none; }
.tr-it { display: flex; align-items: center; gap: 6px; height: 22px; padding: 0 8px 0 calc(6px + var(--d) * 14px); white-space: nowrap; cursor: default; }
.tr-it:hover { background: rgba(255,255,255,.04); }
.tr-it.is-sel { background: rgba(94,176,255,.18); }
.tr-it.is-new { animation: aeIn .5s var(--ease); }
.tr-tw { width: 10px; font-size: 9px; color: var(--ae-dim); transition: transform .2s; flex: none; }
.tr-tw.is-open { transform: rotate(90deg); }
.tr-nm { overflow: hidden; text-overflow: ellipsis; }
.tr-meta { margin-left: auto; padding-left: 6px; color: var(--ae-dim); font: 10px var(--mono); }
.ae-proj__foot { display: flex; align-items: center; gap: 4px; height: 26px; padding: 0 6px; border-top: 1px solid rgba(255,255,255,.05); color: var(--ae-dim); flex: none; }
.ae-proj__foot button { padding: 2px 6px; border-radius: 4px; font-size: 11px; }
.ae-proj__foot button:hover { background: rgba(255,255,255,.07); color: #fff; }
.ae-proj__foot span { margin-left: auto; font-size: 10.5px; }
.ic { display: inline-block; width: 13px; height: 10px; border-radius: 2px; flex: none; }
.ic--folder { background: #c9a227; border-radius: 1px 3px 2px 2px; }
.ic--comp { background: #8b8fa8; box-shadow: inset 0 0 0 2px #15151b, inset 0 0 0 3px #8b8fa8; }
.ic--img { background: #3fa4a0; } .ic--vid { background: #6a6fd1; } .ic--aud { background: #c2588a; } .ic--solid { background: #7d7d86; } .ic--psd { background: #2f80ed; } .ic--preset { background: #a78bfa; }
@keyframes aeIn { from { opacity: 0; transform: translateX(-6px); } }

.ae-fx { overflow: auto; padding-bottom: 8px; }
.fx-head { padding: 7px 10px; color: var(--ae-dim); border-bottom: 1px solid rgba(255,255,255,.05); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fx-eff { border-bottom: 1px solid rgba(255,255,255,.04); }
.fx-title { display: flex; align-items: center; gap: 6px; padding: 5px 8px; }
.fx-title b { font-weight: 500; color: #ece9f5; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fx-on { display: inline-flex; align-items: center; gap: 3px; font: 9.5px var(--mono); color: var(--ae-acc); }
.fx-on input { width: 12px; height: 12px; accent-color: var(--ae-acc); }
.fx-del { margin-left: auto; padding: 0 4px; color: var(--ae-dim); border-radius: 3px; }
.fx-del:hover { color: #fff; background: rgba(255,255,255,.08); }
.fx-params { padding: 0 8px 6px 30px; }
.fx-p { display: flex; align-items: center; justify-content: space-between; gap: 8px; height: 22px; }
.fx-p > span { color: var(--ae-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fx-p input[type="color"] { width: 26px; height: 16px; padding: 0; border: 1px solid rgba(255,255,255,.2); border-radius: 3px; background: none; }
.fx-p input[type="checkbox"] { accent-color: var(--ae-acc); }
.fx-text { color: #e3e0ee; }
.fx-styles { padding: 8px 10px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.fx-styles b { width: 100%; font-weight: 500; }
.fx-styles span { padding: 2px 8px; border-radius: 4px; background: rgba(255,255,255,.06); }

.ae-viewer { position: relative; flex: 1; min-height: 0; overflow: auto; display: grid; place-items: center; padding: 12px; background: repeating-conic-gradient(#0d0d11 0% 25%, #101015 0% 50%) 50% / 20px 20px; touch-action: none; }
.ae-viewer[data-tool="hand"] { cursor: grab; } .ae-viewer[data-tool="zoom"] { cursor: zoom-in; } .ae-viewer[data-tool="text"] { cursor: text; } .ae-viewer[data-tool="rect"] { cursor: crosshair; }
.ae-viewer.is-drop { box-shadow: inset 0 0 0 2px var(--ae-blue); }
.ae-stagewrap { position: relative; flex: none; box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 20px 50px -20px #000; overflow: hidden; }
.ae-stage { position: absolute; left: 0; top: 0; transform-origin: 0 0; overflow: hidden; background: #000; }
.ae-stage.is-3d { transform-style: preserve-3d; }
.ae-stage > .ae-empty { position: absolute; inset: 0; display: grid; place-items: center; font-size: 40px; text-align: center; }
.ae-overlay { position: absolute; inset: 0; pointer-events: none; }
.ov-box { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ov-box polygon { fill: none; stroke: var(--ae-blue); stroke-width: 1; }
.ov-anchor { position: absolute; width: 14px; height: 14px; margin: -7px 0 0 -7px; }
.ov-anchor::before, .ov-anchor::after { content: ""; position: absolute; background: var(--ae-blue); }
.ov-anchor::before { left: 6px; top: 0; width: 2px; height: 14px; }
.ov-anchor::after { top: 6px; left: 0; height: 2px; width: 14px; }
.ov-safe { position: absolute; inset: 0; }
.ov-safe i { position: absolute; border: 1px solid rgba(94,176,255,.45); }
.ov-safe i:first-child { inset: 5% 5%; }
.ov-safe i:last-child { inset: 10% 10%; }
.ov-draw { position: absolute; border: 1px dashed var(--ae-blue); background: rgba(94,176,255,.1); }
.ae-vbar { display: flex; align-items: center; gap: 10px; height: 28px; padding: 0 8px; border-top: 1px solid var(--ae-line); background: #121217; flex: none; }
.ae-vbar select { height: 20px; padding: 0 4px; border-radius: 4px; border: 1px solid rgba(255,255,255,.1); background: #1d1d25; font-size: 11px; }
.ae-vbar button { width: 22px; height: 20px; border-radius: 4px; color: var(--ae-dim); }
.ae-vbar button[aria-pressed="true"] { color: var(--ae-blue); background: rgba(94,176,255,.15); }
.ae-vtc { font: 11px var(--mono); color: var(--ae-blue); }
.ae-vinfo { margin-left: auto; color: var(--ae-dim); font: 10.5px var(--mono); white-space: nowrap; }

.lyr { position: absolute; left: 0; top: 0; transform-origin: 0 0; will-change: transform; }
.ae-stage.is-3d .lyr { transform-style: preserve-3d; backface-visibility: hidden; }
.lyr.is-new .lyr__c { animation: lyrIn .5s var(--ease); }
@keyframes lyrIn { from { opacity: 0; } }
.lyr__c { position: relative; }
.lyr__c > div { position: absolute; inset: 0; }
.k-moon { border-radius: 50%; background: radial-gradient(circle at 36% 32%, #fff, #e3dbff 40%, #9e86ff 75%, #6b4cf0); box-shadow: 0 0 120px rgba(167,139,250,.55); }
.k-star { background: #ece6ff; clip-path: polygon(50% 0, 57% 43%, 100% 50%, 57% 57%, 50% 100%, 43% 57%, 0 50%, 43% 43%); }
.k-dot { border-radius: 50%; background: #fff; box-shadow: 0 0 12px 3px rgba(233,213,255,.9); }
.k-halo { border-radius: 50%; background: radial-gradient(closest-side, rgba(167,139,250,.55), rgba(124,92,255,.15) 60%, transparent); }
.k-text { display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 600; font-size: 128px; letter-spacing: -.03em; line-height: 1; white-space: nowrap; }
.k-solid, .k-rect { background: #1b1b26; }
.k-null { border: 3px solid #ef4444; }
.k-sky { background: radial-gradient(2px 2px at 12% 20%, #fff, transparent), radial-gradient(2px 2px at 35% 12%, #e9d5ff, transparent), radial-gradient(3px 3px at 60% 25%, #fff, transparent), radial-gradient(2px 2px at 82% 18%, #fff, transparent), radial-gradient(2px 2px at 92% 40%, #c4b5fd, transparent), radial-gradient(120% 90% at 70% 10%, #2a1d63, #0d0a1f 55%, #06050c); }
.k-vid { overflow: hidden; background: linear-gradient(180deg, #1d2b55 0%, #2b1a4f 55%, #0c0a18 56%); }
.k-vid i { position: absolute; bottom: 44%; width: 40%; height: 30%; background: #0c0a18; clip-path: polygon(0 100%, 0 40%, 10% 40%, 10% 10%, 22% 10%, 22% 55%, 35% 55%, 35% 25%, 48% 25%, 48% 60%, 62% 60%, 62% 0, 74% 0, 74% 45%, 88% 45%, 88% 30%, 100% 30%, 100% 100%); transform: translateX(calc(var(--t, 0) * -120px)); }
.k-vid i:nth-child(1) { left: 0; } .k-vid i:nth-child(2) { left: 40%; } .k-vid i:nth-child(3) { left: 80%; }
.k-vid span { position: absolute; left: 4%; bottom: 6%; font: 600 54px var(--font); color: rgba(255,255,255,.75); letter-spacing: .02em; }
.k-vid--dl { background: linear-gradient(180deg, #4a2368 0%, #1f3b73 55%, #0c0a18 56%); }
.k-scene, .k-wrap { overflow: hidden; background: linear-gradient(180deg, hsl(calc(250 + var(--h, 0)) 50% 30%), hsl(calc(250 + var(--h, 0)) 60% 9%)); }
.k-scene::before, .k-wrap::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 46%; background: rgba(0,0,0,.45); clip-path: polygon(0 60%, 18% 30%, 34% 55%, 52% 15%, 70% 50%, 86% 25%, 100% 45%, 100% 100%, 0 100%); }
.k-scene span { position: absolute; left: 4%; top: 5%; font: 500 64px var(--mono); color: rgba(255,255,255,.7); }
.k-wrap { background: linear-gradient(90deg, #3b2a7a, #1f3b73, #4a2368, #23465e, #5a2d5c, #3b2a7a); background-size: calc(var(--slices, 1) * 100%) 100%; background-position: calc(var(--slice, 0) / max(1, var(--slices, 1) - 1) * 100%) 0; }
.lyr.is-face .lyr__c { overflow: hidden; background: linear-gradient(160deg, #2a1d63, #120c2a); box-shadow: inset 0 0 0 3px rgba(201,187,255,.55); }
.lyr.is-face .lyr__c > div { inset: 12%; }
.k-pre { position: absolute; left: 0; top: 0; overflow: hidden; }
.has-fill .k-moon, .has-fill .k-star, .has-fill .k-dot, .has-fill .k-solid, .has-fill .k-rect, .has-fill .k-halo { background: var(--fill) !important; }
.has-fill .k-text { color: var(--fill); }
.has-ramp > div::after { content: ""; position: absolute; inset: 0; background: linear-gradient(var(--ra, 90deg), var(--r1), var(--r2)); mix-blend-mode: color; border-radius: inherit; }
.has-satin > div::before { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; background: linear-gradient(135deg, transparent 20%, rgba(255,255,255,.35) 45%, transparent 55%, rgba(0,0,0,.25) 80%); mix-blend-mode: overlay; pointer-events: none; }
.has-inner .k-moon, .has-inner .k-solid, .has-inner .k-rect { box-shadow: inset 12px 12px 30px rgba(0,0,0,.6); }
.k-bars { position: absolute; inset: 0; z-index: 9999; pointer-events: none; }
.k-bars i { position: absolute; left: 0; right: 0; height: 11%; background: #000; animation: barsIn .8s var(--ease) both; }
.k-bars i:first-child { top: 0; transform-origin: top; }
.k-bars i:last-child { bottom: 0; transform-origin: bottom; }
@keyframes barsIn { from { transform: scaleY(0); } }

.ae-tl { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.ae-tl.is-drop { box-shadow: inset 0 0 0 2px var(--ae-blue); }
.ae-tlh { display: flex; align-items: center; gap: 10px; height: 32px; padding: 0 10px; border-bottom: 1px solid var(--ae-line); flex: none; }
.ae-tlh__tc { font: 15px var(--mono); color: var(--ae-blue); }
.ae-tlh__fr { color: var(--ae-dim); font-size: 10.5px; }
.ae-play { display: grid; place-items: center; width: 24px; height: 22px; border-radius: 5px; background: rgba(255,255,255,.06); color: #fff; }
.ae-play svg { width: 12px; height: 12px; }
.ae-tlh__hint { margin-left: auto; color: var(--ae-dim); font-size: 10.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ae-tlgrid { --sw: 54px; --nm: 230px; --par: 112px; position: relative; flex: 1; min-height: 0; display: grid; grid-template-columns: calc(var(--sw) + var(--nm) + var(--par)) 1fr; grid-template-rows: 24px minmax(0, 1fr); overflow: hidden; }
.ae-tlcols { display: grid; grid-template-columns: 18px 18px 18px 22px calc(var(--nm) - 22px) var(--par); align-items: center; border-bottom: 1px solid var(--ae-soft); border-right: 1px solid var(--ae-line); color: var(--ae-dim); font-size: 10.5px; white-space: nowrap; overflow: hidden; }
.ae-tlcols span { text-align: center; overflow: hidden; }
.ae-tlcols span:nth-child(5), .ae-tlcols span:nth-child(6) { text-align: left; padding-left: 6px; }
.ae-ruler { position: relative; margin-right: 14px; border-bottom: 1px solid var(--ae-soft); cursor: ew-resize; touch-action: none; }
.ae-ruler__in i { position: absolute; bottom: 0; width: 1px; height: 5px; background: #3a3a48; }
.ae-ruler__in i.is-major { height: 10px; background: #5a5a6a; }
.ae-ruler__in b { position: absolute; top: 3px; font: 400 9.5px var(--mono); color: var(--ae-dim); transform: translateX(-50%); }
.ae-wa { position: absolute; left: 0; right: 0; top: 0; height: 3px; background: rgba(94,176,255,.35); }
.ae-tlrows { grid-column: 1 / -1; overflow: auto; padding-bottom: 20px; }
.ae-ph { position: absolute; top: 24px; bottom: 0; width: 1px; background: #ff5f5f; pointer-events: none; z-index: 3; }
.ae-ph::before { content: ""; position: absolute; top: -24px; left: -6px; width: 13px; height: 12px; background: #ff5f5f; clip-path: polygon(0 0, 100% 0, 100% 55%, 50% 100%, 0 55%); }
.tl-row, .tl-prow { display: grid; grid-template-columns: var(--sw) var(--nm) var(--par) 1fr; align-items: center; height: 24px; border-bottom: 1px solid rgba(255,255,255,.03); }
.tl-row { background: #17171e; cursor: default; }
.tl-row:hover { background: #1c1c24; }
.tl-row.is-sel { background: #22314a; }
.tl-row.is-new { animation: aeIn .45s var(--ease); }
.tl-sw { display: grid; grid-template-columns: repeat(3, 18px); height: 100%; border-right: 1px solid rgba(255,255,255,.04); }
.tl-sw button { color: #4b4a58; font-size: 10px; }
.tl-sw button.is-on { color: #c8c5d4; }
.tl-sw button[data-sw="solo"].is-on { color: #fbbf24; }
.tl-sw button[data-sw="lock"].is-on { color: #f87171; }
.tl-name { display: flex; align-items: center; gap: 5px; min-width: 0; padding: 0 4px; white-space: nowrap; overflow: hidden; }
.tl-tw { width: 14px; font-size: 9px; color: var(--ae-dim); transition: transform .15s; flex: none; }
.tl-tw.is-open { transform: rotate(90deg); }
.tl-num { width: 16px; text-align: right; color: var(--ae-dim); font: 10px var(--mono); flex: none; }
.tl-lbl { width: 10px; height: 10px; border-radius: 2px; background: var(--c); flex: none; }
.tl-ico { width: 12px; height: 9px; border-radius: 1px; flex: none; background: #777; }
.tl-ico--text { background: none; width: 10px; } .tl-ico--text::before { content: "T"; font: 600 10px var(--font); color: #d8d4e6; }
.tl-ico--null { background: none; box-shadow: inset 0 0 0 1.5px #ef4444; }
.tl-ico--camera { background: #94a3b8; border-radius: 2px 5px 5px 2px; }
.tl-ico--adjust { background: none; box-shadow: inset 0 0 0 1.5px #e2e8f0; }
.tl-ico--precomp { background: #8b8fa8; box-shadow: inset 0 0 0 2px #17171e, inset 0 0 0 3px #8b8fa8; }
.tl-ico--audio { background: #c2588a; }
.tl-nm { overflow: hidden; text-overflow: ellipsis; color: #e3e0ee; }
.tl-row.is-sel .tl-nm { color: #fff; }
.tl-fx { font: 9px var(--mono); padding: 0 4px; border-radius: 3px; color: #fff; background: var(--ae-acc); flex: none; }
.tl-3d { font: 9px var(--mono); padding: 0 3px; border-radius: 3px; color: #0b0a12; background: #94a3b8; flex: none; }
.tl-par { padding: 0 6px; }
.tl-par select { width: 100%; height: 18px; padding: 0 2px; border-radius: 3px; border: 1px solid rgba(255,255,255,.08); background: #1f1f27; font-size: 10.5px; color: #c9c6d6; }
.tl-track { position: relative; height: 100%; margin-right: 14px; }
.tl-bar { position: absolute; top: 4px; bottom: 4px; border-radius: 2px; background: color-mix(in srgb, var(--c) 42%, #15151b); border: 1px solid color-mix(in srgb, var(--c) 75%, white 5%); }
.tl-kf { position: absolute; top: 50%; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; background: #d8d4e6; transform: rotate(45deg); cursor: ew-resize; z-index: 2; touch-action: none; }
.tl-kf:hover { background: #fff; box-shadow: 0 0 0 2px var(--ae-blue); }
.tl-kf.is-ease { border-radius: 50% 0; background: #ffe08a; }
.tl-kf--sum { width: 6px; height: 6px; margin: -3px 0 0 -3px; background: rgba(255,255,255,.55); cursor: default; }
.tl-prow { background: #121218; }
.tl-prow.is-psel { background: #1d2a40; }
.tl-prow--grp .tl-pname { padding-left: 34px; color: #bcb8cc; }
.tl-pname { grid-column: 1 / 3; display: flex; align-items: center; gap: 6px; padding-left: 60px; white-space: nowrap; overflow: hidden; color: #cfccdb; cursor: default; }
.tl-pname--3 { padding-left: 84px; color: #a8a4ba; font-style: italic; }
.tl-watch { width: 16px; height: 16px; border-radius: 3px; font-size: 10px; color: #6a687a; }
.tl-watch.is-on { color: #5eb0ff; }
.tl-expr { font: 600 10px var(--mono); color: #5eb0ff; }
.tl-expr.is-err { color: #fbbf24; }
.tl-pval { display: flex; align-items: center; gap: 6px; padding: 0 6px; white-space: nowrap; overflow: hidden; }
.tl-scrub { color: var(--ae-blue); border-bottom: 1px dashed rgba(94,176,255,.5); cursor: ew-resize; font-size: 11px; touch-action: none; }
.tl-scrub:focus-visible { outline: 1px solid var(--ae-blue); }
.tl-addkf { font-size: 9px; color: #9a97aa; }
.tl-addkf:hover { color: #fff; }
.tl-reset { font-size: 10.5px; color: #8fc7ff; }
.tl-err { color: #fbbf24; font-size: 10.5px; overflow: hidden; text-overflow: ellipsis; }

.ae-rq { flex: 1; overflow: auto; padding: 10px 14px; }
.rq-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.rq-it { display: grid; grid-template-columns: 20px 1fr 110px 160px; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 6px; background: #1b1b22; margin-bottom: 6px; }
.rq-st { color: var(--ae-dim); }
.rq-bar { height: 6px; border-radius: 3px; background: #2a2a36; overflow: hidden; }
.rq-bar i { display: block; height: 100%; background: #4ade80; transition: width .1s linear; }
.rq-note { margin-top: 10px; color: var(--ae-dim); font-size: 11px; }
.ae-btn { height: 26px; padding: 0 14px; border-radius: 6px; background: var(--ae-acc); color: #fff; font-weight: 600; }
.ae-btn[disabled] { opacity: .4; cursor: default; }

.ae-statusbar { display: flex; justify-content: space-between; gap: 10px; height: 22px; padding: 0 10px; align-items: center; background: #0a0a0d; border-top: 1px solid var(--ae-line); color: var(--ae-dim); font-size: 11px; flex: none; white-space: nowrap; overflow: hidden; }

.ae-dlg { position: absolute; inset: 0; z-index: 80; display: grid; place-items: center; padding: 16px; background: rgba(4,4,8,.55); }
.ae-dlg__box { width: min(420px, 100%); max-height: 100%; overflow: auto; border-radius: 8px; background: #23232b; border: 1px solid rgba(255,255,255,.12); box-shadow: 0 30px 80px rgba(0,0,0,.7); animation: dlgIn .2s var(--ease); }
.ae-dlg__box.is-wide { width: min(560px, 100%); }
@keyframes dlgIn { from { opacity: 0; transform: translateY(8px) scale(.98); } }
.ae-dlg__title { padding: 8px 12px; background: #2c2c36; border-bottom: 1px solid rgba(0,0,0,.4); color: #fff; font-weight: 600; }
.ae-dlg__body { padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.ae-dlg__p { color: #d3d0de; line-height: 1.5; }
.ae-alert { display: flex; gap: 10px; }
.ae-alert::before { content: "!"; display: grid; place-items: center; width: 26px; height: 26px; flex: none; border-radius: 50%; background: #fbbf24; color: #1a1300; font-weight: 700; }
.ae-dim { color: var(--ae-dim); }
.ae-dlg__actions { display: flex; justify-content: flex-end; gap: 8px; padding: 10px 12px; border-top: 1px solid rgba(255,255,255,.06); }
.ae-dlg__actions button { height: 26px; padding: 0 14px; border-radius: 6px; border: 1px solid rgba(255,255,255,.14); background: #2e2e38; }
.ae-dlg__actions .is-primary { background: #2f6fde; border-color: #2f6fde; color: #fff; font-weight: 600; }
.ae-f { display: flex; flex-direction: column; gap: 4px; color: var(--ae-dim); font-size: 11px; }
.ae-f input, .ae-f select, .ae-sui__in { height: 26px; padding: 0 8px; border-radius: 4px; border: 1px solid rgba(255,255,255,.14); background: #16161c; color: #fff; font-size: 12px; }
.ae-f input[type="color"] { width: 60px; padding: 2px; }
.ae-f input:disabled { opacity: .5; }
.ae-f2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ae-f3 { display: grid; grid-template-columns: repeat(3, 1fr) auto; gap: 10px; align-items: end; }
.ae-fs { border: 1px solid rgba(255,255,255,.12); border-radius: 6px; padding: 8px 10px 10px; margin: 0; }
.ae-fs legend { padding: 0 4px; color: #d3d0de; }
.ae-chk { display: flex; align-items: center; gap: 6px; color: #d3d0de; }
.ae-chk input { accent-color: #2f6fde; }
.ae-files { display: flex; flex-direction: column; gap: 4px; }
.ae-file-row { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 5px; background: #1a1a21; color: #e3e0ee; }
.ae-file-row small { margin-left: auto; color: var(--ae-dim); }
.ae-file-row input { accent-color: #2f6fde; }
.ae-keys { display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; align-items: center; }
.ae-keys kbd { font: 11px var(--mono); padding: 2px 6px; border-radius: 4px; background: #16161c; border: 1px solid rgba(255,255,255,.12); white-space: nowrap; }
.ae-sui { display: flex; flex-direction: column; gap: 8px; }
.ae-sui__in { width: 100%; font-family: var(--mono); }
.ae-sui__hint { color: #d3d0de; font-size: 11.5px; }
.ae-sui__sel { color: var(--ae-dim); font-size: 11px; }

.ae-cursor { position: absolute; left: 0; top: 0; z-index: 90; width: 22px; height: 22px; pointer-events: none; opacity: 0; transition: transform .8s cubic-bezier(.45,.05,.2,1), opacity .3s; filter: drop-shadow(0 3px 6px rgba(0,0,0,.6)); }
.ae-cursor svg { width: 22px; height: 22px; fill: #fff; stroke: #0b0a12; stroke-width: 1.2; }
.ae-cursor.is-on { opacity: 1; }
.ae-cursor::after { content: ""; position: absolute; left: -9px; top: -9px; width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--ae-acc); opacity: 0; }
.ae-cursor.is-click::after { animation: clickRing .5s var(--ease); }
@keyframes clickRing { 0% { opacity: 1; transform: scale(.4); } 100% { opacity: 0; transform: scale(1.3); } }
.ae-toast { position: absolute; left: 50%; bottom: 34px; z-index: 85; max-width: calc(100% - 32px); padding: 9px 16px; border-radius: 999px; font-size: 13px; color: #fff; background: rgba(12,12,18,.94); border: 1px solid rgba(167,139,250,.5); box-shadow: 0 16px 40px rgba(0,0,0,.6); transform: translate(-50%, 14px); opacity: 0; transition: opacity .3s, transform .4s var(--ease); pointer-events: none; text-align: center; }
.ae-toast.is-on { opacity: 1; transform: translate(-50%, 0); }

/* --------------------------------------------------------------------------
   Painel MoonLayers (recriação do front-end real)
   -------------------------------------------------------------------------- */
.ae-dock { position: relative; flex: 1; min-height: 0; }
.mx {
  --accent: #0ea5ff; --accent-2: #f59e0b; --bg: #181818; --card: #222222; --card-radius: 10px; --shadow-strength: .32; --card-min: 124px; --tabbar: 10px;
  --text: #f2f2f5; --muted: #a3a3ad; --line: rgba(255,255,255,.08); --panel-2: #1d1d1f;
  position: absolute; inset: 0; display: flex; flex-direction: column; background: var(--bg); color: var(--text); font: 12px/1.4 "Segoe UI", system-ui, -apple-system, sans-serif; overflow: hidden;
}
.mx[data-theme="light"] { --text: #18181c; --muted: #6b6b75; --line: rgba(0,0,0,.1); --panel-2: #e9e9ee; }
.mx button { color: inherit; }
.mx .mi { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.mx input, .mx select { color: var(--text); }
.mx-top { display: flex; align-items: center; gap: 8px; padding: 10px; border-bottom: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 12%, transparent), transparent); }
.mx-profile { display: flex; align-items: center; gap: 9px; min-width: 0; flex: 1; }
.mx-profile[hidden] { display: none; }
.mx-avatar { position: relative; width: 40px; height: 40px; flex: none; }
.mx-avatar > span { display: grid; place-items: center; width: 100%; height: 100%; border-radius: 11px; overflow: hidden; background: #0b0a12; box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--accent) 60%, transparent); }
.mx-avatar > span svg { width: 78%; height: 78%; }
.mx-avatar > span img { width: 100%; height: 100%; object-fit: cover; }
.mx-avatar > i { position: absolute; right: -2px; bottom: -2px; width: 10px; height: 10px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 2px var(--bg); }
.mx-avatar--lg { width: 56px; height: 56px; }
.mx-who { display: flex; flex-direction: column; min-width: 0; }
.mx-who strong { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mx-who span { color: var(--muted); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mx-rankpill { display: none; }
.mx-actions { display: flex; gap: 5px; margin-left: auto; }
.mx-round { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 9px; border: 1px solid var(--line); background: var(--panel-2); transition: border-color .2s, transform .15s; }
.mx-round:hover { border-color: var(--accent); }
.mx-round:active { transform: scale(.94); }
.mx-search { display: flex; align-items: center; gap: 8px; margin: 8px 10px 6px; padding: 0 10px; height: 32px; border-radius: 10px; border: 1px solid var(--line); background: var(--panel-2); color: var(--muted); }
.mx-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; font-size: 12px; }
.mx-tabs { display: flex; gap: 5px; padding: 2px 10px 4px; overflow-x: auto; scrollbar-width: none; }
.mx-tabs::-webkit-scrollbar { display: none; }
.mx-tab { display: grid; place-items: center; flex: none; width: 36px; height: 34px; border-radius: 10px; border: 1px solid var(--line); background: var(--panel-2); color: var(--muted); transition: border-color .2s, color .2s, background-color .2s; }
.mx-tab span { display: none; }
.mx-tab:hover { color: var(--text); }
.mx-tab.is-active { color: color-mix(in srgb, var(--accent) 75%, white); border-color: var(--accent); background: color-mix(in srgb, var(--accent) 16%, var(--panel-2)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 15%, transparent); }
.mx-tabbar { height: calc(var(--tabbar) * .35); min-height: 3px; margin: 2px 10px 0; border-radius: 4px; background: color-mix(in srgb, var(--text) 10%, transparent); overflow: hidden; }
.mx-tabbar i { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 45%, white)); transition: margin-left .35s var(--ease); }
.mx-content { flex: 1; min-height: 0; overflow: auto; padding: 12px 10px 16px; scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--accent) 40%, transparent) transparent; }
.mx-content > * { animation: mxIn .3s var(--ease); }
.mx.is-reduce .mx-content > * { animation: none; }
@keyframes mxIn { from { opacity: 0; transform: translateY(5px); } }
.mx-foot { display: flex; justify-content: space-between; gap: 10px; padding: 7px 10px; border-top: 1px solid var(--line); color: var(--muted); font-size: 11px; white-space: nowrap; }
.mx-foot span:first-child { overflow: hidden; text-overflow: ellipsis; }
.mx-head { margin-bottom: 12px; }
.mx-head h1 { font-size: 16px; font-weight: 700; margin: 0; letter-spacing: 0; line-height: 1.3; }
.mx-head p { margin: 2px 0 0; color: var(--muted); font-size: 11.5px; }
.mx-head--row { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.mx-sub { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin: 14px 0 8px; }
.mx-sub strong { font-size: 12.5px; }
.mx-sub span { color: var(--muted); font-size: 10.5px; text-align: right; }
.mx-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--card-min), 1fr)); gap: 8px; }
.mx.is-list .mx-grid { grid-template-columns: 1fr; }
.mx[data-density="1"] .mx-grid { gap: 5px; } .mx[data-density="2"] .mx-grid { gap: 12px; }
.mx-card { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; padding: 10px; border-radius: var(--card-radius); background: var(--card); border: 1px solid var(--line); box-shadow: 0 8px 20px -10px rgba(0,0,0,var(--shadow-strength)); cursor: pointer; transition: transform .18s var(--ease), border-color .2s, box-shadow .25s; min-width: 0; }
.mx-card:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--accent) 55%, transparent); }
.mx-card.is-press, .mx-card:active { transform: scale(.96); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent); }
.mx-card:focus-visible { outline: 2px solid var(--accent); }
.mx-card__ic { display: grid; place-items: center; width: 30px; height: 30px; margin-bottom: 6px; border-radius: 9px; color: color-mix(in srgb, var(--accent) 75%, white); background: color-mix(in srgb, var(--accent) 15%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); }
.mx[data-theme="light"] .mx-card__ic { color: var(--accent); }
.mx-card h3 { margin: 0; font-size: 12.5px; font-weight: 700; letter-spacing: 0; line-height: 1.2; max-width: calc(100% - 26px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mx-card p { margin: 0; color: var(--muted); font-size: 10.5px; line-height: 1.35; }
.mx-tag { margin-top: 6px; max-width: 100%; padding: 2px 7px; border-radius: 999px; background: color-mix(in srgb, var(--text) 7%, transparent); border: 1px solid var(--line); font-size: 9.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mx.is-compact .mx-card p, .mx.is-compact .mx-tag { display: none; }
.mx.is-compact .mx-card { padding: 8px; }
.mx.is-list .mx-card { flex-direction: row; flex-wrap: wrap; align-items: center; column-gap: 10px; }
.mx.is-list .mx-card__ic { margin: 0; }
.mx.is-list .mx-card p { flex-basis: 100%; }
.mx-fav { position: absolute; right: 8px; top: 8px; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 7px; border: 1px solid var(--line); background: color-mix(in srgb, var(--text) 4%, transparent); color: var(--muted); }
.mx-fav .mi { width: 12px; height: 12px; }
.mx-fav.is-on { color: #fff; background: color-mix(in srgb, var(--accent) 40%, transparent); border-color: color-mix(in srgb, var(--accent) 70%, transparent); }
.mx-fav.is-on .mi { fill: currentColor; }
.mx-card--custom { border-style: dashed; }
.mx-chips { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 6px; }
.mx-chip { display: flex; align-items: center; gap: 6px; height: 30px; padding: 0 8px; border-radius: 9px; border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--line)); background: color-mix(in srgb, var(--accent) 6%, var(--card)); font-size: 11px; font-weight: 700; white-space: nowrap; overflow: hidden; }
.mx-chip .mi { color: color-mix(in srgb, var(--accent) 75%, white); }
.mx-chip span { overflow: hidden; text-overflow: ellipsis; }
.mx-chip:hover { border-color: var(--accent); }
.mx-rankov { margin-top: 12px; padding: 12px 14px; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 14%, var(--card)), var(--card)); cursor: pointer; }
.mx-rankov span { display: block; font-size: 10px; font-weight: 800; letter-spacing: .12em; color: color-mix(in srgb, var(--accent) 75%, white); }
.mx-rankov strong { display: block; font-size: 20px; margin: 2px 0; }
.mx-rankov small { color: var(--muted); font-size: 11px; }
.mx-empty { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 28px 12px; border-radius: 12px; border: 1px dashed var(--line); text-align: center; color: var(--muted); }
.mx-empty .mi { width: 22px; height: 22px; color: var(--accent); }
.mx-empty strong { color: var(--text); }
.mx-pills, .mx-row { display: flex; flex-wrap: wrap; gap: 6px; }
.mx-row { margin-top: 8px; align-items: center; }
.mx-pill { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: 9px; border: 1px solid var(--line); background: var(--panel-2); font-size: 11.5px; font-weight: 600; white-space: nowrap; transition: border-color .2s, background-color .2s; }
.mx-pill:hover { border-color: var(--accent); }
.mx-pill.is-on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 18%, var(--panel-2)); }
.mx-pill.is-danger { color: #f87171; border-color: rgba(248,113,113,.35); }
.mx-pill--full { width: 100%; }
.mx-pill--accent { background: var(--accent); border-color: var(--accent); color: #fff; }
.mx-settings { display: grid; gap: 8px; }
.mx-set { display: flex; flex-direction: column; gap: 6px; padding: 10px; border-radius: var(--card-radius); background: var(--card); border: 1px solid var(--line); }
.mx-set > label { display: flex; justify-content: space-between; font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.mx-set > label output { color: var(--text); font-family: var(--mono); letter-spacing: 0; }
.mx-set select, .mx-set input[type="text"], .mx-yt select, .mx-px select, .mx-px input[type="number"], .mx-two input { width: 100%; height: 32px; padding: 0 9px; border-radius: 9px; border: 1px solid var(--line); background: var(--panel-2); font-size: 12px; outline: 0; }
.mx-set input[type="range"], .mx-rangerow input[type="range"] { width: 100%; height: 18px; accent-color: var(--accent); }
.mx-set input[type="file"] { font-size: 11px; color: var(--muted); }
.mx-set--btns { flex-direction: row; flex-wrap: wrap; gap: 6px; }
.mx-colorline { display: flex; gap: 8px; }
.mx-colorline input[type="color"] { width: 34px; height: 32px; padding: 2px; border-radius: 8px; border: 1px solid var(--line); background: var(--panel-2); flex: none; }
.mx-hint { color: var(--muted); font-size: 10.5px; }
.mx-lbl { display: block; margin: 8px 0 5px; font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.mx-two { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.mx-input { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; height: 34px; padding: 0 10px; border-radius: 10px; border: 1px solid var(--line); background: var(--panel-2); color: var(--muted); }
.mx-input input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; font-size: 12px; }
.mx-small { display: inline-flex; align-items: center; gap: 5px; height: 32px; padding: 0 10px; border-radius: 9px; border: 1px solid var(--line); background: var(--panel-2); font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.mx-small[disabled] { opacity: .45; cursor: default; }
.mx-primary { display: inline-flex; align-items: center; justify-content: center; gap: 7px; flex: 1; height: 38px; padding: 0 12px; border-radius: 10px; background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 85%, white), var(--accent)); color: #fff; font-weight: 800; font-size: 12px; letter-spacing: .02em; box-shadow: 0 8px 20px -8px var(--accent); white-space: nowrap; }
.mx-primary[disabled] { opacity: .5; cursor: default; }
.mx-link { margin-top: 6px; font-size: 11px; color: color-mix(in srgb, var(--accent) 75%, white); text-decoration: underline; text-underline-offset: 2px; }
.mx-note { margin-top: 10px; color: var(--muted); font-size: 10.5px; line-height: 1.5; }
.mx-note b { color: var(--text); }

.mx-yt { padding: 12px; border-radius: 12px; background: var(--card); border: 1px solid var(--line); }
.mx-yt__brand { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.mx-yt__brand strong { display: block; font-size: 13px; }
.mx-yt__brand span { color: var(--muted); font-size: 10.5px; }
.mx-yt__brand em { margin-left: auto; font: 700 9px var(--mono); padding: 3px 7px; border-radius: 999px; color: color-mix(in srgb, var(--accent) 75%, white); border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); font-style: normal; white-space: nowrap; }
.mx-yt__ic { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent); flex: none; }
.mx-yt__prev { display: flex; gap: 10px; align-items: center; margin-top: 10px; padding: 8px; border-radius: 10px; background: var(--panel-2); }
.mx-yt__prev strong { display: block; font-size: 12px; }
.mx-yt__prev small { color: var(--muted); }
.mx-yt__thumb { display: grid; place-items: center; width: 84px; height: 48px; border-radius: 6px; background: linear-gradient(135deg, #4a2368, #1f3b73); color: #fff; flex: none; }
.mx-folder { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 10px; padding: 8px 10px; border-radius: 10px; background: var(--panel-2); }
.mx-folder strong { display: block; font-size: 11.5px; }
.mx-folder span { color: var(--muted); font-size: 10.5px; }
.mx-prog { margin-top: 10px; padding: 10px; border-radius: 10px; background: var(--panel-2); }
.mx-prog > div { display: flex; justify-content: space-between; font-size: 11.5px; }
.mx-prog i { display: block; height: 6px; margin: 8px 0 6px; border-radius: 4px; background: color-mix(in srgb, var(--text) 10%, transparent); overflow: hidden; }
.mx-prog i b { display: block; height: 100%; background: var(--accent); transition: width .12s linear; }
.mx-prog i b.is-indet { width: 40%; animation: indet 1s var(--ease-io) infinite alternate; }
@keyframes indet { from { margin-left: 0; } to { margin-left: 60%; } }
.mx-prog small { display: flex; justify-content: space-between; color: var(--muted); font-size: 10.5px; }
.mx-status-line { margin-top: 10px; color: var(--muted); font-size: 11px; }

.mx-px { display: grid; gap: 8px; }
.mx-pxcard { padding: 10px; border-radius: 12px; background: var(--card); border: 1px solid var(--line); }
.mx-pxintro { display: flex; gap: 10px; align-items: center; }
.mx-pxintro h2 { margin: 10px 0 4px; font-size: 14px; letter-spacing: 0; }
.mx-pxintro p { margin: 0; color: var(--muted); font-size: 10.5px; }
.mx-pxprev { width: 96px; height: 96px; flex: none; }
.mx-pxprev .bg { fill: color-mix(in srgb, var(--text) 4%, transparent); stroke: var(--line); }
.mx-pxprev line { stroke: color-mix(in srgb, var(--accent) 70%, white); stroke-width: 3; stroke-linecap: round; }
.mx-pxprev .fov { stroke: color-mix(in srgb, var(--accent) 60%, transparent); stroke-width: 1; fill: none; }
.mx-pxprev .cam { fill: var(--accent); }
.mx-seg { display: inline-grid; grid-template-columns: 1fr 1fr; gap: 3px; padding: 3px; border-radius: 10px; background: var(--panel-2); }
.mx-seg button { padding: 6px 10px; border-radius: 8px; font-size: 11px; font-weight: 700; color: var(--muted); white-space: nowrap; }
.mx-seg button.is-on { background: var(--accent); color: #fff; }
.mx-pxhead { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; margin-bottom: 8px; }
.mx-pxhead strong { font-size: 12px; }
.mx-pxhead span { display: block; color: var(--muted); font-size: 10.5px; }
.mx-pxact { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 8px; }
.mx-mini { height: 26px; padding: 0 9px; border-radius: 8px; border: 1px solid var(--line); background: var(--panel-2); font-size: 11px; font-weight: 600; white-space: nowrap; }
.mx-mini:hover { border-color: var(--accent); }
.mx-pxlist { display: grid; gap: 4px; max-height: 210px; overflow: auto; }
.mx-pxl { display: flex; align-items: center; gap: 4px; padding: 4px 6px; border-radius: 8px; border: 1px solid var(--line); background: var(--panel-2); }
.mx-pxl.is-on { border-color: color-mix(in srgb, var(--accent) 60%, transparent); }
.mx-pxl label { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; }
.mx-pxl input { accent-color: var(--accent); }
.mx-pxl .n { font: 10px var(--mono); color: var(--muted); }
.mx-pxl .nm { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mx-pxl button { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; }
.mx-pxl button[disabled] { opacity: .3; }
.mx-pxempty { padding: 10px; color: var(--muted); font-size: 11px; border: 1px dashed var(--line); border-radius: 8px; }
.mx-math { margin-top: 8px; padding: 8px 10px; border-left: 2px solid var(--accent); color: var(--muted); font-size: 10.5px; background: color-mix(in srgb, var(--accent) 5%, transparent); }
.mx-math code { color: var(--text); }
.mx-rangerow { display: grid; grid-template-columns: 1fr 64px; gap: 8px; align-items: center; }
.mx-checks { display: grid; gap: 6px; }
.mx-check { display: flex; align-items: center; gap: 8px; font-size: 11.5px; }
.mx-check input { accent-color: var(--accent); }
.mx-pxstatus { margin-top: 8px; padding: 7px 10px; border-radius: 8px; font-size: 11px; color: #4ade80; background: rgba(74,222,128,.08); }
.mx-pxstatus.is-err { color: #fbbf24; background: rgba(251,191,36,.08); }

.mx-builder { display: grid; gap: 8px; }
.mx-banner { display: flex; gap: 10px; align-items: center; padding: 10px; border-radius: 12px; background: color-mix(in srgb, var(--accent) 12%, var(--card)); border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); }
.mx-banner strong { display: block; }
.mx-banner span { color: var(--muted); font-size: 10.5px; }
.mx-banner__ic { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--accent); color: #fff; flex: none; }
.mx-step { padding: 10px; border-radius: 12px; background: var(--card); border: 1px solid var(--line); display: grid; gap: 8px; }
.mx-step__h { display: flex; gap: 10px; align-items: flex-start; }
.mx-step__h > span { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: color-mix(in srgb, var(--accent) 25%, transparent); color: var(--accent); font-weight: 800; flex: none; }
.mx-step__h strong { display: block; font-size: 12px; }
.mx-step__h small { color: var(--muted); font-size: 10.5px; }
.mx-targets { display: grid; gap: 5px; }
.mx-target { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--line); background: var(--panel-2); text-align: left; }
.mx-target span { margin-left: auto; color: var(--muted); font: 10px var(--mono); }
.mx-target.is-on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, var(--panel-2)); }
.mx-chosen { padding: 6px 10px; border-radius: 8px; background: color-mix(in srgb, var(--accent) 12%, transparent); }
.mx-chosen small { display: block; color: var(--muted); font-size: 10px; }
.mx-results { display: flex; flex-direction: column; gap: 2px; max-height: 170px; overflow: auto; }
.mx-results button { text-align: left; padding: 6px 9px; border-radius: 7px; font-size: 11.5px; }
.mx-results button:hover { background: var(--panel-2); }
.mx-results button.is-on { background: color-mix(in srgb, var(--accent) 20%, transparent); }
.mx-results p { margin: 0; padding: 6px; color: var(--muted); font-size: 11px; }
.mx-cbl { display: grid; gap: 8px; }
.mx-cbl__g { padding: 8px 10px; border-radius: 10px; background: var(--card); border: 1px solid var(--line); display: grid; gap: 6px; }
.mx-cbl__g > small { color: var(--muted); }
.mx-cbl__it { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.mx-cbl__it small { display: block; color: var(--muted); font-size: 10px; }
.mx-cbl__it button { font-size: 11px; color: #f87171; }

.mx-order { display: grid; gap: 4px; }
.mx-order__it { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 9px; background: var(--card); border: 1px solid var(--line); }
.mx-order__it span { flex: 1; }
.mx-order__it button { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 7px; border: 1px solid var(--line); }
.mx-order__it button[disabled] { opacity: .3; }
.mx-session { padding: 16px; border-radius: 14px; background: var(--card); border: 1px solid var(--line); text-align: center; }
.mx-ae { display: inline-grid; place-items: center; width: 48px; height: 48px; border-radius: 12px; background: #1a1446; color: #c9bbff; font-weight: 800; font-size: 20px; box-shadow: inset 0 0 0 2px #8b5cf6; }
.mx-session h1 { font-size: 15px; margin: 10px 0 12px; letter-spacing: 0; }
.mx-sgrid { display: grid; gap: 6px; text-align: left; }
.mx-sgrid > div { display: flex; justify-content: space-between; gap: 10px; padding: 8px 10px; border-radius: 9px; background: var(--panel-2); }
.mx-sgrid span { color: var(--muted); }
.mx-sgrid strong { text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mx-rankhero { padding: 12px; border-radius: 14px; background: linear-gradient(160deg, color-mix(in srgb, var(--accent) 18%, var(--card)), var(--card)); border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); display: grid; gap: 10px; }
.mx-rankprof { display: flex; gap: 10px; align-items: center; }
.mx-rankprof strong { display: block; font-size: 14px; }
.mx-rankprof span { color: var(--muted); font-size: 10.5px; }
.mx-badges { display: flex; gap: 6px; margin-top: 4px; }
.mx-badges b, .mx-badges em { padding: 2px 8px; border-radius: 999px; font-size: 10px; font-style: normal; background: color-mix(in srgb, var(--accent) 25%, transparent); }
.mx-badges em { background: color-mix(in srgb, var(--accent-2) 30%, transparent); }
.mx-rstats { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.mx-rstats > div { padding: 8px; border-radius: 9px; background: color-mix(in srgb, var(--bg) 70%, transparent); }
.mx-rstats span { display: block; font-size: 9.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.mx-rstats strong { font-size: 12px; }
.mx-rprog > div { display: flex; justify-content: space-between; font-size: 11px; color: var(--muted); }
.mx-rprog strong { color: var(--accent); }
.mx-rprog i { display: block; height: 7px; margin-top: 5px; border-radius: 4px; background: color-mix(in srgb, var(--text) 10%, transparent); overflow: hidden; }
.mx-rprog i b { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent-2)); }
.mx-ranks { margin-top: 10px; padding: 10px; border-radius: 12px; background: var(--card); border: 1px solid var(--line); display: grid; gap: 5px; }
.mx-ranks__h { display: flex; justify-content: space-between; margin-bottom: 4px; }
.mx-ranks__h span, .mx-ranks > small { color: var(--muted); font-size: 10.5px; }
.mx-rk { display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: 9px; background: var(--panel-2); }
.mx-rk strong { display: block; font-size: 11.5px; }
.mx-rk span { color: var(--muted); font-size: 10px; }
.mx-rk em { margin-left: auto; font-style: normal; font-size: 10px; color: var(--muted); }
.mx-rk__ic { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: color-mix(in srgb, var(--text) 8%, transparent); font-size: 10px; font-weight: 700; flex: none; color: var(--text) !important; }
.mx-rk.is-done .mx-rk__ic { background: #22c55e; color: #fff !important; }
.mx-rk.is-cur { box-shadow: inset 0 0 0 1px var(--accent); }
.mx-rk.is-cur .mx-rk__ic { background: var(--accent); color: #fff !important; }
.mx-profset { display: grid; gap: 8px; }
.mx-pprev { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 14px; border-radius: 12px; background: var(--card); border: 1px solid var(--line); }
.mx-pprev span { color: var(--muted); font-size: 11px; }
.mx-rankcard__h, .mx-rankcard__m { display: flex; justify-content: space-between; align-items: center; }
.mx-rankcard__h span { font-size: 10px; color: var(--muted); }
.mx-rankcard__m strong { font-size: 18px; }
.mx-rankcard__m em { font-style: normal; font-size: 10px; padding: 2px 8px; border-radius: 999px; background: color-mix(in srgb, var(--accent) 25%, transparent); }
.mx-rankcard small { color: var(--muted); }
.mx-pres { display: grid; gap: 8px; }
.mx-pres__head { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 12px; background: var(--card); border: 1px solid var(--line); }
.mx-pres__head strong { display: block; }
.mx-pres__head span { color: var(--muted); font-size: 10.5px; }
.mx-pres__head em { margin-left: auto; font: 700 9px var(--mono); font-style: normal; padding: 3px 7px; border-radius: 999px; border: 1px solid var(--line); white-space: nowrap; }
.mx-pres__art, .mx-pres__img { position: relative; width: 44px; height: 44px; flex: none; }
.mx-pres__art > span, .mx-pres__img > span { display: grid; place-items: center; width: 100%; height: 100%; border-radius: 12px; overflow: hidden; background: #0b0a12; }
.mx-pres__art svg, .mx-pres__img svg { width: 80%; height: 80%; }
.mx-pres__art img, .mx-pres__img img { width: 100%; height: 100%; object-fit: cover; }
.mx-pres__img { width: 60px; height: 60px; }
.mx-pres__img i { position: absolute; right: -4px; bottom: -4px; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: #23232b; border: 2px solid #111214; font-size: 9px; font-style: normal; color: #fff; }
.mx-pres__prev { padding: 10px; border-radius: 12px; background: #111214; color: #f2f3f5; }
.mx-pres__prev.is-off { opacity: .45; }
.mx-pres__top { display: flex; justify-content: space-between; font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #b5bac1; margin-bottom: 8px; }
.mx-pres__main { display: flex; gap: 10px; align-items: center; }
.mx-pres__main strong { display: block; font-size: 12px; }
.mx-pres__main span, .mx-pres__main small { display: block; font-size: 11px; color: #b5bac1; }
.mx-pres__opts { display: grid; gap: 5px; }
.mx-tog { position: relative; display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 10px; background: var(--card); border: 1px solid var(--line); cursor: pointer; }
.mx-tog div { flex: 1; }
.mx-tog strong { display: block; font-size: 11.5px; }
.mx-tog span { color: var(--muted); font-size: 10.5px; }
.mx-tog input { position: absolute; opacity: 0; }
.mx-tog i { position: relative; width: 34px; height: 20px; border-radius: 999px; background: color-mix(in srgb, var(--text) 18%, transparent); flex: none; transition: background-color .2s; }
.mx-tog i::after { content: ""; position: absolute; left: 3px; top: 3px; width: 14px; height: 14px; border-radius: 50%; background: #fff; transition: transform .2s var(--ease); }
.mx-tog input:checked + i { background: var(--accent); }
.mx-tog input:checked + i::after { transform: translateX(14px); }
.mx-tog input:focus-visible + i { outline: 2px solid var(--accent); outline-offset: 2px; }
.mx-pres__st { display: flex; gap: 8px; align-items: center; padding: 8px 10px; border-radius: 10px; background: var(--panel-2); color: var(--muted); font-size: 10.5px; }
.mx-pres__st i { width: 8px; height: 8px; border-radius: 50%; background: #fbbf24; flex: none; }
.mx-about { padding: 16px; border-radius: 14px; background: var(--card); border: 1px solid var(--line); text-align: center; display: grid; justify-items: center; gap: 6px; }
.mx-about__ic { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent); }
.mx-about h1 { margin: 0; font-size: 16px; letter-spacing: 0; }
.mx-about p { margin: 0; color: var(--muted); }
.mx-about__list { display: grid; gap: 4px; width: 100%; }
.mx-about__list span { padding: 6px; border-radius: 8px; background: var(--panel-2); }
.mx-about__x { display: grid; gap: 8px; width: 100%; text-align: left; margin-top: 6px; }
.mx-about__x > div { display: grid; gap: 2px; padding: 8px 10px; border-radius: 9px; background: var(--panel-2); }
.mx-about__x span { color: var(--muted); font-size: 11px; }
.mx-about__x a { color: color-mix(in srgb, var(--accent) 80%, white); font-size: 11px; }

.mx-drawer { position: absolute; top: 0; right: 0; bottom: 0; z-index: 20; width: min(290px, 92%); padding: 12px; display: flex; flex-direction: column; gap: 8px; overflow: auto; background: var(--bg); border-left: 1px solid var(--line); box-shadow: -20px 0 40px rgba(0,0,0,.4); animation: drawerIn .25s var(--ease); }
.mx-drawer[hidden] { display: none; }
@keyframes drawerIn { from { transform: translateX(30px); opacity: 0; } }
.mx-drawer__h { display: flex; justify-content: space-between; align-items: center; }
.mx-ovl { position: absolute; inset: 0; z-index: 30; display: grid; place-items: center; padding: 10px; overflow: auto; background: rgba(3,3,6,.72); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.mx-ovl[hidden], .mx-intro[hidden] { display: none; }
.mx-dlg { width: 100%; max-height: 100%; overflow: auto; padding: 14px; border-radius: 16px; background: color-mix(in srgb, var(--bg) 92%, white 3%); border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); box-shadow: 0 24px 60px rgba(0,0,0,.6); animation: mxIn .25s var(--ease); }
.mx-dlg__h { display: flex; align-items: center; gap: 10px; }
.mx-dlg__h > div:nth-child(2) { flex: 1; min-width: 0; }
.mx-dlg__h span { font-size: 9.5px; font-weight: 800; letter-spacing: .14em; color: color-mix(in srgb, var(--accent) 75%, white); }
.mx-dlg__h h2 { margin: 1px 0 0; font-size: 16px; letter-spacing: 0; }
.mx-dlg__h > button { width: 28px; height: 28px; border-radius: 8px; font-size: 18px; border: 1px solid var(--line); flex: none; }
.mx-dlg__ic { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent); flex: none; }
.mx-dlg__p { margin: 10px 0; color: var(--muted); font-size: 11.5px; }
.mx-target-box { display: flex; gap: 10px; align-items: center; padding: 10px; border-radius: 12px; background: var(--card); border: 1px solid var(--line); }
.mx-target-box > .mi { width: 22px; height: 22px; color: var(--accent); }
.mx-target-box span { display: block; font-size: 9.5px; font-weight: 800; letter-spacing: .12em; color: var(--muted); }
.mx-target-box strong { display: block; font-size: 13px; }
.mx-target-box small { color: var(--muted); font-size: 10.5px; }
.mx-lrow { display: flex; justify-content: space-between; margin: 12px 0 5px; font-size: 11px; font-weight: 700; }
.mx-lrow span { color: var(--muted); font-size: 10px; letter-spacing: .1em; }
.mx-entry { display: flex; align-items: center; height: 44px; padding: 0 12px; border-radius: 12px; background: var(--panel-2); border: 1px solid var(--line); }
.mx-entry input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; font: 600 20px var(--mono); }
.mx-entry span { color: var(--muted); }
.mx-presets { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.mx-presets--4 { grid-template-columns: repeat(4, 1fr); }
.mx-presets button { height: 32px; border-radius: 9px; border: 1px solid var(--line); background: var(--panel-2); font: 600 11.5px var(--mono); }
.mx-presets button.is-on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 20%, var(--panel-2)); }
.mx-presets button[disabled] { opacity: .4; }
.mx-foot2 { display: flex; gap: 8px; align-items: center; margin-top: 10px; color: var(--muted); font-size: 10.5px; }
.mx-msg { min-height: 16px; margin-top: 8px; font-size: 11px; color: #4ade80; }
.mx-msg.is-err { color: #fbbf24; }
.mx-dlg__act { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }
.mx-dlg__act button { height: 34px; padding: 0 14px; border-radius: 10px; border: 1px solid var(--line); background: var(--panel-2); font-weight: 600; }
.mx-dlg__act .is-primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.mx-dlg__act .is-primary[disabled] { opacity: .45; }
.mx-radio, .mx-ck { display: flex; gap: 8px; align-items: flex-start; padding: 8px 10px; margin-bottom: 5px; border-radius: 10px; background: var(--card); border: 1px solid var(--line); cursor: pointer; }
.mx-radio input, .mx-ck input { accent-color: var(--accent); margin-top: 2px; }
.mx-radio small, .mx-ck small { display: block; color: var(--muted); font-size: 10.5px; }
.mx-radio.is-dis { opacity: .55; cursor: default; }
.mx-dlg select { width: 100%; height: 32px; margin-bottom: 6px; padding: 0 9px; border-radius: 9px; border: 1px solid var(--line); background: var(--panel-2); }
.mx-warn { display: flex; gap: 8px; margin-top: 8px; padding: 8px 10px; border-radius: 10px; background: rgba(251,191,36,.08); color: #fcd34d; font-size: 10.5px; }
.mx-files { display: grid; gap: 5px; margin: 8px 0; }
.mx-files button { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--line); background: var(--panel-2); text-align: left; font-size: 11.5px; }
.mx-files button small { margin-left: auto; color: var(--muted); }
.mx-files button.is-on { border-color: var(--accent); }
.mx-note2 { color: var(--muted); font-size: 10.5px; margin: 8px 0 0; }
.mx-exp { font: 800 9px var(--mono); font-style: normal; padding: 2px 6px; border-radius: 999px; color: #fcd34d; border: 1px solid rgba(252,211,77,.4); vertical-align: middle; letter-spacing: .06em; }
.mx-intro { position: absolute; inset: 0; z-index: 40; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; background: #000; transition: opacity .5s var(--ease); }
.mx-intro.is-out { opacity: 0; }
.mx-intro__orb { width: 84px; height: 84px; border-radius: 24px; overflow: hidden; display: grid; place-items: center; background: #0b0a12; box-shadow: 0 0 0 2px var(--accent), 0 0 60px color-mix(in srgb, var(--accent) 50%, transparent); animation: orbIn .8s var(--ease); }
.mx-intro__orb > span { display: grid; place-items: center; width: 100%; height: 100%; }
.mx-intro__orb svg { width: 70%; height: 70%; }
.mx-intro__orb img { width: 100%; height: 100%; object-fit: cover; }
@keyframes orbIn { from { transform: scale(.6); opacity: 0; } }
.mx-intro__brand { color: #fff; font-weight: 800; letter-spacing: .3em; text-align: center; font-size: 16px; animation: mxIn .8s var(--ease) .2s both; }
.mx-intro__brand span { color: var(--accent); }
.mx-intro__brand small { display: block; margin-top: 6px; font-size: 9.5px; letter-spacing: .25em; color: #8a8a96; }

/* --------------------------------------------------------------------------
   Responsivo
   -------------------------------------------------------------------------- */
@media (max-width: 1240px) {
  .ae-body { grid-template-columns: 200px minmax(0, 1fr) 340px; }
  .ae-tlgrid { --nm: 190px; --par: 96px; }
  .ae-tool-hint { display: none; }
}
@media (max-width: 1060px) {
  .ae-body { grid-template-columns: minmax(0, 1fr) 330px; grid-template-areas: "viewer panel" "timeline panel"; }
  .ae.no-panel .ae-body { grid-template-columns: minmax(0, 1fr); grid-template-areas: "viewer" "timeline"; }
  .ae-left { display: none; }
  .ae-menus button { padding: 5px 6px; }
}
@media (max-width: 900px) {
  .ae { height: auto; }
  .ae-body { display: flex; flex-direction: column; }
  .ae-center { height: min(58vw, 340px); flex: none; }
  .ae-left, .ae-right, .ae-bottom { display: none; height: 520px; flex: none; }
  .ae[data-mobile="panel"] .ae-right, .ae[data-mobile="timeline"] .ae-bottom, .ae[data-mobile="project"] .ae-left { display: flex; }
  .ae-mtabs { display: flex; }
  .ae-toolbar { overflow-x: auto; scrollbar-width: none; }
  .ae-file, .ae-badge { display: none; }
  .ae-menus { overflow-x: auto; scrollbar-width: none; flex: 1; }
  .ae-chip span { display: none; }
  .ae-chip { width: 26px; padding: 0; justify-content: center; }
  .ae-tlgrid { --sw: 0px; --nm: 150px; --par: 0px; }
  .tl-sw, .tl-par, .ae-tlcols span:nth-child(-n+3), .ae-tlcols span:nth-child(6) { display: none; }
  .ae-tlcols { grid-template-columns: 22px calc(var(--nm) - 22px); }
  .tl-pname { padding-left: 24px; }
  .tl-pname--3 { padding-left: 34px; }
  .tl-prow--grp .tl-pname { padding-left: 14px; }
  .ae-tlh__hint { display: none; }
  .ae.no-panel .ae-right { display: none; }
}
@media (max-width: 520px) {
  .ae-center { height: 230px; }
  .ae-tlgrid { --nm: 128px; }
  .rq-it { grid-template-columns: 16px 1fr; }
  .rq-st, .rq-bar { grid-column: 2; }
}
@media (prefers-reduced-motion: reduce) {
  .ae-cursor { transition: none; }
  .k-bars i, .mx-content > *, .mx-intro { animation: none !important; }
}

/* --------------------------------------------------------------------------
   Editor de demonstração (canvas, importação, exportação)
   -------------------------------------------------------------------------- */
.ae-logo { background: #0b0a12; }
.ae-logo svg { width: 18px; height: 18px; }
.ae-canvas { display: block; }
.ae-stage, .lyr { display: none; }
.ae-tbtn { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 6px; border: 1px solid rgba(255,255,255,.12); color: #e3e0ee; font-size: 11.5px; white-space: nowrap; flex: none; margin-left: 4px; }
.ae-tbtn svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.ae-tbtn:hover { background: rgba(255,255,255,.07); }
.ae-tbtn--acc { background: var(--ae-acc); border-color: var(--ae-acc); color: #fff; font-weight: 600; }
.ae-tbtn--acc:hover { background: #7c4dff; }
.ae-dropnote { position: absolute; inset: 10px; z-index: 5; display: grid; place-items: center; border: 2px dashed var(--ae-blue); border-radius: 10px; background: rgba(10,14,30,.75); color: #fff; font-size: 15px; pointer-events: none; }
.ae-dropnote[hidden] { display: none; }
.ae-bigbtn { width: 100%; height: 38px; border-radius: 7px; background: #2f6fde; color: #fff; font-weight: 600; }
.ae-bigbtn--ghost { background: #2e2e38; border: 1px solid rgba(255,255,255,.14); font-weight: 500; }
.ae-exp { padding: 10px; border-radius: 7px; background: #16161c; }
.ae-exp[hidden] { display: none; }
.ae-exp > div { display: flex; justify-content: space-between; color: #e3e0ee; }
.ae-exp i { display: block; height: 6px; margin-top: 8px; border-radius: 3px; background: #2a2a36; overflow: hidden; }
.ae-exp i b { display: block; height: 100%; width: 0; background: #4ade80; }
.ae-dlg__actions button[disabled] { opacity: .45; cursor: default; }
.fx-ae { margin-left: 4px; font-size: 9.5px; color: var(--ae-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tr-user { color: #4ade80; font-size: 8px; }
.ov-box--null polygon { stroke: #ef4444; stroke-width: 1.5; }
.ae-empty--view { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; }
img.pi-thumb { object-fit: cover; }
.rq-note2 { color: var(--ae-dim); font-size: 11px; }
.rq-it { grid-template-columns: 20px 1fr 100px 140px auto; }
.tl-ico--video { background: #6a6fd1; }
.tl-ico--footage { background: #3fa4a0; }
.mx-ae { overflow: hidden; }
.mx-ae svg { width: 70%; height: 70%; }

/* Página do editor */
.ed-page { background: #07070a; overflow-x: hidden; }
.ed-head { display: flex; align-items: center; gap: 18px; height: 60px; padding: 0 clamp(12px, 2vw, 24px); border-bottom: 1px solid var(--line); }
.ed-head .brand { font-size: 16px; flex: none; }
.ed-head .brand__mark { width: 28px; height: 28px; }
.ed-head__title { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.ed-head__title strong, .ed-head__h1 { margin: 0; font-size: 14px; font-weight: 600; letter-spacing: 0; line-height: 1.3; }
.ed-head__title span { color: var(--muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ed-head__act { display: flex; gap: 8px; margin-left: auto; flex: none; }
.ed-try { display: flex; align-items: center; gap: 6px; height: 48px; padding: 0 clamp(12px, 2vw, 24px); overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--line); background: #0a0a0e; }
.ed-try::-webkit-scrollbar { display: none; }
.ed-try__label { flex: none; margin-right: 4px; font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-2); }
.ed-try button { flex: none; height: 30px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line-2); background: rgba(255,255,255,.03); color: var(--text); font-size: 13px; white-space: nowrap; transition: border-color .2s, background-color .2s; }
.ed-try button:hover { border-color: rgba(167,139,250,.6); }
.ed-try button.is-on { background: rgba(124,92,255,.25); border-color: rgba(167,139,250,.7); }
.ed-try button em { font-family: var(--mono); font-style: normal; font-size: 9.5px; letter-spacing: .06em; text-transform: uppercase; color: #fcd34d; margin-left: 4px; }
.ed-main { padding: 10px clamp(8px, 1vw, 14px); }
.ed-main .ae { height: calc(100dvh - 60px - 48px - 20px - 40px); min-height: 620px; }
.ed-foot { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 10px clamp(12px, 2vw, 24px) 14px; color: var(--dim); font-size: 12px; }
.ed-foot a { color: var(--muted); text-decoration: underline; text-decoration-color: rgba(255,255,255,.2); text-underline-offset: 3px; }
.ed-foot a:hover { color: var(--text); }
.ed-noscript { padding: 40px; text-align: center; color: var(--muted); }
@media (max-width: 900px) {
  .ed-head__title span { display: none; }
  .ed-head__act .btn--ghost { display: none; }
  .ed-main .ae { height: auto; min-height: 0; }
}
@media (max-width: 520px) {
  .ed-head { gap: 10px; }
  .ed-head .brand__word { display: none; }
}

/* o mockup da página inicial também usa .ae: neutraliza a inclinação dele aqui */
.aesim .ae { transform: none; will-change: auto; transition: none; font-size: 12px; }
@media (max-width: 900px) { .ae-tbtn span { display: none; } .ae-tbtn { padding: 0 8px; } }

/* Seleção por arrasto, keyframes selecionados e menus de contexto */
.ae-tlrows { position: relative; }
.ae-marquee { position: absolute; z-index: 6; border: 1px solid var(--ae-blue); background: rgba(94,176,255,.12); pointer-events: none; }
.ov-draw--sel { border-style: solid; background: rgba(94,176,255,.1); }
.tl-kf.is-sel { background: var(--ae-blue); box-shadow: 0 0 0 2px rgba(94,176,255,.35), 0 0 8px rgba(94,176,255,.7); }
.tl-kf.is-sel.is-ease { background: #8fd0ff; }
.ae-menupop button[disabled] { opacity: .4; cursor: default; }
.ae-menupop button[disabled]:hover { background: none; color: #e3e0ee; }
.ae-menupop button:focus-visible { outline: none; background: var(--ae-acc); color: #fff; }