:root{--md-sys-color-background: #121212;--md-sys-color-on-background: #e6e1e5;--md-sys-color-surface: #1c1b1f;--md-sys-color-on-surface: #e6e1e5;--md-sys-color-surface-variant: #252429;--md-sys-color-on-surface-variant: #cac4d0;--md-sys-color-primary: #d0bcff;--md-sys-color-on-primary: #381e72;--md-sys-color-primary-container: #4f378b;--md-sys-color-on-primary-container: #eaddff;--md-sys-color-secondary: #ccc2dc;--md-sys-color-on-secondary: #332d41;--md-sys-color-secondary-container: #4a4458;--md-sys-color-on-secondary-container: #e8def8;--md-sys-color-outline: #49454f;--md-sys-color-outline-variant: #35333a;--color-success: #81c784;--color-success-bg: #1b5e20;--color-success-text: #e8f5e9;--color-warning: #ffb74d;--color-warning-bg: #e65100;--color-warning-text: #fff3e0;--color-error: #f28b82;--color-error-bg: #b71c1c;--color-error-text: #ffebee;--color-info: #64b5f6;--md-elevation-1: 0px 1px 3px 1px rgba(0, 0, 0, .15), 0px 1px 2px 0px rgba(0, 0, 0, .3);--md-elevation-2: 0px 2px 6px 2px rgba(0, 0, 0, .15), 0px 1px 2px 0px rgba(0, 0, 0, .3);--md-elevation-3: 0px 4px 8px 3px rgba(0, 0, 0, .15), 0px 1px 3px 0px rgba(0, 0, 0, .3)}*{box-sizing:border-box;margin:0;padding:0}body{font-family:Roboto,sans-serif;background-color:var(--md-sys-color-background);color:var(--md-sys-color-on-background);line-height:1.5;padding:16px}.app-container{max-width:1400px;margin:0 auto;display:flex;flex-direction:column;gap:24px}.m3-card{background-color:var(--md-sys-color-surface);color:var(--md-sys-color-on-surface);border-radius:12px;padding:20px;transition:box-shadow .2s ease,background-color .2s ease}.elevated-card{background-color:var(--md-sys-color-surface-variant);box-shadow:var(--md-elevation-1)}.elevated-card:hover{box-shadow:var(--md-elevation-2)}.outlined-card{border:1px solid var(--md-sys-color-outline)}.app-header{display:flex;justify-content:space-between;align-items:center;padding:8px 0;border-bottom:1px solid var(--md-sys-color-outline-variant);flex-wrap:wrap;gap:16px}.header-left{display:flex;align-items:center;gap:16px}.logo-icon{font-size:36px;color:var(--md-sys-color-primary)}.app-header h1{font-size:28px;font-weight:500;letter-spacing:-.5px;color:var(--md-sys-color-on-background)}.header-subtitle{font-size:14px;color:var(--md-sys-color-on-surface-variant)}.header-right{display:flex;align-items:center;gap:16px}.status-chip{display:inline-flex;align-items:center;gap:8px;padding:6px 16px;border-radius:100px;font-size:13px;font-weight:500;border:1px solid var(--md-sys-color-outline)}.status-chip.online{background-color:#81c7841a;color:var(--color-success);border-color:#81c7844d}.status-chip.loading{background-color:#64b5f61a;color:var(--color-info);border-color:#64b5f64d}.status-chip.error{background-color:#f28b821a;color:var(--color-error);border-color:#f28b824d}.status-dot{width:8px;height:8px;border-radius:50%;background-color:currentColor;display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;flex-shrink:0}.refresh-container{display:flex;align-items:center;gap:12px}.refresh-icon{font-size:22px;color:var(--md-sys-color-on-surface-variant);cursor:pointer;transition:transform .2s ease,color .2s ease;padding:4px;border-radius:50%}.refresh-icon:hover{color:var(--md-sys-color-primary);background-color:var(--md-sys-color-outline-variant);transform:rotate(45deg)}.refresh-icon.spinning{animation:spin 1s linear infinite;pointer-events:none}.countdown-circle{position:relative;width:32px;height:32px}.countdown-circle svg{width:32px;height:32px;transform:rotate(-90deg)}.countdown-circle circle{fill:none;stroke-width:3px}.countdown-circle circle:first-child{stroke:var(--md-sys-color-outline-variant)}.countdown-circle circle:last-child{stroke:var(--md-sys-color-primary);stroke-linecap:round;stroke-dasharray:88;stroke-dashoffset:0;transition:stroke-dashoffset .1s linear}#countdown-text{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:10px;font-weight:700;color:var(--md-sys-color-on-background)}.controls-section{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px}.time-range-segmented-control{display:inline-flex;border:1px solid var(--md-sys-color-outline);border-radius:100px;overflow:hidden}.segmented-btn{background:none;border:none;color:var(--md-sys-color-on-surface-variant);padding:10px 20px;font-family:inherit;font-size:14px;font-weight:500;cursor:pointer;transition:background-color .2s,color .2s;outline:none}.segmented-btn:not(:last-child){border-right:1px solid var(--md-sys-color-outline)}.segmented-btn:hover{background-color:#d0bcff14;color:var(--md-sys-color-primary)}.segmented-btn.active{background-color:var(--md-sys-color-primary-container);color:var(--md-sys-color-on-primary-container)}.last-updated-text{font-size:13px;color:var(--md-sys-color-on-surface-variant)}.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}.stat-card{display:flex;align-items:center;gap:20px}.stat-icon{font-size:32px;padding:12px;border-radius:100px;background-color:var(--md-sys-color-outline-variant)}.primary-text{color:var(--md-sys-color-primary)}.success-text{color:var(--color-success)}.warning-text{color:var(--color-warning)}.stat-content{display:flex;flex-direction:column}.stat-label{font-size:12px;font-weight:500;color:var(--md-sys-color-on-surface-variant);text-transform:uppercase;letter-spacing:.5px}.stat-content h2{font-size:24px;font-weight:500;color:var(--md-sys-color-on-background);margin-top:4px}.chart-selector-layout{display:grid;grid-template-columns:3fr 1fr;gap:24px;align-items:stretch}.chart-container-left{min-width:0}.selector-container-right{position:relative;min-width:0}@media (max-width: 1024px){.chart-selector-layout{grid-template-columns:1fr}.selector-container-right{position:relative;height:500px}}.selector-card{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;gap:16px;overflow:hidden}.selector-card-header{display:flex;justify-content:space-between;align-items:center}.selector-card-header h3{font-size:16px;font-weight:500}.search-box.compact{flex-grow:0;flex-shrink:0}.search-box.compact input{padding:8px 12px 8px 36px;font-size:13px}.search-box.compact .search-icon{font-size:18px;left:10px}.m3-button.compact{padding:6px 12px;font-size:12px;gap:4px}.selector-list{flex:1 1 0;overflow-y:auto;padding-right:4px}.selector-list>.selector-item{margin-bottom:6px}.selector-list>.selector-item:last-child{margin-bottom:0}.selector-list::-webkit-scrollbar{width:6px}.selector-list::-webkit-scrollbar-track{background:transparent}.selector-list::-webkit-scrollbar-thumb{background:var(--md-sys-color-outline);border-radius:10px}.selector-list::-webkit-scrollbar-thumb:hover{background:var(--md-sys-color-primary)}.selector-item{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;background-color:var(--md-sys-color-surface-variant);border-radius:8px;transition:background-color .15s;font-size:13px}.selector-item:hover{background-color:var(--md-sys-color-outline-variant)}.selector-item-left{display:flex;align-items:center;gap:8px;min-width:0}.selector-server-name{font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:18px}.selector-item-right{font-size:11px;color:var(--md-sys-color-on-surface-variant);background-color:var(--md-sys-color-outline-variant);padding:2px 6px;border-radius:100px;flex-shrink:0}.charts-section{display:block}.chart-card{display:flex;flex-direction:column;gap:16px;min-height:520px}.card-header{display:flex;justify-content:space-between;align-items:center}.card-header h3{font-size:18px;font-weight:500}.card-header-icon{color:var(--md-sys-color-on-surface-variant)}.chart-wrapper{flex-grow:1;width:100%}.pinned-servers-section{display:flex;flex-direction:column;gap:16px}.section-title-wrapper{display:flex;align-items:center;gap:12px;color:var(--md-sys-color-primary)}.section-title-wrapper h3{font-size:20px;font-weight:500}.pinned-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(400px,1fr));gap:20px}@media (max-width: 800px){.pinned-grid{grid-template-columns:1fr}}.pinned-detail-card{display:flex;flex-direction:column;gap:12px;min-height:300px;min-width:0;overflow:hidden}.pinned-chart-wrapper{position:relative;width:100%;min-height:180px;overflow:hidden}.pinned-card-header{display:flex;justify-content:space-between;align-items:center}.pinned-card-title{display:flex;align-items:center;gap:10px}.pinned-server-status{width:8px;height:8px;border-radius:50%}.pinned-server-status.online{background-color:var(--color-success)}.pinned-server-status.offline{background-color:var(--color-error)}.pinned-card-header h4{font-size:16px;font-weight:500}.pinned-metrics{display:flex;flex-wrap:wrap;gap:8px 12px;font-size:12px;color:var(--md-sys-color-on-surface-variant)}.pinned-metric-pill{background-color:var(--md-sys-color-outline-variant);padding:4px 10px;border-radius:100px;white-space:nowrap}.pinned-chart-wrapper{flex-grow:1}.filter-card{padding:16px}.filter-row{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px}.search-box{position:relative;flex-grow:1;max-width:400px}@media (max-width: 600px){.search-box{max-width:100%}.filter-row{flex-direction:column;align-items:stretch}}.search-icon{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--md-sys-color-on-surface-variant);font-size:20px}.search-box input{width:100%;background-color:var(--md-sys-color-outline-variant);border:1px solid var(--md-sys-color-outline);border-radius:100px;padding:10px 16px 10px 44px;color:var(--md-sys-color-on-surface);font-family:inherit;font-size:14px;outline:none;transition:border-color .2s,background-color .2s}.search-box input:focus{border-color:var(--md-sys-color-primary);background-color:var(--md-sys-color-surface)}.filter-actions{display:flex;gap:12px;align-items:center;flex-wrap:wrap}.m3-dropdown{background-color:var(--md-sys-color-outline-variant);border:1px solid var(--md-sys-color-outline);color:var(--md-sys-color-on-surface);padding:10px 16px;border-radius:100px;font-family:inherit;font-size:14px;outline:none;cursor:pointer}.m3-dropdown:focus{border-color:var(--md-sys-color-primary)}.m3-button{display:inline-flex;align-items:center;gap:8px;border-radius:100px;padding:10px 20px;font-family:inherit;font-size:14px;font-weight:500;cursor:pointer;transition:background-color .2s,border-color .2s;outline:none}.m3-button.outlined{background:none;border:1px solid var(--md-sys-color-outline);color:var(--md-sys-color-primary)}.m3-button.outlined:hover{background-color:#d0bcff14;border-color:var(--md-sys-color-primary)}.table-card{padding:0;overflow:hidden}.table-responsive{overflow-x:auto;width:100%}.m3-table{width:100%;border-collapse:collapse;font-size:14px}.m3-table th{background-color:var(--md-sys-color-surface-variant);color:var(--md-sys-color-on-surface-variant);text-align:left;padding:14px 16px;font-weight:500;border-bottom:1px solid var(--md-sys-color-outline);white-space:nowrap;-webkit-user-select:none;user-select:none}.m3-table th.sortable{cursor:pointer;transition:background-color .2s}.m3-table th.sortable:hover{background-color:var(--md-sys-color-outline-variant);color:var(--md-sys-color-on-surface)}.sort-indicator{font-size:16px;vertical-align:middle;margin-left:4px;color:var(--md-sys-color-outline)}.m3-table th.sortable:hover .sort-indicator,.m3-table th.active-sort .sort-indicator{color:var(--md-sys-color-primary)}.m3-table td{padding:14px 16px;border-bottom:1px solid var(--md-sys-color-outline-variant);vertical-align:middle}.m3-table tbody tr{transition:background-color .15s ease}.m3-table tbody tr:hover{background-color:var(--md-sys-color-outline-variant)}.col-chart-toggle,.col-pin{text-align:center!important}.checkbox-container{display:flex;align-items:center;justify-content:center;position:relative;cursor:pointer;width:18px;height:18px;margin:0;padding:0;line-height:1;-webkit-user-select:none;user-select:none;box-sizing:border-box}.checkbox-container input{display:none}.checkmark{position:relative;display:inline-block;height:18px;width:18px;background-color:transparent;border:2px solid var(--md-sys-color-outline);border-radius:4px;transition:background-color .2s,border-color .2s;flex-shrink:0}.checkbox-container:hover input~.checkmark{border-color:var(--md-sys-color-primary)}.checkbox-container input:checked~.checkmark{background-color:var(--md-sys-color-primary);border-color:var(--md-sys-color-primary)}.checkmark:after{content:"";position:absolute;display:none;left:50%;top:45%;width:5px;height:10px;border:solid var(--md-sys-color-on-primary);border-width:0 2px 2px 0;transform:translate(-50%,-50%) rotate(45deg);transform-origin:center}.checkbox-container input:checked~.checkmark:after{display:block}.star-btn{background:none;border:none;color:var(--md-sys-color-outline);cursor:pointer;outline:none;transition:transform .2s,color .2s;font-size:20px}.star-btn:hover{color:var(--color-warning);transform:scale(1.15)}.star-btn.pinned{color:var(--color-warning);font-variation-settings:"FILL" 1}.copy-pinned-btn:hover{color:var(--md-sys-color-primary)!important}.status-pill{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:500;padding:2px 10px;border-radius:100px}.status-pill.online{background-color:#81c78426;color:var(--color-success)}.status-pill.offline{background-color:#f28b8226;color:var(--color-error)}.ping-badge{display:inline-block;font-size:12px;font-weight:500;padding:2px 8px;border-radius:100px}.ping-badge.good{background-color:#81c78426;color:var(--color-success)}.ping-badge.warning{background-color:#ffb74d26;color:var(--color-warning)}.ping-badge.bad{background-color:#f28b8226;color:var(--color-error)}.m3-progress-spinner{width:48px;height:48px;border:4px solid var(--md-sys-color-outline-variant);border-top:4px solid var(--md-sys-color-primary);border-radius:50%;animation:spin 1s linear infinite;margin:0 auto}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.loading-row p{color:var(--md-sys-color-on-surface-variant);font-size:15px}.header-tooltip{cursor:help}.app-footer{text-align:center;padding:24px 0 48px;color:var(--md-sys-color-on-surface-variant);font-size:12px;border-top:1px solid var(--md-sys-color-outline-variant)}.app-footer code{background-color:var(--md-sys-color-outline-variant);padding:2px 6px;border-radius:4px;font-family:monospace}.m3-tooltip{background-color:var(--md-sys-color-surface-container-high, #1c1b1f);color:var(--md-sys-color-on-surface, #e6e1e5);border:1px solid var(--md-sys-color-outline, #49454f);border-radius:8px;padding:12px;font-family:Roboto,sans-serif;box-shadow:0 4px 16px #00000080;min-width:200px;max-width:280px}.m3-tooltip-title{font-weight:500;font-size:12px;margin-bottom:8px;color:var(--md-sys-color-primary, #d0bcff);border-bottom:1px solid var(--md-sys-color-outline-variant, #49454f);padding-bottom:6px}.m3-tooltip-list{display:flex;flex-direction:column;gap:6px}.m3-tooltip-item{display:flex;align-items:center;justify-content:space-between;font-size:12px;gap:16px}.m3-tooltip-item-left{display:flex;align-items:center;gap:8px;min-width:0}.m3-tooltip-marker{width:8px;height:8px;border-radius:50%;flex-shrink:0}.m3-tooltip-name{font-weight:400;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.m3-tooltip-value{font-weight:500;color:var(--md-sys-color-on-surface-variant, #cac4d0);flex-shrink:0}.m3-tooltip-more{font-size:11px;font-style:italic;color:var(--md-sys-color-primary, #d0bcff);text-align:center;margin-top:8px;padding-top:8px;border-top:1px dashed var(--md-sys-color-outline-variant, #49454f)}.scale-segmented-control{display:inline-flex;border:1px solid var(--md-sys-color-outline);border-radius:100px;overflow:hidden}.scale-btn{background:none;border:none;color:var(--md-sys-color-on-surface-variant);padding:6px 14px;font-family:inherit;font-size:12px;font-weight:500;cursor:pointer;transition:background-color .2s,color .2s;outline:none}.scale-btn:not(:last-child){border-right:1px solid var(--md-sys-color-outline)}.scale-btn:hover{background-color:#d0bcff14;color:var(--md-sys-color-primary)}.scale-btn.active{background-color:var(--md-sys-color-primary-container);color:var(--md-sys-color-on-primary-container)}#toggle-autorefresh-btn{cursor:pointer;-webkit-user-select:none;user-select:none}.card-header-left{display:flex;align-items:center;gap:8px}.card-header-controls{display:flex;align-items:center;gap:12px}#copy-toast{font-size:13px;color:var(--color-success, #81c784);opacity:0;transition:opacity .3s ease;font-weight:500}#copy-chart-btn{gap:6px}#copy-chart-btn .material-symbols-outlined{font-size:16px}.selector-header-actions{display:flex;gap:8px}.placeholder-container-muted{text-align:center;padding:24px;color:var(--md-sys-color-on-surface-variant)}#pinned-section{display:none}.detailed-overview-section .section-title-wrapper,.detailed-overview-section .filter-card{margin-bottom:16px}#servers-table th.col-pin{width:48px}#servers-table tbody .loading-row td{text-align:center;padding:48px}#servers-table tbody .loading-row p{margin-top:16px}#dashboard-view-container{display:flex;flex-direction:column;gap:24px}.single-server-section{display:none;flex-direction:column;gap:24px;margin-bottom:0}.single-server-header{display:flex;flex-direction:column;gap:16px;align-items:flex-start}.single-server-header .back-btn{gap:8px}.single-server-title-row{display:flex;align-items:center;gap:12px}.single-server-title-row h2{font-size:28px;font-weight:500}.server-link{transition:color .15s ease}.server-link:hover{text-decoration:underline!important}.single-charts-layout{display:grid;grid-template-columns:1fr;gap:20px}