:root{--bg-primary: #f8fafc;--bg-secondary: #f1f5f9;--bg-card: #ffffff;--text-primary: #0f172a;--text-secondary: #334155;--text-muted: #64748b;--border-color: #e2e8f0;--accent-blue: #3b82f6;--accent-purple: #8b5cf6;--accent-green: #22c55e;--accent-red: #ef4444;--accent-orange: #f97316;--shadow: 0 1px 3px 0 rgb(0 0 0 / .1), 0 1px 2px -1px rgb(0 0 0 / .1);--radius: .75rem}[data-theme=dark]{--bg-primary: #0f172a;--bg-secondary: #1e293b;--bg-card: #1e293b;--text-primary: #f8fafc;--text-secondary: #e2e8f0;--text-muted: #94a3b8;--border-color: #334155;--accent-blue: #60a5fa;--accent-purple: #a78bfa;--accent-green: #4ade80;--accent-red: #f87171;--accent-orange: #fb923c;--shadow: 0 1px 3px 0 rgb(0 0 0 / .4), 0 1px 2px -1px rgb(0 0 0 / .4)}*{box-sizing:border-box;margin:0;padding:0}html{color-scheme:light dark}html,body,#app{min-height:100vh}body{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;font-size:16px;line-height:1.5;color:var(--text-primary);background-color:var(--bg-primary);transition:background-color .25s ease,color .25s ease;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}h1,h2,h3,h4,h5,h6{font-weight:600;line-height:1.25;color:var(--text-primary)}p{color:var(--text-secondary)}a{color:var(--accent-blue);text-decoration:none}a:hover{text-decoration:underline}button{font-family:inherit}.card{background-color:var(--bg-card);border:1px solid var(--border-color);border-radius:var(--radius);box-shadow:var(--shadow);padding:1rem;transition:background-color .25s ease,border-color .25s ease,box-shadow .25s ease}.badge{display:inline-flex;align-items:center;gap:.375rem;padding:.25rem .625rem;border-radius:9999px;font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.025em}.badge:before{content:"";width:.5rem;height:.5rem;border-radius:50%;background-color:currentColor}.badge-up{color:var(--accent-green);background-color:color-mix(in srgb,var(--accent-green) 15%,transparent)}.badge-down{color:var(--accent-red);background-color:color-mix(in srgb,var(--accent-red) 15%,transparent)}.skeleton{position:relative;overflow:hidden;background-color:var(--bg-secondary);border-radius:var(--radius)}.skeleton:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--text-muted) 10%,transparent),transparent);transform:translate(-100%);animation:shimmer 1.5s infinite}@keyframes shimmer{to{transform:translate(100%)}}.last-updated{font-size:.75rem;color:var(--text-muted)}.chart-container{position:relative;width:100%;min-height:300px}.chart-empty{display:flex;align-items:center;justify-content:center;min-height:300px;color:var(--text-muted);font-size:.875rem;background-color:var(--bg-secondary);border:1px dashed var(--border-color);border-radius:var(--radius)}.uplot-tooltip{transition:opacity .1s ease}@media(min-width:640px){.card{padding:1.25rem}}@media(min-width:768px){.card{padding:1.5rem}}@media(min-width:1024px){.card{padding:1.75rem}}.theme-toggle{display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;padding:.375rem;color:var(--text-primary);background-color:transparent;border:1px solid var(--border-color);border-radius:var(--radius);cursor:pointer;transition:background-color .2s ease,border-color .2s ease}.theme-toggle:hover{background-color:var(--bg-secondary)}.theme-toggle__icon{width:100%;height:100%}.navbar{position:sticky;top:0;z-index:50;background-color:var(--bg-card);border-bottom:1px solid var(--border-color)}.navbar__container{display:flex;align-items:center;justify-content:space-between;gap:1rem;max-width:1280px;margin:0 auto;padding:.75rem 1rem}.navbar__brand{display:inline-flex;align-items:center;gap:.5rem;font-weight:700;color:var(--text-primary);text-decoration:none}.navbar__logo{font-size:1.25rem;line-height:1}.navbar__title{font-size:1rem;white-space:nowrap}.navbar__nav{display:none}.navbar__links{display:flex;align-items:center;gap:.25rem;list-style:none}.navbar__item{display:inline-flex}.navbar__link{display:block;padding:.5rem .75rem;border-radius:var(--radius);color:var(--text-secondary);font-size:.875rem;font-weight:500;text-decoration:none;transition:background-color .2s ease,color .2s ease}.navbar__link:hover,.navbar__link--active{color:var(--accent-blue);background-color:color-mix(in srgb,var(--accent-blue) 10%,transparent)}.navbar__actions{display:inline-flex;align-items:center;gap:.5rem}.navbar__hamburger{display:flex;flex-direction:column;justify-content:center;gap:4px;width:2rem;height:2rem;padding:.25rem;background:transparent;border:1px solid var(--border-color);border-radius:var(--radius);cursor:pointer}.navbar__hamburger-bar{display:block;width:100%;height:2px;background-color:var(--text-primary);border-radius:2px}.navbar__mobile{border-top:1px solid var(--border-color);padding:.5rem 1rem}.navbar__mobile-links{list-style:none;display:flex;flex-direction:column;gap:.25rem}.navbar__mobile-link{display:block;padding:.75rem;border-radius:var(--radius);color:var(--text-secondary);font-weight:500;text-decoration:none}.navbar__mobile-link--active{color:var(--accent-blue);background-color:color-mix(in srgb,var(--accent-blue) 10%,transparent)}@media(min-width:768px){.navbar__nav{display:block}.navbar__hamburger,.navbar__mobile{display:none}}.layout{display:flex;flex-direction:column;min-height:100vh;background-color:var(--bg-primary)}.layout__main{flex:1;padding:1rem}.layout__container{width:100%;max-width:1280px;margin:0 auto}@media(min-width:640px){.layout__main{padding:1.5rem}}@media(min-width:1024px){.layout__main{padding:2rem}}.skeleton-loader{width:100%}.skeleton-loader--card{display:flex;flex-direction:column;gap:.75rem}.skeleton-loader__title{width:60%;height:1.25rem;border-radius:var(--radius)}.skeleton-loader__text{width:100%;height:.875rem;border-radius:var(--radius)}.skeleton-loader__text--short{width:40%}.skeleton-loader--chart{height:16rem;border-radius:var(--radius)}.skeleton-loader--table{display:flex;flex-direction:column;gap:.5rem}.skeleton-loader__row{display:grid;grid-template-columns:repeat(3,1fr);gap:.75rem;padding:.75rem 0;border-bottom:1px solid var(--border-color)}.skeleton-loader__row--header .skeleton-loader__cell{height:.75rem;opacity:.6}.skeleton-loader__cell{height:1rem;border-radius:var(--radius)}.summary-card{display:flex;flex-direction:column;gap:.5rem;padding:1rem;background-color:var(--bg-card);border:1px solid var(--border-color);border-radius:var(--radius);box-shadow:var(--shadow);border-left:4px solid var(--accent-blue);transition:background-color .25s ease,border-color .25s ease}.summary-card--success{border-left-color:var(--accent-green)}.summary-card--danger{border-left-color:var(--accent-red)}.summary-card--warning{border-left-color:var(--accent-orange)}.summary-card__header{display:flex;align-items:center;gap:.5rem;color:var(--text-muted);font-size:.875rem;font-weight:500}.summary-card__icon{font-size:1rem;line-height:1}.summary-card__title{font-size:.875rem;font-weight:500;color:var(--text-muted);margin:0}.summary-card__value{font-size:1.5rem;font-weight:700;color:var(--text-primary);line-height:1.25}.summary-card__subtitle{font-size:.75rem;color:var(--text-muted)}.status-badge{display:inline-flex;align-items:center;gap:.375rem;font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.025em;color:var(--text-muted)}.status-badge__dot{width:.5rem;height:.5rem;border-radius:50%;background-color:var(--text-muted)}.status-badge--up .status-badge__dot{background-color:var(--accent-green)}.status-badge--down .status-badge__dot{background-color:var(--accent-red);animation:pulse 1.5s infinite}.status-badge--unknown .status-badge__dot{background-color:var(--text-muted)}@keyframes pulse{0%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(1.2)}to{opacity:1;transform:scale(1)}}.time-range-picker{display:inline-flex;gap:.25rem;padding:.25rem;background-color:var(--bg-secondary);border:1px solid var(--border-color);border-radius:var(--radius);overflow-x:auto;max-width:100%}.time-range-picker__button{flex:0 0 auto;padding:.375rem .75rem;font-size:.875rem;font-weight:500;color:var(--text-secondary);background-color:transparent;border:1px solid transparent;border-radius:calc(var(--radius) - .25rem);cursor:pointer;white-space:nowrap;transition:background-color .2s ease,color .2s ease,border-color .2s ease}.time-range-picker__button:hover{color:var(--text-primary);background-color:color-mix(in srgb,var(--bg-card) 50%,transparent)}.time-range-picker__button--active{color:var(--accent-blue);background-color:var(--bg-card);border-color:var(--border-color);box-shadow:var(--shadow)}.error-message{display:flex;align-items:flex-start;gap:.75rem;padding:1rem;background-color:color-mix(in srgb,var(--accent-red) 10%,transparent);border:1px solid color-mix(in srgb,var(--accent-red) 30%,transparent);border-radius:var(--radius)}.error-message__icon{flex-shrink:0;font-size:1.25rem;line-height:1}.error-message__content{display:flex;flex-direction:column;gap:.25rem}.error-message__title{font-weight:600;color:var(--accent-red)}.error-message__text{color:var(--text-secondary);font-size:.875rem}.error-message__button{align-self:flex-start;margin-top:.5rem;padding:.375rem .75rem;font-size:.875rem;font-weight:500;color:#fff;background-color:var(--accent-red);border:none;border-radius:var(--radius);cursor:pointer;transition:background-color .2s ease}.error-message__button:hover{background-color:color-mix(in srgb,var(--accent-red) 85%,#000)}.uplot,.uplot *,.uplot *:before,.uplot *:after{box-sizing:border-box}.uplot{font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji";line-height:1.5;width:min-content}.u-title{text-align:center;font-size:18px;font-weight:700}.u-wrap{position:relative;-webkit-user-select:none;user-select:none}.u-over,.u-under{position:absolute}.u-under{overflow:hidden}.uplot canvas{display:block;position:relative;width:100%;height:100%}.u-axis{position:absolute}.u-legend{font-size:14px;margin:auto;text-align:center}.u-inline{display:block}.u-inline *{display:inline-block}.u-inline tr{margin-right:16px}.u-legend th{font-weight:600}.u-legend th>*{vertical-align:middle;display:inline-block}.u-legend .u-marker{width:1em;height:1em;margin-right:4px;background-clip:padding-box!important}.u-inline.u-live th:after{content:":";vertical-align:middle}.u-inline:not(.u-live) .u-value{display:none}.u-series>*{padding:4px}.u-series th{cursor:pointer}.u-legend .u-off>*{opacity:.3}.u-select{background:#00000012;position:absolute;pointer-events:none}.u-cursor-x,.u-cursor-y{position:absolute;left:0;top:0;pointer-events:none;will-change:transform}.u-hz .u-cursor-x,.u-vt .u-cursor-y{height:100%;border-right:1px dashed #607D8B}.u-hz .u-cursor-y,.u-vt .u-cursor-x{width:100%;border-bottom:1px dashed #607D8B}.u-cursor-pt{position:absolute;top:0;left:0;border-radius:50%;border:0 solid;pointer-events:none;will-change:transform;background-clip:padding-box!important}.u-axis.u-off,.u-select.u-off,.u-cursor-x.u-off,.u-cursor-y.u-off,.u-cursor-pt.u-off{display:none}.overview{display:flex;flex-direction:column;gap:1.5rem}.overview__title{font-size:1.5rem;font-weight:700;color:var(--text-primary)}.overview__cards{display:grid;grid-template-columns:repeat(1,1fr);gap:1rem}.overview__cards--hardware{grid-template-columns:repeat(1,1fr)}.overview__section{display:flex;flex-direction:column;gap:1rem}.overview__section-header{display:flex;flex-direction:column;gap:.75rem}.overview__section-title{font-size:1.125rem;font-weight:600;color:var(--text-primary)}.overview__section-actions{display:flex;align-items:center;justify-content:space-between;gap:.75rem}.overview__table-wrapper{overflow-x:auto}.overview__table{width:100%;border-collapse:collapse;font-size:.875rem}.overview__table th,.overview__table td{padding:.75rem;text-align:left;border-bottom:1px solid var(--border-color);color:var(--text-secondary)}.overview__table th{font-weight:600;color:var(--text-muted);background-color:var(--bg-secondary)}.overview__table-row{cursor:pointer;transition:background-color .15s ease}.overview__table-row:hover{background-color:var(--bg-secondary)}.overview__table-row--offline{background-color:color-mix(in srgb,var(--accent-red) 8%,transparent)}.overview__table-row--offline:hover{background-color:color-mix(in srgb,var(--accent-red) 12%,transparent)}.overview__empty{padding:1.5rem;text-align:center;color:var(--text-muted);font-size:.875rem}.overview__alerts{padding:1rem;background-color:color-mix(in srgb,var(--accent-red) 10%,transparent);border:1px solid color-mix(in srgb,var(--accent-red) 30%,transparent);border-radius:var(--radius)}.overview__alert-list{display:flex;flex-direction:column;gap:.5rem;list-style:none;margin-top:.5rem}.overview__alert{font-size:.875rem;color:var(--text-secondary)}.overview__alert--danger{color:var(--accent-red)}.overview__speedtest-grid{display:grid;grid-template-columns:repeat(1,1fr);gap:1rem}.overview__speedtest-card{padding:1rem;background-color:var(--bg-secondary);border:1px solid var(--border-color);border-radius:var(--radius)}.overview__speedtest-source{font-size:.875rem;font-weight:600;color:var(--text-muted);margin-bottom:.5rem}.overview__speedtest-value{font-size:1.25rem;font-weight:700;color:var(--text-primary)}.overview__speedtest-detail{font-size:.875rem;color:var(--text-secondary)}.overview__speedtest-meta{font-size:.75rem;color:var(--text-muted)}.overview__link{align-self:flex-start;font-size:.875rem;font-weight:500;color:var(--accent-blue);text-decoration:none}.overview__link:hover{text-decoration:underline}.overview__footer{display:flex;justify-content:flex-end;padding-top:.5rem}@media(min-width:640px){.overview__cards,.overview__cards--hardware,.overview__speedtest-grid{grid-template-columns:repeat(2,1fr)}}@media(min-width:1024px){.overview__cards{grid-template-columns:repeat(4,1fr)}.overview__cards--hardware{grid-template-columns:repeat(2,1fr)}.overview__section-header{flex-direction:row;align-items:center;justify-content:space-between}}.clients{display:flex;flex-direction:column;gap:1.5rem}.clients__title{font-size:1.5rem;font-weight:700;color:var(--text-primary)}.clients__label{display:block;margin-bottom:.5rem;font-size:.875rem;font-weight:500;color:var(--text-muted)}.clients__select{width:100%;padding:.625rem .75rem;font-size:.875rem;color:var(--text-primary);background-color:var(--bg-primary);border:1px solid var(--border-color);border-radius:var(--radius)}.clients__info{display:flex;flex-direction:column;gap:1rem}.clients__info-header{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem}.clients__name{font-size:1.25rem;font-weight:700;color:var(--text-primary)}.clients__target{font-size:.875rem;color:var(--text-muted)}.clients__info-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}.clients__info-label{font-size:.75rem;color:var(--text-muted);margin-bottom:.25rem}.clients__info-value{font-size:1rem;font-weight:600;color:var(--text-primary)}.clients__since{font-size:.875rem;color:var(--text-muted)}.clients__section{display:flex;flex-direction:column;gap:1rem}.clients__section-header{display:flex;flex-direction:column;gap:.75rem}.clients__section-title{font-size:1.125rem;font-weight:600;color:var(--text-primary)}.clients__section-actions{display:flex;align-items:center;justify-content:space-between;gap:.75rem}.clients__usage-grid{display:grid;grid-template-columns:repeat(1,1fr);gap:1rem}.clients__usage-item{padding:1rem;background-color:var(--bg-secondary);border:1px solid var(--border-color);border-radius:var(--radius)}.clients__usage-label{font-size:.75rem;color:var(--text-muted);margin-bottom:.25rem}.clients__usage-value{font-size:1.25rem;font-weight:700;color:var(--text-primary)}.clients__footer{display:flex;justify-content:flex-end;padding-top:.5rem}@media(min-width:640px){.clients__info-grid{grid-template-columns:repeat(4,1fr)}.clients__usage-grid{grid-template-columns:repeat(2,1fr)}}@media(min-width:1024px){.clients__section-header{flex-direction:row;align-items:center;justify-content:space-between}}.hardware{display:flex;flex-direction:column;gap:1.5rem}.hardware__title{font-size:1.5rem;font-weight:700;color:var(--text-primary)}.hardware__device{display:flex;flex-direction:column;gap:1.5rem}.hardware__device-header{display:flex;flex-direction:column;gap:.75rem;padding-bottom:1rem;border-bottom:1px solid var(--border-color)}.hardware__device-title{font-size:1.25rem;font-weight:700;color:var(--text-primary)}.hardware__device-type{display:inline-block;margin-top:.25rem;padding:.125rem .5rem;font-size:.75rem;font-weight:600;color:var(--accent-purple);background-color:color-mix(in srgb,var(--accent-purple) 15%,transparent);border-radius:9999px;width:fit-content}.hardware__device-meta{display:flex;align-items:center;gap:.75rem}.hardware__section{display:flex;flex-direction:column;gap:1rem}.hardware__section-header{display:flex;flex-direction:column;gap:.75rem}.hardware__section-title{font-size:1rem;font-weight:600;color:var(--text-primary)}.hardware__interface-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.75rem}.hardware__interface-card{display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding:.75rem 1rem;background-color:var(--bg-secondary);border:1px solid var(--border-color);border-radius:var(--radius)}.hardware__interface-name{font-size:.875rem;font-weight:500;color:var(--text-secondary);font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace}.hardware__empty{color:var(--text-muted);font-size:.875rem}@media(min-width:768px){.hardware__device-header,.hardware__section-header{flex-direction:row;align-items:center;justify-content:space-between}.hardware__interface-grid{grid-template-columns:repeat(3,1fr)}}@media(min-width:1024px){.hardware__interface-grid{grid-template-columns:repeat(4,1fr)}}.speedtest{display:flex;flex-direction:column;gap:1.5rem}.speedtest__title{font-size:1.5rem;font-weight:700;color:var(--text-primary)}.speedtest__section-title{font-size:1.125rem;font-weight:600;color:var(--text-primary)}.speedtest__latest{display:flex;flex-direction:column;gap:1rem}.speedtest__latest-grid{display:grid;grid-template-columns:repeat(1,1fr);gap:1rem}.speedtest__result-card{padding:1rem;background-color:var(--bg-secondary);border:1px solid var(--border-color);border-radius:var(--radius)}.speedtest__result-header{display:flex;align-items:center;justify-content:space-between;gap:.75rem;margin-bottom:.75rem}.speedtest__result-source{font-size:1rem;font-weight:600;color:var(--text-primary)}.speedtest__badge{padding:.25rem .5rem;font-size:.75rem;font-weight:600;border-radius:9999px}.speedtest__badge--mikrotik{color:var(--accent-blue);background-color:color-mix(in srgb,var(--accent-blue) 15%,transparent)}.speedtest__badge--ookla{color:var(--accent-green);background-color:color-mix(in srgb,var(--accent-green) 15%,transparent)}.speedtest__result-value{font-size:1.5rem;font-weight:700;color:var(--text-primary)}.speedtest__result-detail{font-size:.875rem;color:var(--text-secondary)}.speedtest__result-meta{font-size:.75rem;color:var(--text-muted)}.speedtest__empty{color:var(--text-muted);font-size:.875rem}.speedtest__controls{display:flex;align-items:center;justify-content:space-between;gap:.75rem;flex-wrap:wrap}.speedtest__section{display:flex;flex-direction:column;gap:1rem}@media(min-width:640px){.speedtest__latest-grid{grid-template-columns:repeat(2,1fr)}}