.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.workspace-tabs{display:flex;gap:6px;align-items:center;border-bottom:1px solid var(--line);padding-bottom:15px;margin-bottom:30px}
.workspace-tab{display:flex;align-items:center;gap:8px;padding:11px 18px;min-height:44px;background:none;border:0;border-radius:9px;color:#687a90;font-weight:600;font-size:13px}
.workspace-tab.is-active{background:#e8efff;color:#2456be}.workspace-tab svg{width:18px;height:18px}.workspace-tab:hover{background:#edf2f8}.workspace-source{margin-left:auto;color:#8793a5;font-size:11px}
.monitor-heading{margin-bottom:23px}.monitor-alert{padding:12px 16px;margin-bottom:20px;border:1px solid #ecdcb7;border-radius:9px;background:#fffbf0;color:#926516;font-size:12px;line-height:1.65}
.monitor-summary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-bottom:32px}.monitor-stat{background:#fff;border:1px solid var(--line);border-radius:13px;padding:21px 23px;position:relative;overflow:hidden}.monitor-stat:first-child{background:#eef4ff;border-color:#dbe6fc}.monitor-stat-label{font-size:12px;color:#5f738b;font-weight:600}.monitor-stat-value{display:flex;align-items:baseline;gap:9px;margin:9px 0 5px}.monitor-stat-value strong{font-size:32px;line-height:1.2;letter-spacing:-1px;color:#1b3454;font-weight:650;font-variant-numeric:tabular-nums}.monitor-stat:first-child strong{color:#2356c3}.monitor-stat-value>span{font-size:12px;color:#8390a2}.monitor-stat p{margin:9px 0 0;font-size:10px;color:#8795a6}
.monitor-section-title{margin-bottom:17px}.monitor-node-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.monitor-node{border:1px solid var(--line);border-radius:14px;background:#fff;min-width:0;overflow:hidden;box-shadow:0 2px 3px #18314b02}.monitor-node.selected-node{border-color:#80a4ef;box-shadow:0 0 0 2px #3266d20b}.monitor-node-head{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:20px 20px 0}.monitor-node-identity{display:flex;gap:10px;align-items:center;min-width:0}.monitor-node-identity h3{font-size:14px;font-weight:650;margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.node-color{border-radius:8px;min-width:32px;height:32px;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:12px;background:color-mix(in srgb,currentColor 9%,white)}
.health-badge{border-radius:20px;white-space:nowrap;padding:3px 8px;font-size:10px;font-weight:600;background:#f2f5f8;color:#7d899a}.health-badge.healthy{background:#eaf6f0;color:#168066}.health-badge.warning{color:#997034;background:#fcf5e8}.monitor-node-sub{display:flex;justify-content:space-between;gap:8px;margin:11px 20px 0;color:#8c98a8;font-size:9px;font-variant-numeric:tabular-nums}.monitor-node-sub>span:first-child{color:#6e8196;font-size:11px}.service-line{display:flex;align-items:center;gap:6px;margin:12px 20px 17px;font-size:10px;color:#718299}.service-dot{display:inline-block;min-width:5px;width:5px;height:5px;border-radius:50%;background:#b3becc}.service-dot.good{background:#30a17c}.service-dot.warn{background:#c5a15b}.node-metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin:0 20px;gap:9px}.metric-name{display:block;font-size:10px;color:#8b97a7;margin-bottom:4px}.metric-number{font-size:21px;line-height:1.2;font-weight:600;color:#263e5b;font-variant-numeric:tabular-nums;white-space:nowrap}.metric-number small{font-size:8px;color:#8c99a9;margin-left:3px;font-weight:400}.node-resources{display:flex;justify-content:space-between;gap:9px;margin:16px 20px 0;padding-bottom:15px;border-bottom:1px solid #eef1f6}.node-resources>span{display:flex;gap:6px;font-size:10px;color:#8a98a9;white-space:nowrap}.node-resources strong{font-size:10px;color:#63778f;font-weight:500;font-variant-numeric:tabular-nums}.node-claude{margin:14px 20px 11px}.claude-summary,.claude-value{display:flex;align-items:center;justify-content:space-between;gap:8px}.claude-summary>span{font-size:10px;color:#6f8198}.claude-status{font-size:10px;font-weight:500}.healthy{color:#18866a}.warning{color:#a37432}.claude-value{margin-top:5px}.claude-value>strong{font-size:17px;letter-spacing:-.25px;font-weight:600;color:#3c5576;font-variant-numeric:tabular-nums}.claude-value>span{font-size:9px;color:#8b97a6}.node-diagnostics{margin:0 20px 13px;font-size:10px;color:#8c99aa}.node-diagnostics summary{cursor:pointer;min-height:30px;display:flex;align-items:center;gap:5px}.node-diagnostics summary:before{content:'＋';font-size:12px}.node-diagnostics[open] summary:before{content:'−'}.diagnostic-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding:9px 0}.diagnostic-grid>div{display:flex;flex-direction:column;gap:3px}.diagnostic-grid strong{font-size:11px;color:#536d8a;font-weight:500}.diagnostic-note,.tcp-states{font-size:9px;line-height:1.7;color:#8c98a9;overflow-wrap:anywhere;margin:4px 0}.monitor-node-footer{background:#fbfcfe;border-top:1px solid #edf1f6;display:flex;align-items:center;justify-content:space-between;padding:2px 20px}.monitor-node-footer button{min-height:39px;font-size:10px}.monitor-node-footer button:last-child{color:#3c6cc6}.history-section{margin-top:38px}.history-heading{display:flex;align-items:center;justify-content:space-between;gap:20px}.history-heading h2{font-size:18px;margin:0;color:#233b56;font-weight:650}.history-heading p{font-size:10px;color:#8b98a9;margin:6px 0 0}.monitor-filters{display:flex;align-items:center;gap:12px}.monitor-filters label{display:flex;align-items:center;gap:8px;font-size:11px;color:#7c8da3;white-space:nowrap}.monitor-filters select{color:#3f5875;font:inherit;font-size:12px;border:1px solid #dde5ef;background:#fff;border-radius:8px;padding:10px 29px 10px 12px;min-height:42px;max-width:160px;cursor:pointer}.monitor-filters select:focus-visible{outline:3px solid #a9c5ff;outline-offset:2px}.monitor-window{font-size:10px;color:#8795a8;margin:14px 0 19px}.monitor-chart-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}.monitor-chart{min-width:0;border:1px solid var(--line);border-radius:14px;background:#fff;padding:21px 20px 0;overflow:hidden}.chart-heading{display:flex;justify-content:space-between;gap:10px;align-items:flex-start;margin-bottom:17px}.chart-heading h3{font-size:14px;margin:0;font-weight:650;color:#304863}.chart-subtitle{font-size:10px;color:#8d9bad;margin:4px 0 0}.chart-badge{font-size:9px;white-space:nowrap;line-height:1.6;padding:2px 7px;border-radius:5px;color:#8a99ac;background:#f4f6f9}.chart-badge.warn{color:#a17836;background:#fff7e9}.chart-plot{position:relative;width:100%;height:210px;outline-offset:2px;border-radius:5px;touch-action:pan-y}.chart-plot:focus-visible{outline:2px solid #adc8fb}.chart-plot>svg{display:block;width:100%;height:210px;fill:none;overflow:visible;stroke:none;stroke-width:0;flex-shrink:initial}.chart-gridline{stroke:#ecf0f5;stroke-width:1;shape-rendering:crispEdges}.chart-axis{fill:#8796a9;font-family:inherit;font-size:10px;stroke:none;font-weight:400}.chart-unit{font-size:9px;fill:#94a2b3}.chart-series{fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.chart-cursor{stroke:#b9c5d6;stroke-width:1;stroke-dasharray:3 4}.chart-empty{position:absolute;inset:25px 0 30px;display:flex;align-items:center;justify-content:center;color:#9aa6b6;font-size:12px;background:#ffffffbd;pointer-events:none}.chart-stale .chart-series{opacity:.6}.series-vpn-01{color:#336bd6}.series-vpn-02{color:#0d967c}.series-vpn-03{color:#895dc8}.series-vpn-04{color:#cf8732}.series-vpn-05{color:#cb677d}.series-vpn-06{color:#278fa9}.series-swatch{display:inline-block;width:12px;height:3px;background:currentColor;flex:0 0 12px;border-radius:1px}.chart-inspect{display:flex;align-items:center;gap:8px 11px;flex-wrap:wrap;min-height:43px;padding:5px 0 3px;color:#8b98aa;font-size:9px}.inspect-time{width:100%;color:#657e9a;font-size:10px;font-weight:500}.inspect-value{display:flex;align-items:center;gap:4px;font-variant-numeric:tabular-nums;white-space:nowrap}.inspect-value .series-swatch{width:6px;flex-basis:6px}.chart-scrubber{display:flex;flex-direction:column;margin:3px 0 10px;gap:0}.chart-scrubber input{width:100%;height:25px;padding:0;margin:0;accent-color:#4174d8;cursor:pointer;box-shadow:none;border:0;background:none}.chart-scrubber input:disabled{opacity:.35;cursor:default}.scrubber-hint{font-size:9px;color:#a1adbb;text-align:right}.chart-legend{padding-bottom:14px}.chart-legend-row{display:grid;grid-template-columns:minmax(95px,1.3fr) repeat(3,minmax(0,1fr));gap:8px;align-items:center;padding:5px 0;min-height:26px}.legend-header{font-size:9px;color:#9ba6b6;border-bottom:1px solid #edf1f6;padding-bottom:7px;margin-bottom:3px}.legend-header>span:not(:first-child){text-align:right}.legend-name{display:flex;align-items:center;gap:7px;font-size:10px;min-width:0;color:#6e8097}.legend-name>span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.legend-value{text-align:right;color:#6d8199;font-size:10px;font-variant-numeric:tabular-nums}.chart-data{border-top:1px solid #edf1f6;margin:0 -20px;padding:0 20px;background:#fbfcfe}.chart-data>summary{font-size:10px;color:#7890ab;cursor:pointer;min-height:40px;display:flex;align-items:center;gap:6px}.chart-data>summary:before{content:'＋';font-size:12px}.chart-data[open]>summary:before{content:'−'}.chart-table-wrap{max-height:330px;overflow:auto;margin-bottom:13px;scrollbar-width:thin}.chart-table{border-collapse:collapse;min-width:100%;font-size:10px;white-space:nowrap}.chart-table caption{text-align:left;color:#8799ad;font-size:10px;padding:5px 0 10px}.chart-table th,.chart-table td{padding:8px 10px;border-bottom:1px solid #e9eef5;text-align:right;font-weight:400}.chart-table th:first-child{padding-left:0;text-align:left}.chart-table thead th{font-weight:600;color:#5b7390;background:#f0f4fa;position:sticky;top:0}.chart-table tbody th{color:#8899ad}.chart-table td{font-variant-numeric:tabular-nums;color:#5a7390}.node-card:focus{outline:3px solid #abc7ff;outline-offset:4px}
@media(min-width:1450px){.workspace{max-width:1320px}.monitor-stat{padding:23px 25px}.monitor-node-head{padding-top:23px}.monitor-node-sub,.service-line,.node-metrics,.node-resources,.node-claude{margin-left:23px;margin-right:23px}.monitor-node-head{padding-left:23px;padding-right:23px}.monitor-node-footer{padding-left:23px;padding-right:23px}.monitor-chart{padding:24px 24px 0}.chart-data{margin:0 -24px;padding:0 24px}}
@media(max-width:1100px){.monitor-node-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.monitor-stat{padding:18px}.monitor-stat-value strong{font-size:29px}.monitor-stat p{font-size:9px}.monitor-filters{gap:8px}.monitor-filters label{flex-direction:column;align-items:flex-start;gap:5px}.chart-legend-row{grid-template-columns:minmax(80px,1.25fr) repeat(3,minmax(0,1fr));gap:5px}}
@media(max-width:760px){.workspace-tabs{margin-bottom:22px;padding-bottom:12px}.workspace-source{display:none}.workspace-tab{padding:10px 15px;font-size:12px}.monitor-summary{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-bottom:26px}.monitor-stat{padding:17px 18px}.monitor-stat-value strong{font-size:30px}.monitor-stat-label{font-size:11px}.monitor-stat p{font-size:9px}.monitor-section-title{align-items:flex-start}.monitor-section-title>span{max-width:160px;text-align:right;line-height:1.6;font-size:9px}.monitor-chart-grid{grid-template-columns:1fr;gap:16px}.monitor-heading p{font-size:11px}.monitor-node-head{padding-left:17px;padding-right:17px}.monitor-node-sub,.service-line,.node-metrics,.node-resources,.node-claude{margin-left:17px;margin-right:17px}.monitor-node-sub{flex-direction:column;gap:3px}.monitor-node-footer{padding-left:17px;padding-right:17px}.node-metrics{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.node-resources{gap:6px;flex-wrap:wrap}.history-heading{align-items:flex-start;gap:15px}.history-heading p{max-width:210px;font-size:9px}.monitor-filters label{font-size:9px}.monitor-filters select{padding:8px 20px 8px 9px;font-size:11px;max-width:126px;min-height:40px}.monitor-window{font-size:9px;line-height:1.6}.chart-inspect{min-height:43px}.chart-scrubber input{height:36px}.chart-legend-row{grid-template-columns:minmax(95px,1.4fr) repeat(3,minmax(0,1fr))}.chart-heading h3{font-size:14px}.chart-subtitle{font-size:10px}}
@media(max-width:520px){.monitor-heading{gap:10px}.monitor-heading h1{font-size:25px}.monitor-heading .heading-side{gap:8px}.monitor-heading p{max-width:200px;font-size:10px}.monitor-heading .heading-side .button{font-size:10px;min-height:36px}.monitor-node-grid{grid-template-columns:1fr;gap:15px}.monitor-node-head{padding:19px 20px 0}.monitor-node-sub{flex-direction:row;margin-left:20px;margin-right:20px;font-size:9px}.service-line,.node-metrics,.node-resources,.node-claude{margin-left:20px;margin-right:20px}.node-metrics{grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.node-resources{flex-wrap:nowrap}.metric-number{font-size:21px}.monitor-node-footer{padding-left:20px;padding-right:20px}.monitor-node-footer button{font-size:11px;min-height:42px}.node-diagnostics summary{min-height:35px}.history-section{margin-top:30px}.history-heading{flex-wrap:wrap;gap:15px}.history-heading p{max-width:none}.monitor-filters{width:100%;gap:10px}.monitor-filters label{flex:1;flex-direction:row;gap:8px}.monitor-filters select{flex:1;max-width:none;width:100%;min-height:43px}.monitor-chart{padding:19px 15px 0}.chart-data{margin:0 -15px;padding:0 15px}.chart-plot,.chart-plot>svg{height:196px}.chart-inspect{gap:7px 10px;min-height:58px}.chart-legend-row{grid-template-columns:minmax(85px,1.3fr) repeat(3,minmax(0,1fr));gap:5px}.chart-legend{padding-bottom:10px}.chart-subtitle{font-size:9px}.chart-badge{font-size:9px}.legend-name,.legend-value{font-size:10px}.legend-header{font-size:9px}.chart-data>summary{min-height:43px}.monitor-alert{font-size:11px}.monitor-stat-value strong{font-size:28px}.monitor-stat-value>span{font-size:10px}.monitor-stat p{line-height:1.5}.monitor-node-identity h3{font-size:14px}.monitor-node-head .health-badge{font-size:10px}}
.node-client-rtt{margin:13px 20px 0;display:flex;align-items:center;justify-content:space-between;font-size:10px;color:#8291a5}.node-client-rtt strong{font-size:13px;color:#415e80;font-weight:600;font-variant-numeric:tabular-nums}.clients-section{margin-top:36px}.clients-section .history-heading p{max-width:none}.clients-caveat{font-size:10px;line-height:1.8;color:#8c9aad;margin-top:13px}.clients-empty{display:flex;align-items:center;justify-content:center;min-height:110px;border:1px dashed #dce5f0;background:#f9fbfe;border-radius:12px;color:#96a4b6;font-size:12px;padding:20px;text-align:center}.clients-table-wrap{background:#fff;border:1px solid var(--line);border-radius:12px;overflow:auto}.clients-table{border-collapse:collapse;width:100%;white-space:nowrap;font-size:11px}.clients-table th{font-size:10px;font-weight:500;text-align:left;color:#8294a9;background:#f9fbfe;padding:13px 14px;border-bottom:1px solid var(--line)}.clients-table td{padding:14px;border-bottom:1px solid #edf1f6;color:#5d7591;font-variant-numeric:tabular-nums}.clients-table tbody tr:last-child td{border-bottom:0}.client-source strong{font-weight:500;display:flex;align-items:center;gap:6px;color:#496889;font-size:11px}.client-source>span,.client-source>small{display:block;font-size:10px;margin-top:3px;color:#8295ac}.client-source>small{font-size:9px;color:#9eacbd}.clients-stale{opacity:.75}.clients-pagination{display:flex;align-items:center;justify-content:flex-end;gap:10px;margin-top:13px}.clients-pagination>span{margin-right:auto;color:#8b9caf;font-size:10px}.clients-pagination .button{min-height:38px;font-size:11px}
@media(max-width:760px){.clients-table-wrap{border:0;overflow:visible;background:transparent}.clients-table,.clients-table tbody{display:block}.clients-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}.clients-table tbody{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.clients-table tr{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border:1px solid var(--line);border-radius:12px;background:#fff;padding:15px;gap:10px 13px}.clients-table td{border:0;padding:0;font-size:11px;white-space:normal}.clients-table td:before{content:attr(data-label);display:block;font-size:9px;color:#96a6b8;margin-bottom:4px}.clients-table .client-source{grid-column:1/-1;padding-bottom:10px;border-bottom:1px solid #edf1f6}.clients-table .client-source:before{display:none}.client-source>span{font-size:11px}.clients-caveat{font-size:9px}.clients-section .history-heading{gap:12px}.clients-section .monitor-filters{width:auto}.clients-section .monitor-filters label{white-space:nowrap}.clients-section .history-heading>div:first-child{flex:1}.clients-section .history-heading p{font-size:9px;max-width:240px}.node-client-rtt{margin-left:17px;margin-right:17px}}
@media(max-width:520px){.clients-table tbody{grid-template-columns:1fr}.clients-table tr{padding:18px;gap:13px 17px}.clients-table td{font-size:12px}.clients-table td:before{font-size:10px}.client-source strong{font-size:12px}.clients-section{margin-top:29px}.clients-section .history-heading{flex-wrap:nowrap}.clients-section .monitor-filters label{font-size:9px;flex-direction:column;align-items:flex-start;gap:4px}.clients-section .monitor-filters select{width:105px;min-height:40px}.clients-section .history-heading h2{font-size:18px}.clients-section .history-heading p{font-size:9px;max-width:205px}.node-client-rtt{margin-left:20px;margin-right:20px}.clients-pagination>span{max-width:150px;font-size:9px}}
.chart-scrubber input:focus-visible{outline:2px solid #91b4f5;outline-offset:3px}
.qr-dialog{max-width:420px}.qr-dialog .dialog-header h2{margin:0}.qr-node{margin:5px 0 0;color:#7c8fa7;font-size:12px}.qr-body{padding:5px 28px 22px;text-align:center}.qr-status{font-size:12px;min-height:36px;line-height:1.6;margin:9px 0 12px}.qr-code{display:flex;justify-content:center;align-items:center;background:#fff;padding:10px;border:1px solid #e5ebf3;border-radius:12px;min-height:276px}.qr-code svg{display:block;max-width:100%;width:256px;height:256px;fill:none;stroke:none;stroke-width:0;flex-shrink:0}.qr-note{font-size:11px;line-height:1.7;color:#7a8da6;max-width:280px;margin:16px auto 0}.node-card-footer{gap:10px;flex-wrap:wrap}.node-qr{color:#3c6cc6;white-space:nowrap}.login-message .login-description{font-size:38px;line-height:1.55;letter-spacing:-.5px}.chart-empty{min-height:140px}.chart-legend:empty{min-height:174px}
@media(max-width:760px){.login-message .login-description{font-size:26px;line-height:1.45}.qr-body{padding-left:22px;padding-right:22px}}
@media(prefers-reduced-motion:reduce){.node-card,.monitor-chart{scroll-behavior:auto}}
.auto-refresh-control{display:flex;align-items:center;gap:7px;min-height:26px;font-size:10px;color:#6f829b;cursor:pointer;white-space:nowrap}.auto-refresh-control input{width:14px;height:14px;min-height:0;margin:0;padding:0;border-radius:3px;accent-color:#376ed6}.auto-refresh-control input:focus-visible{outline:2px solid #a0bef6;outline-offset:3px}
.monitor-heading .heading-side{align-items:center;min-width:136px}.monitor-heading #monitor-sync,.monitor-heading .auto-refresh-control{display:grid;grid-template-columns:14px 1fr;gap:7px;justify-content:start;text-align:left;margin:0;min-height:26px;font-size:11px;line-height:1.55}.monitor-heading #monitor-sync>.status-dot{justify-self:center}.client-source .client-ip{overflow-wrap:anywhere;white-space:normal;max-width:260px}.login-form-inner>h2{margin-bottom:28px}
@media(max-width:760px){.monitor-heading .heading-side{align-items:stretch}.monitor-heading #monitor-sync,.monitor-heading .auto-refresh-control{font-size:10px}.monitor-heading .heading-side>.button{align-self:flex-end}}