/* Base Reset */
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body {
            font-family: 'Courier New', monospace;
            background: var(--bg);
            color: var(--text);
            overflow: hidden;
        }

        /* Layout */
        .container { display: flex; height: 100vh; }
        /* Sidebar */
        .sidebar { width: 280px; background: var(--tag-bg); border-right: 4px solid var(--border); display: flex; flex-direction: column; flex-shrink: 0; }
        .sidebar-header { background: var(--tag-bg);color: var(--text); padding: 20px; border-bottom: 4px solid var(--border); }
        .sidebar-header h1 { font-size: 24px; font-weight: bold; letter-spacing: 2px; }
        .tool-list { list-style: none; overflow-y: auto; flex: 1; }
        .tool-item { padding: 16px 20px; border-bottom: 3px solid var(--border); cursor: pointer; background: var(--tag-bg); color: var(--text); font-weight: bold; transition: 0.1s; display: flex; align-items: center; }
        .tool-item:hover { background: var(--bg); padding-left: 24px; }
        .tool-item.active {background: var(--text); color: var(--bg);}
        .tool-item.active::before { content: '►'; margin-right: 10px; }

        /* Main Content */
        .main-content { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
        .header { background: var(--tag-bg);border-bottom: 4px solid var(--border); padding: 20px 30px; display: flex; justify-content: space-between; align-items: center; }
        .btn { background: var(--bg); color: var(--text); border: 3px solid var(--border); padding: 10px 20px; font-family: inherit; font-weight: bold; cursor: pointer; box-shadow: 4px 4px 0 var(--border); transition: 0.1s; margin-right: 150px;}
        .btn:active { transform: translate(4px, 4px); box-shadow: none; }
        .btn:hover{background: var(--bg); color: var(--text);}

        /* Workspace & Views */
        .workspace { flex: 1; display: flex; overflow: hidden; background: var(--bg); position: relative; }
        .main-area { flex: 1; position: relative; overflow: hidden; display: flex; flex-direction: column; }
        
        /* Persistent View Containers */
        .view-section { width: 100%; height: 100%; display: none; overflow: auto; position: absolute; top: 0; left: 0;  background: var(--bg); }
        .view-section.active { display: block; }

        /* Graph View Specifics */
        #graph-view { overflow: hidden;  } /* Canvas needs no scroll */
        .upload-zone {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            border: 4px dashed var(--border);
            background: var(--tag-bg);
            color: var(--text);
            padding: 60px;
            text-align: center;
            cursor: pointer;
            z-index: 10;
        }
        .upload-zone:hover { border-color: var(--card-hover); background: var(--bg); }
        canvas { display: block;  background: var(--bg); cursor: grab; }
        canvas:active { cursor: grabbing; }

        /* UI Overlays */
        .controls { position: absolute; top: 20px; right: 20px; display: flex; gap: 10px; z-index: 20; }
        .control-btn { width: 40px; height: 40px; border: 3px solid var(--border); background: var(--bg);color: var(--text); font-size: 20px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
        .control-btn:hover { background: var(--bg); color: var(--text); }
        
        .legend { position: absolute; bottom: 20px; left: 20px; background: var(--tag-bg); border: 3px solid var(--border); padding: 15px; font-size: 12px; z-index: 20; }
        .legend-item { display: flex; align-items: center; gap: 10px; margin-bottom: 5px; }
        .legend-color { width: 15px; height: 15px; border: 1px solid var(--border); }

        /* Info Panel */
        .info-panel { width: 350px; background: var(--tag-bg); border-left: 4px solid var(--border); overflow-y: auto; color: var(--text); display: flex; flex-direction: column; }
        .panel-header { background: var(--tag-bg);color: var(--text); padding: 15px; font-weight: bold; border-bottom: 4px solid var(--border); }
        .panel-content { padding: 20px; }
        .commit-info-item { margin-bottom: 15px; }
        .commit-info-label { font-size: 11px; font-weight: bold; margin-bottom: 4px; color: var(--muted); }
        .commit-info-value { border: 2px solid var(--border); padding: 8px; background: var(--bg); font-size: 13px; word-break: break-all; }

        /* Lists (Branches, Files, History) */
        .list-container { padding: 40px; color: var(--text); max-width: 1000px; margin: 0 auto; }
        .list-item { background: var(--bg); color: var(--text); padding: 12px; border: 3px solid var(--border); margin-bottom: 10px; cursor: pointer; display: flex; justify-content: space-between; align-items: center; font-weight: bold; }
        .list-item:hover {  background: var(--tag-bg);color: var(--text);}
        .list-item.current { background: var(--tag-bg);color: var(--text);border-color: var(--border);}
        
        /* Stats Grid */
        .stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; padding: 40px; }
        .stat-box { background: var(--bg); color: var(--text); border: 4px solid var(--border); padding: 20px; text-align: center; }
        .stat-value { font-size: 36px; font-weight: bold; }

        /* Diff View */
        .diff-view-content { padding: 20px; color: var(--text); }
        .diff-file { border: 2px solid var(--border); margin-bottom: 20px; background: var(--surface); }
        .diff-header { background: var(--bg); color: var(--text); padding: 10px; font-weight: bold; }
        .diff-lines { padding: 10px; font-size: 12px; line-height: 1.4; }
        .diff-add { color: var(--diff-add-text); background: var(--diff-add-bg); display: block; }
        .diff-remove { color: var(--diff-remove); background:var(--diff-del-bg); display: block; }
        .diff-context { color: var(--muted); display: block; }
        /* Footer */
        .footer {  background: var(--tag-bg);border-top: 4px solid var(--border);color: var(--text);padding: 10px 30px;  font-size: 12px; }
        .tooltip { position: absolute; background: var(--text); color: var(--bg); border: 2px solid var(--border); padding: 5px 10px; font-size: 12px; pointer-events: none; display: none; z-index: 1000; }

        .tool-footer {
            padding: 12px 30px;
            background: var(--tag-bg);
            border-top: 2px solid var(--border);
            text-align: center;
        }

        .back-home-btn {
            display: inline-block;
            padding: 8px 16px;
            border: 2px solid var(--border);
            background: var(--bg);
            color: var(--text);
            text-decoration: none;
            font-weight: bold;
            transition: 0.2s;
        }

        .back-home-btn:hover {
            background: var(--text);
            color: var(--bg);
        }

        #themeBtn{
            top: 20px;
        }