/*
 * 2D Animator V74 – rendezett, kommentált stíluslap.
 * A V74 eredeti megjelenését tartja meg; az átalakítás csak olvashatósági célú.
 */
:root {
    --left-width:270px;
    --right-width:310px
}
* {
    box-sizing:border-box
}
html,body {
    margin:0;
    height:100%;
    font:14px Segoe UI,Arial;
    background:#1e1f22;
    color:#ddd;
    overflow:hidden
}
button,input,select {
    font:inherit
}
button {
    background:#303238;
    border:1px solid #4b4e56;
    color:#eee;
    border-radius:4px;
    padding:5px 9px;
    cursor:pointer
}
button:hover {
    background:#3a3d44
}
.topbar {
    height:42px;
    display:flex;
    align-items:center;
    gap:7px;
    padding:5px 9px;
    background:#292b30;
    border-bottom:1px solid #111
}
.toolbar-info {
    color:#999;
    margin-left:6px
}
.spacer {
    flex:1
}
.workspace {
    height:calc(100% - 64px);
    display:grid;
    grid-template-columns:var(--left-width,270px) 5px 1fr 5px var(--right-width,310px);
    min-width:0
}
.dock {
    background:#292b30;
    min-width:0;
    overflow:hidden;
    display:flex;
    flex-direction:column
}
.dock.right {
    border-left:1px solid #141519
}
.dock.left {
    border-right:1px solid #141519
}
.dock.collapsed {
    width:0
}
.dock-head {
    height:32px;
    flex:0 0 32px;
    display:flex;
    align-items:center;
    padding:0 6px 0 10px;
    background:#25272b;
    border-bottom:1px solid #18191c
}
.dock-head b {
    flex:1;
    font-size:12px;
    color:#aaa
}
.collapse-btn {
    width:25px;
    height:24px;
    padding:0;
    font-size:18px;
    line-height:20px
}
.splitter {
    background:#17181b;
    cursor:col-resize;
    position:relative
}
.splitter:hover {
    background:#3d4148
}
.splitter::after {
    content:'';
    position:absolute;
    left:1px;
    top:45%;
    height:10%;
    border-left:1px dotted #666
}
.tabs {
    display:flex;
    align-items:stretch;
    gap:2px;
    padding:4px 4px 0;
    background:#202226;
    min-height:34px;
    border-bottom:1px solid #17181a;
    overflow-x:auto
}
.tab {
    border:1px solid #3d4148;
    border-bottom:0;
    border-radius:5px 5px 0 0;
    background:#292b30;
    color:#aaa;
    padding:5px 9px;
    white-space:nowrap;
    cursor:pointer;
    user-select:none
}
.tab.active {
    background:#3d4148;
    color:#fff
}
.tab.dragging {
    opacity:.45
}
.tab-host {
    flex:1;
    min-height:0;
    overflow:auto
}
.tab-panel {
    display:none;
    height:100%;
    overflow:auto
}
.tab-panel.active {
    display:block
}
.tab-panel.moving {
    display:block
}
.layer-toolbar,.source-toolbar,.project-tools {
    padding:6px;
    display:flex;
    gap:4px;
    flex-wrap:wrap;
    border-bottom:1px solid #202125
}
.layer-toolbar button {
    padding:4px 7px
}
.tree {
    padding:5px
}
.tree-row {
    height:30px;
    display:flex;
    align-items:center;
    gap:5px;
    padding:0 5px;
    border-radius:4px;
    user-select:none
}
.tree-row:hover {
    background:#34373e
}
.tree-row.selected {
    background:#3f5f85
}
.indent {
    display:inline-block;
    flex:0 0 auto
}
.icon {
    width:18px;
    text-align:center
}
.name {
    flex:1;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap
}
.eye,.lock {
    opacity:.7;
    font-size:12px
}
.tree-row[draggable="true"] {
    cursor:grab
}
.tree-row.dragging {
    opacity:.45
}
.tree-row.drop-target {
    outline:1px dashed #7fb3ff;
    background:#354a63
}
.viewport {
    position:relative;
    overflow:hidden;
    background-color:#18191c;
    background-image:linear-gradient(45deg,#202126 25%,transparent 25%),linear-gradient(-45deg,#202126 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#202126 75%),linear-gradient(-45deg,transparent 75%,#202126 75%);
    background-size:20px 20px;
    background-position:0 0,0 10px,10px -10px,-10px 0
}
.viewport canvas {
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    cursor:default
}
.viewport canvas.panning {
    cursor:grabbing
}
.empty-hint {
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    padding:14px 18px;
    background:#22252aee;
    border:1px solid #444;
    border-radius:7px;
    color:#aaa;
    pointer-events:none
}
.source-toolbar {
    border-bottom:0
}
.sources {
    padding:5px
}
.source-row {
    padding:7px;
    border:1px solid #3d4046;
    border-radius:5px;
    margin:5px;
    background:#24262a
}
.source-head {
    display:flex;
    gap:5px;
    align-items:center
}
.source-head b {
    flex:1
}
.source-path {
    font-size:11px;
    color:#999;
    margin-top:4px;
    word-break:break-all
}
.asset-list {
    padding-left:12px;
    margin-top:5px
}
.asset-item {
    padding:4px;
    cursor:pointer;
    border-radius:3px;
    font-size:12px
}
.asset-item:hover {
    background:#34373e
}
.asset-browser {
    padding:7px
}
.asset-browser .asset-item {
    border-bottom:1px solid #333
}
.properties {
    padding:9px
}
.prop {
    display:grid;
    grid-template-columns:95px 1fr;
    gap:6px;
    align-items:center;
    margin-bottom:7px
}
.prop input {
    width:100%;
    background:#202126;
    color:#eee;
    border:1px solid #444;
    border-radius:3px;
    padding:4px
}
.prop input[type=checkbox] {
    width:auto
}
.hint,.no-selection {
    font-size:11px;
    color:#999;
    line-height:1.45;
    padding:9px
}
.project-section {
    padding:10px;
    border-bottom:1px solid #3a3b40
}
.project-section>b {
    display:block;
    margin-bottom:8px
}
.project-section label {
    display:block;
    margin-bottom:7px
}
.project-section select,.project-section input {
    background:#202126;
    color:#eee;
    border:1px solid #444;
    padding:4px
}
.doc-size {
    display:flex;
    align-items:center;
    gap:5px
}
.doc-size input {
    width:90px
}
.statusbar {
    height:22px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:0 9px;
    font-size:11px;
    background:#222328;
    border-top:1px solid #111;
    color:#999
}
.resize-cursor-ns {
    cursor:ns-resize!important
}
.resize-cursor-ew {
    cursor:ew-resize!important
}
.resize-cursor-nwse {
    cursor:nwse-resize!important
}
.resize-cursor-nesw {
    cursor:nesw-resize!important
}
.rotate-cursor {
    cursor:crosshair!important
}
/* V5 animation editor */
.mode-badge {
    padding:3px 8px;
    border:1px solid #41454d;
    border-radius:10px;
    color:#aaa;
    font-size:11px
}

.animation-edit-banner {
    padding:5px 12px;
    border:1px solid #8f6b20;
    border-radius:6px;
    background:#3a2d0f;
    color:#ffd66b;
    font-size:12px;
    font-weight:700;
    white-space:nowrap;
    box-shadow:0 0 0 1px #0004 inset;
}
.animation-edit-banner[hidden] { display:none !important; }
.workspace {
    height:calc(100% - 42px - 22px - 300px)
}
.timeline-dock {
    height:250px;
    background:#292b30;
    border-top:1px solid #111;
    display:flex;
    flex-direction:column;
    min-height:180px
}
.timeline-toolbar {
    height:42px;
    flex:0 0 42px;
    display:flex;
    align-items:center;
    gap:7px;
    padding:5px 8px;
    background:#25272b;
    border-bottom:1px solid #17181b
}
.play-controls {
    display:flex;
    gap:3px;
    align-items:center
}
.play-controls button {
    min-width:34px
}
.timeline-toolbar input {
    width:85px;
    background:#202126;
    color:#eee;
    border:1px solid #444;
    border-radius:3px;
    padding:4px
}
.timeline-sep {
    height:24px;
    border-left:1px solid #4a4c51
}
.timeline-help {
    margin-left:auto;
    color:#777;
    font-size:11px
}
.timeline {
    flex:1;
    min-height:0;
    overflow:hidden;
    display:flex
}
.timeline-empty {
    padding:20px;
    color:#888
}
.timeline-head {
    display:flex;
    width:100%;
    min-width:0
}
.timeline-label {
    width:180px;
    flex:0 0 180px;
    background:#232529;
    border-right:1px solid #111;
    padding:9px;
    color:#999;
    font-size:11px
}
.time-area {
    flex:1;
    overflow:auto;
    position:relative
}
.ruler {
    height:32px;
    position:relative;
    background:#202226;
    border-bottom:1px solid #111
}
.tick {
    position:absolute;
    top:8px;
    transform:translateX(-50%);
    font-size:10px;
    color:#888;
    white-space:nowrap
}
.tick::before {
    content:'';
    position:absolute;
    left:50%;
    top:15px;
    height:8px;
    border-left:1px solid #555
}
.track {
    height:30px;
    position:relative;
    border-bottom:1px solid #35373c;
    background:#292b30
}
.track-line {
    position:absolute;
    left:0;
    top:0;
    height:30px;
    line-height:30px;
    color:#bbb;
    font-size:11px;
    padding-left:8px;
    width:180px;
    background:#2b2d32;
    border-right:1px solid #151619;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap
}
.kf {
    position:absolute;
    top:8px;
    transform:translateX(-50%);
    width:15px;
    height:15px;
    padding:0;
    border:0;
    background:transparent;
    color:#ffd45a;
    font-size:14px;
    line-height:15px
}
.kf:hover,.kf.current {
    color:#fff
}
.playhead {
    position:absolute;
    top:0;
    bottom:0;
    width:1px;
    background:#ff6b5e;
    pointer-events:none;
    z-index:4
}
.animation-create,.animation-edit {
    display:flex;
    gap:5px;
    padding:7px;
    border-bottom:1px solid #34363b
}
.animation-create input,.animation-edit input {
    min-width:0;
    flex:1;
    background:#202126;
    color:#eee;
    border:1px solid #444;
    border-radius:3px;
    padding:5px
}
.animation-create input[type=number] {
    width:90px;
    flex:0 0 90px
}
.animation-list {
    padding:5px;
    max-height:180px;
    overflow:auto
}
.anim-item {
    display:block;
    width:100%;
    text-align:left;
    margin-bottom:3px
}
.anim-item.active {
    background:#46688f
}
.animation-edit label {
    display:flex;
    align-items:center;
    gap:5px;
    flex:1
}
/* V8 animation timeline */
.timeline-dock {
    height:300px;
    min-height:230px;
    background:#292b30;
    border-top:1px solid #111;
    display:flex;
    flex-direction:column
}
.timeline-toolbar {
    flex:0 0 auto;
    min-height:44px;
    display:flex;
    align-items:center;
    gap:7px;
    padding:6px 8px;
    background:#25272b;
    border-bottom:1px solid #17181b;
    flex-wrap:wrap
}
.play-controls {
    display:flex;
    gap:3px;
    align-items:center
}
.play-controls button {
    min-width:34px
}
.timeline-toolbar input {
    width:85px;
    background:#202126;
    color:#eee;
    border:1px solid #444;
    border-radius:3px;
    padding:4px
}
.timeline-sep {
    height:24px;
    border-left:1px solid #4a4c51
}
.timeline-help {
    margin-left:auto;
    color:#888;
    font-size:11px
}
.timeline {
    flex:1;
    min-height:0;
    overflow:hidden;
    background:#202226
}
.timeline-body {
    height:100%;
    display:flex;
    min-width:0
}
.timeline-labels {
    flex:0 0 190px;
    background:#25272b;
    border-right:1px solid #111;
    overflow:hidden;
    z-index:6
}
.timeline-label-head {
    height:34px;
    padding:9px 8px;
    font-size:11px;
    color:#aaa;
    border-bottom:1px solid #3a3c42;
    white-space:nowrap
}
.timeline-layer-name {
    height:30px;
    padding:7px 8px;
    border-bottom:1px solid #303238;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-size:12px
}
.timeline-scroll {
    flex:1;
    min-width:0;
    min-height:0;
    overflow:auto;
    position:relative
}
.timeline-content {
    position:relative;
    min-height:100%
}
.timeline-ruler {
    height:34px;
    position:relative;
    background:#292b30;
    border-bottom:1px solid #111;
    min-width:100%
}
.timeline-tick {
    position:absolute;
    top:0;
    height:34px;
    border-left:1px solid #555;
    padding:6px 0 0 4px;
    color:#999;
    font-size:10px;
    white-space:nowrap;
    pointer-events:none
}
.timeline-tick b {
    font-weight:500;
    font-size:12px;
    line-height:1.1
}
.timeline-tick-end {
    border-left-color:#777
}
.timeline-row {
    height:30px;
    position:relative
}
.timeline-track {
    height:30px;
    position:relative;
    border-bottom:1px solid #303238;
    background:repeating-linear-gradient(90deg,transparent 0,transparent 59px,#292b30 60px)
}
.kf {
    position:absolute;
    top:7px;
    transform:translateX(-50%);
    width:16px;
    height:16px;
    padding:0;
    border:0;
    background:transparent;
    color:#8d929b;
    font-size:15px;
    line-height:16px;
    cursor:pointer;
    z-index:3
}
.kf:hover {
    color:#fff;
    transform:translateX(-50%) scale(1.2)
}
.kf.current {
    color:#6fc2ff
}
.kf.selected {
    color:#ffd15c;
    filter:drop-shadow(0 0 3px #b88700)
}
.playhead {
    position:absolute;
    top:0;
    bottom:0;
    width:2px;
    background:#e05b5b;
    z-index:5;
    pointer-events:none
}
.timeline-empty {
    height:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#888;
    padding:20px
}
.anim-row {
    display:flex;
    gap:4px;
    padding:4px 6px;
    border-bottom:1px solid #34363b
}
.anim-row .anim-item {
    flex:1;
    text-align:left;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap
}
.anim-edit-btn {
    min-width:82px
}
/* V9 timeline/keyframe improvements */
.ease-control {
    display:flex;
    align-items:center;
    gap:5px;
    color:#aaa;
    font-size:11px
}
.ease-control select {
    background:#202126;
    color:#eee;
    border:1px solid #444;
    border-radius:3px;
    padding:4px 5px
}
.kf {
    cursor:pointer;
    z-index:5;
    text-shadow:0 0 3px #111
}
.kf.selected {
    color:#fff;
    font-size:16px;
    text-shadow:0 0 5px #ffd45a
}
.kf.current {
    transform:translateX(-50%) scale(1.12)
}
.timeline-track {
    background:repeating-linear-gradient(90deg,transparent 0,transparent 59px,#32343a 60px)
}
@media(max-width:900px) {
    .timeline-help {
        display:none
    }
    .timeline-toolbar {
        gap:4px
    }
    .ease-control select {
        max-width:95px
    }
}
/* V10 timeline scrubbing */
.timeline-ruler {
    cursor:ew-resize
}
.timeline-ruler .playhead {
    width:3px;
    background:#ff6b5e;
    box-shadow:0 0 5px rgba(255,107,94,.55)
}
.timeline-track {
    cursor:default
}
/* V11 */
.undo-hint {
    font-size:11px;
    color:#aaa;
    max-width:260px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap
}

.animation-start-point-row { display:flex; align-items:center; gap:5px; margin:4px 0 8px; }
.animation-start-point-row > span { font-size:12px; opacity:.75; margin-left:2px; }
.animation-start-point-row input.param-style-input { width:92px; flex:0 0 92px; cursor:ew-resize; }
.animation-start-point-row .icon-btn { width:28px; min-width:28px; height:26px; padding:0; }
.animation-start-point-row .icon-btn.active { outline:1px solid rgba(90,180,255,.75); }
.animation-toolbar {
    display:flex;
    gap:4px;
    padding:7px;
    border-bottom:1px solid #34363b
}
.animation-toolbar button {
    width:32px;
    height:30px;
    padding:0;
    font-size:16px
}
.animation-toolbar button:disabled {
    opacity:.35;
    cursor:not-allowed
}
.animation-create-fields {
    display:flex;
    gap:5px;
    padding:7px;
    border-bottom:1px solid #34363b
}
.animation-create-fields input {
    min-width:0;
    flex:1;
    background:#202126;
    color:#eee;
    border:1px solid #444;
    border-radius:3px;
    padding:5px
}
.animation-create-fields input[type=number] {
    flex:0 0 90px;
    width:90px
}
.anim-row {
    display:flex;
    margin-bottom:3px
}
.anim-row.active .anim-item {
    background:#46688f
}
.anim-item {
    margin:0;
    flex:1
}
.anim-item:disabled {
    opacity:.7;
    cursor:not-allowed
}
.animation-edit {
    display:flex;
    gap:6px;
    flex-wrap:wrap
}
.animation-edit label {
    display:flex;
    align-items:center;
    gap:5px;
    flex:1;
    min-width:120px
}
.animation-edit input {
    width:100%;
    background:#202126;
    color:#eee;
    border:1px solid #444;
    border-radius:3px;
    padding:5px
}
.timeline-dock {
    display:flex
}
.timeline-dock:not(:has(.timeline-body)) .timeline-toolbar {
    display:none
}
/* V12 UI */
body {
    display:flex;
    flex-direction:column
}
.workspace {
    flex:1;
    height:auto;
    min-height:0
}
.timeline-dock {
    flex:0 0 300px
}
.icon-btn {
    width:32px;
    height:30px;
    padding:0;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    font-size:16px
}
.top-icon {
    width:30px;
    height:30px
}
.redo-hint {
    font-size:11px;
    color:#777;
    max-width:230px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap
}
.source-toolbar {
    display:flex;
    gap:4px;
    padding:6px;
    border-bottom:1px solid #34363b;
    align-items:center
}
.source-search {
    min-width:0;
    flex:1;
    background:#202126;
    color:#eee;
    border:1px solid #444;
    border-radius:4px;
    padding:5px 7px
}
.source-count {
    font-size:10px;
    color:#777;
    margin-right:2px
}
.source-file-list {
    max-height:260px;
    overflow:auto;
    margin-top:6px
}
.source-file {
    display:flex;
    align-items:center;
    gap:6px;
    padding:3px 4px;
    border-radius:3px;
    font-size:11px;
    cursor:pointer
}
.source-file:hover {
    background:#34373e
}
.source-file input {
    margin:0
}
.source-file span {
    flex:1;
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap
}
.source-add {
    width:24px;
    height:24px;
    font-size:14px
}
.source-add:disabled {
    opacity:.35
}
.source-row {
    margin:5px
}
.layer-toolbar {
    display:flex;
    gap:4px;
    padding:5px;
    border-bottom:1px solid #202126
}
.tree-mini {
    width:22px;
    height:22px;
    padding:0;
    border:0;
    background:transparent;
    color:#aaa;
    font-size:12px
}
.tree-mini:disabled {
    visibility:hidden
}
.tree-mini:hover:not(:disabled) {
    background:#41444b
}
.tree-row.selected .tree-mini {
    color:#eee
}
.prop input[type=number] {
    cursor:ew-resize
}
.prop input[type=number]:active {
    cursor:grabbing
}
.project-tools {
    display:flex;
    gap:4px;
    padding:7px;
    border-bottom:1px solid #34363b
}
.animation-toolbar .icon-btn {
    width:30px;
    height:30px
}
.timeline-toolbar .icon-btn {
    width:30px;
    height:30px
}
.timeline-help {
    white-space:nowrap
}
.timeline-ruler {
    user-select:none
}
.timeline-dock .timeline-empty {
    height:100%
}
/* V13: egyértelmű zárolási állapot */
.tree-mini.lock-state.is-locked {
    color:#ffb84d;
    font-size:14px;
    text-shadow:0 0 4px rgba(255,184,77,.45)
}
.tree-mini.lock-state.is-unlocked {
    color:#666;
    font-size:14px;
    opacity:.75
}
.tree-row.selected .tree-mini.lock-state.is-unlocked {
    color:#aaa;
    opacity:.9
}
.source-head .select-source {
    width:26px;
    height:26px;
    font-size:14px
}
/* V14 */
.inline-name-editor {
    flex:1;
    min-width:0;
    background:#202126;
    color:#fff;
    border:1px solid #4c8dcc;
    border-radius:3px;
    padding:2px 4px;
    font:inherit;
    outline:none
}
.dock-toggle {
    margin-left:2px
}
.timeline-hidden {
    display:none!important
}
.bezier-rotate {
    font-size:10px!important;
    white-space:nowrap
}
.bezier-rotate input {
    width:auto!important
}
.tree-mini.lock-state.is-locked {
    color:#ffb84d;
    background:rgba(255,184,77,.12);
    border-radius:3px
}
.tree-mini.lock-state.is-unlocked {
    color:#666;
    background:transparent
}
.tree-row.selected .tree-mini.lock-state.is-unlocked {
    color:#aaa
}
/* V15 dock/timeline improvements */
.timeline-dock {
    flex:0 0 var(--timeline-height,300px);
    height:var(--timeline-height,300px)
}
.timeline-splitter {
    height:6px;
    flex:0 0 6px;
    background:#1b1c1f;
    border-top:1px solid #35373b;
    border-bottom:1px solid #111;
    cursor:ns-resize
}
.timeline-splitter:hover {
    background:#3b3e45
}
.timeline-splitter.timeline-hidden {
    display:none!important
}
.dock-head {
    display:none!important
}
body.resizing-timeline,body.resizing-timeline * {
    cursor:ns-resize!important;
    user-select:none!important
}
/* V17 timeline selection: a kijelölt keyframe egyértelműen látható */
.kf {
    border-radius:50%;
    text-align:center;
    overflow:visible;
}
.kf.selected {
    color:#111;
    background:#ffd15c;
    box-shadow:0 0 0 2px rgba(255,209,92,.35),0 0 8px rgba(255,209,92,.85);
    font-size:13px;
    line-height:16px;
}
.kf.current:not(.selected) {
    box-shadow:0 0 0 2px rgba(111,194,255,.35);
    border-radius:50%;
}
.timeline-layer-name:has(+ *) {
}
.timeline-track {
    position:relative
}
.timeline-bezier-span {
    position:absolute;
    top:14px;
    height:2px;
    border-top:2px dashed #c78a24;
    opacity:.9;
    pointer-events:none
}
.timeline-bezier-span::after {
    content:'Bézier';
    position:absolute;
    top:-16px;
    left:50%;
    transform:translateX(-50%);
    font-size:9px;
    color:#b97812;
    background:#222;
    padding:1px 4px;
    border-radius:3px;
    white-space:nowrap
}
.bone-info {
    font-size:11px;
    color:#aaa;
    padding:3px 0 7px
}
.prop-section-title {
    font-weight:600;
    color:#aaa;
    border-top:1px solid #383a40;
    padding:9px 0 6px;
    margin-top:5px
}
.top-icon.active {
    box-shadow:inset 0 0 0 1px #55aaff;
    background:#303640
}
.project-name-field {
    display:flex;
    align-items:center;
    gap:7px
}
.project-name-field input {
    flex:1;
    min-width:0
}
.bg-tools {
    display:flex;
    flex-direction:column;
    gap:7px
}
.bg-swatches {
    display:flex;
    flex-wrap:wrap;
    gap:4px
}
.bg-swatch {
    width:24px;
    height:24px;
    border:1px solid #555;
    border-radius:3px;
    background:var(--bg-color)
}
.bg-color-row,.bg-image-row {
    display:flex;
    align-items:center;
    gap:5px
}
.bg-color-row input[type=color] {
    width:34px;
    height:28px;
    padding:1px
}
.bg-color-row input[type=text] {
    flex:1;
    min-width:0;
    background:#202126;
    color:#eee;
    border:1px solid #444;
    border-radius:3px;
    padding:5px
}
.small-btn {
    background:#303238;
    color:#ddd;
    border:1px solid #4a4d53;
    border-radius:3px;
    padding:5px 7px
}
.timeline-duration {
    display:flex;
    align-items:center;
    gap:4px;
    color:#aaa;
    font-size:11px
}
.timeline-duration input {
    width:90px!important
}
.timeline-layer-select {
    max-width:150px;
    background:#202126;
    color:#eee;
    border:1px solid #444;
    border-radius:3px;
    padding:4px
}
.timeline-row,.timeline-layer-name {
    cursor:pointer
}
.timeline-row.row-selected .timeline-track,.timeline-layer-name.row-selected {
    background-color:#363b45
}
.asset-item.selected {
    background:#46688f
}
.bg-swatch[data-color="#ffffff"] {
    background:#fff
}
.bg-swatch[data-color="#000000"] {
    background:#000
}
.bg-swatch[data-color="#808080"] {
    background:#808080
}
.bg-swatch[data-color="#ff0000"] {
    background:#f00
}
.bg-swatch[data-color="#00ff00"] {
    background:#0f0
}
.bg-swatch[data-color="#0000ff"] {
    background:#00f
}
.bg-swatch[data-color="#ffff00"] {
    background:#ff0
}
.bg-swatch[data-color="#00ffff"] {
    background:#0ff
}
.bg-swatch[data-color="#ff00ff"] {
    background:#f0f
}
.asset-toolbar {
    padding:0 0 7px
}
.asset-toolbar input {
    width:100%;
    box-sizing:border-box
}
.asset-list {
    padding:0!important
}
.asset-item {
    user-select:none
}
.timeline-loop-controls {
    display:flex;
    align-items:center;
    gap:4px;
    color:#aaa;
    font-size:11px;
    white-space:nowrap
}
.timeline-loop-controls input[type=number] {
    width:52px!important
}
.timeline-loop-controls label {
    display:flex;
    align-items:center;
    gap:2px
}
.timeline-loop-span {
    position:absolute;
    top:8px;
    height:5px;
    border-radius:3px;
    background:#9b73d6;
    opacity:.9;
    z-index:1;
    pointer-events:none
}
.timeline-loop-span::before,.timeline-loop-span::after {
    content:'';
    position:absolute;
    top:1px;
    width:0;
    height:0;
    border-top:3px solid transparent;
    border-bottom:3px solid transparent
}
.timeline-loop-span::before {
    left:-1px;
    border-right:5px solid #9b73d6
}
.timeline-loop-span::after {
    right:-1px;
    border-left:5px solid #9b73d6
}
.timeline-loop-span span {
    position:absolute;
    top:6px;
    left:50%;
    transform:translateX(-50%);
    font-size:9px;
    color:#d9c8f3;
    background:#30233f;
    padding:1px 4px;
    border-radius:3px;
    white-space:nowrap
}
.kf.has-loop {
    color:#c38cff;
    text-shadow:0 0 5px #9b73d6
}
/* V43: a loop jelölése legyen egyértelműen látható a keyframe-ek mögött. */
.timeline-loop-span {
    top:20px;
    height:4px;
    background:#b77aff;
    opacity:1;
    z-index:2;
    box-shadow:0 0 3px #8d5bc7
}
.timeline-loop-span::before {
    border-right-color:#b77aff
}
.timeline-loop-span::after {
    border-left-color:#b77aff
}
.timeline-loop-span span {
    top:5px;
    color:#eadcff;
    background:#352447;
    border:1px solid #684a83
}
.kf.has-loop {
    z-index:5
}
.timeline-range-box {
    position:absolute;
    z-index:30;
    border:1px solid #55aaff;
    background:rgba(85,170,255,.14);
    pointer-events:none;
    box-shadow:0 0 0 1px rgba(0,0,0,.25) inset
}
.kf.start-keyframe {
    color:#ffd15c;
    font-size:16px;
    text-shadow:0 1px 2px #111
}
.kf.has-loop {
    outline:1px solid #ff9b45;
    outline-offset:1px
}
.timeline-scroll {
    position:relative
}
.prop-icon-row .state-icon-btn,.mirror-button-row .state-icon-btn {
    min-width:34px;
    height:28px;
    padding:2px 7px;
    font-size:15px;
    border-radius:4px
}
.state-icon-btn.active {
    background:#394b35;
    border-color:#6da45d;
    box-shadow:inset 0 0 0 1px #577e4c
}
.state-icon-btn.inactive {
    background:#292b30;
    border-color:#4a4d54;
    color:#777;
    opacity:.8
}
.mirror-button-row {
    display:flex;
    gap:5px;
    margin:0 0 8px;
    padding-left:100px
}
.prop-icon-row {
    grid-template-columns:95px 1fr
}
.prop-icon-row .state-icon-btn {
    justify-self:start
}
.toolbar-group-label {
    font-size:10px;
    color:#888;
    text-transform:uppercase;
    letter-spacing:.04em;
    padding:0 1px
}
.timeline-toolbar .icon-btn.active {
    background:#465f79;
    border-color:#6b8fb5;
    color:#fff
}
.timeline-toolbar .timeline-sep {
    margin:0 3px
}
.timeline-loop-controls {
    border-left:0;
    padding-left:0
}
.timeline-loop-controls .icon-btn {
    min-width:30px
}
.ease-select {
    background:#202126;
    color:#eee;
    border:1px solid #444;
    border-radius:4px;
    padding:4px 6px;
    height:28px
}
.ease-select:focus {
    outline:1px solid #6b8db8
}
/* V51.1: Keyframe property editor unified with standard property styling. */
.keyframe-info {
    display:flex;
    align-items:center;
    gap:10px;
    padding:8px 9px;
    margin-bottom:6px;
    border-bottom:1px solid #34363b
}
.keyframe-info-main {
    display:flex;
    align-items:center;
    gap:8px;
    flex:1;
    min-width:0
}
.keyframe-info-main b {
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap
}
.keyframe-info-main span {
    font-size:12px;
    color:#bbb;
    white-space:nowrap
}
.keyframe-speed {
    font-size:12px;
    font-weight:700;
    color:#f0c674;
    background:#3b3527;
    border:1px solid #6d5a2f;
    border-radius:4px;
    padding:3px 6px;
    white-space:nowrap
}
.keyframe-prop {
    margin-bottom:9px
}
.keyframe-prop-head {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:6px;
    margin-bottom:4px
}
.keyframe-prop-head label {
    font-weight:600;
    color:#bbb
}
.keyframe-fx-btn {
    width:32px;
    height:26px;
    padding:0;
    border:1px solid #4a4d54;
    border-radius:4px;
    background:#303238;
    color:#aaa;
    font-weight:700;
    cursor:pointer
}
.keyframe-fx-btn:hover {
    background:#3a3d44
}
.keyframe-fx-btn.active {
    background:#465f79;
    border-color:#6b8fb5;
    color:#fff;
    box-shadow:inset 0 0 0 1px #6b8fb5
}
.keyframe-prop-body>input,.keyframe-prop-body>select,.function-editor input,.function-editor select {
    width:100%;
    background:#202126;
    color:#eee;
    border:1px solid #444;
    border-radius:3px;
    padding:5px
}
.function-editor {
    display:flex;
    flex-direction:column;
    gap:5px
}
.function-select {
    height:30px
}
.function-args {
    display:flex;
    flex-direction:column;
    gap:5px
}
.function-arg {
    display:grid;
    grid-template-columns:70px 1fr;
    gap:5px;
    align-items:center
}
.function-arg span {
    font-size:11px;
    color:#aaa
}
.function-layer-select {
    height:28px
}
.expression-preview {
    font-size:11px;
    color:#999!important
}
.keyframe-prop .state-icon-btn {
    min-width:34px;
    height:28px
}
/* Keyframe és animációs paraméter mezők ugyanazt a sötét input-stílust használják, mint a Properties panel. */
.param-inline input.param-style-input,.keyframe-prop-body>input,.keyframe-prop-body>select,.function-editor input,.function-editor select {
    width:100%;
    box-sizing:border-box;
    background:#202126;
    color:#eee;
    border:1px solid #444;
    border-radius:3px;
    padding:4px;
    font:inherit;
    outline:none
}
.param-inline input.param-style-input:focus,.keyframe-prop-body>input:focus,.keyframe-prop-body>select:focus,.function-editor input:focus,.function-editor select:focus {
    border-color:#4c8dcc
}
.param-add-row,.param-row {
    display:flex;
    gap:5px;
    align-items:center;
    margin-bottom:6px;
    padding:0 6px
}
.param-add-row input:first-child,.param-row input[type=text] {
    flex:1;
    min-width:0
}
.param-add-row input[type=number],.param-row input[type=number] {
    width:90px;
    flex:0 0 90px
}
.param-row .icon-btn,.param-add-row .icon-btn {
    flex:0 0 30px
}
.function-param-select {
    height:28px
}
/* V51.4: az inspectorok egységes input-megjelenése. */
.prop input[type=text], .prop input[type=number], .keyframe-prop-body>input, .keyframe-prop-body>select, .function-editor input, .function-editor select, .param-inline input.param-style-input {
    box-sizing:border-box;
    background:#202126;
    color:#eee;
    border:1px solid #444;
    border-radius:3px;
    padding:5px;
    font:inherit;
    outline:none
}
.prop input:focus,.keyframe-prop-body>input:focus,.keyframe-prop-body>select:focus,.function-editor input:focus,.function-editor select:focus,.param-inline input.param-style-input:focus {
    border-color:#4c8dcc
}
/* V51.5: keyframe saját eszköztár és időzítési sebesség vezérlők. */
.keyframe-toolbar {
    display:flex;
    gap:4px;
    padding:6px 7px;
    border-bottom:1px solid #34363b;
    margin-bottom:6px
}
.keyframe-asset-select {
    width:100%;
    box-sizing:border-box;
    background:#202126;
    color:#eee;
    border:1px solid #444;
    border-radius:3px;
    padding:5px;
    font:inherit;
    outline:none
}
.keyframe-asset-select:focus {
    border-color:#4c8dcc
}
.timeline-speed-controls {
    display:flex;
    align-items:center;
    gap:4px;
    white-space:nowrap
}
.timeline-speed-controls input {
    width:55px!important
}
.timeline-speed-controls .icon-btn {
    min-width:30px
}
.keyframe-toolbar .icon-btn:disabled {
    opacity:.35;
    cursor:not-allowed
}
/* V51.9: összetett expression builder */
.expression-summary {
    display:flex;
    align-items:center;
    gap:5px;
    min-width:0
}
.expression-summary-value {
    flex:1;
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    background:#202126;
    border:1px solid #444;
    border-radius:3px;
    padding:5px 7px;
    color:#ddd;
    font-family:Consolas,Monaco,monospace;
    font-size:12px
}
.expression-edit-btn {
    flex:0 0 30px;
    min-width:30px;
    padding:4px 6px
}
.expression-builder-overlay {
    position:fixed;
    inset:0;
    z-index:10000;
    background:rgba(0,0,0,.58);
    display:flex;
    align-items:center;
    justify-content:center;
    padding:20px;
    box-sizing:border-box
}
.expression-builder-dialog {
    width:min(900px,96vw);
    max-height:90vh;
    display:flex;
    flex-direction:column;
    background:#25262b;
    border:1px solid #4b4e56;
    border-radius:7px;
    box-shadow:0 18px 50px rgba(0,0,0,.55);
    overflow:hidden;
    color:#eee
}
.expression-builder-header,.expression-builder-footer {
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:8px 10px;
    border-bottom:1px solid #3a3c42
}
.expression-builder-footer {
    justify-content:flex-end;
    gap:6px;
    border-top:1px solid #3a3c42;
    border-bottom:0
}
.expression-builder-modebar {
    display:flex;
    gap:5px;
    padding:7px 10px;
    border-bottom:1px solid #3a3c42
}
.expression-builder-modebar .small-btn.active {
    background:#465f79;
    border-color:#6b8fb5;
    color:#fff
}
.expression-builder-content {
    padding:10px;
    overflow:auto;
    min-height:260px
}
.expression-builder-view,.expression-builder-text-view {
    display:none;
    position:relative
}
.expression-builder-view.active,.expression-builder-text-view.active {
    display:block
}
.expression-builder-section-title {
    font-size:11px;
    color:#aaa;
    font-weight:600;
    margin:0 0 6px
}
.expression-builder-token-list {
    display:flex;
    flex-wrap:wrap;
    gap:7px;
    align-items:stretch;
    min-height:78px;
    padding:8px;
    background:#1e1f23;
    border:1px solid #3e4148;
    border-radius:5px
}
.expression-builder-empty {
    color:#777;
    padding:12px
}
.expression-token-chip {
    display:flex;
    align-items:stretch;
    gap:4px;
    background:#2b2d33;
    border:1px solid #484b53;
    border-radius:5px;
    padding:4px;
    max-width:100%
}
.expression-token-body {
    display:flex;
    align-items:center;
    gap:4px;
    flex-wrap:wrap;
    min-width:0
}
.expression-token-body select,.expression-token-body input,.expression-inline-arg input,.expression-inline-arg select,.expression-function-chooser select {
    box-sizing:border-box;
    background:#202126;
    color:#eee;
    border:1px solid #444;
    border-radius:3px;
    padding:4px;
    font:inherit;
    outline:none
}
.expression-token-body select:focus,.expression-token-body input:focus,.expression-inline-arg input:focus,.expression-inline-arg select:focus,.expression-function-chooser select:focus {
    border-color:#4c8dcc
}
.expression-token-body>input {
    width:82px
}
.expression-token-label {
    font-size:10px;
    color:#888
}
.expression-token-controls {
    display:flex;
    gap:2px;
    align-items:flex-start
}
.tiny-icon-btn {
    width:22px;
    height:22px;
    padding:0;
    background:#303238;
    color:#bbb;
    border:1px solid #4a4d54;
    border-radius:3px;
    cursor:pointer
}
.tiny-icon-btn:hover:not(:disabled) {
    background:#3b3e45;
    color:#fff
}
.tiny-icon-btn:disabled {
    opacity:.3;
    cursor:default
}
.expression-builder-addbar {
    display:flex;
    gap:4px;
    flex-wrap:wrap;
    margin-top:7px
}
.expression-builder-add-btn {
    min-width:32px
}
.expression-function-args-inline {
    display:flex;
    gap:4px;
    align-items:center;
    flex-wrap:wrap
}
.expression-inline-arg {
    display:flex;
    align-items:center;
    gap:3px
}
.expression-inline-arg span {
    font-size:10px;
    color:#999
}
.expression-inline-arg input {
    width:72px
}
.expression-inline-arg select {
    min-width:120px;
    max-width:180px
}
.expression-function-chooser {
    position:absolute;
    z-index:3;
    left:10px;
    top:54px;
    display:flex;
    gap:4px;
    align-items:center;
    background:#303238;
    border:1px solid #50535b;
    border-radius:5px;
    padding:6px;
    box-shadow:0 8px 22px rgba(0,0,0,.45)
}
.expression-builder-textarea {
    width:100%;
    min-height:150px;
    box-sizing:border-box;
    resize:vertical;
    background:#202126;
    color:#eee;
    border:1px solid #444;
    border-radius:4px;
    padding:8px;
    font:13px Consolas,Monaco,monospace;
    outline:none
}
.expression-builder-textarea:focus {
    border-color:#4c8dcc
}
.expression-builder-preview {
    margin-top:8px;
    padding:7px 9px;
    background:#1e1f23;
    border-top:1px solid #3b3d43;
    color:#aaa;
    font-size:11px
}
.expression-builder-preview code {
    display:block;
    margin-top:3px;
    color:#e6e6e6;
    white-space:pre-wrap;
    word-break:break-word;
    font:12px Consolas,Monaco,monospace
}
.expression-builder-status {
    min-height:20px;
    padding:4px 1px;
    font-size:11px;
    color:#aaa
}
.expression-builder-status.error {
    color:#ff8b8b
}
/* V53: Visual Logic Graph */
.logic-toolbar {
    display:flex;
    align-items:center;
    gap:4px;
    padding:6px;
    background:#25272b;
    border-bottom:1px solid #17181b;
    flex-wrap:wrap;
    position:sticky;
    top:0;
    z-index:20
}
.logic-select {
    min-width:150px;
    max-width:230px;
    background:#202126;
    color:#eee;
    border:1px solid #444;
    border-radius:4px;
    padding:5px
}
.logic-graph-name {
    width:180px;
    min-width:120px;
    background:#202126;
    color:#eee;
    border:1px solid #444;
    border-radius:4px;
    padding:5px;
    outline:none
}
.logic-graph-name:focus {
    border-color:#4c8dcc
}
.logic-panning {
    cursor:grabbing!important
}
.logic-toolbar-sep {
    width:1px;
    height:24px;
    background:#44474d;
    margin:0 3px
}
.logic-graph-canvas {
    position:relative;
    min-width:2200px;
    min-height:1400px;
    background-color:#1b1c20;
    background-image:radial-gradient(#343740 1px,transparent 1px);
    background-size:20px 20px;
    overflow:visible;
    outline:none
}
.logic-links {
    position:absolute;
    left:0;
    top:0;
    z-index:1;
    pointer-events:none;
    overflow:visible
}
.logic-node {
    position:absolute;
    width:230px;
    background:#292b31;
    border:1px solid #4a4d55;
    border-radius:6px;
    box-shadow:0 8px 20px rgba(0,0,0,.28);
    z-index:5;
    color:#ddd
}
.logic-node.selected {
    border-color:#6b9ed2;
    box-shadow:0 0 0 1px #6b9ed2,0 8px 20px rgba(0,0,0,.35)
}
.logic-node-header {
    height:31px;
    display:flex;
    align-items:center;
    gap:4px;
    padding:0 7px;
    background:#33363d;
    border-bottom:1px solid #484b53;
    cursor:grab;
    user-select:none
}
.logic-node-header:active {
    cursor:grabbing
}
.logic-node-header b {
    flex:1;
    font-size:12px;
    color:#eee
}
.logic-node-delete {
    width:22px;
    height:22px;
    padding:0;
    background:transparent;
    border:0;
    color:#999
}
.logic-node-delete:hover {
    background:#4b3033;
    color:#fff
}
.logic-node-body {
    padding:7px;
    display:flex;
    flex-direction:column;
    gap:6px
}
.logic-field {
    display:grid;
    grid-template-columns:60px 1fr;
    gap:5px;
    align-items:center;
    font-size:10px;
    color:#aaa
}
.logic-field input,.logic-field select,.logic-node-input,.logic-node-select {
    width:100%;
    box-sizing:border-box;
    background:#202126;
    color:#eee;
    border:1px solid #444;
    border-radius:3px;
    padding:4px;
    font:inherit;
    outline:none
}
.logic-field input:focus,.logic-field select:focus {
    border-color:#4c8dcc
}
.logic-note {
    font-size:10px;
    color:#999;
    line-height:1.35
}
.logic-full-btn {
    width:100%;
    font-size:10px
}
.logic-layer-list {
    max-height:125px;
    overflow:auto;
    border:1px solid #3b3e44;
    border-radius:4px;
    padding:4px;
    background:#202126
}
.logic-layer-list label {
    display:flex;
    align-items:center;
    gap:5px;
    padding:3px 2px;
    font-size:10px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis
}
.logic-layer-list label:hover {
    background:#2d3036
}
.logic-ports {
    display:flex;
    flex-direction:column;
    gap:4px;
    position:absolute;
    top:38px;
    bottom:5px;
    width:70px;
    pointer-events:none
}
.logic-ports.in {
    left:-38px;
    align-items:flex-end
}
.logic-ports.out {
    right:-38px;
    align-items:flex-start
}
.logic-port {
    display:flex;
    align-items:center;
    gap:3px;
    font-size:9px;
    color:#8f949d;
    height:18px;
    pointer-events:auto;
    cursor:crosshair;
    white-space:nowrap
}
.logic-ports.in .logic-port {
    flex-direction:row-reverse
}
.logic-port-dot {
    display:inline-block;
    width:11px;
    height:11px;
    border-radius:50%;
    background:#26282d;
    border:2px solid #8fa6c7;
    box-sizing:border-box
}
.logic-port.data .logic-port-dot {
    border-color:#c18ee8
}
.logic-empty {
    position:absolute;
    left:50%;
    top:40%;
    transform:translate(-50%,-50%);
    color:#777;
    background:#24262b;
    border:1px dashed #42454b;
    padding:12px 16px;
    border-radius:6px;
    pointer-events:none
}
.logic-graph-canvas:focus {
    outline:1px solid #4f7095;
    outline-offset:-1px
}
/* V54 Logic Graph workspace improvements */
#logicGraphHost {
    height:100%;
    min-height:0;
    display:flex;
    flex-direction:column
}
#logicGraphHost .logic-toolbar {
    flex:0 0 auto
}
#logicGraphHost .logic-graph-canvas {
    flex:1 1 auto;
    min-height:900px
}
/* V55 Animation Plan workspace: scrollable stage, reliable pan, fullscreen toggle. */
#logicGraphHost .logic-graph-canvas {
    min-width:0;
    min-height:0;
    width:100%;
    height:100%;
    overflow:auto;
    position:relative;
    cursor:default
}
#logicGraphHost .logic-graph-stage {
    position:relative;
    width:2600px;
    height:1800px;
    min-width:2600px;
    min-height:1800px;
    background-color:#1b1c20;
    background-image:radial-gradient(#343740 1px,transparent 1px);
    background-size:20px 20px
}
#logicGraphHost .logic-links {
    position:absolute;
    left:0;
    top:0;
    width:2600px;
    height:1800px;
    overflow:visible;
    pointer-events:auto
}
#logicGraphHost .logic-empty {
    left:1300px;
    top:720px;
    transform:translate(-50%,-50%)
}
#logicGraphHost .logic-graph-canvas.logic-panning {
    cursor:grabbing!important;
    user-select:none
}
#logicGraphHost .logic-graph-fullscreen {
    position:fixed!important;
    inset:0!important;
    width:100vw!important;
    height:100vh!important;
    z-index:5000!important;
    background:#1b1c20!important
}
body.logic-graph-body-fullscreen {
    overflow:hidden!important
}
#logicGraphHost .logic-graph-fullscreen .logic-graph-canvas {
    height:calc(100vh - 44px);
    max-height:none
}
#logicGraphHost .logic-graph-fullscreen .logic-toolbar {
    min-height:42px
}
/* V56 Animation Plan: two-level toolbar, dedicated connector area, pastel node headers. */
#logicGraphHost .logic-toolbar {
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:0;
    padding:0;
    background:#25272b;
    border-bottom:1px solid #17181b;
    position:sticky;
    top:0;
    z-index:20;
    flex-wrap:nowrap
}
#logicGraphHost .logic-toolbar-main,
#logicGraphHost .logic-node-toolbar {
    display:flex;
    align-items:center;
    gap:5px;
    padding:6px 8px;
    flex-wrap:wrap
}
#logicGraphHost .logic-toolbar-main {
    border-bottom:1px solid #3a3c42
}
#logicGraphHost .logic-node-toolbar {
    background:#202126
}
#logicGraphHost .logic-node-toolbar .toolbar-group-label {
    margin-right:2px
}
#logicGraphHost .logic-node {
    overflow:visible
}
#logicGraphHost .logic-node-header {
    position:relative;
    z-index:3
}
#logicGraphHost .logic-ports-panel {
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:8px;
    min-height:27px;
    padding:4px 8px;
    background:#22242a;
    border-bottom:1px solid #3a3c42;
    box-sizing:border-box
}
#logicGraphHost .logic-ports {
    position:static;
    top:auto;
    right:auto;
    bottom:auto;
    left:auto;
    width:auto;
    min-width:0;
    flex:1 1 0;
    display:flex;
    flex-direction:column;
    align-items:stretch;
    justify-content:flex-start;
    gap:2px;
}
#logicGraphHost .logic-port {
    position:relative;
    height:18px;
    width:100%;
    min-width:0;
    flex:0 0 18px;
    display:flex;
    align-items:center;
    gap:4px;
    padding:0;
    margin:0;
    border-radius:3px;
    color:#b8bcc4;
    pointer-events:auto;
    cursor:crosshair;
    white-space:nowrap;
    box-sizing:border-box;
    line-height:18px;
}
#logicGraphHost .logic-port.in { flex-direction:row; }
#logicGraphHost .logic-port.out { flex-direction:row; }
#logicGraphHost .logic-port.in .logic-port-dot {
    order:1;
    flex:0 0 14px;
}
#logicGraphHost .logic-port.in .logic-port-label {
    order:2;
    flex:1 1 auto;
    min-width:0;
    text-align:left;
}
#logicGraphHost .logic-port.out .logic-port-label {
    order:1;
    flex:1 1 auto;
    min-width:0;
    text-align:right;
}
#logicGraphHost .logic-port.out .logic-port-dot {
    order:2;
    flex:0 0 14px;
}
#logicGraphHost .logic-port-label {
    display:flex;
    align-items:center;
    height:18px;
    min-height:18px;
    margin:0;
    padding:0;
    line-height:18px;
    box-sizing:border-box;
}
#logicGraphHost .logic-port:hover {
    background:#30333a;
    color:#fff
}
#logicGraphHost .logic-port-dot {
    width:10px;
    height:10px;
    justify-self:center;
    box-sizing:border-box
}
#logicGraphHost .logic-node-body {
    padding:7px;
}
#logicGraphHost .logic-node-event .logic-node-header {
    background:#5a4768
}
#logicGraphHost .logic-node-layerGroup .logic-node-header {
    background:#47644f
}
#logicGraphHost .logic-node-playAnimation .logic-node-header {
    background:#46607b
}
#logicGraphHost .logic-node-pauseAnimation .logic-node-header {
    background:#75613f
}
#logicGraphHost .logic-node-stopAnimation .logic-node-header {
    background:#70484b
}
#logicGraphHost .logic-node-wait .logic-node-header {
    background:#46666b
}
#logicGraphHost .logic-node-event {
    border-color:#806995
}
#logicGraphHost .logic-node-layerGroup {
    border-color:#64886c
}
#logicGraphHost .logic-node-playAnimation {
    border-color:#6384a6
}
#logicGraphHost .logic-node-pauseAnimation {
    border-color:#9a814f
}
#logicGraphHost .logic-node-stopAnimation {
    border-color:#976165
}
#logicGraphHost .logic-node-wait {
    border-color:#639198
}
#logicGraphHost .logic-graph-fullscreen {
    position:fixed!important;
    inset:0!important;
    width:100vw!important;
    height:100vh!important;
    max-width:none!important;
    max-height:none!important;
    margin:0!important;
    z-index:50000!important;
    background:#1b1c20!important;
    display:flex!important;
    flex-direction:column!important
}
#logicGraphHost.logic-graph-fullscreen .logic-graph-canvas {
    flex:1 1 auto!important;
    width:100%!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important
}
#logicGraphHost.logic-graph-fullscreen .logic-toolbar {
    flex:0 0 auto
}
body.logic-graph-body-fullscreen {
    overflow:hidden!important
}
#logicGraphHost .logic-panning {
    cursor:grabbing!important;
    user-select:none!important
}
/* V57 Animation Plan connection/fullscreen refinements. */
#logicGraphHost .logic-port.link-target {
    background:#3b4b3e;
    outline:1px solid #7fd49a;
    box-shadow:0 0 0 1px rgba(127,212,154,.35)
}
#logicGraphHost .logic-port.flow .logic-port-dot {
    border-color:#8fa6c7
}
#logicGraphHost .logic-port.data .logic-port-dot {
    border-color:#c18ee8
}
body.logic-graph-body-fullscreen > :not(#logicGraphHost) {
    display:none!important
}
body.logic-graph-body-fullscreen {
    overflow:hidden!important
}
#logicGraphHost.logic-graph-fullscreen {
    position:fixed!important;
    inset:0!important;
    width:100vw!important;
    height:100vh!important;
    max-width:none!important;
    max-height:none!important;
    margin:0!important;
    padding:0!important;
    z-index:50000!important;
    background:#1b1c20!important;
    display:flex!important;
    flex-direction:column!important
}
#logicGraphHost.logic-graph-fullscreen .logic-graph-canvas {
    flex:1 1 auto!important;
    width:100%!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important
}
/* V57: connector color is shared with the rendered connection path. */
#logicGraphHost .logic-port.flow {
    --logic-port-color:#8fa6c7
}
#logicGraphHost .logic-port.data {
    --logic-port-color:#c18ee8
}
#logicGraphHost .logic-port-dot {
    border-color:var(--logic-port-color)
}
/* Hiányzó, végrehajtáshoz fontos connector: jól látható piros figyelmeztetés. */
#logicGraphHost .logic-port-missing {
    color:#ff6b6b;
    font-weight:700;
}
#logicGraphHost .logic-port-warning {
    position:absolute;
    top:1px;
    width:17px;
    height:17px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border:2px solid #ff3333;
    border-radius:50%;
    background:#5a1010;
    color:#ff4444;
    font-size:13px;
    line-height:13px;
    font-weight:900;
    box-sizing:border-box;
    pointer-events:none;
    z-index:2;
}
#logicGraphHost .logic-port.in .logic-port-warning {
    left:-21px;
}
#logicGraphHost .logic-port.out .logic-port-warning {
    right:-21px;
}
#logicGraphHost .logic-port-warning.is-placeholder {
    visibility:hidden;
}
/* V60 rollback: a connector pontok visszatérnek a node keret melletti eredeti pozícióra. */
#logicGraphHost .logic-links path[data-link-id] {
    cursor:pointer
}
/* V59: fullscreenben az editor többi dokkolt területe teljesen rejtve legyen,
beleértve az esetleg !important-tal látható Timeline-t is. */
body.logic-graph-body-fullscreen > .topbar,
body.logic-graph-body-fullscreen > .workspace,
body.logic-graph-body-fullscreen > .timeline-splitter,
body.logic-graph-body-fullscreen > .timeline-dock,
body.logic-graph-body-fullscreen > .statusbar {
    display:none!important
}
/* Node content cannot be text-selected while controls remain editable. */
#logicGraphHost .logic-node,
#logicGraphHost .logic-node * {
    user-select:none;
    -webkit-user-select:none
}
#logicGraphHost .logic-node input,
#logicGraphHost .logic-node select,
#logicGraphHost .logic-node textarea {
    user-select:text;
    -webkit-user-select:text
}
#logicGraphHost .logic-node-toolbar .icon-btn {
    width:30px;
    height:30px
}
#logicGraphHost .logic-node-animation .logic-node-header {
    background:#56708a
}
#logicGraphHost .logic-node-player .logic-node-header {
    background:#6a5947
}
#logicGraphHost .logic-node-animation {
    border-color:#6f92b0
}
#logicGraphHost .logic-node-player {
    border-color:#a08562
}

