*{margin:0;padding:0;box-sizing:border-box}:root{--online-primary: #10b981;--online-secondary: #34d399;--online-accent: #d1fae5;--offline-primary: #ef4444;--offline-secondary: #f87171;--offline-accent: #fee2e2;--background: #0f172a;--card-bg: #1e293b;--text-primary: #f1f5f9;--text-secondary: #94a3b8;--border-radius: 16px;--transition: all .3s ease;--shadow: 0 10px 25px rgba(0, 0, 0, .2)}body{font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;background:var(--background);color:var(--text-primary);min-height:100vh;line-height:1.6}.app.online{background:linear-gradient(135deg,var(--background) 0%,#1a2b3c 100%)}.app.offline{background:linear-gradient(135deg,var(--background) 0%,#2b1a1a 100%)}.container{max-width:1200px;margin:0 auto;padding:2rem 1rem;min-height:100vh}.notification{position:fixed;top:2rem;right:2rem;z-index:1000;animation:slideIn .3s ease}.notification.online{background:var(--online-primary)}.notification.offline{background:var(--offline-primary)}.notification-content{display:flex;align-items:center;gap:1rem;padding:1rem 1.5rem;border-radius:var(--border-radius);color:#fff;box-shadow:var(--shadow)}.notification-icon{font-size:1.2rem}.notification-message{font-weight:600}.notification-close{background:none;border:none;color:#fff;font-size:1.2rem;cursor:pointer;padding:.25rem;border-radius:4px;transition:var(--transition)}.notification-close:hover{background:#fff3}@keyframes slideIn{0%{transform:translate(100%);opacity:0}to{transform:translate(0);opacity:1}}.header{text-align:center;margin-bottom:3rem}.header h1{font-size:3rem;background:linear-gradient(135deg,#667eea,#764ba2);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:.5rem}.header p{color:var(--text-secondary);font-size:1.2rem}.main-content{display:flex;flex-direction:column;gap:2rem}.status-card{background:var(--card-bg);padding:2.5rem;border-radius:var(--border-radius);box-shadow:var(--shadow);border:1px solid rgba(255,255,255,.1)}.status-indicator{display:flex;align-items:center;gap:2rem;margin-bottom:2rem;flex-wrap:wrap}.status-dot{position:relative;width:100px;height:100px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:2rem}.status-dot.online{background:var(--online-accent);color:var(--online-primary)}.status-dot.offline{background:var(--offline-accent);color:var(--offline-primary)}.pulse{position:absolute;width:100%;height:100%;border-radius:50%;animation:pulse 2s infinite}.status-dot.online .pulse{background:var(--online-primary)}.status-dot.offline .pulse{background:var(--offline-primary)}@keyframes pulse{0%{transform:scale(1);opacity:.8}70%{transform:scale(1.3);opacity:0}to{transform:scale(1.3);opacity:0}}.status-text h2{color:var(--text-secondary);font-size:1.2rem;margin-bottom:.5rem}.status{font-size:2.5rem;font-weight:700;text-transform:uppercase;letter-spacing:2px}.status.online{color:var(--online-primary);text-shadow:0 0 20px rgba(16,185,129,.3)}.status.offline{color:var(--offline-primary);text-shadow:0 0 20px rgba(239,68,68,.3)}.connection-details{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1rem;padding-top:2rem;border-top:1px solid rgba(255,255,255,.1)}.detail-item{display:flex;justify-content:space-between;align-items:center;padding:1rem;background:#ffffff0d;border-radius:8px}.detail-label{color:var(--text-secondary);font-weight:500}.detail-value{font-weight:600;color:var(--text-primary)}.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1.5rem}.stat-card{background:var(--card-bg);padding:1.5rem;border-radius:var(--border-radius);display:flex;align-items:center;gap:1rem;box-shadow:var(--shadow);border:1px solid rgba(255,255,255,.1);transition:var(--transition)}.stat-card:hover{transform:translateY(-5px);box-shadow:0 15px 35px #0000004d}.stat-icon{font-size:2rem}.stat-content h3{color:var(--text-secondary);font-size:.9rem;margin-bottom:.5rem;text-transform:uppercase;letter-spacing:.5px}.stat-value{font-size:1.3rem;font-weight:700}.stat-value.online{color:var(--online-primary)}.stat-value.offline{color:var(--offline-primary)}.features-section{background:var(--card-bg);padding:2.5rem;border-radius:var(--border-radius);box-shadow:var(--shadow)}.features-section h3{text-align:center;margin-bottom:2rem;font-size:1.5rem;color:var(--text-primary)}.features-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.5rem}.feature-item{display:flex;align-items:flex-start;gap:1rem;padding:1.5rem;background:#ffffff0d;border-radius:12px;transition:var(--transition)}.feature-item:hover{background:#ffffff14;transform:translate(5px)}.feature-icon{font-size:2rem;flex-shrink:0}.feature-content h4{color:var(--text-primary);margin-bottom:.5rem;font-size:1.1rem}.feature-content p{color:var(--text-secondary);font-size:.9rem;line-height:1.5}.testing-section{background:var(--card-bg);padding:2.5rem;border-radius:var(--border-radius);text-align:center;box-shadow:var(--shadow)}.testing-section h3{margin-bottom:.5rem;color:var(--text-primary)}.testing-section p{color:var(--text-secondary);margin-bottom:2rem}.test-buttons{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}.test-btn{padding:1rem 2rem;border:none;border-radius:50px;font-size:1rem;font-weight:600;cursor:pointer;transition:var(--transition);box-shadow:var(--shadow)}.offline-test{background:var(--offline-primary);color:#fff}.offline-test:hover{background:var(--offline-secondary);transform:translateY(-2px)}.online-test{background:var(--online-primary);color:#fff}.online-test:hover{background:var(--online-secondary);transform:translateY(-2px)}.instructions{background:var(--card-bg);padding:2.5rem;border-radius:var(--border-radius);box-shadow:var(--shadow)}.instructions h3{text-align:center;margin-bottom:2rem;font-size:1.5rem;color:var(--text-primary)}.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1.5rem}.step{display:flex;align-items:flex-start;gap:1rem;padding:1.5rem;background:#ffffff0d;border-radius:12px}.step-number{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;flex-shrink:0}.step p{color:var(--text-secondary);line-height:1.5}.footer{margin-top:3rem;padding-top:2rem;border-top:1px solid rgba(255,255,255,.1)}.footer-content{text-align:center;color:var(--text-secondary)}.footer-content p{margin-bottom:.5rem}.footer-note{font-size:.9rem;opacity:.7}@media (max-width: 768px){.container{padding:1rem}.header h1{font-size:2.5rem}.status-indicator{flex-direction:column;text-align:center;gap:1rem}.status{font-size:2rem}.connection-details,.stats-grid,.features-grid{grid-template-columns:1fr}.test-buttons{flex-direction:column;align-items:center}.test-btn{width:200px}.notification{right:1rem;left:1rem}}@media (max-width: 480px){.header h1{font-size:2rem}.status-card,.features-section,.testing-section,.instructions{padding:1.5rem}.status-dot{width:80px;height:80px}.status{font-size:1.8rem}.steps{grid-template-columns:1fr}}:root{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400}body{margin:0;min-width:320px;min-height:100vh}#root{width:100%}