/* styles.css - v8.5 - Adaptado para Layout Neon (Super Enxuto) */

:root {
    --accent-blue: #00ff88;
    --bg-dark: #20d0d6;    /* Verde escuro para teste */
}

.CodeMirror { font-size: 13px; line-height: 1.4; }
.CodeMirror-placeholder { color: #5c6370 !important; }

.hotkeys { font-size: 12px; line-height: 1.6; color: #94a3b8; }
.hotkeys strong { color: #e2e8f0; font-weight: 600; }

#status-bar { font-size: 12px; z-index: 10; opacity: 0.85; transition: opacity 0.3s ease-out; }
#object-info-display { font-size: 11px; font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; line-height: 1.4; z-index: 10; color: #facc15; }

#viewport-toolbar button:focus-visible { border: 1px solid var(--accent-blue); box-shadow: 0 0 0 2px rgba(0, 255, 136, 0.4); }

#hierarchy-content ul { list-style: none; padding: 0; margin: 0; min-width: max-content; }
#hierarchy-content li { padding: 2px 5px; cursor: pointer; transition: background-color 0.15s ease; border-radius: 3px; position: relative; white-space: nowrap; font-size: 13px; line-height: 1.5; outline: none; }
#hierarchy-content li:focus-visible { outline: 2px solid rgba(0, 255, 136, 0.5); outline-offset: -1px; }
#hierarchy-content li:hover { background-color: #004400; color: #e2e8f0; }
#hierarchy-content li.selected { background-color: transparent !important; color: inherit; font-weight: normal; }
#hierarchy-content li.selected .hierarchy-item-content { background-color: var(--accent-blue); color: #0f172a; font-weight: bold; display: inline-block; padding: 0px 5px; border-radius: 3px; position: relative; z-index: 1; }
#hierarchy-content li .toggle { display: inline-block; width: 12px; height: 12px; margin-right: 4px; text-align: center; line-height: 11px; cursor: pointer; font-size: 10px; border: 1px solid #475569; border-radius: 3px; vertical-align: middle; transition: transform 0.1s ease-out; background-color: var(--bg-dark); position: relative; z-index: 2; }
#hierarchy-content li .toggle.empty { border: 1px solid transparent; cursor: default; background: none; }
#hierarchy-content li .toggle.empty::before { content: ''; }
#hierarchy-content li .toggle::before { content: '+'; display: block; color: #94a3b8; }
#hierarchy-content li .toggle.expanded::before { content: '-'; }
#hierarchy-content li .hierarchy-item-content { display: inline-block; vertical-align: middle; }
#hierarchy-content li .hierarchy-item-content .icon { margin-right: 4px; font-size: 12px; display: inline-block; width: 14px; text-align: center; vertical-align: middle; }
#hierarchy-content ul ul { padding-left: 0; margin: 2px 0 0 0; }
#hierarchy-content li > ul { display: none; }
#hierarchy-content li.expanded > ul { display: block; }

#properties-content .prop-row { display: flex; justify-content: space-between; margin-bottom: 8px; align-items: center; flex-wrap: wrap; gap: 8px; }
#properties-content .prop-label { color: #94a3b8; min-width: 70px; flex-shrink: 0; font-size: 13px; }
#properties-content .prop-input-container { display: flex; gap: 4px; flex-grow: 1; min-width: 150px; justify-content: flex-end; }
#properties-content input[type="number"] { width: 60px; background-color: var(--bg-dark); color: #e2e8f0; border: 1px solid #334155; padding: 4px 6px; border-radius: 4px; text-align: right; font-size: 13px; -moz-appearance: textfield; outline: none; transition: border-color 0.2s ease, box-shadow 0.2s ease; }
#properties-content input[type="number"]::-webkit-outer-spin-button, #properties-content input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
#properties-content input[type="number"]:focus { border-color: var(--accent-blue); box-shadow: 0 0 0 1px var(--accent-blue); }
#properties-content input[type="text"] { flex-grow: 1; background-color: var(--bg-dark); color: #e2e8f0; border: 1px solid #334155; padding: 4px 6px; border-radius: 4px; font-size: 13px; outline: none; transition: border-color 0.2s ease, box-shadow 0.2s ease; }
#properties-content input[type="text"]:focus { border-color: var(--accent-blue); box-shadow: 0 0 0 1px var(--accent-blue); }
#properties-content input[type="checkbox"] { cursor: pointer; margin-left: 5px; width: 14px; height: 14px; accent-color: var(--accent-blue); }
#properties-content .prop-read-only { color: #a855f7; font-family: monospace; word-break: break-all; flex-grow: 1; text-align: right; cursor: help; font-size: 12px; }
#properties-content .skeleton-helper-row .prop-input-container { justify-content: flex-start; }
#properties-content .prop-input-container label { margin-right: 3px; font-size: 11px; color: #64748b; }
#properties-content .prop-input-container > div { display: flex; align-items: center; margin-right: 4px; }
#properties-content .prop-input-container > div:last-child { margin-right: 0; }
#properties-content .prop-input-container input[type="number"] { width: 55px; padding: 4px; }

#animations-list { padding: 0; margin: 0; list-style: none; }
#animations-list li { padding: 6px 10px; cursor: pointer; transition: background-color 0.2s ease; border-radius: 4px; margin-bottom: 4px; font-size: 13px; outline: none; border: 1px solid transparent; }
#animations-list li:focus-visible { border-color: var(--accent-blue); }
#animations-list li:hover { background: #004400; }
#animations-list li.active { background-color: var(--accent-blue); color: #0f172a; font-weight: 600; }

#playback-frame-display { color: #94a3b8; font-size: 11px; font-family: monospace; padding: 2px 66px; white-space: nowrap; transition: opacity 0.3s ease; background-color: var(--bg-dark); border-radius: 3px; }