html, body { height: 100%; margin: 0; font-family: system-ui, sans-serif; overflow: hidden; }
#header { padding: 15px 20px; background: #f5f5f5; border-bottom: 2px solid #ddd; display: grid; grid-template-columns: 1fr auto; gap: 20px; }
#header-left { display: flex; flex-direction: column; }
#header h1 { margin: 0 0 8px 0; font-size: 22px; }
#header .columns { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
#header p { margin: 4px 0; line-height: 1.4; font-size: 13px; }
#header ul { margin: 4px 0; padding-left: 18px; line-height: 1.4; font-size: 13px; }
#header a { color: #0066cc; }
#charts-container { display: flex; flex-direction: column; gap: 8px; position: relative; align-items: flex-end; }
.mini-chart { height: 80px; }
.mini-chart text { font-size: 10px; fill: #666; }
.mini-chart rect { cursor: crosshair; }
#chart-tooltip { position: fixed; background: rgba(0,0,0,0.8); color: white; padding: 5px 8px; border-radius: 3px; font-size: 11px; pointer-events: none; display: none; white-space: nowrap; z-index: 1000; }
#scrollbar-container { height: 20px; overflow-x: scroll; overflow-y: hidden; }
#scrollbar-content { height: 1px; }
#chart { height: calc(100% - 40px); overflow-x: scroll; overflow-y: hidden; padding-bottom: 15px; box-sizing: border-box; }
#chart::-webkit-scrollbar { height: 12px; }
#chart::-webkit-scrollbar-track { background: #f1f1f1; }
#chart::-webkit-scrollbar-thumb { background: #888; }
#chart::-webkit-scrollbar-thumb:hover { background: #555; }
.node rect { stroke-width: 1px; }
.node text { font-size: 12px; fill: #000; }
.link { fill: none; stroke-opacity: 0.6; }
.link:hover { stroke-opacity: 0.8; }