/* V79 audio asset browser */
.asset-toolbar { display:flex; flex-wrap:wrap; gap:5px; align-items:center; }
.asset-toolbar > input { flex:1 1 120px; min-width:80px; }
.asset-filters { display:flex; gap:4px; }
.asset-filters .icon-btn { opacity:.45; }
.asset-filters .icon-btn.active { opacity:1; box-shadow:0 0 0 1px #5d87b7 inset; background:#303944; }
.asset-item { display:flex; align-items:center; gap:7px; }
.asset-type-icon { width:20px; text-align:center; flex:0 0 20px; }
.asset-name { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.asset-preview { margin-top:8px; min-height:70px; border-top:1px solid #34363b; padding-top:8px; }
.asset-image-preview { min-height:120px; max-height:260px; display:flex; align-items:center; justify-content:center; background:repeating-conic-gradient(#292b30 0 25%,#24262a 0 50%) 50% / 16px 16px; border:1px solid #3b3e44; border-radius:4px; overflow:hidden; }
.asset-image-preview img { display:block; max-width:100%; max-height:250px; width:auto; height:auto; object-fit:contain; }
.asset-audio-preview { padding:7px; border:1px solid #3b3e44; border-radius:4px; background:#24262a; }
.asset-preview-title { font-size:11px; color:#ccc; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; margin-bottom:6px; }
.asset-audio-controls { display:flex; align-items:center; gap:4px; }
.asset-audio-controls .icon-btn { width:28px; height:26px; padding:0; }
.asset-audio-seek { min-width:70px; flex:1; }
.asset-audio-time { font-size:10px; color:#aaa; white-space:nowrap; min-width:72px; text-align:right; }
.logic-layer-list-title {
    font-size:10px;
    color:#aaa;
    padding:2px 3px 5px;
    border-bottom:1px solid #34363b;
    margin-bottom:2px
}
.logic-layer-member {
    display:flex;
    align-items:center;
    gap:6px;
    padding:4px 3px;
    font-size:10px;
    white-space:nowrap;
    overflow:hidden
}
.logic-layer-member span {
    overflow:hidden;
    text-overflow:ellipsis
}
.logic-layer-member:hover {
    background:#2d3036
}
.logic-layer-buttons {
    display:flex;
    gap:4px;
    margin-top:5px
}
.logic-layer-buttons .small-btn {
    flex:1;
    min-width:0;
    font-size:10px
}
.logic-layer-add-field {
    margin-top:5px
}

/* V87 Hit Area */
.property-select { width:100%; box-sizing:border-box; }
.logic-layer-hitarea { margin-left:auto; opacity:.9; font-size:12px; }

/* V88 – kompakt Properties inspector */
.properties .prop {
    grid-template-columns: 108px 92px;
    justify-content: start;
    gap: 6px;
    margin-bottom: 6px;
}
.properties .prop > label {
    text-align: right;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.properties .prop > input[type=number] {
    width: 92px;
    min-width: 92px;
    max-width: 92px;
    text-align: right;
}
.properties .prop > input[type=text] {
    width: 100%;
    min-width: 0;
}
.properties-action-row {
    display: flex;
    align-items: center;
    gap: 4px;
    margin: 4px 0 8px;
    min-height: 30px;
}
.properties-action-row .state-icon-btn {
    width: 30px;
    min-width: 30px;
    height: 28px;
    padding: 1px 3px;
    font-size: 15px;
    line-height: 24px;
}
.properties-action-row .mirror-choice {
    width: 27px;
    min-width: 27px;
    padding-left: 1px;
    padding-right: 1px;
    margin-left: -2px;
}
.properties-action-separator {
    width: 1px;
    height: 20px;
    margin: 0 3px;
    background: #41444b;
}
.properties .prop-section-title {
    margin-top: 7px;
    padding: 8px 0 6px;
}
.properties .prop-section-title:first-of-type {
    margin-top: 2px;
}
.hit-area-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 30px;
}
.hit-area-toggle {
    width: 30px;
    min-width: 30px;
    height: 27px;
    padding: 1px 3px;
    font-size: 15px;
}
.hit-shape-row {
    display: grid;
    grid-template-columns: 108px 92px;
    gap: 6px;
    align-items: center;
    margin: 0 0 6px;
}
.hit-shape-row > label {
    text-align: right;
    white-space: nowrap;
}
.hit-shape-buttons {
    display: flex;
    gap: 4px;
}
.hit-shape-buttons .state-icon-btn {
    width: 42px;
    min-width: 42px;
    height: 27px;
    padding: 1px 4px;
}
.prop-subsection-title {
    color: #999;
    font-size: 11px;
    font-weight: 600;
    margin: 7px 0 6px 114px;
}
.bone-parent-row {
    display: grid;
    grid-template-columns: 108px 1fr 30px;
    gap: 6px;
    align-items: center;
    margin-bottom: 7px;
}
.bone-parent-row > label {
    text-align: right;
    white-space: nowrap;
}
.bone-parent-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #ddd;
    background: #202126;
    border: 1px solid #444;
    border-radius: 3px;
    padding: 5px;
    box-sizing: border-box;
}
.bone-unlink-btn {
    width: 30px;
    min-width: 30px;
    height: 27px;
    padding: 1px 3px;
}

/* V88 UI finomítás */
.properties-action-row { gap: 5px; }
.properties-action-row .mirror-choice { margin-left: 0; }
.properties-action-separator { margin: 0 5px; }

.properties-numeric-pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 6px;
}
.properties-pair-item {
    display: grid;
    grid-template-columns: auto 92px;
    align-items: center;
    gap: 6px;
    min-width: 0;
}
.properties-pair-item > label {
    text-align: right;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.properties-pair-item > input[type=number] {
    width: 92px;
    min-width: 92px;
    max-width: 92px;
    box-sizing: border-box;
    text-align: right;
}

/* A kéz/gomb közvetlenül a szekciófelirat mellett legyen. */
.hit-area-title,
.rotation-limit-title {
    justify-content: flex-start;
    gap: 7px;
}

/* A forgatási limit ugyanúgy kapcsolható szekció, mint az Érintés kezelés. */
.rotation-limit-title .hit-area-toggle {
    margin-left: 0;
}

/* V88 v3 – numeric mezők egységes elrendezése és stílusa */
.properties .prop {
    grid-template-columns: 108px 92px;
    justify-content: start;
    gap: 6px;
    margin-bottom: 6px;
}
.properties .prop > input[type=number],
.properties-pair-item > input[type=number] {
    width: 92px;
    min-width: 92px;
    max-width: 92px;
    box-sizing: border-box;
    background: #202126;
    color: #eee;
    border: 1px solid #444;
    border-radius: 3px;
    padding: 4px;
    text-align: right;
    cursor: ew-resize;
}
.properties .prop > input[type=number]:active,
.properties-pair-item > input[type=number]:active {
    cursor: grabbing;
}
.properties-numeric-pair {
    display: grid;
    grid-template-columns: 206px 206px;
    gap: 8px;
    justify-content: start;
    margin-bottom: 6px;
}
.properties-pair-item {
    display: grid;
    grid-template-columns: 108px 92px;
    align-items: center;
    gap: 6px;
    min-width: 0;
}
.properties-pair-item > label {
    text-align: right;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Az Érintés kezelés és a Forgatási limit kapcsolója közvetlenül a felirat mellett legyen. */
.hit-area-title,
.rotation-limit-title {
    justify-content: flex-start;
    gap: 7px;
}

/* V88 v4 – minden Properties numeric mező azonos szélességű.
   Az egymezős soroknál se nyúljon ki az input a teljes panel szélességére. */
#properties .prop {
    grid-template-columns: 108px 92px;
    justify-content: start;
    gap: 6px;
}
#properties .prop > input[type=number] {
    width: 92px;
    min-width: 92px;
    max-width: 92px;
    box-sizing: border-box;
    text-align: right;
    background: #202126;
    color: #eee;
    border: 1px solid #444;
    border-radius: 3px;
    padding: 4px;
}
#properties .properties-pair-item > input[type=number] {
    width: 92px;
    min-width: 92px;
    max-width: 92px;
    box-sizing: border-box;
    text-align: right;
    padding-right: 6px;
}

/* A böngésző natív number spinner gombjai takarták az utolsó számjegyet.
   A numeric mező értékét továbbra is lehet gépelni és bal gombbal húzva módosítani. */
#properties input[type=number]::-webkit-inner-spin-button,
#properties input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    appearance: none;
    margin: 0;
}
#properties input[type=number] {
    -moz-appearance: textfield;
    appearance: textfield;
}

/* V90 – billentyűzet / egér súgó */
.help-overlay {
    position: fixed;
    inset: 0;
    z-index: 11000;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 70px 20px 20px;
    box-sizing: border-box;
    background: rgba(0,0,0,.42);
}
.help-overlay[hidden] { display:none; }
.help-dialog {
    width: min(680px, 94vw);
    max-height: min(760px, 86vh);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #25262b;
    color: #e8e8ea;
    border: 1px solid #4b4e56;
    border-radius: 6px;
    box-shadow: 0 18px 50px rgba(0,0,0,.55);
}
.help-header {
    flex: 0 0 auto;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    padding:8px 10px;
    background:#292a30;
    border-bottom:1px solid #3c3e45;
}
.help-header strong { font-size:14px; font-weight:600; }
.help-content {
    overflow:auto;
    padding:10px 12px 14px;
}
.help-section {
    margin:0 0 12px;
    padding:0 0 10px;
    border-bottom:1px solid #3b3d43;
}
.help-section:last-child { margin-bottom:0; border-bottom:0; }
.help-section h3 {
    margin:0 0 6px;
    color:#c8cbd1;
    font-size:13px;
    font-weight:600;
}
.help-row {
    display:grid;
    grid-template-columns: 145px minmax(0,1fr);
    align-items:center;
    gap:10px;
    min-height:24px;
    font-size:12px;
}
.help-row kbd {
    justify-self:start;
    display:inline-block;
    min-width:0;
    padding:2px 6px;
    border:1px solid #4c4f57;
    border-bottom-color:#303238;
    border-radius:3px;
    background:#1d1e22;
    color:#eee;
    font:11px Consolas,Monaco,monospace;
    white-space:nowrap;
}
.help-row span { color:#c8c9cd; }
.help-note {
    margin-top:7px;
    padding:6px 8px;
    border-left:3px solid #586f89;
    background:#202126;
    color:#aaaeb6;
    font-size:11px;
    line-height:1.4;
}
@media (max-width: 560px) {
    .help-dialog { width:96vw; }
    .help-row { grid-template-columns: 125px minmax(0,1fr); gap:7px; }
}

/* V91: layer státuszok, info és nagyobb mappaikon */
.tree-row .icon {
    width:22px;
    font-size:16px;
    line-height:1
}
.tree-row .folder-icon {
    font-size:17px;
}
.layer-status-icons {
    display:inline-flex;
    align-items:center;
    gap:3px;
    flex:0 0 auto;
    min-width:0;
    margin-left:4px;
}
.layer-status {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:18px;
    height:20px;
    font-size:13px;
    line-height:1;
    opacity:.9;
    cursor:default;
}
.layer-status:hover {
    opacity:1;
    filter:brightness(1.15);
}
.tree-mini.layer-info {
    width:22px;
    height:22px;
    font-size:14px;
    color:#8ea6bd;
}
.tree-mini.layer-info:hover:not(:disabled) {
    color:#fff;
    background:#3a4654;
    border-radius:3px;
}

/* V91: Timeline időskála + időpontonkénti keyframe-kijelölő gomb */
.timeline-label-head {
    height:48px;
    padding-top:16px;
}
.timeline-ruler {
    height:48px;
}
.timeline-tick {
    height:48px;
    padding-top:6px;
}
.timeline-key-buttons {
    position:absolute;
    left:0;
    right:0;
    bottom:2px;
    height:21px;
    pointer-events:none;
    z-index:8;
}
.timeline-key-select {
    position:absolute;
    top:0;
    transform:translateX(-50%);
    width:20px;
    height:20px;
    padding:0;
    border:0;
    border-radius:3px;
    background:#24272d;
    color:#9da5b0;
    font-size:12px;
    line-height:20px;
    cursor:pointer;
    pointer-events:auto;
}
.timeline-key-select:hover {
    background:#3c4653;
    color:#fff;
    box-shadow:0 0 0 1px #607080;
}
.timeline-key-select:active {
    background:#50677f;
}

/* V91: Layer információ */
.layer-info-overlay {
    position:fixed;
    inset:0;
    z-index:10000;
    display:flex;
    align-items:center;
    justify-content:center;
    background:rgba(0,0,0,.45);
}
.layer-info-dialog {
    width:min(360px,calc(100vw - 32px));
    max-height:min(520px,calc(100vh - 32px));
    overflow:auto;
    background:#292b31;
    color:#ddd;
    border:1px solid #50545d;
    border-radius:7px;
    box-shadow:0 12px 35px rgba(0,0,0,.5);
}
.layer-info-dialog > header {
    height:36px;
    display:flex;
    align-items:center;
    gap:8px;
    padding:0 8px 0 12px;
    background:#33363d;
    border-bottom:1px solid #484b53;
}
.layer-info-dialog > header strong {
    flex:1;
    font-size:13px;
    color:#eee;
}
.layer-info-content {
    padding:12px;
    display:flex;
    flex-direction:column;
    gap:8px;
    font-size:12px;
}
.layer-info-content b {
    color:#aaa;
}
.layer-info-animations ul {
    margin:5px 0 0 18px;
    padding:0;
}
.layer-info-animations li {
    margin:2px 0;
}

/* V91: Animation Plan – kissé nagyobb olvashatóság */
#logicGraphHost .logic-node-header b,
#logicGraphHost .logic-node-title {
    font-size:13px;
}
#logicGraphHost .logic-node-body,
#logicGraphHost .logic-field {
    font-size:11px;
}
#logicGraphHost .logic-port {
    font-size:11px;
}
#logicGraphHost .logic-node-title-editor {
    flex:1;
    min-width:0;
    width:100%;
    box-sizing:border-box;
    background:#202126;
    color:#eee;
    border:1px solid #5b88b5;
    border-radius:3px;
    padding:2px 4px;
    font:inherit;
    font-size:13px;
    outline:none;
}

