:root{--primary-color: #1a73e8;--text-primary: #1f1f1f;--text-secondary: #5f6368;--background-color: #ffffff;--hover-color: rgba(26, 115, 232, .1);--border-color: #e0e0e0;--success-color: #34a853;--warning-color: #fbbc04;--error-color: #ea4335;--shadow-1: 0 1px 3px rgba(0, 0, 0, .12), 0 1px 2px rgba(0, 0, 0, .24);--radius-sm: 4px;--radius-md: 8px;--radius-lg: 12px}*{margin:0;padding:0;box-sizing:border-box}body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:var(--background-color);color:var(--text-primary);line-height:1.5}.app-container{min-height:100vh;display:flex}.sidebar{width:240px;background-color:var(--surface-color);border-right:1px solid var(--border-color);padding:16px;position:fixed;height:100vh;box-shadow:var(--shadow-1)}.main-content{flex:1;margin-left:240px;padding:24px}.card{background:#fff;border-radius:var(--radius-lg);box-shadow:0 1px 3px #1018281a,0 1px 2px #1018280f;padding:0}.data-table{width:100%;border-collapse:separate;border-spacing:0;background:#fff}.data-table th,.data-table td{padding:16px;white-space:nowrap;font-size:14px;border-bottom:1px solid var(--border-color)}.data-table th{background:#f9fafb;font-weight:500;color:var(--text-secondary);text-align:left}.data-table tr{transition:all .2s ease}.data-table tbody tr:hover{background-color:#f9fafb}.data-table tr td:first-child,.data-table tr th:first-child{padding-left:24px}.data-table tr td:last-child,.data-table tr th:last-child{padding-right:24px}.status-badge{display:inline-flex;align-items:center;padding:4px 12px;border-radius:16px;font-size:12px;font-weight:500}.status-badge.online{background-color:#22c55e1a;color:#16a34a}.status-badge.offline{background-color:#ea43351a;color:#dc2626}.button{padding:8px 16px;border-radius:var(--radius-sm);font-weight:500;cursor:pointer;border:none;transition:all .2s ease}.button.primary{background-color:var(--primary-color);color:#fff}.button.primary:hover{background-color:#1557b0}.button.secondary{background-color:transparent;border:1px solid var(--border-color);color:var(--text-secondary)}.button.secondary:hover{background-color:var(--background-color)}.search-input{padding:8px 16px;border-radius:var(--radius-sm);border:1px solid var(--border-color);width:100%;max-width:300px;transition:all .2s ease}.search-input:focus{outline:none;border-color:var(--primary-color);box-shadow:0 0 0 2px #1a73e833}.page-title{font-size:24px;font-weight:600;color:var(--text-primary);margin-bottom:24px}#root{min-height:100vh;width:100%;margin:0;padding:0;text-align:left}.app-container{display:flex;min-height:100vh;width:100%}.sidebar{width:250px;min-height:100vh;background-color:#f8f9fa;padding:24px;border-right:1px solid #e0e0e0;position:fixed;left:0;top:0}.main-content{flex:1;margin-left:250px;padding:24px;background-color:#f5f5f5;min-height:100vh}.main-content-mobile{flex:1;margin-left:0;padding:72px 16px 16px;background-color:#f5f5f5;min-height:100vh;width:100%}.mobile-sidebar{width:100%;padding:24px 16px;position:relative;min-height:100%;display:flex;flex-direction:column}@media (max-width: 600px){.sidebar{display:none}.app-container{flex-direction:column}}.logo{height:6em;padding:1.5em;will-change:filter;transition:filter .3s}.logo:hover{filter:drop-shadow(0 0 2em #646cffaa)}.logo.react:hover{filter:drop-shadow(0 0 2em #61dafbaa)}@keyframes logo-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@media (prefers-reduced-motion: no-preference){a:nth-of-type(2) .logo{animation:logo-spin infinite 20s linear}}.card{padding:2em}.read-the-docs{color:#888}.nav-link{display:flex;align-items:center;padding:12px 16px;color:var(--text-secondary);text-decoration:none;border-radius:var(--radius-sm);transition:all .2s ease;font-weight:500}.nav-link:hover,.nav-link.active{background-color:var(--hover-color);color:var(--primary-color)}.nav-icon{margin-right:12px;font-size:20px}.header{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px}.header-title{font-size:24px;font-weight:600;color:var(--text-primary)}.header-actions{display:flex;gap:12px}.data-table{width:100%;border-collapse:collapse;background:#fff;border-radius:var(--radius-md);overflow:hidden}.data-table th{background:var(--background-color);padding:16px;text-align:left;font-weight:500;color:var(--text-secondary);border-bottom:1px solid var(--border-color)}.data-table td{padding:16px;border-bottom:1px solid var(--border-color)}.data-table tr:hover{background-color:var(--hover-color)}.data-table tr:last-child td{border-bottom:none}.toolbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px}.search-field{position:relative;width:300px}.search-field input{width:100%;padding:8px 16px 8px 40px;border:1px solid var(--border-color);border-radius:var(--radius-sm);font-size:14px}.search-field input:focus{outline:none;border-color:var(--primary-color);box-shadow:0 0 0 2px #1a73e833}.search-icon{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--text-secondary)}.badge{display:inline-flex;align-items:center;padding:4px 12px;border-radius:12px;font-size:12px;font-weight:500}.badge.success{background-color:#34a8531a;color:var(--success-color)}.badge.warning{background-color:#fbbc041a;color:var(--warning-color)}.badge.error{background-color:#ea43351a;color:var(--error-color)}.card{background:#fff;border-radius:var(--radius-md);box-shadow:var(--shadow-1);padding:24px}.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:24px;margin-bottom:32px}.stat-card{background:#fff;border-radius:var(--radius-md);padding:24px;box-shadow:var(--shadow-1)}.stat-title{color:var(--text-secondary);font-size:14px;margin-bottom:8px}.stat-value{font-size:24px;font-weight:600;color:var(--text-primary)}.stat-trend{display:flex;align-items:center;font-size:12px;margin-top:8px}.trend-up{color:var(--success-color)}.trend-down{color:var(--error-color)}