1  @font-face {
  2      font-family: 'Inter';
  3      src: url('/Inter-Regular.woff2') format('woff2'),
  4          url('/Inter-Regular.woff') format('woff');
  5      font-weight: normal;
  6      font-style: normal;
  7      font-display: swap;
  8  }
  9  
 10  
 11  * {
 12      margin: 0;
 13      padding: 0;
 14      box-sizing: border-box;
 15      font-family: 'Inter';
 16  }
 17  
 18  :root {
 19      background: #171721;
 20  }
 21  
 22  body {
 23      background: #0f0f13;
 24      color: #e1e1e3;
 25      padding: 2rem;
 26      min-height: 100vh;
 27      background: linear-gradient(135deg, #0f0f13 0%, #171721 100%);
 28  }
 29  
 30  .scroll-locked {
 31      overflow: hidden;
 32      position: fixed;
 33      width: 100%;
 34      height: 100%;
 35  }
 36  
 37  h1 {
 38      text-align: center;
 39      margin-bottom: 2rem;
 40      font-size: 2.5rem;
 41      background: linear-gradient(45deg, #4ade80, #3b82f6);
 42      -webkit-background-clip: text;
 43      background-clip: text;
 44      -webkit-text-fill-color: transparent;
 45      text-shadow: 0 0 30px rgba(74, 222, 128, 0.2);
 46  }
 47  
 48  .dashboard {
 49      max-width: 1200px;
 50      margin: 0 auto;
 51  }
 52  
 53  .tabs {
 54      display: flex;
 55      margin-bottom: 1rem;
 56      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
 57      padding-bottom: 1px;
 58      overflow-x: auto;
 59  }
 60  
 61  a,
 62  a:visited,
 63  a:hover,
 64  a:active {
 65      color: inherit;
 66  }
 67  
 68  .tab {
 69      text-decoration: none;
 70      padding: 0.8rem 1.5rem;
 71      cursor: pointer;
 72      opacity: 0.7;
 73      transition: all 0.3s ease;
 74      border-bottom: 2px solid transparent;
 75  }
 76  
 77  .tab.active {
 78      opacity: 1;
 79      border-bottom: 2px solid #4ade80;
 80      font-weight: 600;
 81  }
 82  
 83  @keyframes fadeIn {
 84      from {
 85          opacity: 0;
 86      }
 87  
 88      to {
 89          opacity: 1;
 90      }
 91  }
 92  
 93  .two-columns {
 94      display: grid;
 95      grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
 96      gap: 1rem;
 97  }
 98  
 99  @media (max-width: 768px) {
100      .two-columns {
101          display: block;
102      }
103  }
104  
105  
106  .card {
107      background: rgba(255, 255, 255, 0.03);
108      border-radius: 15px;
109      padding: 1.5rem;
110      backdrop-filter: blur(10px);
111      margin-bottom: 1rem;
112      border: 1px solid rgba(255, 255, 255, 0.05);
113      box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
114      transition: all 0.3s ease;
115  }
116  
117  .card:hover {
118      border-color: rgba(255, 255, 255, 0.1);
119      box-shadow: 0 8px 32px 0 rgba(74, 222, 128, 0.1);
120  }
121  
122  .card-title {
123      font-size: 1.2rem;
124      margin-bottom: 0.5rem;
125      color: #e1e1e3;
126      opacity: 0.8;
127  }
128  
129  .usage {
130      font-size: 1.5rem;
131      font-weight: 600;
132      display: block;
133      color: #4ade80;
134      text-shadow: 0 0 20px rgba(74, 222, 128, 0.3);
135  }
136  
137  .core-grid {
138      display: grid;
139      grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
140      gap: 1rem;
141      margin-top: 2rem;
142  }
143  
144  .core-item {
145      background: rgba(255, 255, 255, 0.02);
146      padding: 1.2rem;
147      border-radius: 10px;
148      text-align: center;
149      border: 1px solid rgba(255, 255, 255, 0.03);
150      transition: all 0.2s ease;
151  }
152  
153  .core-item:hover {
154      background: rgba(255, 255, 255, 0.04);
155      border-color: rgba(255, 255, 255, 0.08);
156  }
157  
158  .core-value {
159      font-size: 1.5rem;
160      font-weight: 600;
161      color: #3b82f6;
162      text-shadow: 0 0 20px rgba(59, 130, 246, 0.3);
163  }
164  
165  .info-grid-0 {
166      display: grid;
167      grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
168      gap: 1rem;
169  }
170  
171  .info-grid-1 {
172      display: grid;
173      grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
174      gap: 1rem;
175  }
176  
177  @media (max-width: 768px) {
178      .info-grid-1 {
179          display: block;
180      }
181  }
182  
183  .info-item {
184      display: flex;
185      justify-content: space-between;
186      padding: 0.8rem;
187      border-radius: 8px;
188      background: rgba(255, 255, 255, 0.02);
189      margin-bottom: 0.8rem;
190  }
191  
192  .info-label {
193      opacity: 0.8;
194  }
195  
196  .info-value {
197      font-weight: 600;
198      color: #3b82f6;
199  }
200  
201  .bar {
202      height: 8px;
203      width: 100%;
204      background: rgba(255, 255, 255, 0.1);
205      border-radius: 4px;
206      margin: 0.8rem 0 1.5rem;
207      overflow: hidden;
208  }
209  
210  .bar-fill {
211      height: 100%;
212      background: linear-gradient(90deg, #3b82f6, #4ade80);
213      border-radius: 4px;
214      transition: width 0.5s ease;
215  }
216  
217  /* Add style for load average section */
218  .load-average {
219      display: flex;
220      justify-content: space-between;
221      margin-top: 1rem;
222      gap: 1rem;
223  }
224  
225  .load-item {
226      background: rgba(255, 255, 255, 0.03);
227      border-radius: 10px;
228      padding: 1rem;
229      text-align: center;
230      flex: 1;
231      transition: all 0.2s ease;
232  }
233  
234  @media (max-width: 768px) {
235      .load-average {
236          gap: 0.3rem;
237      }
238  
239      .load-item {
240          padding-left: 0.2rem;
241          padding-right: 0.2rem;
242      }
243  }
244  
245  .load-item:hover {
246      background: rgba(255, 255, 255, 0.05);
247  }
248  
249  .load-label {
250      font-size: 0.9rem;
251      opacity: 0.8;
252  }
253  
254  .load-value {
255      font-size: 1.5rem;
256      font-weight: 600;
257      color: #3b82f6;
258      display: block;
259      margin-top: 0.5rem;
260  }
261  
262  .uptime-value {
263      font-size: 1.2rem;
264      font-weight: 600;
265      color: #4ade80;
266      text-align: center;
267      margin: 1rem 0;
268  }
269  
270  .section-title {
271      font-size: 1.5rem;
272      margin: 2rem 0 1rem;
273      opacity: 0.9;
274      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
275      padding-bottom: 0.5rem;
276  }
277  
278  @keyframes pulse {
279      0% {
280          opacity: 1;
281      }
282  
283      50% {
284          opacity: 0.5;
285      }
286  
287      100% {
288          opacity: 1;
289      }
290  }
291  
292  .status {
293      text-align: center;
294      color: #4ade80;
295      font-size: 0.9rem;
296      margin-top: 1rem;
297      animation: pulse 2s infinite;
298      text-shadow: 0 0 10px rgba(74, 222, 128, 0.3);
299  }
300  
301  .chart-card {
302      background: rgba(255, 255, 255, 0.03);
303      border-radius: 15px;
304      padding: 1.5rem;
305      backdrop-filter: blur(10px);
306      margin: 1rem 0;
307      border: 1px solid rgba(255, 255, 255, 0.05);
308      box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
309  }
310  
311  .chart-controls {
312      margin-bottom: 1rem;
313      display: flex;
314      gap: 1rem;
315      flex-wrap: wrap;
316  }
317  
318  .chart-controls label {
319      display: flex;
320      align-items: center;
321      gap: 0.5rem;
322      cursor: pointer;
323  }
324  
325  .chart-controls input[type="checkbox"] {
326      cursor: pointer;
327  }
328  
329  #coreToggles {
330      display: flex;
331      gap: 1rem;
332      flex-wrap: wrap;
333  }
334  
335  .switch {
336      position: relative;
337      display: inline-block;
338      width: 46px;
339      height: 24px;
340  }
341  
342  .switch input {
343      opacity: 0;
344      width: 0;
345      height: 0;
346  }
347  
348  .slider {
349      position: absolute;
350      cursor: pointer;
351      top: 0;
352      left: 0;
353      right: 0;
354      bottom: 0;
355      background-color: rgba(255, 255, 255, 0.1);
356      transition: .4s;
357      border-radius: 24px;
358  }
359  
360  .slider:before {
361      position: absolute;
362      content: "";
363      height: 18px;
364      width: 18px;
365      left: 3px;
366      bottom: 3px;
367      background-color: #e1e1e3;
368      transition: .4s;
369      border-radius: 50%;
370  }
371  
372  input:checked+.slider {
373      background-color: #4ade80;
374  }
375  
376  input:checked+.slider:before {
377      transform: translateX(22px);
378  }
379  
380  .chart-controls {
381      background: rgba(255, 255, 255, 0.03);
382      padding: 1rem;
383      border-radius: 10px;
384      margin-bottom: 1.5rem;
385  }
386  
387  .chart-controls select {
388      background: rgba(255, 255, 255, 0.05);
389      border: 1px solid rgba(255, 255, 255, 0.1);
390      color: #e1e1e3;
391      padding: 10px 15px;
392      border-radius: 8px;
393      font-size: 0.9rem;
394      outline: none;
395      transition: all 0.3s ease;
396      backdrop-filter: blur(5px);
397      width: 100%;
398      max-width: 300px;
399      appearance: none;
400      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23e1e1e3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
401      background-repeat: no-repeat;
402      background-position: right 10px center;
403      background-size: 16px;
404      padding-right: 40px;
405  }
406  
407  .chart-controls select:focus {
408      border-color: rgba(74, 222, 128, 0.5);
409      box-shadow: 0 0 0 2px rgba(74, 222, 128, 0.2);
410  }
411  
412  .chart-controls select:hover {
413      background-color: rgba(255, 255, 255, 0.08);
414  }
415  
416  .network-interface,
417  .disk-item {
418      background: rgba(255, 255, 255, 0.02);
419      border-radius: 10px;
420      padding: 1rem;
421      margin-bottom: 1rem;
422      border: 1px solid rgba(255, 255, 255, 0.03);
423      transition: all 0.2s ease;
424  }
425  
426  .network-interface:hover,
427  .disk-item:hover {
428      background: rgba(255, 255, 255, 0.04);
429      border-color: rgba(255, 255, 255, 0.08);
430  }
431  
432  .highlight-value {
433      font-size: 1.5rem;
434      font-weight: 600;
435      color: #4ade80;
436      display: block;
437      margin: 0.5rem 0;
438      text-shadow: 0 0 10px rgba(74, 222, 128, 0.2);
439  }
440  
441  
442  .loading {
443      color: #d1d4dc;
444      text-align: center;
445      padding: 40px;
446      display: flex;
447      flex-direction: column;
448      align-items: center;
449      justify-content: center;
450  }
451  
452  .spinner {
453      width: 50px;
454      height: 50px;
455      border: 4px solid rgba(255, 255, 255, 0.1);
456      border-radius: 50%;
457      border-top: 4px solid #2196F3;
458      animation: spin 1s linear infinite;
459      margin-bottom: 16px;
460  }
461  
462  @keyframes spin {
463      0% {
464          transform: rotate(0deg);
465      }
466  
467      100% {
468          transform: rotate(360deg);
469      }
470  }
471  
472  .error-container {
473      color: #f88;
474      text-align: center;
475      padding: 40px;
476      background: rgba(50, 0, 0, 0.2);
477      border-radius: 8px;
478      margin: 20px 0;
479      border: 1px solid rgba(255, 100, 100, 0.3);
480  }
481  
482  .error-container p:first-of-type {
483      font-size: 20px;
484      font-weight: 500;
485      margin-bottom: 8px;
486  }
487  
488  .retry-button {
489      margin-top: 20px;
490      padding: 8px 16px;
491      background-color: #2196F3;
492      color: white;
493      border: none;
494      border-radius: 4px;
495      cursor: pointer;
496      font-size: 14px;
497      transition: background-color 0.2s;
498  }
499  
500  .retry-button:hover {
501      background-color: #0d8aee;
502  }
503  
504  .no-data {
505      color: #d1d4dc;
506      text-align: center;
507      padding: 40px;
508      background: rgba(0, 0, 0, 0.2);
509      border-radius: 8px;
510      margin: 20px 0;
511  }
512  
513  .no-data p {
514      margin: 8px 0;
515  }
516  
517  .no-data p:first-child {
518      font-size: 18px;
519      font-weight: 500;
520  }