/* V92 – Particle editor */
.particle-toolbar {
    display:flex;
    align-items:center;
    gap:4px;
    padding:5px 6px;
    border-bottom:1px solid #17181a;
    background:#25272b;
    flex-wrap:wrap
}
.particle-toolbar .icon-btn {
    width:30px;
    min-width:30px;
    padding:4px 5px
}
.particle-name {
    width:110px;
    height:28px;
    padding:4px 7px;
    background:#1f2024;
    color:#eee;
    border:1px solid #4b4e56;
    border-radius:4px;
    outline:none
}
.particle-name:focus,
.particle-number:focus,
.particle-image-select:focus,
.particle-speed:focus {
    border-color:#6f7682;
    box-shadow:0 0 0 1px rgba(120,150,190,.18)
}
.particle-speed {
    height:28px;
    width:58px;
    padding:2px 4px;
    background:#1f2024;
    color:#eee;
    border:1px solid #4b4e56;
    border-radius:4px
}
.particle-settings {
    padding:6px 7px 14px;
    overflow:auto;
    height:calc(100% - 39px)
}
.particle-section-title {
    margin:9px 0 4px;
    padding-bottom:3px;
    border-bottom:1px solid #3a3d44;
    color:#aaa;
    font-size:11px;
    font-weight:600
}
.particle-prop,
.particle-pair {
    min-height:29px;
    display:flex;
    align-items:center;
    gap:5px
}
.particle-prop > label,
.particle-pair > label {
    width:122px;
    flex:0 0 122px;
    text-align:right;
    color:#bbb;
    font-size:12px;
    white-space:nowrap
}
.particle-number,
.particle-image-select {
    width:92px;
    height:25px;
    padding:3px 6px;
    background:#1f2024;
    color:#eee;
    border:1px solid #454850;
    border-radius:3px;
    outline:none
}
.particle-number::-webkit-inner-spin-button,
.particle-number::-webkit-outer-spin-button {
    -webkit-appearance:none;
    margin:0
}
.particle-number[type=number] {
    -moz-appearance:textfield
}
.particle-number-wrap {
    display:flex;
    align-items:center;
    gap:4px
}
.particle-number-wrap > span,
.particle-pair-unit {
    color:#888;
    font-size:11px
}
.particle-pair {
    gap:4px
}
.particle-pair .particle-number {
    width:92px
}
.particle-image-select {
    width:180px
}
.particle-emitter-row { min-height:29px; display:flex; align-items:center; gap:5px; }
.particle-emitter-row > label { width:122px; flex:0 0 122px; text-align:right; color:#bbb; font-size:12px; white-space:nowrap; }
.particle-shape-buttons { display:flex; gap:3px; }
.particle-shape-btn { width:30px; min-width:30px; height:25px; padding:1px 3px; font-size:17px; line-height:20px; }
.particle-shape-btn.pressed { background:#3b4653; border-color:#8c9bad; box-shadow:inset 0 0 0 1px rgba(255,255,255,.12); }
.particle-emitter-size { width:92px; }

.particle-filters-note {
    color:#888;
    font-size:11px
}

/* Layerhez kapcsolt Particle inspector */
.particle-layer-row,
.particle-render-order-row {
    display: grid;
    align-items: center;
    gap: 6px;
    margin: 3px 0 6px;
    justify-content: start;
}
.particle-layer-row { grid-template-columns: 92px 28px; }
.particle-layer-select {
    width: 92px;
    min-width: 92px;
    box-sizing: border-box;
    background: #20252b;
    color: #e8edf2;
    border: 1px solid #454d56;
    border-radius: 3px;
    height: 26px;
}
.particle-play-btn { min-width: 28px; width: 28px; height: 26px; padding: 0; }
.particle-play-btn:disabled { opacity: .4; cursor: default; }
.particle-render-order-row { grid-template-columns: 108px 28px 28px; }
.particle-render-order-row > label { text-align: right; margin-right: 0; }
.logic-section-title { margin:8px 0 4px; padding-top:6px; border-top:1px solid rgba(255,255,255,.10); font-size:11px; font-weight:700; opacity:.78; }

/* V98 – Animation Plan indulási pont X/Y egy sorban */
.logic-start-point-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    margin-top: 2px;
}
.logic-start-point-field {
    display: grid;
    grid-template-columns: 12px 1fr;
    gap: 4px;
    align-items: center;
    font-size: 10px;
    color: #aaa;
    min-width: 0;
}
.logic-start-point-field .logic-node-input {
    min-width: 0;
}

/* Reusable canvas message / dialog panel */
.message-panel {
    position:absolute;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:20px;
    box-sizing:border-box;
    z-index:30;
    pointer-events:none;
    opacity:0;
    transition:opacity .15s ease;
}
.message-panel.visible {
    opacity:1;
    pointer-events:none;
}
.message-panel.visible.blocking {
    pointer-events:auto;
}
.message-box {
    min-width:260px;
    max-width:min(520px, calc(100% - 40px));
    padding:14px 18px;
    background:#22252aee;
    border:1px solid #555;
    border-radius:8px;
    box-shadow:0 8px 30px #0008;
    color:#ddd;
    text-align:center;
}
.message-dialog {
    min-width:300px;
}
.message-title {
    font-weight:700;
    margin-bottom:8px;
}
.message-text {
    line-height:1.45;
}
.message-actions {
    display:flex;
    justify-content:flex-end;
    gap:8px;
    margin-top:14px;
}
.message-button {
    min-width:82px;
}
.message-ok {
    font-weight:700;
}

/* Mozgás sablonok */
.motion-template-toolbar {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 7px;
    border-bottom: 1px solid var(--border, #333);
    flex-wrap: wrap;
}
.motion-template-list {
    padding: 6px;
    overflow: auto;
    height: calc(100% - 48px);
}
.motion-template-row {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 34px;
    padding: 5px 7px;
    border-radius: 4px;
    cursor: pointer;
    user-select: none;
}
.motion-template-row:hover { background: rgba(255,255,255,.06); }
.motion-template-row.selected { background: rgba(90,150,220,.22); outline: 1px solid rgba(110,170,240,.35); }
.motion-template-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.motion-template-meta { opacity: .58; font-size: 11px; white-space: nowrap; }
.motion-template-empty { opacity: .55; padding: 12px 8px; text-align: center; }

/* V119 */
.animation-speed-control { display:inline-flex; align-items:center; gap:5px; font-size:11px; color:#aaa; }
.animation-speed-control input { width:58px; background:#202126; color:#eee; border:1px solid #444; border-radius:3px; padding:4px; }
.timeline-ease-icon { position:absolute; top:2px; transform:translate(12px,0); font-size:16px; line-height:16px; color:#c9a86a; pointer-events:none; z-index:3; font-weight:800; text-shadow:0 0 1px currentColor; }
.timeline-ease-easeIn { color:#7fb3ff; }
.timeline-ease-easeOut { color:#ffb36b; }
.timeline-ease-easeInOut { color:#b89cff; }
.asset-browser { display:flex; flex-direction:column; height:100%; min-height:0; }
.asset-list { flex:1 1 auto; min-height:0; overflow:auto; }
.asset-preview { flex:0 0 auto; margin-top:8px; min-height:70px; max-height:290px; overflow:auto; }

.layer-tree-drop-indicator { position:absolute; height:4px; background:currentColor; border-radius:3px; pointer-events:none; z-index:20; box-shadow:0 0 2px rgba(0,0,0,.45); }
.layer-tree-drop-indicator.inside { height:3px; opacity:.95; }
.tree-row.drop-target { background:rgba(120,170,255,.12); }
.tree-row.dragging { opacity:.55; }

.asset-browser .asset-item { display:flex; align-items:center; gap:5px; min-height:26px; }
.asset-browser .asset-item .asset-name { flex:1 1 auto; min-width:0; }
.asset-browser .asset-info-btn, .asset-browser .asset-delete-btn { flex:0 0 24px; width:24px; height:24px; padding:0; opacity:.65; }
.asset-browser .asset-info-btn { margin-left:auto; }
.asset-browser .asset-item:hover .asset-info-btn, .asset-browser .asset-item:hover .asset-delete-btn, .asset-browser .asset-item.selected .asset-info-btn, .asset-browser .asset-item.selected .asset-delete-btn { opacity:1; }

/* V128: connector labels stay vertically centered inside their 18px port row. */
#logicGraphHost .logic-port-label {
    display:flex !important;
    flex-direction:row !important;
    align-items:center !important;
    justify-content:flex-start !important;
    height:18px !important;
    min-height:18px !important;
    margin:0 !important;
    padding:0 !important;
    line-height:18px !important;
    box-sizing:border-box !important;
}
#logicGraphHost .logic-port.out .logic-port-label {
    justify-content:flex-end !important;
    text-align:right !important;
}
#logicGraphHost .logic-port.in .logic-port-label {
    justify-content:flex-start !important;
    text-align:left !important;
}
/* V129: bővített Layer Info szekciók */
.layer-info-section {
    margin-top:4px;
    padding-top:7px;
    border-top:1px solid #3b3e45;
}
.layer-info-section > strong {
    display:block;
    margin-bottom:4px;
    color:#eee;
}

.logic-finished-actions {
    display: flex;
    gap: 8px;
    align-items: center;
}
.logic-finished-icon {
    width: 34px;
    height: 30px;
    font-size: 17px;
    cursor: pointer;
    border-radius: 6px;
}
.logic-finished-icon.active {
    outline: 2px solid currentColor;
}

/* V136 – Interaktív animáció node */
#logicGraphHost .logic-node-interactiveAnimation .logic-node-header {
    background:#536b57;
}
#logicGraphHost .logic-node-interactiveAnimation {
    border-color:#6f9275;
    min-width:290px;
    max-width:340px;
}
#logicGraphHost .logic-node-interactiveAnimation .logic-node-body {
    gap:5px;
}
#logicGraphHost .logic-interactive-section-title {
    font-weight:700;
    color:#ddd;
    margin-top:1px;
}
#logicGraphHost .logic-interactive-row {
    display:grid;
    grid-template-columns:auto minmax(0,1fr);
    gap:5px;
    align-items:center;
    font-size:11px;
    color:#aaa;
}
#logicGraphHost .logic-interactive-row > .logic-interactive-label {
    white-space:nowrap;
}
#logicGraphHost .logic-interactive-row input,
#logicGraphHost .logic-interactive-row select {
    min-width:0;
}
#logicGraphHost .logic-interactive-row:has(input[type="number"]) {
    grid-template-columns:auto 55px auto 55px auto;
}
#logicGraphHost .logic-interactive-check {
    display:flex;
    align-items:center;
    gap:5px;
    font-size:11px;
    color:#ccc;
    cursor:pointer;
}
#logicGraphHost .logic-interactive-check input {
    margin:0;
}