:root{color-scheme:light}*{box-sizing:border-box}html,body,#root{margin:0;min-height:100%}body{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background:#f8fafc;color:#334155;line-height:1.6}.app-shell{min-height:100vh}.main-content{max-width:1400px;margin:0 auto;padding:2rem}.header{background:#fff;padding:1rem 2rem;border-bottom:1px solid #e2e8f0;display:flex;justify-content:space-between;align-items:center;border-radius:.75rem;box-shadow:0 1px 3px #00000014}.header h1{font-size:1.5rem;font-weight:600;color:#1e293b;margin:0}.header-right{display:flex;align-items:center;gap:1rem}.connection-status{display:inline-flex;align-items:center;gap:.5rem;font-size:.875rem;font-weight:500;padding:.5rem .75rem;border-radius:9999px;background:#f1f5f9}.connection-status .status-indicator{font-size:.75rem}.connection-status.connecting .status-indicator{color:#f59e0b}.connection-status.connected .status-indicator{color:#10b981}.connection-status.error .status-indicator{color:#ef4444}.btn{padding:.6rem 1.1rem;border:none;border-radius:.5rem;font-size:.9rem;font-weight:600;cursor:pointer;transition:transform .2s ease,box-shadow .2s ease;display:inline-flex;align-items:center;gap:.5rem;background:#e2e8f0;color:#1e293b}.btn span{display:inline-flex;align-items:center}.btn-primary{background:#2563eb;color:#fff}.btn-primary:hover:not(:disabled){background:#1d4ed8}.btn-danger{background:#ef4444;color:#fff}.btn-sm{padding:.4rem .6rem;font-size:.8rem;border-radius:.4rem}.btn:disabled{cursor:not-allowed;opacity:.7}.stats-section{margin:2rem 0}.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1.25rem}.stat-card{background:#fff;padding:1.5rem;border-radius:.75rem;box-shadow:0 10px 30px #0f172a0d;display:flex;align-items:center;gap:1.25rem}.stat-icon{width:3.5rem;height:3.5rem;border-radius:.75rem;display:inline-flex;align-items:center;justify-content:center;font-size:1.4rem;color:#fff;background:#6b7280}.stat-icon.online{background:#10b981}.stat-icon.offline{background:#ef4444}.stat-icon.error{background:#f97316}.stat-icon.subscriptions{background:#3b82f6}.stat-icon.active-subscriptions{background:#22c55e}.stat-icon.online-users{background:#f59e0b}.stat-content h3{margin:0;font-size:2rem;font-weight:700;color:#0f172a}.stat-content p{margin:.25rem 0 0;font-size:.9rem;color:#64748b}.analytics-section{margin:2rem 0}.analytics-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1.25rem}.analytics-card{background:#fff;padding:1.5rem;border-radius:.75rem;box-shadow:0 10px 30px #0f172a0d;display:flex;flex-direction:column;gap:.5rem}.analytics-card h4{margin:0;font-size:1rem;color:#1e293b}.metric-value{margin:0;font-size:2rem;font-weight:700;color:#0f172a}.metric-description{margin:0;font-size:.9rem;color:#64748b}.controls-section{margin-bottom:2rem}.controls-grid{display:flex;flex-wrap:wrap;gap:1rem;align-items:center}.search-box{position:relative;flex:1;min-width:220px;display:flex;align-items:center}.search-box i{position:absolute;left:1rem;color:#94a3b8}.search-box input{width:100%;padding:.75rem 1rem .75rem 2.75rem;border:1px solid #cbd5f5;border-radius:.75rem;font-size:.95rem;color:#0f172a;background:#fff;box-shadow:inset 0 1px 2px #94a3b81a}.search-box input:focus{outline:none;border-color:#2563eb;box-shadow:0 0 0 4px #2563eb26}.filter-group{display:flex;gap:.75rem}.filter-group select{padding:.75rem 1rem;border:1px solid #cbd5f5;border-radius:.75rem;background:#fff;font-size:.95rem;color:#0f172a;min-width:160px}.pagination-bar{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem;padding:1rem 1.5rem;border-top:1px solid #e5e7eb;background:#f8fafc}.pagination-info{font-size:.9rem;color:#475569}.pagination-actions{display:flex;align-items:center;gap:1.5rem;flex-wrap:wrap}.page-size-selector{display:inline-flex;align-items:center;gap:.5rem;font-size:.9rem;color:#475569}.page-size-selector select{padding:.5rem .75rem;border:1px solid #cbd5f5;border-radius:.5rem;background:#fff;font-size:.9rem;color:#0f172a}.page-buttons{display:inline-flex;align-items:center;gap:.75rem}.page-buttons .btn{padding:.45rem .85rem}.page-buttons .btn i{font-size:.75rem}.page-indicator{font-size:.9rem;color:#475569;font-weight:500}.table-section{background:#fff;border-radius:.75rem;box-shadow:0 10px 40px #0f172a14;overflow:hidden}.table-container{overflow-x:auto}.server-table{width:100%;border-collapse:collapse;min-width:720px}.server-table th,.server-table td{padding:1.15rem 1.25rem;text-align:left}.server-table thead th{background:#f8fafc;font-weight:600;color:#1f2937;border-bottom:1px solid #e5e7eb}.server-table tbody tr{border-bottom:1px solid #f3f4f6;transition:background .2s ease}.server-table tbody tr:hover{background:#f9fafb}.sortable{width:100%;background:transparent;border:none;display:inline-flex;align-items:center;justify-content:space-between;gap:.5rem;font-size:.9rem;color:inherit;cursor:pointer}.sortable i{color:#94a3b8}.loading-row{text-align:center;color:#64748b;padding:2rem;display:flex;align-items:center;justify-content:center;gap:.75rem;font-weight:500}.server-name{display:flex;flex-direction:column;gap:.25rem}.server-name strong{font-size:1rem;color:#0f172a}.server-name small{color:#64748b;font-size:.8rem}.status-badge{display:inline-flex;align-items:center;justify-content:center;padding:.35rem .85rem;border-radius:9999px;font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.02em}.status-badge.online{background:#dcfce7;color:#166534}.status-badge.offline{background:#fee2e2;color:#991b1b}.status-badge.error{background:#fef3c7;color:#92400e}.type-badge{display:inline-flex;padding:.35rem .75rem;border-radius:9999px;background:#e0f2fe;color:#0369a1;font-size:.75rem;font-weight:600;text-transform:uppercase}.toggle-wrapper{display:inline-flex;align-items:center;gap:.5rem}.toggle{position:relative;display:inline-flex;align-items:center;width:2.75rem;height:1.5rem}.toggle input{opacity:0;width:0;height:0}.toggle-slider{position:relative;display:block;width:100%;height:100%;background:#cbd5f5;border-radius:9999px;transition:background .2s ease;cursor:pointer}.toggle-slider:before{content:"";position:absolute;top:50%;left:.2rem;width:1.15rem;height:1.15rem;background:#fff;border-radius:9999px;box-shadow:0 2px 6px #0f172a33;transform:translateY(-50%);transition:transform .2s ease}.toggle input:checked+.toggle-slider{background:#22c55e}.toggle input:checked+.toggle-slider:before{transform:translate(1.15rem,-50%)}.toggle input:disabled+.toggle-slider{cursor:not-allowed;opacity:.6}.toggle input:focus-visible+.toggle-slider{box-shadow:0 0 0 3px #2563eb59}.toggle.is-updating .toggle-slider{box-shadow:0 0 0 2px #0f172a1a}.toggle-wrapper i{color:#64748b;font-size:.85rem}.alert{margin:1.5rem 0 0;padding:1rem 1.25rem;border-radius:.75rem;display:flex;align-items:center;gap:.75rem;font-size:.95rem;font-weight:500}.alert-error{background:#fee2e2;color:#991b1b;border:1px solid rgba(239,68,68,.25)}.footer{margin-top:3rem;padding:1.5rem 0;color:#64748b;font-size:.9rem}.footer-content{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:.75rem}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}@media (max-width: 1024px){.server-table{min-width:100%}}@media (max-width: 768px){.main-content{padding:1.25rem}.header{flex-direction:column;align-items:flex-start;gap:1rem}.header-right{width:100%;justify-content:space-between}.filter-group{width:100%}.filter-group select{flex:1}.stats-grid{grid-template-columns:1fr}.footer-content{flex-direction:column;align-items:flex-start}}