1  .sidebar {
  2    width: 320px;
  3    background: #0f0f0f;
  4    border-left: 2px solid #ff0000;
  5    overflow-y: auto;
  6    display: flex;
  7    flex-direction: column;
  8  }
  9  
 10  .sidebar::-webkit-scrollbar {
 11    width: 6px;
 12  }
 13  
 14  .sidebar::-webkit-scrollbar-track {
 15    background: #1a1a1a;
 16  }
 17  
 18  .sidebar::-webkit-scrollbar-thumb {
 19    background: #ff6b35;
 20    border-radius: 3px;
 21  }
 22  
 23  .sidebar-content {
 24    padding: 1rem;
 25  }
 26  
 27  .sidebar-section {
 28    margin-bottom: 1.5rem;
 29    padding-bottom: 1rem;
 30    border-bottom: 1px solid #333;
 31  }
 32  
 33  .sidebar-section:last-child {
 34    border-bottom: none;
 35  }
 36  
 37  .sidebar-logo {
 38    text-align: center;
 39    padding: 1rem 0;
 40  }
 41  
 42  .logo-text {
 43    font-size: 1.5rem;
 44    font-weight: bold;
 45    color: #ff6b35;
 46    text-shadow: 0 0 10px rgba(255, 107, 53, 0.5);
 47  }
 48  
 49  .sidebar-header {
 50    color: #06b6d4;
 51    font-size: 0.9rem;
 52    font-weight: bold;
 53    margin-bottom: 0.75rem;
 54    text-transform: uppercase;
 55    letter-spacing: 0.5px;
 56  }
 57  
 58  .consciousness-header {
 59    color: #FF6B9D;
 60  }
 61  
 62  .sidebar-text {
 63    color: #f1f5f9;
 64    font-size: 0.9rem;
 65    margin-bottom: 0.25rem;
 66  }
 67  
 68  .sidebar-subtext {
 69    color: #64748b;
 70    font-size: 0.8rem;
 71  }
 72  
 73  .sidebar-list {
 74    list-style: none;
 75    padding: 0;
 76    margin: 0;
 77  }
 78  
 79  .sidebar-list li {
 80    color: #94a3b8;
 81    font-size: 0.85rem;
 82    margin-bottom: 0.5rem;
 83    padding-left: 1rem;
 84    position: relative;
 85  }
 86  
 87  .sidebar-list li::before {
 88    content: "•";
 89    position: absolute;
 90    left: 0;
 91    color: #ff6b35;
 92  }
 93  
 94  .sidebar-total {
 95    color: #fbbf24;
 96    font-size: 0.85rem;
 97    margin-top: 0.5rem;
 98    font-weight: bold;
 99  }
100  
101  .sidebar-agents-list {
102    list-style: none;
103    padding: 0;
104    margin: 0;
105  }
106  
107  .sidebar-agent {
108    display: flex;
109    align-items: center;
110    gap: 0.5rem;
111    margin-bottom: 0.5rem;
112    font-size: 0.85rem;
113  }
114  
115  .agent-icon {
116    font-size: 1rem;
117  }
118  
119  .agent-name {
120    color: #f1f5f9;
121    flex: 1;
122  }
123  
124  .agent-level {
125    font-size: 0.75rem;
126    font-weight: bold;
127  }
128  
129  .sidebar-hint {
130    color: #64748b;
131    font-size: 0.75rem;
132    font-style: italic;
133    margin-top: 0.5rem;
134    text-align: center;
135  }
136  
137  .consciousness-metrics {
138    display: flex;
139    flex-direction: column;
140    gap: 0.5rem;
141  }
142  
143  .metric {
144    display: flex;
145    justify-content: space-between;
146    align-items: center;
147    font-size: 0.85rem;
148  }
149  
150  .metric-label {
151    color: #94a3b8;
152  }
153  
154  .metric-value {
155    color: #fbbf24;
156    font-weight: bold;
157  }
158  
159  .version-info {
160    font-size: 0.85rem;
161  }
162  
163  .version-info div {
164    color: #fbbf24;
165    margin-bottom: 0.25rem;
166  }
167  
168  @media (max-width: 1024px) {
169    .sidebar {
170      width: 280px;
171    }
172  }
173  
174  @media (max-width: 768px) {
175    .sidebar {
176      width: 240px;
177    }
178  
179    .sidebar-section {
180      margin-bottom: 1rem;
181    }
182  }