:root{--tree-bg: #fff;--tree-text: #1a1a1a;--tree-accent: #0078d4;--tree-hover: #f3f4f6;--tree-indent: 1rem;--icon-size: 16px}body{font-family:Segoe UI,system-ui,sans-serif;background:#fff;color:var(--tree-text);margin:0}nav{background-color:#1b264f}#workspace{width:100%}#workspace-tabs{display:flex;width:100%;background-color:var(--tree-bg);border-bottom:1px solid #d8d7d9;box-sizing:border-box;border-left:1px solid #d8d7d9}#workspace-tabs>uui-tab-group{--uui-tab-text: #1b264f;height:70px}#content-container{display:flex;height:100vh}uui-tab-group{--uui-tab-text: white;height:60px}h1{font-size:1.25rem;color:var(--tree-accent);margin-bottom:1.5rem}#content-tree{width:340px;background-color:var(--tree-bg);height:100%}#content-tree>h1{padding-left:2rem;padding-top:1.5rem;color:var(--tree-text);font-weight:450}.tree{list-style:none;padding:0;margin:0;font-size:.95rem}.tree li{position:relative;margin:0;cursor:pointer;border-radius:4px;display:block;align-items:center}.tree li:before{content:"";display:inline-block;width:var(--icon-size);height:var(--icon-size);background-size:contain;background-repeat:no-repeat;position:absolute;left:.75rem;top:50%;transform:translateY(-50%)}.tree li.branch:before{background-image:url("data:image/svg+xml,%3Csvg width='16' height='16' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='lucide lucide-folder'%3E%3Cpath d='M3 4a2 2 0 0 1 2-2h2l1 1h5a2 2 0 0 1 2 2v1'/%3E%3Cpath d='M3 8h10a2 2 0 0 1 2 2v2a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V10a2 2 0 0 1 2-2Z'/%3E%3C/svg%3E")}.tree li.leaf:before{background-image:url("data:image/svg+xml,%3Csvg width='16' height='16' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='lucide lucide-file'%3E%3Cpath d='M14 13V4a2 2 0 0 0-2-2H6l-4 4v7a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2Z'/%3E%3C/svg%3E")}.tree ul{list-style:none;margin:0;padding-left:0;display:none}.tree li.open>ul{display:block}.node{display:flex;align-items:center;padding-left:18px}.node>p{margin-left:7px}.node:hover{background:var(--tree-hover)}.branch{margin-left:10px}.branch>ul>li:hover{background:var(--tree-hover)}.branch>ul>li{padding-left:20px}
