html, body { height: 100%; }
body { background: #f4f7fb; }
.app-shell { min-height: 100%; display: flex; flex-direction: column; }
main { flex: 1; }
.language-select { min-width: 150px; }
.card { border: 0; border-radius: 1rem; overflow: hidden; }
.card-header { background: #ffffff; }
.CodeMirror { height: 620px; font-family: Consolas, Monaco, monospace; font-size: 14px; }
.validation-box { border-radius: .75rem; padding: .65rem .8rem; line-height: 1.5; }
.validation-box.neutral { background: #f8f9fa; color: #6c757d; }
.validation-box.success { background: #eaf8ef; color: #146c43; }
.validation-box.error { background: #fff0f0; color: #b02a37; white-space: pre-wrap; }
.visual-panel { height: 680px; overflow: auto; background: #fbfcff; }
.empty-state { height: 100%; min-height: 420px; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #8795a8; gap: .75rem; }
.empty-state i { font-size: 3rem; }
.tree-node { border: 1px solid #d8e1ee; background: #fff; border-radius: .85rem; padding: .75rem; margin-bottom: .75rem; }
.tree-node-header { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.tree-node-name { font-weight: 700; color: #0d6efd; min-width: 140px; }
.tree-node-name input { font-weight: 700; }
.tree-actions { margin-left: auto; display: flex; gap: .35rem; flex-wrap: wrap; }
.tree-attrs { margin-top: .65rem; padding: .65rem; border-radius: .65rem; background: #f8faff; }
.attr-row { display: grid; grid-template-columns: 1fr 1fr auto; gap: .5rem; margin-bottom: .5rem; }
.children { margin-top: .75rem; padding-left: 1rem; border-left: 3px solid #edf2fb; }
.node-textarea { margin-top: .65rem; }
.footer { background: #fff; border-top: 1px solid #e6ebf2; }
.help-list li { margin-bottom: .35rem; }
.btn-icon { width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; }
@media (max-width: 1199.98px) {
    .CodeMirror { height: 420px; }
    .visual-panel { height: auto; min-height: 420px; }
}
@media (max-width: 575.98px) {
    .navbar .container-fluid { gap: .5rem; }
    .navbar-brand { font-size: 1rem; }
    .language-select { min-width: 120px; }
    .card-header { align-items: flex-start !important; }
    .attr-row { grid-template-columns: 1fr; }
    .tree-actions { width: 100%; margin-left: 0; }
    .btn-group { flex-wrap: wrap; }
    .CodeMirror { height: 360px; font-size: 13px; }
    .children { padding-left: .6rem; }
}