.tree-wrapper { position: relative; height: calc(100vh - 200px); display: flex; flex-direction: column; }
.tree-toolbar { background-color: #fff; border-bottom: 1px solid #ddd; padding: 16px; display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; }
.toolbar-left, .toolbar-right { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.toolbar-label { font-weight: 600; color: #444; }
.toolbar-select { padding: 8px 16px; border: 1px solid #ddd; border-radius: 8px; font-size: 16px; background-color: #fff; cursor: pointer; }
.toolbar-btn { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 8px; border: 1px solid #ddd; background-color: #fff; cursor: pointer; transition: all 0.3s; color: #D9710F; }
.toolbar-btn:hover { background-color: #EDE5DA; border-color: #D9710F; }

.tree-container { flex: 1; position: relative; background-color: #F8F8F8; overflow: hidden; }
.tree-container svg { display: block; width: 100%; height: 100%; }

.person-info-panel { position: fixed; right: -350px; top: 0; width: 350px; height: 100%; background-color: #fff; box-shadow: -2px 0 8px rgba(0,0,0,0.15); transition: right 0.3s; z-index: 100; overflow-y: auto; border-left: 3px solid #D9710F; }
.person-info-panel.active { right: 0; }
.panel-close { position: absolute; top: 16px; right: 16px; width: 32px; height: 32px; background: none; border: none; font-size: 24px; color: #444; cursor: pointer; }
.panel-close:hover { color: #D9710F; }
.panel-content { padding: 24px; }

@media (max-width: 768px) {
    .tree-toolbar { gap: 8px; padding: 8px; }
    .toolbar-label { display: none; }
    .toolbar-select { flex: 1; min-width: 100px; }
    .person-info-panel { width: 100%; right: -100%; }
}

/* ===== DARK MODE ===== */
[data-theme="dark"] .tree-toolbar { background-color: #222; border-bottom-color: #444; }
[data-theme="dark"] .toolbar-label { color: #ccc; }
[data-theme="dark"] .toolbar-select { background-color: #2a2a2a; border-color: #444; color: #ddd; }
[data-theme="dark"] .toolbar-btn { background-color: #2a2a2a; border-color: #444; color: #e8a04c; }
[data-theme="dark"] .toolbar-btn:hover { background-color: #333; border-color: #e8a04c; }
[data-theme="dark"] .tree-container { background-color: #1a1a1a; }
[data-theme="dark"] .person-info-panel { background-color: #222; box-shadow: -2px 0 8px rgba(0,0,0,0.5); border-left-color: #e8a04c; color: #ddd; }
[data-theme="dark"] .panel-close { color: #ccc; }
[data-theme="dark"] .panel-close:hover { color: #e8a04c; }