1  * {
  2    margin: 0;
  3    padding: 0;
  4    box-sizing: border-box;
  5  }
  6  
  7  body {
  8    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  9    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
 10    min-height: 100vh;
 11    padding: 2rem;
 12    color: #333;
 13  }
 14  
 15  .container {
 16    max-width: 1200px;
 17    margin: 0 auto;
 18  }
 19  
 20  header {
 21    text-align: center;
 22    margin-bottom: 2rem;
 23    color: white;
 24  }
 25  
 26  h1 {
 27    font-size: 2.5rem;
 28    font-weight: 800;
 29    margin-bottom: 0.5rem;
 30    text-shadow: 2px 2px 4px rgba(0,0,0,0.2);
 31  }
 32  
 33  .subtitle {
 34    font-size: 1.1rem;
 35    opacity: 0.9;
 36  }
 37  
 38  .peer-info {
 39    background: white;
 40    padding: 1.5rem;
 41    border-radius: 12px;
 42    margin-bottom: 1.5rem;
 43    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
 44  }
 45  
 46  .peer-id {
 47    font-family: 'Monaco', monospace;
 48    font-size: 0.875rem;
 49    color: #667eea;
 50    word-break: break-all;
 51    margin-top: 0.5rem;
 52  }
 53  
 54  .grid {
 55    display: grid;
 56    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
 57    gap: 1.5rem;
 58    margin-bottom: 1.5rem;
 59  }
 60  
 61  .panel {
 62    background: white;
 63    padding: 1.5rem;
 64    border-radius: 12px;
 65    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
 66  }
 67  
 68  .panel h2 {
 69    font-size: 1.25rem;
 70    margin-bottom: 1rem;
 71    color: #333;
 72  }
 73  
 74  .button-group {
 75    display: flex;
 76    gap: 0.5rem;
 77    flex-wrap: wrap;
 78    margin-bottom: 1rem;
 79  }
 80  
 81  button {
 82    padding: 0.5rem 1rem;
 83    border: none;
 84    border-radius: 6px;
 85    font-size: 0.875rem;
 86    font-weight: 600;
 87    cursor: pointer;
 88    transition: all 0.2s;
 89    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
 90    color: white;
 91    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
 92  }
 93  
 94  button:hover {
 95    transform: translateY(-2px);
 96    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
 97  }
 98  
 99  button:active {
100    transform: translateY(0);
101  }
102  
103  .stats {
104    display: grid;
105    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
106    gap: 0.75rem;
107  }
108  
109  .stat {
110    text-align: center;
111    padding: 0.75rem;
112    background: #f7fafc;
113    border-radius: 6px;
114  }
115  
116  .stat-value {
117    font-size: 1.5rem;
118    font-weight: 700;
119    color: #667eea;
120  }
121  
122  .stat-label {
123    font-size: 0.7rem;
124    color: #666;
125    text-transform: uppercase;
126    letter-spacing: 0.05em;
127    margin-top: 0.25rem;
128  }
129  
130  .output {
131    background: #f7fafc;
132    border: 1px solid #e2e8f0;
133    border-radius: 8px;
134    padding: 1rem;
135    font-family: 'Monaco', 'Courier New', monospace;
136    font-size: 0.8rem;
137    max-height: 400px;
138    overflow-y: auto;
139    white-space: pre-wrap;
140    word-break: break-all;
141  }
142  
143  .log-entry {
144    margin-bottom: 0.5rem;
145    padding: 0.5rem;
146    border-left: 3px solid #667eea;
147    background: white;
148  }
149  
150  .timestamp {
151    color: #999;
152    font-size: 0.7rem;
153  }
154  
155  .success { color: #10b981; }
156  .error { color: #ef4444; }
157  .info { color: #3b82f6; }
158  .warning { color: #f59e0b; }