*{margin:0;padding:0;box-sizing:border-box}:root{--primary-color: #667eea;--primary-dark: #5568d3;--secondary-color: #764ba2;--success-color: #10b981;--error-color: #ef4444;--warning-color: #f59e0b;--text-primary: #1f2937;--text-secondary: #6b7280;--bg-light: #f9fafb;--border-color: #e5e7eb;--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, .05);--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -1px rgba(0, 0, 0, .06);--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -2px rgba(0, 0, 0, .05);--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, .1), 0 10px 10px -5px rgba(0, 0, 0, .04)}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;background:linear-gradient(135deg,#667eea,#764ba2,#f093fb);background-attachment:fixed;min-height:100vh;padding:12px 12px 80px;line-height:1.5;color:var(--text-primary);display:flex;flex-direction:column}.container{max-width:1400px;margin:0 auto}h1{color:#fff;text-align:center;margin-bottom:16px;font-size:clamp(1.5rem,4vw,2.2rem);font-weight:700;text-shadow:0 4px 12px rgba(0,0,0,.3);letter-spacing:-.5px}.status{background:#fff;padding:10px 16px;border-radius:8px;margin-bottom:12px;box-shadow:var(--shadow-md);display:flex;align-items:center;gap:8px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.2);transition:transform .2s,box-shadow .2s}.status:hover{transform:translateY(-2px);box-shadow:var(--shadow-xl)}.status-indicator{width:14px;height:14px;border-radius:50%;display:inline-block;flex-shrink:0;position:relative}.status-indicator.connected{background-color:var(--success-color);box-shadow:0 0 0 4px #10b98133,0 0 20px #10b98166;animation:pulse-glow 2s ease-in-out infinite}.status-indicator.disconnected{background-color:var(--error-color);box-shadow:0 0 0 4px #ef444433}#statusText{font-weight:500;color:var(--text-primary);font-size:13px}#clientsContainer{margin-bottom:40px}.clients-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px}.client-card{background:#fff;border-radius:10px;padding:14px;box-shadow:var(--shadow-md);transition:all .3s cubic-bezier(.4,0,.2,1);border:1px solid var(--border-color);position:relative;overflow:hidden}.client-card:before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,var(--primary-color),var(--secondary-color));transform:scaleX(0);transform-origin:left;transition:transform .3s ease}.client-card:hover{transform:translateY(-8px);box-shadow:var(--shadow-xl)}.client-card:hover:before{transform:scaleX(1)}.client-card.client-timeout{border-left:4px solid #ff6b6b;opacity:.8}.client-card.client-timeout:before{background:linear-gradient(90deg,#ff6b6b,#ee5a6f);transform:scaleX(1)}.timeout-indicator{margin-left:8px;font-size:.85em;font-weight:500}.timeout-indicator.timeout{color:#ff6b6b}.client-name{font-size:1.2em;font-weight:700;color:var(--text-primary);margin-bottom:10px;padding-bottom:8px;border-bottom:1px solid var(--bg-light);display:flex;align-items:center;gap:6px}.client-name:before{content:"📡";font-size:1.2em}.client-info{margin-top:6px;display:flex;flex-direction:column;gap:6px}.info-item{display:flex;justify-content:space-between;align-items:center;padding:6px 10px;background:var(--bg-light);border-radius:6px;transition:background .2s;flex-wrap:wrap;gap:4px}.info-item>*{flex-shrink:0}.info-item:hover{background:#f3f4f6}.info-label{font-weight:600;color:var(--text-secondary);font-size:12px;display:flex;align-items:center;gap:4px;flex-shrink:0}.info-label:before{content:"•";color:var(--primary-color);font-size:1.2em;line-height:0}.info-value{color:var(--text-primary);font-family:SF Mono,Monaco,Inconsolata,Roboto Mono,Courier New,monospace;font-size:12px;font-weight:500;flex-shrink:0}.info-location{color:var(--text-secondary);font-size:11px;font-style:italic;margin-left:4px}.ip-address{color:var(--primary-color);font-weight:700;font-size:12px}.ip-connection{color:var(--success-color);font-weight:700;font-size:12px}.empty-state{text-align:center;padding:80px 20px;background:#fff;border-radius:16px;color:var(--text-secondary);font-size:1.1em;box-shadow:var(--shadow-md);border:2px dashed var(--border-color)}.empty-state:before{content:"📡";display:block;font-size:3em;margin-bottom:16px;opacity:.5}@keyframes pulse-glow{0%,to{opacity:1;transform:scale(1)}50%{opacity:.8;transform:scale(1.1)}}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.client-card{animation:fadeIn .4s ease-out}.ws-config{background:#fff;padding:14px;border-radius:10px;margin-bottom:12px;box-shadow:var(--shadow-md);border:1px solid var(--border-color)}.ws-config h2{margin-bottom:12px;color:var(--text-primary);font-size:1.1em;font-weight:700;display:flex;align-items:center;gap:6px}.ws-config h2:before{content:"⚙️";font-size:1.2em}.ws-input-group{display:flex;gap:8px;margin-bottom:8px}.ws-input-group select{min-width:150px;max-width:250px;width:auto;flex-shrink:0;padding:8px 32px 8px 12px;border:1px solid var(--border-color);border-radius:6px;font-size:12px;font-family:SF Mono,Monaco,Inconsolata,Roboto Mono,Courier New,monospace;transition:all .2s;background:#fff;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236b7280' d='M6 9L1 4h10z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 8px center;color:var(--text-primary);cursor:pointer;appearance:none;-webkit-appearance:none;-moz-appearance:none}.ws-input-group select:focus{outline:none;border-color:var(--primary-color);box-shadow:0 0 0 3px #667eea1a}.ws-input-group select:hover{border-color:var(--primary-color)}.ws-input-group input{flex:1;padding:8px 12px;border:1px solid var(--border-color);border-radius:6px;font-size:12px;font-family:SF Mono,Monaco,Inconsolata,Roboto Mono,Courier New,monospace;transition:all .2s;background:#fff}.ws-input-group input:focus{outline:none;border-color:var(--primary-color);box-shadow:0 0 0 3px #667eea1a}.ws-input-group input::placeholder{color:var(--text-secondary);opacity:.6}.ws-input-group button{padding:8px 16px;background:linear-gradient(135deg,var(--primary-color),var(--primary-dark));color:#fff;border:none;border-radius:6px;cursor:pointer;font-size:12px;font-weight:600;transition:all .2s;box-shadow:var(--shadow-sm);white-space:nowrap}.ws-input-group button:hover:not(:disabled){background:linear-gradient(135deg,var(--primary-dark),var(--primary-color));transform:translateY(-1px);box-shadow:var(--shadow-md)}.ws-input-group button:active:not(:disabled){transform:translateY(0)}.ws-input-group button:disabled{background:#d1d5db;cursor:not-allowed;opacity:.6}.ws-hint{font-size:11px;color:var(--text-secondary);margin-top:6px;padding-left:4px}@media (max-width: 768px){body{padding:12px}h1{margin-bottom:24px;font-size:1.8rem}.clients-grid{grid-template-columns:1fr;gap:16px}.ws-input-group{flex-direction:column}.ws-input-group select{width:100%;max-width:100%}.ws-input-group button{width:100%}.status{padding:14px 18px}.client-card{padding:20px}}@media (max-width: 480px){.container{padding:0 8px}.ws-config{padding:18px}.client-card{padding:16px}.info-item{padding:10px 12px}}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:#ffffff1a;border-radius:4px}::-webkit-scrollbar-thumb{background:#ffffff4d;border-radius:4px}::-webkit-scrollbar-thumb:hover{background:#ffffff80}.page-footer{position:fixed;bottom:0;left:0;right:0;padding:12px 16px;text-align:center;background:#ffffff1a;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-top:1px solid rgba(255,255,255,.2);z-index:100;margin:0}.footer-content{color:#ffffffe6;font-size:13px}.footer-content code{background:#667eea33;padding:3px 8px;border-radius:4px;font-family:SF Mono,Monaco,Inconsolata,Roboto Mono,Courier New,monospace;font-size:12px;color:#fff;font-weight:600}.client-actions{margin-top:10px;padding-top:10px;border-top:1px solid var(--bg-light);display:flex;gap:8px}.terminal-btn{flex:1;padding:8px 16px;background:linear-gradient(135deg,var(--primary-color),var(--primary-dark));color:#fff;border:none;border-radius:6px;cursor:pointer;font-size:12px;font-weight:600;transition:all .2s;box-shadow:var(--shadow-sm)}.terminal-btn:hover{background:linear-gradient(135deg,var(--primary-dark),var(--primary-color));transform:translateY(-1px);box-shadow:var(--shadow-md)}.terminal-btn:active{transform:translateY(0)}.desktop-btn{flex:1;padding:8px 16px;background:linear-gradient(135deg,#10b981,#059669);color:#fff;border:none;border-radius:6px;cursor:pointer;font-size:12px;font-weight:600;transition:all .2s;box-shadow:var(--shadow-sm)}.desktop-btn:hover{background:linear-gradient(135deg,#059669,#10b981);transform:translateY(-1px);box-shadow:var(--shadow-md)}.desktop-btn:active{transform:translateY(0)}