1  .App {
  2    text-align: center;
  3    min-height: 100vh;
  4    color: white;
  5  }
  6  
  7  .App-header {
  8    padding: 2rem;
  9    background: rgba(0, 0, 0, 0.1);
 10  }
 11  
 12  .App-header h1 {
 13    margin: 0 0 0.5rem 0;
 14    font-size: 2.5rem;
 15  }
 16  
 17  .App-header p {
 18    margin: 0;
 19    opacity: 0.9;
 20    font-size: 1.1rem;
 21  }
 22  
 23  .App-main {
 24    padding: 2rem;
 25  }
 26  
 27  .container {
 28    max-width: 1200px;
 29    margin: 0 auto;
 30    display: grid;
 31    grid-template-columns: 1fr 1fr;
 32    gap: 2rem;
 33  }
 34  
 35  .section {
 36    background: rgba(255, 255, 255, 0.1);
 37    border-radius: 15px;
 38    padding: 1.5rem;
 39    backdrop-filter: blur(10px);
 40    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
 41    border: 1px solid rgba(255, 255, 255, 0.2);
 42  }
 43  
 44  .card {
 45    background: rgba(255, 255, 255, 0.05);
 46    border-radius: 10px;
 47    padding: 1rem;
 48    margin: 1rem 0;
 49    border: 1px solid rgba(255, 255, 255, 0.1);
 50  }
 51  
 52  .button {
 53    background: linear-gradient(45deg, #667eea, #764ba2);
 54    color: white;
 55    border: none;
 56    padding: 0.75rem 1.5rem;
 57    border-radius: 8px;
 58    cursor: pointer;
 59    font-size: 1rem;
 60    font-weight: 600;
 61    transition: transform 0.2s;
 62    margin: 0.5rem;
 63  }
 64  
 65  .button:hover {
 66    transform: translateY(-2px);
 67  }
 68  
 69  .button:disabled {
 70    opacity: 0.5;
 71    cursor: not-allowed;
 72    transform: none;
 73  }
 74  
 75  .input {
 76    width: 100%;
 77    padding: 0.75rem;
 78    border: 1px solid rgba(255, 255, 255, 0.3);
 79    border-radius: 8px;
 80    background: rgba(255, 255, 255, 0.1);
 81    color: white;
 82    font-size: 1rem;
 83    margin: 0.5rem 0;
 84  }
 85  
 86  .input::placeholder {
 87    color: rgba(255, 255, 255, 0.7);
 88  }
 89  
 90  .textarea {
 91    min-height: 120px;
 92    resize: vertical;
 93    font-family: 'Courier New', monospace;
 94  }
 95  
 96  .success {
 97    color: #4ade80;
 98    font-weight: 600;
 99  }
100  
101  .error {
102    color: #f87171;
103    font-weight: 600;
104  }
105  
106  .loading {
107    color: #fbbf24;
108    font-weight: 600;
109  }
110  
111  .token-display {
112    background: rgba(0, 0, 0, 0.2);
113    padding: 1rem;
114    border-radius: 8px;
115    word-break: break-all;
116    font-family: 'Courier New', monospace;
117    font-size: 0.9rem;
118    margin: 1rem 0;
119  }
120  
121  .json-display {
122    background: rgba(0, 0, 0, 0.3);
123    padding: 1rem;
124    border-radius: 8px;
125    text-align: left;
126    font-family: 'Courier New', monospace;
127    font-size: 0.85rem;
128    overflow-x: auto;
129    white-space: pre-wrap;
130  }
131  
132  /* HomePage styles */
133  .home-container {
134    max-width: 1200px;
135    margin: 0 auto;
136  }
137  
138  .apps-grid {
139    display: grid;
140    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
141    gap: 2rem;
142    padding: 1rem;
143  }
144  
145  .app-card {
146    background: rgba(255, 255, 255, 0.1);
147    border-radius: 15px;
148    padding: 2rem;
149    backdrop-filter: blur(10px);
150    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
151    border: 1px solid rgba(255, 255, 255, 0.2);
152    transition: transform 0.3s ease, box-shadow 0.3s ease;
153    text-align: center;
154  }
155  
156  .app-card:hover {
157    transform: translateY(-5px);
158    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2);
159  }
160  
161  .app-card.placeholder {
162    opacity: 0.7;
163    border-style: dashed;
164  }
165  
166  .app-card h3 {
167    margin: 0 0 1rem 0;
168    font-size: 1.5rem;
169    color: white;
170  }
171  
172  .app-card p {
173    margin: 0 0 1.5rem 0;
174    opacity: 0.9;
175    line-height: 1.5;
176  }
177  
178  .app-status {
179    margin: 1rem 0;
180  }
181  
182  .status-badge {
183    padding: 0.25rem 0.75rem;
184    border-radius: 20px;
185    font-size: 0.8rem;
186    font-weight: 600;
187    background: rgba(255, 255, 255, 0.2);
188    color: white;
189  }
190  
191  .status-badge.success {
192    background: linear-gradient(45deg, #10b981, #059669);
193  }
194  
195  .app-button {
196    width: 100%;
197    margin-top: 1rem;
198  }
199  
200  /* Navigation styles */
201  .app-header-nav {
202    margin-bottom: 1rem;
203    text-align: left;
204  }
205  
206  .back-button {
207    background: rgba(255, 255, 255, 0.2);
208    color: white;
209    border: 1px solid rgba(255, 255, 255, 0.3);
210    padding: 0.5rem 1rem;
211    font-size: 0.9rem;
212  }
213  
214  .back-button:hover {
215    background: rgba(255, 255, 255, 0.3);
216  }
217  
218  @media (max-width: 768px) {
219    .container {
220      grid-template-columns: 1fr;
221      gap: 1rem;
222    }
223    
224    .apps-grid {
225      grid-template-columns: 1fr;
226      gap: 1rem;
227      padding: 0.5rem;
228    }
229    
230    .app-card {
231      padding: 1.5rem;
232    }
233    
234    .App-header h1 {
235      font-size: 2rem;
236    }
237    
238    .App-main {
239      padding: 1rem;
240    }
241  }