:root{color-scheme:light;font-synthesis:none}
html[data-theme=dark]{color-scheme:dark}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0}
h1,h2,h3,p{margin:0}
a{color:inherit;text-decoration:none}
button,input,select{font:inherit;color:inherit}
button,a,summary,select{cursor:pointer}
button,select{padding:8px 12px}
button:hover,a:hover{color:var(--accent)}
button:disabled{opacity:.5;cursor:wait}
small{font-size:12px;color:var(--muted)}
strong,b{font-weight:600}
.shell{margin:auto}
.eyebrow{color:var(--muted)}
.header-inner{flex-wrap:wrap;gap:0}
.header-actions{margin-left:auto}
.header-actions button{padding:0;width:33px;height:33px;font-size:20px}
nav a{border-bottom:2px solid transparent}
nav a.active{border-bottom-color:var(--text)}
#connection{color:var(--warn)}
#connection.live{color:var(--muted)}
#connection.live:before{content:"";display:inline-block;background:var(--signal);border-radius:50%}
#last-update{margin-left:auto}
.kpi>strong{white-space:nowrap}
.kpi small{display:block}
.kpi-track{overflow:hidden}
.kpi-track b{height:100%;display:block;background:var(--signal)}
#stat-in,.down strong{color:var(--down)}
#stat-out,.up strong{color:var(--accent)}
.regions-panel{min-width:0}
.regions-panel>summary{display:flex;align-items:center;justify-content:space-between;list-style:none;pointer-events:none;cursor:default;gap:8px}
.regions-panel summary::-webkit-details-marker{display:none}
.disclosure{display:none}
h2{font-size:16px;font-weight:600}
.region-reset{display:flex;justify-content:space-between;font-size:12px;padding:6px 9px}
#region-list{overflow:auto;scrollbar-width:thin}
.region{width:100%;display:grid;grid-template-columns:24px 1fr auto;align-items:center;gap:9px;text-align:left}
.region-info{min-width:0;display:flex;flex-direction:column}
.region-info strong{font-weight:500}
.region-info small{font-size:12px}
.region-count{display:flex;flex-direction:column;text-align:right;font-size:12px}
.region-count small{font-size:12px}
.flag{display:inline-flex;width:23px;height:16px;align-items:center;justify-content:center;border-radius:3px;overflow:hidden;font-size:12px;flex-shrink:0}
.flag svg{width:100%;height:100%;display:block}
.panel-note{font-size:12px;color:var(--muted)}
.map-panel{min-width:0}
.panel-heading,.map-footer{display:flex;align-items:center;justify-content:space-between;gap:10px}
.live-label{display:flex;align-items:center}
#map-stage{position:relative;margin:auto}
#globe-holder{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}
#globe{width:100%;height:100%;display:block;cursor:grab;touch-action:pan-y}
#globe:active{cursor:grabbing}
#map-labels{position:absolute;inset:0;pointer-events:none}
.map-label{position:absolute;pointer-events:auto;transform:translate(-50%,-50%);display:flex;align-items:center;gap:7px;font-size:12px;white-space:nowrap}
.map-label .status-dot{width:6px;height:6px;box-shadow:0 0 0 3px var(--halo);margin:0 2px}
.map-footer{color:var(--muted)}
#map-tip{position:absolute;bottom:3px;left:5px;right:5px;max-width:330px;margin:auto;padding:10px 13px;z-index:5;font-size:12px;white-space:pre-line;pointer-events:none}
#globe-error{position:absolute;inset:30% 0 auto;z-index:3;background:var(--panel)}
.status-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--signal);box-shadow:0 0 0 4px var(--halo);flex-shrink:0;margin:0 5px}
.status-dot.is-offline,.offline .status-dot{background:var(--bad);box-shadow:0 0 0 4px var(--bad-halo)}
.status-dot.is-warning{background:var(--warn);box-shadow:0 0 0 4px color-mix(in srgb,var(--warn) 15%,transparent)}
.map-label:hover .status-dot{animation:presence 1.7s ease-in-out infinite}
@keyframes presence{50%{opacity:.45}}
.section-heading h2 small{margin-left:8px;font-size:12px}
.status-filter button{font-size:12px}
.status-filter .is-offline{box-shadow:0 0 0 3px var(--bad-halo)}
.search{display:flex;align-items:center;gap:8px;flex:1;min-width:0;color:var(--muted)}
.search>span{line-height:1}
input{border:0;background:none;min-width:0;width:100%;padding:3px}
select{font-size:12px;min-height:41px;min-width:145px}
#clear-region{font-size:12px}
.node-columns,.node-row{display:grid;align-items:center;padding:13px 18px}
.node-columns{border-bottom:1px solid var(--line)}
.node-row{border-bottom:1px solid var(--line);min-width:0}
.node-row:hover,.node-row.map-selected{background:var(--soft)}
.status-cell{display:flex;align-items:center}
.node-name{padding:0;background:none;border:0;text-align:left;max-width:100%;display:block}
.node-name h3{overflow-wrap:anywhere}
.node-main>small{font-size:12px;display:block;margin-top:3px;color:var(--muted)}
.rate-cell strong{font-variant-numeric:tabular-nums}
.rate-cell>small,.transfer-cell>small{display:none}
.meters>div{display:flex;font-size:12px}
.meters span{color:var(--muted)}
.meters strong{text-align:right;font-weight:500;font-variant-numeric:tabular-nums}
.meters i{flex:1}
.meters b{display:block;height:100%;background:var(--accent)}
.meters [data-bar=ram]{background:var(--purple)}
.meters [data-bar=disk]{background:var(--down)}
.meters b.hot{background:var(--warn)}
.transfer-cell{font-variant-numeric:tabular-nums}
.transfer-cell strong{font-weight:500}
.node-pings{color:var(--muted);font-variant-numeric:tabular-nums}
.node-pings .lossy{color:var(--bad)}
.uptime-cell{color:var(--muted);white-space:nowrap}
.detail-button{padding:3px 0;border:0;background:none;font-size:22px;line-height:1}
.node-detail{grid-column:1/-1;min-width:0}
.node-detail>summary{display:none}
.details{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:15px;margin:15px 0 0;padding:15px 0 4px;font-size:12px}
.details dt{color:var(--muted);font-size:12px}
.details dd{margin:4px 0 0;overflow-wrap:anywhere}
.activity-list{list-style:none}
.activity-list li{display:flex;align-items:center;gap:10px;font-size:13px}
.activity-list time{margin-left:auto;font-size:12px;color:var(--muted);white-space:nowrap}
.activity-note{font-size:12px;color:var(--muted)}
#network,#activity{min-height:calc(100vh - 230px)}
footer{display:flex;justify-content:space-between;gap:15px;flex-wrap:wrap;color:var(--muted)}
footer b{font-weight:400}
.empty{padding:25px;text-align:center;color:var(--muted);font-size:13px}
#notice{font-size:13px;margin-top:14px}
.skip{position:absolute;top:-100px}
.skip:focus{top:0;z-index:40;background:var(--panel);padding:15px}
[hidden]{display:none!important}
@media (max-width:1300px){.shell{width:calc(100% - 40px)}
.node-columns,.node-row{grid-template-columns:58px minmax(125px,1.4fr) 55px minmax(78px,.8fr) minmax(78px,.8fr) minmax(115px,1fr) 75px 110px 70px 24px;column-gap:10px;padding-inline:13px}
.kpi{padding:13px}
.kpi #stat-in,.kpi #stat-out,.kpi #stat-month,.kpi #stat-cost{font-size:19px}
.observatory{grid-template-columns:1fr 1.8fr 1fr}
.regions-panel{padding:16px 13px}
.region-info strong{font-size:12px}}
@media (max-width:1100px){.node-columns,.node-row{grid-template-columns:55px minmax(125px,1.5fr) minmax(78px,1fr) minmax(78px,1fr) minmax(118px,1fr) minmax(90px,1fr) 24px}
.node-columns>span:nth-child(3),.node-row>.node-region{display:none}
.node-columns>span:nth-child(7),.node-row>.transfer-cell{display:none}
.node-columns>span:nth-child(9),.node-row>.uptime-cell{display:none}
.observatory{grid-template-columns:1fr 1.4fr}
.kpis{gap:8px}
.kpi-label{font-size:12px}
.kpi>strong{font-size:24px}
.kpi small{font-size:12px}
.header-actions{gap:7px}
.details{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:800px){.shell{width:calc(100% - 28px)}
.brand{gap:6px}
.atlas-mark{width:27px;height:27px}
.header-actions button{width:30px;height:30px}
.admin-link{font-size:12px}
nav{margin-top:10px}
nav a{padding-bottom:10px}
h1{font-size:19px}
#last-update{font-size:12px}
#site-title{font-size:12px}
.regions-panel{border-right:0;border-top:1px solid var(--line)}
.regions-panel>summary{pointer-events:auto;cursor:pointer}
.disclosure{display:block;color:var(--muted)}
.regions-panel>summary small{margin-left:auto}
.regions-panel[open] .disclosure{transform:rotate(180deg)}
.panel-heading .eyebrow{font-size:12px}
.map-footer{font-size:12px}
.node-table{border:0;overflow:visible}
#node-list{display:grid;grid-template-columns:1fr}
.node-row{border:1px solid var(--line)!important}
.status-cell>span{display:none}
.status-cell .status-dot{width:8px;height:8px;margin:0 4px}
.node-row>.node-region{display:flex}
.node-row>.rate-cell{border-top:1px solid var(--line)}
.meters{grid-template-columns:repeat(3,minmax(0,1fr))}
.meters>div{flex-wrap:wrap}
.meters span{font-size:12px;width:auto}
.meters strong{font-size:12px;margin-left:auto;width:auto}
.meters i{order:3;flex-basis:100%}
.node-pings{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.node-row>.transfer-cell{display:block;font-size:12px}
.node-row>.uptime-cell{display:block;align-self:end;text-align:right;font-size:12px}
.details{grid-template-columns:1fr 1fr;padding-top:12px}
.section-heading{gap:10px}
.table-toolbar{gap:7px;flex-wrap:wrap}
.search{padding:6px 9px}
.search input{font-size:12px}
#sort{min-width:98px;width:98px;font-size:12px;min-height:38px}
.activity-list li{font-size:12px;flex-wrap:wrap}
.activity-list time{font-size:12px}}
@media (max-width:430px){
.kpi>strong{line-height:1.45}
.kpi-track{display:none}
.node-pings>span{white-space:pre-line}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}
*,*:before{animation:none!important;transition:none!important}}
.analytics-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.analysis-card{padding:16px;position:relative;min-width:0;border-right:1px solid var(--line);--chart-color:var(--accent)}
.analysis-card:last-child{border:0}
.analysis-card[data-chart=ct]{--chart-color:var(--down)}
.analysis-card[data-chart=cm]{--chart-color:var(--purple)}
.analysis-top{display:flex;justify-content:space-between;align-items:center;font-size:13px}
.analysis-top>span:before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;margin-right:8px;background:var(--chart-color)}
.analysis-top strong{font-size:23px;color:var(--chart-color);font-variant-numeric:tabular-nums}
.chart{width:100%;height:125px;display:block;margin-top:12px;overflow:visible;touch-action:pan-y}
.chart .gridline{stroke:var(--line);stroke-dasharray:3 4;fill:none;stroke-width:1}
.chart .series{stroke:var(--chart-color);stroke-width:2;fill:none;vector-effect:non-scaling-stroke;stroke-linejoin:round}
.chart .sample-dot{fill:var(--chart-color)}
.chart .cursor{stroke:var(--muted);stroke-width:1;stroke-dasharray:3 3}
.chart .axis-text{font-size:12px;font-family:inherit;fill:var(--muted)}
.chart .loss-mark{fill:var(--bad)}
.chart-tooltip{margin-top:6px;padding:7px 9px;background:var(--soft);border-radius:6px;color:var(--text);font-size:12px;min-height:31px;font-variant-numeric:tabular-nums}
.chart-note{display:flex;justify-content:space-between;gap:8px;margin-top:8px;font-size:12px;color:var(--muted)}
@media (max-width:1000px){.analytics-grid{grid-template-columns:1fr}
.analysis-card{border-right:0;border-bottom:1px solid var(--line)}
.chart{height:145px}}
.observatory.no-globe{grid-template-columns:1fr 1fr}
@media (max-width:800px){.observatory.no-globe{display:flex}
.observatory.no-globe .regions-panel{border-top:0}}
#online-bar{width:0}
@media (max-width:800px){.node-row>.transfer-cell{grid-column:1;grid-row:5}
.node-row>.uptime-cell{grid-column:2;grid-row:5}
.node-row>.node-pings{grid-row:6}
.node-row>.node-detail-cell{grid-row:7}}
@media (max-width:800px){#connection{display:inline-block;font-size:0;margin-right:2px}
#connection:before{content:"";display:block;width:6px;height:6px;border-radius:50%;background:var(--warn);margin:0 4px}
#connection.live:before{margin:0 4px}
.node-main>small{overflow-wrap:anywhere}}
.empty-actions button{display:block;font-size:12px}
.skeleton-row{height:78px;display:grid;grid-template-columns:16px 1.6fr repeat(4,1fr);gap:34px;align-items:center;padding:18px 24px;border-bottom:1px solid var(--line)}
.skeleton-row i,.skeleton-row span{display:block;height:12px;border-radius:4px;background:var(--line)}
.skeleton-row i{height:10px;width:10px;border-radius:50%}
.skeleton-row span:nth-child(2){height:27px;max-width:175px}
.skeleton-row span:nth-child(4){width:70%}
.is-loading .kpi>strong,.is-loading .kpi>small,.is-loading #last-update,.is-loading #site-title{color:transparent!important;background:var(--line);border-radius:4px;min-height:12px}
.is-loading .kpi>strong{width:72%;height:29px;margin:7px 0}
.is-loading .kpi>small{width:80%;height:12px}
.is-loading #last-update{width:85px}
.is-loading #site-title{width:30px}
.is-loading #region-list{height:230px;background:repeating-linear-gradient(180deg,transparent 0 17px,var(--line) 17px 28px,transparent 28px 48px);margin-top:10px;opacity:.65}
.is-loading #all-regions{visibility:hidden}
.is-loading .live-label,.is-loading .map-footer{visibility:hidden}
.is-loading #map-stage:before{content:"";position:absolute;inset:15px calc(50% - 126px);width:252px;height:252px;border-radius:50%;border:1px solid var(--line);background:radial-gradient(circle at 35% 30%,var(--panel),var(--soft))}
.is-loading #globe-holder{visibility:hidden}
.kpi #stat-cost.multi-currency{overflow-wrap:anywhere;padding-block:5px}
.uptime-label{display:none}
@media (max-width:800px){.skeleton-row{height:190px;grid-template-columns:16px 1fr 1fr;gap:20px;border:1px solid var(--line);border-radius:7px;margin-bottom:10px}
.skeleton-row:last-child{border-bottom:1px solid var(--line)}
.skeleton-row span:nth-child(2){grid-column:2/-1}
.skeleton-row span:nth-child(n/**/+3){grid-column:auto}
.is-loading #map-stage:before{width:194px;height:194px;inset:9px calc(50% - 97px)}
.uptime-label{display:inline;font-size:12px}}
.node-detail-cell{grid-column:1/-1;min-width:0}
input::placeholder{color:var(--muted);opacity:1}
.node-detail-cell{display:contents}
.node-detail-cell>.node-detail{grid-column:1/-1}
.quick-filters,.active-filters{display:flex;align-items:center;flex-wrap:wrap;margin:0 0 12px}
.quick-filters button,.active-filters button{font-size:12px;padding:5px 10px}
.quick-filters small{font-size:12px}
.active-filters button{color:var(--accent);background:var(--tint);border-color:transparent}
.detail-cell .detail-button{font-weight:500;white-space:nowrap;border-radius:4px}
.detail-cell .detail-button:hover{background:var(--tint)}
.node-row>.detail-cell{overflow:visible}
.activity-toolbar{display:flex;gap:12px;align-items:center}
.activity-toolbar .search{max-width:520px}
.activity-toolbar>small{margin-left:auto;white-space:nowrap}
.event-body{display:flex;gap:9px;align-items:baseline;min-width:0;overflow-wrap:anywhere}
.event-kind{border-radius:4px;background:var(--soft);white-space:nowrap}
.activity-list li[data-kind=warning] .event-kind{color:var(--warn)}
.activity-list li[data-kind=offline] .event-kind{color:var(--bad)}
.activity-list li[data-kind=recovery] .event-kind{color:var(--accent)}
.network-tracker{display:grid;grid-template-columns:repeat(24,minmax(0,1fr));margin-top:14px}
.network-tracker button{padding:0;min-width:0;border:0;background:var(--line)}
.network-tracker .healthy{background:var(--accent)}
.network-tracker .warning{background:var(--warn)}
.network-tracker .failed{background:var(--bad)}
.network-tracker .unknown{background:repeating-linear-gradient(135deg,var(--line) 0 3px,var(--soft) 3px 6px)}
.tracker-key{margin-top:10px;font-size:12px;color:var(--muted)}
.tracker-key span:before{content:"";display:inline-block;background:var(--line)}
.tracker-key .healthy:before{background:var(--accent)}
.tracker-key .warning:before{background:var(--warn)}
.tracker-key .failed:before{background:var(--bad)}
.tracker-caption{font-size:12px;color:var(--muted);margin-top:6px}
.tracker-tooltip{font-size:12px;min-height:44px;padding:8px 0;color:var(--muted)}
@media (max-width:800px){.quick-filters small{flex-basis:100%;line-height:1.6}
.activity-toolbar>small{margin-left:0}
.event-body{flex:1;align-items:flex-start}
.activity-list time{padding-left:24px}
.network-tracker button{height:28px}
.tracker-tooltip{min-height:48px}}
.status-dot.is-neutral{background:var(--muted);box-shadow:0 0 0 3px var(--line)}
.network-explainer{flex-wrap:wrap;font-size:12px;color:var(--muted)}
.network-explainer .tracker-key{margin:0;font-size:12px}
.network-explainer>small{flex-basis:100%;font-size:12px}
.network-server{border:1px solid var(--line);background:var(--panel);content-visibility:auto;contain-intrinsic-size:auto 266px}
.network-server-heading{display:flex;align-items:center;gap:10px;border-bottom:1px solid var(--line)}
.network-server-heading h3{overflow-wrap:anywhere;min-width:0}
.network-server-heading small{font-size:12px;white-space:nowrap}
.network-server-status{margin-left:auto;color:var(--muted);font-size:12px;white-space:nowrap}
.network-server .chart{margin-top:7px}
.network-server .analytics-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.network-server .analysis-card{border-bottom:0;border-right:1px solid var(--line)}
.network-server .analysis-card:last-child{border-right:0}
@media (max-width:700px){
.network-server .analytics-grid{grid-template-columns:1fr}
.network-server .analysis-card:last-child{border-bottom:0}
.network-explainer .tracker-key{gap:7px 12px}}
.icon-button{position:relative;display:inline-grid;place-items:center;width:32px;height:32px;padding:0!important}
.icon-button svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.icon-button:hover{background:var(--tint)}
.icon-button[aria-pressed=true]{background:var(--tint);color:var(--accent)}
.has-badge #activity-badge{position:absolute;right:3px;top:3px;width:6px;height:6px;border-radius:50%;background:var(--signal);box-shadow:0 0 0 2px var(--panel)}
.activity-popover{position:absolute;right:max(16px,calc((100vw - 1560px)/2));top:67px;width:min(350px,calc(100vw - 28px));padding:13px;z-index:40}
.popover-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-bottom:9px;border-bottom:1px solid var(--line);font-size:12px}
.popover-heading a{font-size:12px;color:var(--accent)}
#activity-popover-list{list-style:none;padding:0;margin:0}
#activity-popover-list li{display:flex;gap:7px;align-items:baseline;padding:9px 0;border-bottom:1px solid var(--line);font-size:12px}
#activity-popover-list li:last-child{border-bottom:0}
#activity-popover-list time{margin-left:auto;color:var(--muted);white-space:nowrap;font-size:12px}
#activity-popover-empty{margin:0;padding:14px 0 3px;color:var(--muted);font-size:12px}
@media (max-width:800px){
.activity-popover{right:14px;top:58px}
.icon-button{width:30px;height:30px}}
.brand,.kpi>strong{font-family:var(--atlas-ui-mono);font-weight:500;letter-spacing:0}
.kpi>strong{font-variant-numeric:tabular-nums}
.rate-cell strong,.node-pings,.meters strong{font-variant-numeric:tabular-nums}
.node-name h3{font-family:inherit}
.chart-note{flex-wrap:wrap;row-gap:4px}
.region-info small{line-height:1.5}
.has-badge #activity-badge{font-size:0;overflow:hidden}
.section-heading{flex-wrap:wrap}
.quick-filters small{line-height:1.6}
@media (max-width:800px){
.node-pings>span{overflow-wrap:anywhere}
.meters span,.meters strong{width:auto}}
.icon-button svg,.search-icon svg,.command-item-icon svg,.command-input-row>svg,.drawer-actions svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.search-icon{display:inline-flex!important;align-items:center;justify-content:center}
.search-icon svg{width:15px;height:15px}
.command-open{position:relative}
.command-open::after{content:"K";position:absolute;right:-4px;bottom:-4px;min-width:13px;height:13px;padding:0 2px;border:1px solid var(--line);border-radius:4px;background:var(--panel);color:var(--muted);font-size:8px;line-height:11px;font-weight:700;box-shadow:0 2px 8px rgba(0,0,0,.06)}
.command-palette{width:min(650px,calc(100vw - 28px));max-height:min(620px,78vh);padding:0;color:var(--text);overflow:hidden}
.command-shell{display:flex;flex-direction:column;max-height:min(620px,78vh)}
.command-input-row{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;padding:15px 16px}
.command-input-row>svg{color:var(--muted)}
.command-input-row input{width:100%;border:0;outline:0;background:transparent;color:var(--text);font-size:15px}
.command-input-row input::placeholder{color:var(--muted)}
kbd{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:22px;padding:0 6px;border:1px solid var(--line);border-bottom-color:color-mix(in srgb,var(--line) 70%,var(--text));border-radius:5px;background:var(--soft);color:var(--muted);font:600 10px/1 var(--atlas-ui-mono);box-shadow:0 1px 0 rgba(0,0,0,.04)}
.command-results{padding:8px;overflow:auto;overscroll-behavior:contain}
.command-item{width:100%;display:grid;grid-template-columns:34px 1fr;align-items:center;gap:9px;background:transparent;text-align:left}
.command-item:hover,.command-item[aria-selected=true]{color:var(--text)}
.command-item-icon{width:30px;height:30px;display:flex;align-items:center;justify-content:center;border:1px solid var(--line);border-radius:7px;color:var(--muted);background:var(--panel)}
.command-item>span:last-child{min-width:0;display:flex;align-items:center;justify-content:space-between;gap:16px}
.command-item strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px}
.command-item small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:right;font-size:11px}
.command-empty{padding:32px 18px;text-align:center;color:var(--muted)}
.command-footer{display:flex;gap:16px;justify-content:flex-end;padding:9px 14px;color:var(--muted);font-size:10px}
.command-footer span{display:flex;align-items:center;gap:4px}
.command-footer kbd{min-width:18px;height:18px;padding:0 4px;font-size:9px}
.node-drawer-layer{position:fixed;inset:0;z-index:70}
.node-drawer-layer[hidden]{display:none}
.drawer-backdrop{position:absolute;inset:0;width:100%;height:100%;padding:0;border:0;border-radius:0;background:rgba(9,13,16,.34);opacity:0;transition:opacity .18s ease;backdrop-filter:blur(2px)}
.node-drawer{position:absolute;right:0;top:0;width:min(510px,100vw);height:100%;display:flex;flex-direction:column;background:var(--panel);border-left:1px solid var(--line);box-shadow:-18px 0 60px rgba(0,0,0,.14);transform:translateX(100%);transition:transform .2s ease}
.node-drawer-layer.is-open .drawer-backdrop{opacity:1}
.node-drawer-layer.is-open .node-drawer{transform:none}
.drawer-open{overflow:hidden}
.node-drawer header{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;padding:24px 24px 18px;border-bottom:1px solid var(--line)}
.node-drawer header h2{margin-top:4px;font-size:23px;line-height:1.15;letter-spacing:-.45px}
.node-drawer header small{display:block;margin-top:7px}
.node-drawer header .icon-button{flex:0 0 auto}
.drawer-actions{display:flex;gap:8px;padding:12px 24px;border-bottom:1px solid var(--line);background:var(--soft)}
.drawer-actions button{display:inline-flex;align-items:center;gap:7px;padding:7px 10px;background:var(--panel);font-size:11px}
.drawer-actions button:hover{background:var(--soft)}
.drawer-actions svg{width:15px;height:15px}
.drawer-body{padding:20px 24px 34px;overflow:auto;overscroll-behavior:contain}
.drawer-snapshot{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border:1px solid var(--line);border-radius:10px;overflow:hidden;margin-bottom:18px}
.drawer-snapshot>div{padding:14px 15px;min-width:0;border-bottom:1px solid var(--line)}
.drawer-snapshot>div:nth-child(odd){border-right:1px solid var(--line)}
.drawer-snapshot>div:last-child{border-bottom:0}
.drawer-snapshot>div:last-child:nth-child(odd){grid-column:1/-1;border-right:0}
.drawer-snapshot small{display:block;margin-bottom:4px}
.drawer-snapshot strong{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:18px;letter-spacing:-.3px}
.drawer-details{margin:0;border-top:1px solid var(--line)}
.drawer-details>div{display:grid;grid-template-columns:118px 1fr;gap:18px;padding:12px 2px;border-bottom:1px solid var(--line)}
.drawer-details>div[hidden]{display:none}
.drawer-details dt{color:var(--muted);font-size:11px}
.drawer-details dd{margin:0;min-width:0;overflow-wrap:anywhere;font-size:12px;text-align:right}
.toast-host{position:fixed;z-index:90;right:18px;bottom:18px;width:min(380px,calc(100vw - 36px));display:flex;flex-direction:column;align-items:stretch;gap:8px;pointer-events:none}
.atlas-toast{display:grid;grid-template-columns:auto 1fr;align-items:start;gap:10px;padding:11px 13px;color:var(--text);font-size:12px;opacity:0;transform:translateY(8px) scale(.98);transition:opacity .18s ease,transform .18s ease}
.atlas-toast.show{opacity:1;transform:none}
.atlas-toast .status-dot{margin-top:4px}
.atlas-toast.offline .status-dot{background:var(--bad)}
.atlas-toast.warning .status-dot{background:var(--warn)}
.atlas-toast.recovery .status-dot{background:var(--signal)}
.atlas-toast.connection .status-dot{background:var(--muted)}
#last-update{min-width:74px;text-align:right;font-variant-numeric:tabular-nums}
.detail-button,.node-name{transition:color .15s ease,background .15s ease}
.detail-button:hover{background:var(--soft)}
@media (max-width:800px){.command-open::after{display:none}
.command-palette{width:calc(100vw - 16px);border-radius:12px}
.command-footer{justify-content:flex-start;overflow:auto}
.command-item>span:last-child{display:block}
.command-item small{display:block;margin-top:2px;text-align:left}
.node-drawer{height:min(82vh,720px);border-top:1px solid var(--line);border-radius:16px 16px 0 0}
.node-drawer-layer.is-open .node-drawer{transform:none}
.node-drawer header{touch-action:pan-x}
.toast-host{right:10px;bottom:10px;width:calc(100vw - 20px)}
.drawer-details>div{grid-template-columns:105px 1fr}
.header-actions #command-open{display:inline-flex}}
@media (max-width:430px){.command-footer span:last-child{display:none}
.drawer-snapshot strong{font-size:16px}
.drawer-actions button{flex:1;justify-content:center}}
@media (prefers-reduced-motion:reduce){.drawer-backdrop,.node-drawer,.atlas-toast{transition:none!important}}
.node-trends{grid-template-columns:repeat(3,minmax(0,1fr));gap:3px 7px;width:100%;min-width:0}
.node-spark{display:block}
.node-spark svg{display:block;width:100%;color:var(--accent)}
.node-sample-track{grid-column:1/-1;display:grid;grid-template-columns:repeat(60,minmax(0,1fr));gap:1px}
.node-sample-track>span{background:var(--line)}
.node-sample-track>.healthy{background:var(--accent)}
.node-sample-track>.warning{background:var(--warn)}
.node-sample-track>.failed{background:var(--bad)}
.node-sample-track>.unknown{background:var(--line)}
.node-trends>small{grid-column:1/-1;font-size:10px;color:var(--muted)}
.drawer-trends{margin-top:18px}
[data-network-range][aria-pressed=true]{color:var(--accent);border-color:var(--accent)}
.node-trends{display:block;max-width:240px;margin-top:8px}
.node-sparks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.node-spark{min-width:0}
.node-spark small{display:block;white-space:nowrap}
.node-spark svg{height:30px;margin:0;fill:none;overflow:hidden}
.spark-series{fill:none;stroke:currentColor;vector-effect:non-scaling-stroke}
.spark-baseline{fill:none;stroke:var(--line);stroke-width:1}
.node-spark[data-metric=net_in_speed] svg{color:var(--down)}
.node-spark[data-metric=net_out_speed] svg{color:var(--accent)}
.node-sample-track{height:16px;align-items:center;cursor:crosshair;outline-offset:3px}
.node-sample-track>span{transition:height .1s}
.node-sample-track>.selected{outline:2px solid var(--text);outline-offset:1px;position:relative;z-index:1}
.node-sample-track:hover>span{opacity:.7}
.node-sample-track>span:hover,.node-sample-track>.selected{opacity:1}
.node-sample-note{display:block;line-height:1.5;margin-top:3px;overflow-wrap:anywhere;white-space:normal}
.trend-live,.chart-resume{padding:3px 7px;font-size:11px;margin-top:4px}
.trend-live[hidden],.chart-resume[hidden]{display:none}
.drawer-trends{max-width:none;margin:0 0 18px}
.drawer-trends .node-spark svg{height:38px}
.history-note{text-align:left;font-size:12px}
.network-tracker button{border-radius:3px!important}
.network-tracker button:hover{filter:brightness(1.15);transform:scaleY(1.16)}
.network-server .chart .cursor{stroke:var(--text);stroke-width:1;stroke-dasharray:3 3}
@media (prefers-reduced-motion:reduce){.node-sample-track>span{transition:none}}
.node-detail-cell>.node-detail{width:100%}
.node-detail .inline-trends{padding-top:14px}
.node-detail:not([open]){display:none}
@media (max-width:800px){.header-actions .admin-link{white-space:nowrap;font-size:12px}
.header-actions{flex-wrap:wrap;justify-content:flex-end;max-width:100%}}
.quota-track{margin-top:5px;background:var(--line)}
.quota-track>b{width:0;background:var(--accent);transition:width .2s ease,background .2s ease}
.quota-track>b.hot{background:var(--warn)}
.quota-track>b.over{background:var(--bad)}
.quota-remaining{display:block!important;margin-top:4px;font-size:10px;line-height:1.25;overflow:hidden;text-overflow:ellipsis}
@media (max-width:1100px){.quota-remaining{font-size:10px}}
@media (prefers-reduced-motion:reduce){.quota-track>b{transition:none}}
.kpis{margin-bottom:10px}
.kpi>strong{min-height:0}
.network-explainer button{padding:6px 10px;font-size:12px}
.history-note{padding-bottom:10px}
.network-server .network-tracker{gap:3px!important;margin-top:4px;min-height:24px;align-items:center}
.network-server .network-tracker button{height:24px;background:transparent;position:relative;border-radius:4px!important;transform:none;filter:none}
.network-tracker button::before{background:var(--line)}
.network-tracker button.healthy::before{background:var(--accent)}
.network-tracker button.warning::before{background:var(--warn)}
.network-tracker button.failed::before{background:var(--bad)}
.network-tracker button.unknown::before{background:repeating-linear-gradient(135deg,var(--line) 0 3px,var(--soft) 3px 6px)}
.network-tracker button[aria-pressed=true]{outline:1px solid var(--accent);outline-offset:1px}
.network-server .chart-note{font-size:11px;margin-top:1px}
.network-server .chart-tooltip{border-radius:5px;line-height:1.6}
.node-detail .node-sample-note{font-size:11px}
.quota-remaining{white-space:normal}
.analysis-card .chart{touch-action:pan-y}
.kpi-live-traffic{overflow:hidden}
.kpi-live-traffic>span,.kpi-live-traffic>strong,.kpi-live-traffic>small{position:relative;z-index:1}
.kpi-live-traffic .kpi-spark{position:absolute;overflow:visible;pointer-events:none;color:var(--down)}
.kpi-live-traffic[data-live-traffic=out] .kpi-spark{color:var(--accent)}
.kpi-live-traffic .kpi-spark-baseline{fill:none;stroke:var(--line);stroke-width:1}
.kpi-live-traffic .kpi-spark-series{fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
@media (max-width:1100px){.kpi{padding-inline:10px}
.kpi #stat-in,.kpi #stat-out,.kpi #stat-month{font-size:19px}
.kpi #stat-cost{font-size:16px}}
@media (max-width:800px){
.kpi small{min-height:0}
.node-detail .inline-trends{max-width:100%}
.network-server .network-tracker button{height:28px}
.network-tracker button::before{inset-block:9px}
.network-tracker button:hover::before,.network-tracker button[aria-pressed=true]::before{inset-block:7px}}
.kpi,.network-server,.node-table{border-color:color-mix(in srgb,var(--line) 90%,var(--accent) 10%)}
.kpi{background:linear-gradient(155deg,var(--panel),color-mix(in srgb,var(--panel) 97%,var(--accent)))}
.header-actions .icon-button{border-color:transparent;background:transparent;border-radius:8px}
.header-actions .icon-button:hover{background:var(--soft);border-color:var(--line)}
.node-detail .inline-trends{margin-top:12px}
.node-sparks{gap:10px}
.node-spark{position:relative;padding:9px 10px 3px;border:1px solid var(--line);border-radius:10px;background:var(--panel);overflow:hidden;color:var(--muted)}
.node-spark small{font-size:10px;line-height:15px}
.node-spark .spark-value{display:block;position:relative;z-index:1;color:var(--text);font-size:16px;font-weight:500;line-height:22px;font-variant-numeric:tabular-nums;white-space:nowrap}
.node-detail .node-spark svg{width:calc(100% + 12px);margin:0 -6px;overflow:hidden}
.spark-series{stroke-width:1.35;stroke-linecap:round;stroke-linejoin:round}
.spark-baseline{opacity:.3}
.plot-area{stroke:none;pointer-events:none}
.plot-end{fill:currentColor;stroke:var(--panel);stroke-width:1.5;vector-effect:non-scaling-stroke;pointer-events:none}
.network-server .chart{color:var(--chart-color)}
.network-server .chart .plot-end{r:2}
.node-sample-track{margin-top:8px}
.node-sample-track>span{height:6px;border-radius:3px}
.node-sample-track>.selected{height:12px}
.node-sample-note{color:var(--muted)}
.node-detail .details{padding-top:12px;margin-top:12px}
.chart-tooltip{border:1px solid transparent}
.chart-tooltip:has(+.chart-resume:not([hidden])){border-color:var(--line)}
.network-server .plot-area{opacity:.65}
@media (max-width:430px){.node-sparks{gap:6px}
.node-spark{padding:7px 6px 2px;border-radius:8px}
.node-spark .spark-value{font-size:13px}
.node-spark small{font-size:10px}
.node-detail .node-spark svg{height:30px}}
.meters b.safe,.quota-track>b.safe{background:linear-gradient(90deg,var(--accent),var(--signal));color:var(--signal)}
.meters b.warn,.quota-track>b.warn{background:linear-gradient(90deg,var(--signal),#e8ae36);color:#e8ae36}
.meters b.hot,.quota-track>b.hot{background:linear-gradient(90deg,#e8ae36,#f07834);color:#f07834}
.meters b.critical,.quota-track>b.critical,.quota-track>b.over{background:linear-gradient(90deg,#f07834,var(--bad));color:var(--bad)}
.meters b.unknown,.quota-track>b.unknown{background:var(--line);color:var(--muted)}
.plot-end{transform-box:fill-box;transform-origin:center}
@keyframes atlas-meter-pulse{0%,100%{opacity:.72;box-shadow:0 0 0 2px var(--panel),0 0 5px currentColor}50%{opacity:1;box-shadow:0 0 0 2px var(--panel),0 0 10px currentColor}}
@keyframes atlas-plot-pulse{0%,100%{opacity:.82;transform:scale(.9)}50%{opacity:1;transform:scale(1.22)}}
@media (prefers-reduced-motion:reduce){.meters b,.quota-track>b{transition:none}
.meters b::after,.quota-track>b::after,.plot-end{animation:none}}
.meters i,.quota-track{background:color-mix(in srgb,var(--line) 92%,var(--panel));overflow:visible}
.meters b,.quota-track>b{--meter-color:var(--accent);background:var(--meter-color)!important;color:var(--meter-color)!important;transition:width .22s ease,background-color .22s ease,color .22s ease,box-shadow .22s ease!important}
.meters b.safe,.meters b.warn,.meters b.hot,.meters b.critical,.quota-track>b.safe,.quota-track>b.warn,.quota-track>b.hot,.quota-track>b.critical,.quota-track>b.over{background:var(--meter-color)!important;color:var(--meter-color)!important}
.meters b::after,.quota-track>b::after{background:var(--meter-color)!important;color:var(--meter-color)!important;box-shadow:0 0 0 2px var(--panel),0 0 7px color-mix(in srgb,var(--meter-color) 72%,transparent)!important;animation:none!important;opacity:.95!important}
.meters b.unknown,.quota-track>b.unknown{--meter-color:var(--muted);box-shadow:none}
.plot-end{animation:none!important}
.kpi>strong,.spark-value,.rate-cell strong,.meters strong,.node-pings,.transfer-cell,.uptime-cell{font-variant-numeric:tabular-nums}
@media (max-width:800px){
.kpi{border-radius:8px}
.kpi>strong{font-size:20px!important;line-height:1.18;margin:3px 0 1px}
.kpi #stat-in,.kpi #stat-out,.kpi #stat-month,.kpi #stat-cost{font-size:18px!important}
.kpi small{line-height:1.25}
.kpi-track{left:9px;right:9px;bottom:4px}
.node-row{border-radius:8px}
.detail-cell .detail-button{min-height:28px;padding:3px 1px;font-size:11px}
.node-name h3{line-height:1.3}
.node-main>small{margin-top:1px;font-size:10px;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.node-row>.node-region{padding-left:22px;margin-top:-3px;line-height:1.2;white-space:nowrap;overflow:hidden}
.rate-cell strong{line-height:1.15}
.meters span,.meters strong{line-height:1.1}
.meters i{height:3px}
.meters b::after{width:4px;height:4px;box-shadow:0 0 0 1px var(--panel),0 0 4px var(--meter-color)!important}
.node-pings{line-height:1.2}
.node-row>.transfer-cell,.node-row>.uptime-cell{line-height:1.2}
.quota-track{height:3px;margin-top:2px}
.quota-remaining{line-height:1.1;margin-top:2px!important;white-space:nowrap!important}
.node-detail{margin-top:-5px}
.node-detail .inline-trends{margin-top:7px;padding-top:7px}
.node-sparks{gap:5px}
.node-spark{padding:6px 6px 1px;border-radius:7px}
.node-spark small{font-size:9px;line-height:12px}
.node-spark .spark-value{font-size:12px;line-height:17px}
.node-detail .node-spark svg{height:26px}
.node-sample-track{margin-top:5px;height:12px}
.node-sample-track>span{height:5px}
.node-sample-track>.selected{height:10px}
.node-detail .node-sample-note{font-size:9px;line-height:1.25}
.node-detail .details{padding-top:7px;margin-top:7px}
.details dt{font-size:9px}
.details dd{font-size:10px;line-height:1.25;margin-top:2px}
.quick-filters,.active-filters{margin-bottom:8px;gap:5px}
.quick-filters button,.active-filters button{padding:4px 7px;font-size:10px}
.quick-filters small{font-size:9px}}
.network-mobile-tabs{display:none}
@media (max-width:700px){#network{min-height:0}
.network-explainer{margin-bottom:7px;gap:5px 8px;font-size:10px}
.network-explainer button{padding:4px 7px;font-size:10px}
.network-explainer>small{font-size:9px;line-height:1.35}
.history-note{font-size:10px;padding-bottom:6px}
.network-server{margin-bottom:8px;border-radius:8px;contain-intrinsic-size:auto 235px}
.network-server-heading{min-height:38px;padding:7px 9px;gap:6px;flex-wrap:nowrap}
.network-server-heading h3{font-size:12px;line-height:1.25;max-width:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.network-server-heading small{font-size:9px;margin-left:0}
.network-server-status{font-size:9px}
.network-mobile-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-bottom:1px solid var(--line);background:color-mix(in srgb,var(--soft) 55%,var(--panel))}
.network-mobile-tabs button{min-width:0;padding:4px 6px;border:0;background:transparent;color:var(--muted);font-size:10px;line-height:1.25;touch-action:manipulation}
.network-mobile-tabs button[aria-pressed=true]{background:var(--panel);color:var(--text);box-shadow:inset 0 0 0 1px var(--line)}
.network-server .analytics-grid{display:block!important;overflow:visible!important}
.network-server .analysis-card{display:none;border-right:0!important;border-bottom:0!important;padding:7px 9px!important}
.network-server[data-mobile-carrier=cu] .analysis-card[data-chart=cu],.network-server[data-mobile-carrier=ct] .analysis-card[data-chart=ct],.network-server[data-mobile-carrier=cm] .analysis-card[data-chart=cm]{display:block}
.network-server .analysis-top{font-size:10px}
.network-server .analysis-top strong{font-size:17px}
.network-server .chart{height:58px;margin-top:2px;touch-action:pan-y}
.network-server .network-tracker{min-height:16px;margin-top:1px;gap:2px!important}
.network-server .network-tracker button{height:18px}
.network-tracker button::before{inset-block:6px}
.network-tracker button:hover::before,.network-tracker button[aria-pressed=true]::before{inset-block:5px}
.network-server .chart-tooltip{min-height:22px;margin-top:3px;padding:3px 5px;font-size:9px;line-height:1.35}
.network-server .chart-note{font-size:9px;line-height:1.2;margin-top:0;gap:4px}
.tracker-caption,.tracker-tooltip{font-size:9px}}
@media (max-width:430px){.shell{width:calc(100% - 18px)}
.kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
.kpi>strong{font-size:19px!important}
.kpi #stat-in,.kpi #stat-out,.kpi #stat-month,.kpi #stat-cost{font-size:17px!important}
.kpi small{font-size:8.5px}
.node-row>.detail-cell{right:6px;top:6px}
.node-row>.node-region{padding-left:21px}
.rate-cell strong{font-size:14px}
.meters{gap:5px}
.node-pings{font-size:9px}
.node-row>.transfer-cell,.node-row>.uptime-cell{font-size:9px}
.network-server .chart{height:54px}}
@media (prefers-reduced-motion:reduce){.meters b,.quota-track>b{transition:none!important}
.plot-end{animation:none!important}}
:root{--atlas-surface-shadow:0 1px 2px rgba(15,23,42,.035),0 1px 1px rgba(15,23,42,.025);--atlas-surface-shadow-hover:0 8px 24px rgba(15,23,42,.065),0 2px 6px rgba(15,23,42,.04)}
html[data-theme=dark]{--atlas-surface-shadow:0 1px 2px rgba(0,0,0,.22);--atlas-surface-shadow-hover:0 10px 28px rgba(0,0,0,.28),0 2px 8px rgba(0,0,0,.18)}
@media (min-width:801px){.node-table{border:0!important;border-radius:0!important;overflow:visible!important;background:transparent!important}
.node-columns{background:transparent!important;border:0!important;padding-top:0!important;padding-bottom:8px!important;color:color-mix(in srgb,var(--muted) 88%,transparent)}
#node-list{display:grid;gap:10px}
.node-row{border:1px solid var(--line)!important;border-radius:11px!important;background:var(--panel)!important;box-shadow:var(--atlas-surface-shadow);overflow:visible;transition:border-color .16s ease,box-shadow .16s ease,transform .16s ease,background-color .16s ease}
.node-row:last-child{border-bottom:1px solid var(--line)!important}
.node-row:hover{background:var(--panel)!important;border-color:color-mix(in srgb,var(--line) 58%,var(--muted))!important;box-shadow:var(--atlas-surface-shadow-hover);transform:translateY(-1px)}
.node-row.map-selected{background:color-mix(in srgb,var(--tint) 28%,var(--panel))!important;border-color:color-mix(in srgb,var(--accent) 34%,var(--line))!important}
.node-row:has(.node-detail[open]){border-color:color-mix(in srgb,var(--accent) 26%,var(--line))!important;box-shadow:0 8px 28px rgba(15,23,42,.055),0 1px 3px rgba(15,23,42,.035)}
html[data-theme=dark] .node-row:has(.node-detail[open]){box-shadow:0 10px 30px rgba(0,0,0,.24)}
.detail-cell .detail-button{width:28px!important;min-width:28px!important;height:28px!important;min-height:28px!important;padding:0!important;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--line)!important;border-radius:7px!important;background:var(--panel)!important;color:var(--muted);box-shadow:0 1px 1px rgba(15,23,42,.03);font-size:0!important}
.detail-cell .detail-button::before{content:"⌄";display:block;font-size:15px;line-height:1;transform:translateY(-1px);transition:transform .16s ease,color .16s ease}
.detail-cell .detail-button[aria-expanded=true]::before{transform:rotate(180deg) translateY(1px)}
.detail-cell .detail-button:hover{color:var(--text);background:var(--soft)!important;border-color:color-mix(in srgb,var(--line) 55%,var(--muted))!important}
.node-detail-cell>.node-detail{margin-top:3px!important;padding-top:13px;border-top:1px solid var(--line)}
.node-detail .inline-trends{max-width:none!important;margin:0 0 12px!important;padding:0!important;border-top:0!important}
.node-detail .node-sparks{gap:9px}
.node-detail .node-spark{padding:9px 10px 5px;border:1px solid color-mix(in srgb,var(--line) 88%,var(--panel));border-radius:8px;background:color-mix(in srgb,var(--soft) 72%,var(--panel))}
.node-detail .node-spark small{color:var(--muted);font-size:10px}
.node-detail .node-spark .spark-value{display:block;margin-top:1px;color:var(--text);font-size:13px;line-height:1.35;font-weight:550;font-variant-numeric:tabular-nums}
.node-detail .node-spark svg{height:37px!important}
.node-detail .node-sample-track{margin-top:8px}
.node-detail .node-sample-note{margin-top:5px;color:var(--muted)}
.node-detail .details{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;column-gap:28px!important;row-gap:0!important;margin:10px 0 0!important;padding:4px 0 0!important;border-top:1px solid var(--line)!important}
.node-detail .details>div{min-width:0;display:grid;grid-template-columns:minmax(76px,auto) minmax(0,1fr);align-items:baseline;gap:12px;padding:8px 1px;border-bottom:1px solid color-mix(in srgb,var(--line) 82%,transparent)}
.node-detail .details dt{margin:0;color:var(--muted);font-size:10.5px;line-height:1.4;white-space:nowrap}
.node-detail .details dd{margin:0!important;color:var(--text);font-size:11.5px;line-height:1.45;text-align:right;overflow-wrap:anywhere}
.kpi,.observatory,.network-server{border-color:color-mix(in srgb,var(--line) 92%,var(--panel));box-shadow:var(--atlas-surface-shadow)}
.kpi,.network-server{border-radius:11px}
.observatory{border-radius:12px}
.network-server{overflow:hidden;transition:border-color .16s ease,box-shadow .16s ease}
.network-server:hover{border-color:color-mix(in srgb,var(--line) 62%,var(--muted));box-shadow:0 5px 18px rgba(15,23,42,.045)}
.table-toolbar .search,.table-toolbar select,.table-toolbar button,.status-filter button,.quick-filters button,.active-filters button,.network-explainer button{border-radius:7px}
.status-filter button,.quick-filters button,.network-explainer button{transition:background-color .14s ease,border-color .14s ease,color .14s ease,box-shadow .14s ease}
.status-filter button[aria-pressed=true],.quick-filters button[aria-pressed=true],.network-explainer button[aria-pressed=true]{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 20%,transparent)}
.table-toolbar{margin-bottom:11px}
.quick-filters{margin-bottom:10px}}
@media (min-width:801px) and (max-width:1100px){.node-detail .details{grid-template-columns:1fr!important}
.node-detail .node-sparks{gap:7px}}
@media (prefers-reduced-motion:reduce){.node-row,.network-server,.detail-cell .detail-button::before{transition:none!important}
.node-row:hover{transform:none!important}}
:root{--atlas-control-bg:color-mix(in srgb,var(--soft) 82%,var(--panel));--atlas-control-border:color-mix(in srgb,var(--line) 88%,var(--panel));--atlas-control-shadow:0 1px 1px rgba(15,23,42,.035);--atlas-badge-online-bg:color-mix(in srgb,var(--signal) 10%,var(--panel));--atlas-badge-online-border:color-mix(in srgb,var(--signal) 24%,var(--line));--atlas-badge-offline-bg:color-mix(in srgb,var(--bad) 9%,var(--panel));--atlas-badge-offline-border:color-mix(in srgb,var(--bad) 22%,var(--line))}
html[data-theme=dark]{--atlas-control-shadow:0 1px 1px rgba(0,0,0,.16);--atlas-badge-online-bg:color-mix(in srgb,var(--signal) 9%,var(--panel));--atlas-badge-offline-bg:color-mix(in srgb,var(--bad) 10%,var(--panel))}
.status-filter,.network-explainer [role=group][aria-label="网络历史范围"]{border:1px solid var(--atlas-control-border);border-radius:9px;background:var(--atlas-control-bg)}
.status-filter button,.network-explainer [role=group][aria-label="网络历史范围"] button{border:0!important;border-radius:6px!important;background:transparent!important;color:var(--muted)}
.status-filter button:hover,.network-explainer [role=group][aria-label="网络历史范围"] button:hover{color:var(--text);background:color-mix(in srgb,var(--panel) 70%,transparent)!important}
.status-filter button[aria-pressed=true],.network-explainer [role=group][aria-label="网络历史范围"] button[aria-pressed=true]{background:var(--panel)!important;color:var(--text)!important;box-shadow:0 1px 2px rgba(15,23,42,.07),inset 0 0 0 1px color-mix(in srgb,var(--line) 82%,transparent)!important}
html[data-theme=dark] .status-filter button[aria-pressed=true],html[data-theme=dark] .network-explainer [role=group][aria-label="网络历史范围"] button[aria-pressed=true]{box-shadow:0 1px 2px rgba(0,0,0,.22),inset 0 0 0 1px color-mix(in srgb,var(--line) 90%,transparent)!important}
.quick-filters button,.active-filters button,#clear-region{min-height:30px;border:1px solid var(--atlas-control-border)!important;border-radius:7px!important;background:var(--panel)!important;color:var(--muted);box-shadow:var(--atlas-control-shadow)}
.quick-filters button:hover,#clear-region:hover{color:var(--text);border-color:color-mix(in srgb,var(--line) 55%,var(--muted))!important}
.quick-filters button[aria-pressed=true],.active-filters button{color:var(--accent)!important;border-color:color-mix(in srgb,var(--accent) 24%,var(--line))!important;background:color-mix(in srgb,var(--tint) 68%,var(--panel))!important;box-shadow:none!important}
.quick-filters small{color:color-mix(in srgb,var(--muted) 86%,transparent)}
.table-toolbar .search,.activity-toolbar .search{border-color:var(--atlas-control-border)!important;background:color-mix(in srgb,var(--soft) 56%,var(--panel));box-shadow:inset 0 1px 1px rgba(15,23,42,.018)}
.table-toolbar .search:focus-within,.activity-toolbar .search:focus-within{border-color:color-mix(in srgb,var(--accent) 48%,var(--line))!important;background:var(--panel)}
.table-toolbar select,.activity-toolbar select{border-color:var(--atlas-control-border)!important;background-color:var(--panel);box-shadow:var(--atlas-control-shadow)}
@media (min-width:801px){.status-cell{gap:5px!important;width:max-content;min-width:0;padding:4px 7px 4px 5px;border:1px solid var(--atlas-badge-online-border);border-radius:999px;background:var(--atlas-badge-online-bg);color:color-mix(in srgb,var(--accent) 82%,var(--text));font-size:10.5px!important;line-height:1}
.status-cell .status-dot{width:5px!important;height:5px!important;margin:0 2px 0 0!important;box-shadow:none!important}
.offline .status-cell{border-color:var(--atlas-badge-offline-border);background:var(--atlas-badge-offline-bg);color:var(--bad)}
.node-region{width:max-content;max-width:100%;gap:6px!important;padding:4px 7px;border:1px solid var(--atlas-control-border);border-radius:7px;background:color-mix(in srgb,var(--soft) 58%,var(--panel));color:var(--muted);line-height:1}
.node-region .flag{width:20px;height:14px}
.network-server-status{display:inline-flex;align-items:center;min-height:23px;padding:3px 7px;border:1px solid var(--atlas-badge-online-border);border-radius:999px;background:var(--atlas-badge-online-bg);color:color-mix(in srgb,var(--accent) 80%,var(--text));font-size:10.5px;line-height:1}
.network-server.offline .network-server-status{border-color:var(--atlas-badge-offline-border);background:var(--atlas-badge-offline-bg);color:var(--bad)}
.live-label{padding:4px 8px 4px 5px;border:1px solid var(--atlas-badge-online-border);border-radius:999px;background:var(--atlas-badge-online-bg)}
.live-label .status-dot{width:5px;height:5px;margin:0 3px 0 0;box-shadow:none}}
@media (min-width:801px){
.header-inner{align-content:start}
.brand{font-size:21px;letter-spacing:-.45px}
.atlas-mark{width:28px;height:28px}
.header-actions{gap:6px!important}
.header-actions .icon-button{width:31px!important;height:31px!important;border:1px solid transparent!important;border-radius:7px!important;background:transparent!important;color:var(--muted);transition:color .14s ease,background-color .14s ease,border-color .14s ease}
.header-actions .icon-button:hover{color:var(--text);border-color:var(--atlas-control-border)!important;background:var(--atlas-control-bg)!important}
#connection{display:inline-flex;align-items:center;min-height:27px;margin-right:4px!important;padding:3px 8px;border:1px solid color-mix(in srgb,var(--warn) 22%,var(--line));border-radius:999px;background:color-mix(in srgb,var(--warn) 7%,var(--panel));color:var(--warn);font-size:10.5px!important;line-height:1}
#connection:before{width:5px!important;height:5px!important;margin-right:6px!important;box-shadow:none!important}
#connection.live{border-color:var(--atlas-badge-online-border);background:var(--atlas-badge-online-bg);color:color-mix(in srgb,var(--accent) 80%,var(--text))}
.admin-link{display:inline-flex;align-items:center;min-height:31px;margin-left:2px!important;padding:0 9px;border:1px solid var(--atlas-control-border);border-radius:7px;background:var(--panel);color:var(--muted);box-shadow:var(--atlas-control-shadow);transition:color .14s ease,border-color .14s ease,background-color .14s ease}
.admin-link:hover{color:var(--text);border-color:color-mix(in srgb,var(--line) 55%,var(--muted));background:var(--soft)}
nav{margin-top:9px!important;border:1px solid var(--atlas-control-border);background:var(--atlas-control-bg)}
nav a{border:0!important;color:var(--muted)!important;transition:color .14s ease,background-color .14s ease,box-shadow .14s ease}
nav a:hover{color:var(--text)!important;background:color-mix(in srgb,var(--panel) 58%,transparent)}
nav a.active{color:var(--text)!important;background:var(--panel)!important}}
.tracker-key span{border:1px solid var(--atlas-control-border);border-radius:999px;background:color-mix(in srgb,var(--soft) 58%,var(--panel));color:var(--muted);white-space:nowrap}
@media (max-width:800px){.status-filter{border-radius:8px}
.network-explainer [role=group][aria-label="网络历史范围"]{gap:1px;padding:2px;border-radius:8px}
.network-explainer [role=group][aria-label="网络历史范围"] button{min-height:27px;padding:4px 7px!important;font-size:10px}
.quick-filters button,.active-filters button,#clear-region{min-height:27px}
.tracker-key span{min-height:21px;padding:2px 6px;font-size:9px}}
@media (max-width:700px){.network-mobile-tabs{gap:2px!important;padding:5px 8px!important;background:var(--atlas-control-bg)!important}
.network-mobile-tabs button{min-height:27px;border:0!important;border-radius:6px!important;background:transparent!important;color:var(--muted)!important;box-shadow:none!important}
.network-mobile-tabs button[aria-pressed=true]{background:var(--panel)!important;color:var(--text)!important;box-shadow:0 1px 2px rgba(15,23,42,.07),inset 0 0 0 1px color-mix(in srgb,var(--line) 82%,transparent)!important}}
@media (prefers-reduced-motion:reduce){nav a,.header-actions .icon-button,.admin-link,.table-toolbar .search,.activity-toolbar .search,.status-filter button,.network-explainer [role=group][aria-label="网络历史范围"] button,.quick-filters button{transition:none!important}}
.transfer-cell>strong{font-variant-numeric:tabular-nums}
@media (min-width:801px){.transfer-cell>strong{font-size:11.5px;letter-spacing:-.08px}
.quota-remaining{color:color-mix(in srgb,var(--muted) 90%,transparent)}}
.network-explainer{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:8px 14px;padding:9px 11px;border:1px solid var(--atlas-control-border);border-radius:11px;background:var(--panel);box-shadow:var(--atlas-surface-shadow)}
.network-explainer>span{display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-width:0}
.network-explainer>.tracker-key{justify-content:flex-end;margin:0!important}
.network-explainer>small{grid-column:1/-1;display:block;margin:0;padding-top:7px;border-top:1px solid color-mix(in srgb,var(--line) 78%,transparent);color:color-mix(in srgb,var(--muted) 88%,transparent);line-height:1.45}
.history-note{min-height:27px;padding:4px 8px!important;border:1px solid var(--atlas-control-border)!important;border-radius:7px!important;background:color-mix(in srgb,var(--soft) 58%,var(--panel))!important;color:var(--muted)!important;box-shadow:var(--atlas-control-shadow);line-height:1.25}
.history-note::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--accent);opacity:.75;flex:0 0 auto}
.history-note:hover{color:var(--text)!important;border-color:color-mix(in srgb,var(--line) 55%,var(--muted))!important}
.network-server-heading{background:color-mix(in srgb,var(--soft) 34%,var(--panel));border-bottom-color:color-mix(in srgb,var(--line) 86%,transparent)!important}
.network-server-heading h3{letter-spacing:-.1px}
.network-server .analysis-card{background:var(--panel)}
.network-server .analysis-top>span{color:var(--muted)}
.network-server .chart-tooltip{border:1px solid color-mix(in srgb,var(--line) 78%,transparent);background:color-mix(in srgb,var(--soft) 70%,var(--panel))}
#activity>.activity-note:first-of-type{border:1px solid var(--atlas-control-border);border-radius:8px;background:color-mix(in srgb,var(--soft) 55%,var(--panel));line-height:1.45}
#activity-count{display:inline-flex;align-items:center;min-height:25px;padding:3px 7px;border:1px solid var(--atlas-control-border);border-radius:999px;background:color-mix(in srgb,var(--soft) 55%,var(--panel));color:var(--muted);font-size:10.5px}
.activity-list{background:transparent!important}
.activity-list li:hover{box-shadow:0 5px 16px rgba(15,23,42,.045)}
.activity-list .event-kind{border:1px solid var(--atlas-control-border);background:color-mix(in srgb,var(--soft) 68%,var(--panel));font-weight:550}
#activity>.activity-note:not(:first-of-type){margin-top:10px;padding-left:2px;line-height:1.45}
#notice{display:flex;align-items:flex-start;gap:8px;padding:9px 11px!important;border-radius:9px!important;background:color-mix(in srgb,var(--warn) 6%,var(--panel))!important;color:color-mix(in srgb,var(--warn) 88%,var(--text))!important;box-shadow:var(--atlas-control-shadow)}
#notice::before{content:"";width:6px;height:6px;margin-top:6px;border-radius:50%;background:var(--warn);flex:0 0 auto}
#empty,#network-empty,#activity-empty{display:flex;align-items:center;justify-content:center;margin:8px 0 0;border:1px dashed color-mix(in srgb,var(--line) 58%,var(--muted));border-radius:10px;background:color-mix(in srgb,var(--soft) 46%,var(--panel));color:var(--muted);text-align:center}
#activity-empty{margin-top:0}
.empty-actions{display:flex;justify-content:center}
.empty-actions button{margin:8px 0 0!important;min-height:30px;border-radius:7px}
#table-skeleton{display:grid;gap:10px}
.skeleton-row{margin-bottom:0!important;border:1px solid var(--line)!important;border-radius:11px!important;background:var(--panel);box-shadow:var(--atlas-surface-shadow);overflow:hidden}
.skeleton-row:last-child{border-bottom:1px solid var(--line)!important}
.skeleton-row i,.skeleton-row span{animation:atlasSkeletonPulse 1.35s ease-in-out infinite}
@keyframes atlasSkeletonPulse{50%{opacity:.46}}
@media (max-width:800px){.network-explainer{grid-template-columns:1fr;padding:7px 8px}
.network-explainer>.tracker-key{justify-content:flex-start}
.network-explainer>small{grid-column:1;padding-top:6px}
.history-note{min-height:25px;margin-bottom:7px;padding:3px 7px!important;font-size:9px!important}
#activity>.activity-note:first-of-type{padding:7px 8px;margin-bottom:8px;font-size:9px}
.activity-toolbar{margin-bottom:8px!important}
#activity-count{min-height:23px;font-size:9px}
.activity-list li{border-radius:8px}
#empty,#network-empty,#activity-empty{min-height:74px;margin-top:6px;padding:14px!important;border-radius:8px;font-size:10px}
#table-skeleton{gap:7px}}
@media (prefers-reduced-motion:reduce){.activity-list li{transition:none!important}
.skeleton-row i,.skeleton-row span{animation:none!important}}
@media (min-width:801px){.masthead{border-bottom:1px solid color-mix(in srgb,var(--line) 88%,transparent)!important;box-shadow:none!important}
.header-inner{display:grid!important;grid-template-columns:auto auto minmax(18px,1fr) auto;grid-template-areas:"brand subtitle spacer actions"
"nav nav nav nav";align-items:center;column-gap:0;row-gap:0;min-height:94px!important;padding-top:10px!important}
.brand{grid-area:brand;align-self:center}
.header-actions{grid-area:actions;margin-left:0!important;justify-self:end;align-self:center}
#activity-popover{z-index:40}
nav{grid-area:nav;justify-self:stretch;width:100%!important;gap:22px!important;margin:8px 0 0!important;padding:0!important;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;overflow:visible!important}
nav a{position:relative;padding:7px 1px 9px!important;border:0!important;border-bottom:2px solid transparent!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;color:var(--muted)!important;font-size:12px!important;font-weight:500;line-height:1.2}
nav a:hover{color:var(--text)!important;background:transparent!important}
nav a.active{color:var(--text)!important;background:transparent!important;border-bottom-color:var(--text)!important;box-shadow:none!important}
html[data-theme=dark] nav a.active{box-shadow:none!important}
#site-title{font-size:11px}
#last-update{font-size:11px;color:color-mix(in srgb,var(--muted) 90%,transparent)}
.section-heading{margin-top:21px!important;margin-bottom:10px!important}
.section-heading h2{font-size:18px!important;font-weight:600;letter-spacing:-.14px}
.section-heading h2 small{font-size:10.5px!important;font-weight:500}
.node-columns{font-size:10.5px!important}
.node-name h3{font-weight:600}
.node-main>small,.node-pings,.uptime-cell{color:color-mix(in srgb,var(--muted) 92%,transparent)}
.node-detail .details dt{color:color-mix(in srgb,var(--muted) 90%,transparent)}
.node-detail .details dd{font-weight:450}
.network-server .chart .gridline{opacity:.48}
.network-server .chart .series{stroke-width:1.55}
.network-server .chart .axis-text{opacity:.88}
.network-server .chart-tooltip{color:color-mix(in srgb,var(--text) 92%,var(--muted))}
.spark-baseline,.kpi-spark-baseline{opacity:.72}}
html[data-theme=dark] .kpi,html[data-theme=dark] .observatory,html[data-theme=dark] .node-row,html[data-theme=dark] .network-server,html[data-theme=dark] .activity-list li,html[data-theme=dark] .network-explainer,html[data-theme=dark] .skeleton-row{border-color:color-mix(in srgb,var(--line) 88%,var(--panel))!important}
html[data-theme=dark] .kpi,html[data-theme=dark] .node-row,html[data-theme=dark] .network-server,html[data-theme=dark] .activity-list li,html[data-theme=dark] .skeleton-row{box-shadow:0 1px 2px rgba(0,0,0,.16)!important}
html[data-theme=dark] .node-row:hover,html[data-theme=dark] .network-server:hover,html[data-theme=dark] .activity-list li:hover{border-color:color-mix(in srgb,var(--line) 58%,var(--muted))!important;box-shadow:0 8px 22px rgba(0,0,0,.20)!important}
html[data-theme=dark] .network-server .chart .gridline{opacity:.38}
html[data-theme=dark] .network-server-heading,html[data-theme=dark] .network-explainer,html[data-theme=dark] #activity>.activity-note:first-of-type{background:color-mix(in srgb,var(--soft) 42%,var(--panel))!important}
html[data-theme=dark] .network-server .chart-tooltip,html[data-theme=dark] #empty,html[data-theme=dark] #network-empty,html[data-theme=dark] #activity-empty{background:color-mix(in srgb,var(--soft) 52%,var(--panel))!important}
nav a:focus-visible{outline-offset:4px}
.detail-cell .detail-button:focus-visible,.network-mobile-tabs button:focus-visible,.status-filter button:focus-visible,.network-explainer button:focus-visible{outline-offset:2px}
.activity-list time{font-variant-numeric:tabular-nums}
#network-count,#activity-count,#node-count{font-variant-numeric:tabular-nums}
@media (max-width:800px){.masthead{box-shadow:none!important}
.network-server .chart .gridline{opacity:.45}
.network-server .chart .axis-text{opacity:.86}}
@media (prefers-reduced-motion:reduce){nav a{transition:none!important}}
:root{font-family:var(--atlas-ui-mono);contain-intrinsic-size:auto 76px}
.node-row:has(.node-detail[open]){content-visibility:visible}
#network-grid .network-server{contain-intrinsic-size:auto 248px}
.is-loading .node-row,.is-loading .network-server,.is-loading .kpi{transition:none!important}
.map-deferred #map-stage:before{content:"";position:absolute;inset:15px calc(50% - 126px);width:252px;height:252px;border-radius:50%;border:1px solid var(--line);background:radial-gradient(circle at 35% 30%,var(--panel),var(--soft));pointer-events:none}
.map-deferred #globe-holder,.map-deferred #map-labels{visibility:hidden}
@media (max-width:800px){.map-deferred #map-stage:before{width:194px;height:194px;inset:9px calc(50% - 97px)}}
#filter-explainer,.node-columns,.quota-remaining,.network-explainer>small,#last-update,.node-main>small,.node-pings,.uptime-cell,.node-detail .details dt{color:var(--muted)}
.network-server .chart .axis-text{opacity:1}
:root{
--atlas-page:#ececeb;
--atlas-wall:#f3f3f2;
--atlas-surface:#f7f7f6;
--atlas-content:#fbfbfa;
--atlas-fg:#121211;
--atlas-muted:#5c5c5a;
--atlas-border:rgba(28,28,26,.07);
--atlas-ring:rgba(28,28,26,.14);
--atlas-line-strong:rgba(28,28,26,.26);
--atlas-hover:rgba(28,28,26,.045);
--atlas-tint:rgba(28,28,26,.035);
--atlas-fill:#0c0c0b;
--atlas-onfill:#fbfbfa;
--atlas-shadow:0 1px 2px rgba(28,28,26,.025);
--atlas-popover-shadow:0 6px 18px rgba(28,28,26,.08),0 22px 58px rgba(28,28,26,.10);
--atlas-ease:cubic-bezier(.32,.72,0,1);
--atlas-ease-out:cubic-bezier(.16,1,.3,1);
--atlas-r-xs:4px;
--atlas-r-sm:5px;
--atlas-r-md:7px;
--atlas-r-lg:9px;
--atlas-r-xl:14px;
--atlas-control-h:34px;
--atlas-brand-icon:27px;
--atlas-ui-mono:"JetBrains Mono",ui-monospace,"Cascadia Mono","SFMono-Regular",Menlo,Consolas,"PingFang SC","Microsoft YaHei UI","Microsoft YaHei",sans-serif;
--bg:var(--atlas-wall);
--panel:var(--atlas-content);
--soft:var(--atlas-surface);
--text:var(--atlas-fg);
--muted:var(--atlas-muted);
--line:var(--atlas-border);
--accent:#1c1c1a;
--signal:#20c878;
--halo:rgba(32,200,120,.14);
--down:#226a9e;
--purple:#7044b4;
--bad:#bc3545;
--bad-halo:rgba(188,53,69,.12);
--warn:#965c0b;
--tint:var(--atlas-tint);
--chart-cu:#087d58;
--chart-ct:#087da0;
--chart-cm:#7044b4;
}
html[data-theme=dark]{
--atlas-page:#050608;
--atlas-wall:#0a0b0d;
--atlas-surface:#101113;
--atlas-content:#131416;
--atlas-fg:#f7f8f8;
--atlas-muted:#8a8f98;
--atlas-border:rgba(255,255,255,.035);
--atlas-ring:rgba(255,255,255,.075);
--atlas-line-strong:rgba(255,255,255,.13);
--atlas-hover:rgba(255,255,255,.045);
--atlas-tint:rgba(255,255,255,.026);
--atlas-fill:#edeef0;
--atlas-onfill:#0a0b0d;
--atlas-shadow:none;
--atlas-popover-shadow:0 18px 58px rgba(0,0,0,.42);
--bg:var(--atlas-wall);
--panel:var(--atlas-content);
--soft:var(--atlas-surface);
--text:var(--atlas-fg);
--muted:var(--atlas-muted);
--line:var(--atlas-border);
--accent:#f7f8f8;
--signal:#58d88a;
--halo:rgba(88,216,138,.13);
--down:#77c9e0;
--purple:#bda2ed;
--bad:#ef8791;
--bad-halo:rgba(239,135,145,.13);
--warn:#ebbb73;
--tint:var(--atlas-tint);
--chart-cu:#71c59b;
--chart-ct:#77c9e0;
--chart-cm:#bda2ed;
}
html{background:var(--atlas-page);scroll-padding-top:104px}
body{
min-height:100vh;
background:linear-gradient(180deg,var(--atlas-page) 0,var(--atlas-wall) 148px,var(--atlas-wall) 100%);
color:var(--text);
font-family:var(--atlas-ui-mono);
font-size:14px;
line-height:1.52;
letter-spacing:-.008em;
-webkit-font-smoothing:antialiased;
text-rendering:optimizeLegibility;
}
::selection{background:var(--atlas-fill);color:var(--atlas-onfill)}
.shell{width:min(1480px,calc(100% - 48px));margin-inline:auto}
button,input,select{font-family:inherit}
button,select{
border:.5px solid var(--atlas-border);
border-radius:var(--atlas-r-md);
background:var(--panel);
}
button:hover,select:hover{
border-color:var(--atlas-ring);
background:var(--atlas-hover);
color:var(--text);
}
button:active,a:active{transform:scale(.99);transition-duration:70ms}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,canvas:focus-visible,summary:focus-visible{
outline:1px solid color-mix(in srgb,var(--text) 70%,transparent);
outline-offset:3px;
}
.sr-only{
position:absolute!important;
width:1px!important;
height:1px!important;
padding:0!important;
margin:-1px!important;
overflow:hidden!important;
clip:rect(0,0,0,0)!important;
white-space:nowrap!important;
border:0!important;
}
/* Header */
.masthead{
position:sticky;
top:0;
z-index:30;
border-bottom:.5px solid var(--atlas-border);
background:var(--atlas-wall);
box-shadow:none;
-webkit-backdrop-filter:none;
backdrop-filter:none;
}
.header-inner{
display:grid;
grid-template-columns:minmax(0,1fr) auto;
grid-template-areas:"brand actions" "nav nav";
align-items:center;
column-gap:18px;
row-gap:7px;
min-height:88px;
padding:10px 0 8px;
}
.brand{
grid-area:brand;
min-width:0;
display:flex;
align-items:center;
gap:8px;
width:max-content;
max-width:100%;
color:var(--text);
font-family:var(--atlas-ui-mono);
font-size:20px;
font-weight:650;
line-height:1;
letter-spacing:-.045em;
}
.brand-icon{
position:relative;
display:inline-grid;
place-items:center;
width:var(--atlas-brand-icon);
height:var(--atlas-brand-icon);
flex:0 0 var(--atlas-brand-icon);
}
.brand-icon .atlas-mark,.brand-icon img{display:block;width:100%;height:100%}
.brand-icon img{border-radius:var(--atlas-r-md);object-fit:cover}
.atlas-mark{
fill:none;
stroke:var(--text);
stroke-width:1.15;
transform-origin:center;
}
.brand-icon img,.atlas-mark{transition:transform 280ms var(--atlas-ease)}
.brand:hover .atlas-mark{transform:rotate(-5deg) scale(1.04)}
.brand:hover .brand-logo-ready{transform:rotate(-3deg) scale(1.025)}
.brand-word{font-weight:650}
.brand-site-badge{
display:inline-flex;
align-items:center;
max-width:170px;
min-height:24px;
padding:0 7px;
overflow:hidden;
border:.5px solid var(--atlas-border);
border-radius:var(--atlas-r-sm);
background:var(--atlas-surface);
color:var(--muted);
font-family:var(--atlas-ui-mono);
font-size:10px;
font-weight:450;
line-height:1;
letter-spacing:-.015em;
text-overflow:ellipsis;
white-space:nowrap;
}
.brand-site-badge:empty{display:none}
.header-actions{
grid-area:actions;
display:flex;
align-items:center;
justify-self:end;
gap:4px;
min-width:0;
}
.header-update{
min-width:0!important;
margin:0 8px 0 0!important;
color:var(--muted);
font:400 10px/1 var(--atlas-ui-mono);
white-space:nowrap;
}
#connection{
display:inline-flex;
align-items:center;
min-height:29px;
margin-right:3px;
padding:3px 8px;
border:.5px solid color-mix(in srgb,var(--warn) 24%,var(--atlas-border));
border-radius:999px;
background:color-mix(in srgb,var(--warn) 5%,var(--panel));
color:var(--warn);
font:450 10.5px/1 var(--atlas-ui-mono);
}
#connection:before{width:5px!important;height:5px!important;margin-right:6px!important;box-shadow:none!important}
#connection.live{
border-color:color-mix(in srgb,var(--signal) 25%,var(--atlas-border));
background:color-mix(in srgb,var(--signal) 7%,var(--panel));
color:color-mix(in srgb,var(--signal) 76%,var(--text));
}
.header-actions .icon-button,.header-actions button{
display:inline-grid;
place-items:center;
width:32px!important;
height:32px!important;
padding:0!important;
border:.5px solid transparent!important;
border-radius:var(--atlas-r-sm)!important;
background:transparent!important;
color:var(--muted);
}
.header-actions .icon-button:hover,.header-actions button:hover{
border-color:var(--atlas-border)!important;
background:var(--atlas-hover)!important;
color:var(--text);
transform:none;
}
.admin-link{
display:inline-flex;
align-items:center;
min-height:32px;
margin-left:2px;
padding:0 9px;
border:.5px solid var(--atlas-border);
border-radius:var(--atlas-r-sm);
background:var(--panel);
color:var(--muted);
font-size:11px;
}
.admin-link:hover{border-color:var(--atlas-ring);background:var(--atlas-hover);color:var(--text)}
nav{
grid-area:nav;
display:flex;
align-items:center;
justify-self:start;
gap:3px;
width:max-content;
max-width:100%;
padding:3px;
overflow:auto;
border:.5px solid var(--atlas-border);
border-radius:var(--atlas-r-md);
background:var(--atlas-surface);
scrollbar-width:none;
}
nav a{
border:0!important;
border-radius:var(--atlas-r-sm)!important;
background:transparent!important;
color:var(--muted)!important;
font-size:11.5px!important;
font-weight:450;
white-space:nowrap;
transition:color 150ms ease,background-color 150ms ease;
}
nav a:hover{background:var(--atlas-hover)!important;color:var(--text)!important}
nav a.active{
background:var(--atlas-fill)!important;
color:var(--atlas-onfill)!important;
box-shadow:none!important;
}
.activity-popover{
border:.5px solid var(--atlas-border)!important;
border-radius:var(--atlas-r-lg)!important;
background:var(--panel)!important;
box-shadow:var(--atlas-popover-shadow)!important;
animation:atlas-pop-in 200ms var(--atlas-ease-out) both;
}
/* Main rhythm */
#overview{padding-top:18px}
#nodes{padding-top:2px}
.section-heading{
display:flex;
align-items:center;
justify-content:space-between;
gap:14px;
}
.section-heading h2{
font-weight:600;
line-height:1.25;
letter-spacing:-.035em;
}
.section-heading h2 small,#network-count,#activity-count{
display:inline-flex;
align-items:center;
min-height:21px;
padding:2px 7px;
border:.5px solid var(--atlas-border);
border-radius:var(--atlas-r-sm);
background:var(--atlas-surface);
color:var(--muted);
font-size:10px!important;
font-weight:450;
line-height:1;
}
/* KPI rail */
.kpis{
position:relative;
display:grid;
grid-template-columns:repeat(6,minmax(0,1fr));
margin:0 0 12px;
padding:0;
overflow:hidden;
border:.5px solid var(--atlas-border);
border-radius:var(--atlas-r-lg);
background:var(--panel);
box-shadow:none;
}
.kpi{
position:relative;
min-width:0;
overflow:hidden;
border:0!important;
border-right:.5px solid var(--atlas-border)!important;
border-radius:0!important;
background:var(--panel)!important;
box-shadow:none!important;
transition:background-color 150ms ease;
}
.kpi:last-child{border-right:0!important}
.kpi:after{display:none!important}
.kpi:hover{background:var(--atlas-hover)!important;transform:none!important;box-shadow:none!important}
.kpi-label{
color:var(--muted);
font-family:var(--atlas-ui-mono);
font-size:10.5px;
font-weight:450;
letter-spacing:.01em;
}
.kpi>strong{
display:block;
margin:5px 0 2px;
font-family:var(--atlas-ui-mono);
font-size:27px;
font-weight:520;
line-height:1.2;
letter-spacing:-.05em;
font-variant-numeric:tabular-nums;
}
.kpi #stat-in,.kpi #stat-out,.kpi #stat-month{font-size:24px}
.kpi #stat-cost{font-size:19px;line-height:1.35;overflow-wrap:anywhere}
.kpi small{min-height:0;margin-top:2px;font-size:10.5px;line-height:1.35}
.kpi-track{position:absolute;margin:0;border-radius:999px;background:var(--atlas-hover)}
.kpi-track b{border-radius:999px;transition:width 320ms var(--atlas-ease-out)}
.kpi-live-traffic .kpi-spark{transition:opacity 150ms ease}
.kpi:hover .kpi-spark{opacity:.9}
/* Overview panels */
.observatory{
display:grid;
min-height:404px;
overflow:visible;
border:0!important;
border-radius:0!important;
background:transparent!important;
box-shadow:none!important;
}
.regions-panel,.map-panel{
min-width:0;
border:.5px solid var(--atlas-border)!important;
border-radius:var(--atlas-r-lg)!important;
background:var(--panel)!important;
box-shadow:none!important;
}
.regions-panel{padding:17px}
.regions-panel>summary{min-height:29px}
.regions-panel h2{font-size:14px;font-weight:600}
.regions-panel:hover,.map-panel:hover{border-color:var(--atlas-ring)!important}
.region-reset{
width:100%;
min-height:33px;
margin:13px 0 5px;
border:.5px solid var(--atlas-border)!important;
border-radius:var(--atlas-r-sm)!important;
background:var(--atlas-surface)!important;
box-shadow:none!important;
}
.region-reset:hover{border-color:var(--atlas-ring)!important;background:var(--atlas-hover)!important}
#region-list{max-height:285px}
.region{
padding:9px 5px;
border:0!important;
border-bottom:.5px solid var(--atlas-border)!important;
border-radius:0!important;
background:transparent!important;
}
.region:hover{background:var(--atlas-hover)!important;transform:none!important}
.region.active,.region[aria-pressed=true]{background:var(--atlas-tint)!important}
.panel-note{margin-top:10px;padding-top:9px;border-top:.5px solid var(--atlas-border)}
.map-panel{
position:relative;
isolation:isolate;
min-height:404px;
padding:16px 18px 12px;
overflow:hidden;
}
.map-panel:before{
content:"";
position:absolute;
inset:0;
z-index:-1;
pointer-events:none;
background:radial-gradient(circle at 50% 49%,var(--atlas-surface) 0,transparent 61%);
opacity:.86;
}
.panel-heading,.map-footer{position:relative;z-index:2}
.panel-heading .eyebrow,.live-label,#map-latency{
display:inline-flex;
align-items:center;
min-height:22px;
padding:2px 6px;
border:.5px solid var(--atlas-border);
border-radius:var(--atlas-r-sm);
background:var(--atlas-surface);
font-size:9.5px;
line-height:1;
}
.panel-heading .eyebrow{letter-spacing:.06em}
.live-label{gap:4px;color:var(--muted)}
.live-label .status-dot{width:5px;height:5px;margin:0 3px 0 0;box-shadow:none}
#map-stage{max-width:760px}
.map-label{
padding:4px 7px;
border:.5px solid color-mix(in srgb,var(--text) 12%,transparent);
border-radius:var(--atlas-r-sm);
background:var(--panel);
box-shadow:none;
}
.map-label:hover{border-color:var(--atlas-ring);transform:translate(-50%,-50%)}
#map-tip{border:.5px solid var(--atlas-border);border-radius:var(--atlas-r-lg);background:var(--panel);box-shadow:var(--atlas-popover-shadow)}
.map-footer{font-size:10px}
/* Filters and controls */
.status-filter,.network-explainer [role=group][aria-label="网络历史范围"]{
display:inline-flex;
align-items:center;
gap:2px;
padding:2px;
border:.5px solid var(--atlas-border);
border-radius:var(--atlas-r-md);
background:var(--atlas-surface);
box-shadow:none;
}
.status-filter button,.network-explainer [role=group][aria-label="网络历史范围"] button{
min-height:30px;
padding:5px 9px!important;
border:0!important;
border-radius:var(--atlas-r-sm)!important;
background:transparent!important;
color:var(--muted);
box-shadow:none!important;
font-size:11px;
line-height:1;
}
.status-filter button:hover,.network-explainer [role=group][aria-label="网络历史范围"] button:hover{
background:var(--atlas-hover)!important;
color:var(--text);
}
.status-filter button[aria-pressed=true],.network-explainer [role=group][aria-label="网络历史范围"] button[aria-pressed=true],
.quick-filters button[aria-pressed=true],.network-mobile-tabs button[aria-pressed=true]{
border-color:var(--atlas-fill)!important;
background:var(--atlas-fill)!important;
color:var(--atlas-onfill)!important;
box-shadow:none!important;
}
.status-filter .status-dot{width:5px!important;height:5px!important;margin:0 5px 0 0!important;box-shadow:none!important}
.table-toolbar{
display:flex;
align-items:center;
gap:6px;
margin-bottom:9px;
padding:5px;
border:.5px solid var(--atlas-border);
border-radius:var(--atlas-r-md);
background:var(--atlas-surface);
box-shadow:none!important;
}
.search{
height:var(--atlas-control-h);
min-height:var(--atlas-control-h);
padding:6px 9px;
border:.5px solid transparent!important;
border-radius:var(--atlas-r-sm);
background:var(--atlas-page)!important;
box-shadow:none!important;
transition:border-color 150ms ease,background-color 150ms ease,box-shadow 150ms ease;
}
.search:hover{border-color:var(--atlas-border)!important;background:var(--atlas-hover)!important}
.search:focus-within{
border-color:var(--atlas-ring)!important;
background:var(--panel)!important;
box-shadow:0 0 0 2px var(--atlas-hover)!important;
}
.search>span{font-size:17px}
input{font-size:11.5px}
.table-toolbar select,.table-toolbar button,.activity-toolbar select{
height:var(--atlas-control-h);
min-height:var(--atlas-control-h);
border-color:var(--atlas-border)!important;
border-radius:var(--atlas-r-sm)!important;
background:var(--panel)!important;
box-shadow:none!important;
}
.quick-filters,.active-filters{gap:5px;margin-bottom:9px}
.quick-filters button,.active-filters button,#clear-region,#reset-filters,.history-note,.network-explainer button{
min-height:29px;
padding:4px 8px!important;
border:.5px solid var(--atlas-border)!important;
border-radius:var(--atlas-r-sm)!important;
background:var(--panel)!important;
color:var(--muted);
box-shadow:none!important;
font-size:10.5px;
}
.quick-filters button:hover,#clear-region:hover,#reset-filters:hover,.history-note:hover{
border-color:var(--atlas-ring)!important;
background:var(--atlas-hover)!important;
color:var(--text);
}
#filter-explainer{margin-left:auto;font-size:10px;color:var(--muted)}
/* Nodes */
.node-table{overflow:visible;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important}
.node-columns,.node-row{
grid-template-columns:64px minmax(160px,1.45fr) 70px minmax(94px,.82fr) minmax(94px,.82fr) minmax(142px,1.08fr) minmax(94px,.78fr) minmax(130px,1fr) 78px 30px;
column-gap:13px;
}
.node-columns{
padding:0 14px 8px!important;
border:0!important;
background:transparent!important;
color:var(--muted);
font-family:var(--atlas-ui-mono);
font-size:10px!important;
}
.node-row{
min-height:74px;
padding:12px 14px!important;
border:.5px solid var(--atlas-border)!important;
border-radius:var(--atlas-r-md)!important;
background:var(--panel)!important;
box-shadow:none!important;
font-size:12px;
transition:border-color 150ms ease,background-color 150ms ease;
}
.node-row:last-child{border-bottom:.5px solid var(--atlas-border)!important}
.node-row:hover{border-color:var(--atlas-ring)!important;background:color-mix(in srgb,var(--panel) 97%,var(--text) 3%)!important;transform:none!important;box-shadow:none!important}
.node-row.map-selected{border-color:color-mix(in srgb,var(--accent) 28%,var(--atlas-border))!important;background:var(--atlas-tint)!important}
.status-cell{
width:max-content;
min-width:0;
gap:4px!important;
padding:3px 6px 3px 5px;
border:.5px solid color-mix(in srgb,var(--signal) 26%,var(--atlas-border));
border-radius:var(--atlas-r-sm);
background:color-mix(in srgb,var(--signal) 7%,var(--panel));
color:color-mix(in srgb,var(--signal) 72%,var(--text));
font-size:10px!important;
line-height:1;
}
.status-cell .status-dot{width:5px!important;height:5px!important;margin:0 2px 0 0!important;box-shadow:none!important}
.offline .status-cell{border-color:color-mix(in srgb,var(--bad) 24%,var(--atlas-border));background:color-mix(in srgb,var(--bad) 7%,var(--panel));color:var(--bad)}
.node-main{min-width:0}
.node-name h3{font-size:13.5px;font-weight:600;line-height:1.32;letter-spacing:-.02em}
.node-main>small.node-meta{display:flex;align-items:center;flex-wrap:wrap;margin-top:5px;color:var(--muted);white-space:normal;overflow:visible}
.node-meta .meta-tag{
border:.5px solid var(--atlas-border);
border-radius:var(--atlas-r-sm);
background:var(--atlas-surface);
color:var(--muted);
font-weight:450;
letter-spacing:-.015em;
transition:border-color 150ms ease,background-color 150ms ease,color 150ms ease,transform 150ms ease;
}
.node-meta .meta-tag:hover{border-color:var(--atlas-ring);background:var(--atlas-hover);color:var(--text);transform:translateY(-1px)}
.node-region{
max-width:100%;
border:.5px solid var(--atlas-border);
border-radius:var(--atlas-r-sm);
background:var(--atlas-surface);
color:var(--muted);
font-size:10px;
}
.node-region .flag{width:20px;height:14px}
.rate-cell strong,.transfer-cell strong,.node-pings,.uptime-cell{
font-family:var(--atlas-ui-mono);
font-size:11.5px;
font-variant-numeric:tabular-nums;
}
.rate-cell strong{font-weight:550}
.meters>div{gap:5px}
.meters span{width:30px;color:var(--muted);font-size:10px}
.meters strong{width:42px;font-size:10.5px}
.meters i{height:3px;border-radius:999px;background:var(--atlas-hover);overflow:visible}
.meters b,.quota-track>b{
--meter-color:var(--accent);
position:relative;
overflow:visible;
border-radius:999px;
background:var(--meter-color)!important;
color:var(--meter-color)!important;
box-shadow:none!important;
transition:width 220ms ease,background-color 180ms ease!important;
}
.meters b::after,.quota-track>b::after{
content:"";
position:absolute;
right:-1px;
top:50%;
width:4px;
height:4px;
border-radius:50%;
background:var(--meter-color)!important;
transform:translate(50%,-50%);
box-shadow:0 0 0 1px var(--panel);
}
.meters b.unknown::after,.meters b.zero::after,.quota-track>b.unknown::after,.quota-track>b.zero::after{display:none!important}
.detail-cell .detail-button{
width:28px!important;
min-width:28px!important;
height:28px!important;
min-height:28px!important;
padding:0!important;
display:inline-flex;
align-items:center;
justify-content:center;
border:.5px solid var(--atlas-border)!important;
border-radius:var(--atlas-r-sm)!important;
background:transparent!important;
color:var(--muted);
font-size:0!important;
opacity:.72;
}
.detail-cell .detail-button::before{content:"⌄";font-size:14px;line-height:1;transition:transform 160ms ease}
.detail-cell .detail-button[aria-expanded=true]::before{transform:rotate(180deg)}
.detail-cell .detail-button:hover{border-color:var(--atlas-ring)!important;background:var(--atlas-hover)!important;color:var(--text);opacity:1}
.node-detail-cell>.node-detail{margin-top:3px!important;padding-top:13px;border-top:.5px solid var(--atlas-border)}
.node-detail .inline-trends{max-width:none!important;margin:0 0 12px!important;padding:0!important;border-top:0!important}
.node-detail .node-sparks{gap:8px}
.node-detail .node-spark{
padding:9px 10px 5px;
border:.5px solid var(--atlas-border);
border-radius:var(--atlas-r-md);
background:var(--atlas-surface);
box-shadow:none;
}
.node-detail .node-spark small{font-size:9.5px}
.node-detail .node-spark .spark-value{display:block;margin-top:1px;color:var(--text);font-size:13px;font-weight:550}
.node-detail .node-spark svg{height:36px!important}
.node-detail .details{
display:grid!important;
grid-template-columns:repeat(2,minmax(0,1fr))!important;
gap:0 26px!important;
margin:10px 0 0!important;
padding:4px 0 0!important;
border-top:.5px solid var(--atlas-border)!important;
animation:atlas-detail-in 220ms var(--atlas-ease-out) both;
}
.node-detail .details>div{
min-width:0;
display:grid;
grid-template-columns:minmax(76px,auto) minmax(0,1fr);
align-items:baseline;
gap:12px;
padding:8px 1px;
border-bottom:.5px solid var(--atlas-border);
}
.node-detail .details dt{font-size:10px;color:var(--muted);white-space:nowrap}
.node-detail .details dd{margin:0!important;font-size:11.5px;text-align:right;overflow-wrap:anywhere}
@keyframes atlas-detail-in{from{opacity:0;transform:translateY(-3px)}to{opacity:1;transform:translateY(0)}}
/* Network + activity + overlays */
.network-explainer,.network-card,.network-server{
border:.5px solid var(--atlas-border)!important;
border-radius:var(--atlas-r-lg)!important;
background:var(--panel)!important;
box-shadow:none!important;
}
.network-server{overflow:hidden;transition:border-color 150ms ease}
.network-server:hover{border-color:var(--atlas-ring)!important;box-shadow:none!important}
.network-server-heading{border-bottom:.5px solid var(--atlas-border)!important;background:var(--atlas-surface)}
.network-server-heading h3{font-size:13px;font-weight:600}
.network-server-heading small,.network-server-status{font-size:10px}
.network-server-status{
display:inline-flex;
align-items:center;
min-height:22px;
padding:2px 6px;
border:.5px solid color-mix(in srgb,var(--signal) 25%,var(--atlas-border));
border-radius:var(--atlas-r-sm);
background:color-mix(in srgb,var(--signal) 7%,var(--panel));
color:color-mix(in srgb,var(--signal) 72%,var(--text));
line-height:1;
}
.network-server .analysis-card{background:var(--panel)}
.network-server .chart .series{stroke-linecap:round;stroke-linejoin:round}
.network-server .chart-tooltip{
min-height:27px;
margin-top:5px;
padding:4px 6px;
border:.5px solid var(--atlas-border);
border-radius:var(--atlas-r-sm);
background:var(--atlas-surface);
font-size:10px;
}
.network-tracker{gap:2px!important}
.network-tracker button{position:relative;height:22px;border:0!important;border-radius:var(--atlas-r-xs)!important;background:transparent!important;transform:none!important;filter:none!important}
.network-tracker button::before{content:"";position:absolute;inset:7px 0;border-radius:999px;background:var(--atlas-border)}
.network-tracker button.healthy::before{background:var(--accent);opacity:.72}
.network-tracker button.warning::before{background:var(--warn)}
.network-tracker button.failed::before{background:var(--bad)}
.network-tracker button.unknown::before{background:repeating-linear-gradient(135deg,var(--atlas-border) 0 3px,var(--atlas-surface) 3px 6px)}
.network-tracker button:hover::before,.network-tracker button[aria-pressed=true]::before{inset-block:5px;opacity:1}
.tracker-key{display:flex;flex-wrap:wrap;gap:4px 6px!important}
.tracker-key span{
display:inline-flex;
align-items:center;
min-height:21px;
padding:2px 6px;
border:.5px solid var(--atlas-border);
border-radius:var(--atlas-r-sm);
background:var(--atlas-surface);
color:var(--muted);
font-size:9.5px;
line-height:1;
}
.tracker-key span:before{width:5px!important;height:5px!important;margin-right:5px!important;border-radius:50%!important}
.history-note{display:inline-flex!important;align-items:center;gap:6px;width:auto;margin:0 0 8px}
.activity-toolbar{margin:0 0 9px!important}
#activity>.activity-note:first-of-type{
margin-bottom:9px;
padding:8px 10px;
border:.5px solid var(--atlas-border);
border-radius:var(--atlas-r-md);
background:var(--atlas-surface);
}
.activity-list{
display:grid;
gap:6px;
padding:0!important;
overflow:visible!important;
border:0!important;
border-radius:0!important;
background:transparent!important;
}
.activity-list li{
min-height:50px;
padding:10px 12px!important;
border:.5px solid var(--atlas-border)!important;
border-radius:var(--atlas-r-md)!important;
background:var(--panel)!important;
box-shadow:none!important;
transition:border-color 150ms ease,background-color 150ms ease;
}
.activity-list li:hover{border-color:var(--atlas-ring)!important;background:var(--atlas-hover)!important;transform:none!important}
.event-kind{
min-height:20px;
padding:2px 6px;
border:.5px solid var(--atlas-border);
border-radius:var(--atlas-r-sm);
background:var(--atlas-surface);
font-size:9.5px;
line-height:1;
}
.command-palette{
border:.5px solid var(--atlas-border)!important;
border-radius:var(--atlas-r-lg)!important;
background:var(--panel)!important;
box-shadow:var(--atlas-popover-shadow)!important;
animation:atlas-pop-in 200ms var(--atlas-ease-out) both;
}
.command-palette::backdrop{background:rgba(5,6,8,.24);-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
.command-item{min-height:38px;padding:6px 8px;border-radius:var(--atlas-r-sm)!important}
.command-item[aria-selected=true]{
border-color:var(--atlas-fill)!important;
background:var(--atlas-fill)!important;
color:var(--atlas-onfill)!important;
}
.command-item[aria-selected=true] small{color:color-mix(in srgb,var(--atlas-onfill) 68%,transparent)}
.node-drawer{border-left:.5px solid var(--atlas-border);background:var(--panel);box-shadow:var(--atlas-popover-shadow);transition:transform 220ms var(--atlas-ease)}
.drawer-backdrop{background:rgba(5,6,8,.28);-webkit-backdrop-filter:none;backdrop-filter:none;transition:opacity 180ms ease}
.drawer-snapshot{border:.5px solid var(--atlas-border);border-radius:var(--atlas-r-lg)}
.drawer-snapshot>div{border-color:var(--atlas-border)}
.drawer-details,.drawer-details>div,.drawer-actions,.node-drawer header{border-color:var(--atlas-border)}
.drawer-actions{background:var(--atlas-surface)}
.atlas-toast{
border:.5px solid var(--atlas-border)!important;
border-radius:var(--atlas-r-md)!important;
background:var(--panel)!important;
box-shadow:var(--atlas-popover-shadow)!important;
-webkit-backdrop-filter:none!important;
backdrop-filter:none!important;
}
#notice{
border:.5px solid color-mix(in srgb,var(--warn) 24%,var(--atlas-border))!important;
border-radius:var(--atlas-r-md)!important;
background:color-mix(in srgb,var(--warn) 5%,var(--panel))!important;
}
#empty,#network-empty,#activity-empty{
min-height:84px;
margin-top:6px;
padding:16px!important;
border:.5px dashed var(--atlas-ring);
border-radius:var(--atlas-r-md);
background:var(--atlas-surface);
}
footer{
margin-top:32px;
padding:18px 1px 26px;
border-top:.5px solid var(--atlas-border);
color:var(--muted);
font-family:var(--atlas-ui-mono);
font-size:10px;
}
/* Small motion */
html:not(.is-loading) .kpi,html:not(.is-loading) .observatory,html:not(.is-loading) .node-row{
animation:atlas-enter 280ms var(--atlas-ease-out) both;
}
html:not(.is-loading) .kpi:nth-child(2){animation-delay:24ms}
html:not(.is-loading) .kpi:nth-child(3){animation-delay:48ms}
html:not(.is-loading) .kpi:nth-child(4){animation-delay:72ms}
html:not(.is-loading) .kpi:nth-child(5){animation-delay:96ms}
html:not(.is-loading) .kpi:nth-child(6){animation-delay:120ms}
html:not(.is-loading) .observatory{animation-delay:50ms}
html:not(.is-loading) .node-row{animation-delay:70ms}
html:not(.is-loading) .node-meta .meta-tag{animation:atlas-tag-enter 220ms var(--atlas-ease-out) both}
.node-meta .meta-tag:nth-child(2){animation-delay:22ms}
.node-meta .meta-tag:nth-child(3){animation-delay:44ms}
.node-meta .meta-tag:nth-child(4){animation-delay:66ms}
@keyframes atlas-enter{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}
@keyframes atlas-tag-enter{from{opacity:0;transform:translateY(2px)}to{opacity:1;transform:translateY(0)}}
@keyframes atlas-pop-in{from{opacity:0;transform:translateY(-3px) scale(.994)}to{opacity:1;transform:translateY(0) scale(1)}}
/* Responsive */
@media(max-width:1180px){
.shell{width:min(100% - 34px,1480px)}
.node-columns,.node-row{
grid-template-columns:58px minmax(145px,1.45fr) 62px minmax(86px,.82fr) minmax(86px,.82fr) minmax(128px,1fr) 86px 118px 68px 28px;
column-gap:10px;
}
}
@media(max-width:900px){
.shell{width:min(100% - 24px,1480px)}
.header-inner{min-height:84px}
.kpis{grid-template-columns:repeat(3,minmax(0,1fr))}
.kpi:nth-child(3){border-right:0!important}
.kpi:nth-child(-n+3){border-bottom:.5px solid var(--atlas-border)!important}
}
@media(max-width:800px){
:root{--atlas-brand-icon:25px;--atlas-control-h:32px}
html{scroll-padding-top:92px}
body{font-size:13px}
.shell{width:calc(100% - 20px)}
.header-inner{
gap:7px 8px;
min-height:0;
padding:8px 0 7px;
}
.brand{min-width:0;font-size:18px}
.brand-site-badge{min-height:22px;padding-inline:6px;font-size:9px}
.header-actions{gap:2px}
.header-update,#connection,.header-actions .admin-link{display:none!important}
.header-actions .icon-button,.header-actions button{width:30px!important;height:30px!important}
nav{max-width:100%;padding:2px}
nav a{font-size:10.5px!important}
#overview{padding-top:12px}
.kpis{margin-bottom:8px}
.kpi:nth-child(odd){border-right:.5px solid var(--atlas-border)!important}
.kpi:nth-child(even){border-right:0!important}
.kpi:nth-child(-n+4){border-bottom:.5px solid var(--atlas-border)!important}
.kpi:nth-child(n+5){border-bottom:0!important}
.kpi>strong{font-size:22px}
.kpi #stat-in,.kpi #stat-out,.kpi #stat-month{font-size:20px}
.kpi #stat-cost{font-size:16px}
.kpi-label{font-size:9.5px}
.kpi small{font-size:9px}
.observatory{min-height:0}
.map-panel{padding:12px 13px}
.regions-panel{padding:13px}
.section-heading{margin:16px 0 9px!important}
.section-heading h2{font-size:17px!important}
.status-filter{gap:1px;padding:2px}
.status-filter button{min-height:27px;padding:4px 7px!important;font-size:10px}
.table-toolbar{min-height:42px;padding:4px}
.quick-filters{gap:4px}
.quick-filters button,.active-filters button,#clear-region,#reset-filters{min-height:27px;padding:4px 7px!important;font-size:9.5px}
#filter-explainer{width:100%;margin-left:0;font-size:9px}
.node-columns{display:none}
#node-list{gap:7px}
.node-row{
position:relative;
display:grid;
grid-template-columns:1fr 1fr;
gap:9px 12px;
min-height:0;
padding:11px 12px!important;
border:.5px solid var(--atlas-border)!important;
border-radius:var(--atlas-r-md)!important;
}
.node-row>.status-cell{position:absolute;top:13px;left:12px}
.node-main{grid-column:1/-1;padding-left:24px;padding-right:38px;min-height:28px}
.node-name h3{font-size:13.5px}
.node-main>small.node-meta{overflow:hidden}
.node-meta .meta-tag{padding:2px 5px}
.node-row>.node-region{grid-column:1;padding:3px 5px;margin:0 0 0 24px;font-size:9.5px}
.node-row>.rate-cell{padding-top:2px}
.rate-cell>small,.transfer-cell>small{display:block;font-size:8.5px;line-height:1;margin-bottom:2px}
.rate-cell strong{font-size:14px}
.meters{grid-column:1/-1;gap:5px}
.meters>div{gap:4px}
.meters span,.meters strong{font-size:9.5px}
.node-pings{gap:3px;font-size:9.5px}
.node-row>.transfer-cell,.node-row>.uptime-cell{font-size:9.5px}
.node-row>.detail-cell{position:absolute;right:8px;top:8px;width:30px;height:28px}
.detail-cell .detail-button{width:28px!important;height:28px!important}
.node-detail-cell>.node-detail{grid-row:auto;margin-top:0!important}
.node-detail .details{grid-template-columns:1fr 1fr!important}
.node-detail .details>div{display:block}
.node-detail .details dd{text-align:left;margin-top:2px!important;font-size:10px}
.node-detail .details dt{font-size:9px}
.network-explainer{gap:6px;margin-bottom:7px!important;font-size:10px}
.network-explainer>small{font-size:9px;line-height:1.35}
.network-mobile-tabs{gap:2px!important;background:var(--atlas-surface)!important}
.network-mobile-tabs button{border-radius:var(--atlas-r-sm)!important;font-size:10px!important}
.network-server .analysis-card{padding:8px 10px!important}
.network-server .chart{height:66px}
.activity-toolbar{flex-wrap:wrap;gap:6px}
.activity-toolbar .search{flex-basis:55%}
.activity-toolbar select{min-width:112px}
.activity-list{gap:5px}
.activity-list li{min-height:46px;padding:8px 9px!important}
.command-palette{width:calc(100vw - 16px);max-height:78vh}
.node-drawer{
top:auto;
bottom:0;
width:100%;
height:min(82vh,720px);
border-left:0;
border-top:.5px solid var(--atlas-border);
border-radius:var(--atlas-r-xl) var(--atlas-r-xl) 0 0;
transform:translateY(100%);
}
.node-drawer header{padding:17px 17px 13px}
.drawer-actions{padding:9px 17px}
.drawer-body{padding:15px 17px 26px}
}
@media(max-width:430px){
.shell{width:calc(100% - 16px)}
.header-actions{gap:1px}
.kpi>strong{font-size:21px}
.node-row{padding:10px!important;gap:8px 10px}
.node-row>.status-cell{top:12px;left:10px}
.node-main{padding-left:23px;padding-right:36px}
.node-row>.node-region{margin-left:23px}
}
@media(hover:none){
.brand:hover .atlas-mark,.brand:hover .brand-logo-ready,.node-meta .meta-tag:hover{transform:none}
}
@media(prefers-reduced-motion:reduce){
*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}
:root{
--atlas-overview-ink:color-mix(in srgb,var(--text) 88%, transparent);
--atlas-overview-muted-ink:color-mix(in srgb,var(--text) 56%, transparent);
--atlas-meter-neutral:color-mix(in srgb,var(--text) 74%, transparent);
--atlas-meter-soft:color-mix(in srgb,var(--text) 12%, transparent);
}
html[data-theme=dark]{
--atlas-overview-ink:color-mix(in srgb,var(--text) 90%, transparent);
--atlas-overview-muted-ink:color-mix(in srgb,var(--text) 62%, transparent);
--atlas-meter-neutral:color-mix(in srgb,var(--text) 78%, transparent);
--atlas-meter-soft:color-mix(in srgb,var(--text) 16%, transparent);
}
.observatory{
gap:10px;
}
.regions-panel,.map-panel{
border-color:color-mix(in srgb,var(--text) 6%, transparent)!important;
}
.kpis{
gap:0;
border-color:color-mix(in srgb,var(--text) 6%, transparent);
}
.kpi{
min-height:106px;
padding:14px 15px;
}
.kpi-label{
color:var(--muted);
}
.kpi>strong{
color:var(--atlas-overview-ink);
}
#stat-in,#stat-out{
color:var(--atlas-overview-ink)!important;
}
.kpi-track{
left:15px;
right:15px;
bottom:7px;
height:2px;
background:transparent;
}
.kpi-track b{
background:var(--atlas-meter-neutral)!important;
opacity:.9;
}
.kpi:first-child .kpi-track{
background:color-mix(in srgb,var(--signal) 10%, transparent);
}
.kpi:first-child .kpi-track b{
background:color-mix(in srgb,var(--signal) 88%, var(--text) 12%)!important;
}
.kpi-live-traffic .kpi-spark{
color:var(--atlas-overview-muted-ink)!important;
}
.kpi-live-traffic[data-live-traffic=out] .kpi-spark{
opacity:.56;
color:var(--atlas-overview-ink)!important;
}
.kpi-live-traffic .kpi-spark-baseline{
stroke:color-mix(in srgb,var(--text) 8%, transparent);
}
.kpi-live-traffic .plot-end{
r:1.7;
}
.region-reset{
margin-top:11px;
}
.region{
min-height:42px;
}
.region-info strong{
font-size:11.5px;
}
.region-info small,
.region-count,
.region-count small{
font-size:10px;
}
.map-panel{
padding-top:14px;
}
#map-stage{
height:316px;
}
#globe-holder{
width:388px;
height:388px;
}
#map-latency,
.panel-heading .eyebrow,
.live-label{
background:color-mix(in srgb,var(--panel) 62%, var(--atlas-surface) 38%);
}
.meters span,
.meters strong,
.quota-remaining{
color:var(--muted);
}
.meters i,
.quota-track{
background:var(--atlas-meter-soft)!important;
}
.meters b,
.quota-track>b{
--meter-color:var(--atlas-meter-neutral);
background:var(--meter-color)!important;
}
.meters b.hot,
.quota-track>b.hot{
--meter-color:var(--warn);
background:var(--warn)!important;
}
.meters b.over,
.quota-track>b.over{
--meter-color:var(--bad);
background:var(--bad)!important;
}
.meters b.zero::after,
.quota-track>b.zero::after{
display:none!important;
}
.node-row{
border-color:color-mix(in srgb,var(--text) 6%, transparent)!important;
}
.node-row:hover{
background:color-mix(in srgb,var(--panel) 98%, var(--text) 2%)!important;
}
.node-main>small.node-meta{
gap:3px;
}
.node-meta .meta-tag{
background:color-mix(in srgb,var(--panel) 58%, var(--atlas-surface) 42%);
}
.section-heading{
margin:24px 0 10px!important;
}
.section-heading h2{
font-size:18px!important;
}
.table-toolbar{
min-height:44px;
}
.quick-filters{
margin-bottom:8px;
}
#filter-explainer{
opacity:.82;
}
.network-explainer{
margin-bottom:11px!important;
}
.network-server{
margin-bottom:10px;
border-color:color-mix(in srgb,var(--text) 6%, transparent)!important;
}
.network-server-heading{
min-height:42px;
padding:10px 13px;
}
.network-server .analysis-card{
padding:10px 13px!important;
}
.network-server .analysis-top strong{
font-size:17px;
}
.network-server .chart{
height:88px;
}
.network-server .chart .gridline{
opacity:.34;
}
.network-server .chart .series{
stroke-width:1.3;
}
.network-server .chart-tooltip{
background:color-mix(in srgb,var(--panel) 58%, var(--atlas-surface) 42%);
}
.network-tracker button::before{
opacity:.86;
}
.analysis-card,
.analysis-card[data-chart=cu],
.analysis-card[data-chart=ct],
.analysis-card[data-chart=cm]{
--chart-color:var(--atlas-overview-ink)!important;
}
.analysis-top strong{
color:var(--atlas-overview-ink)!important;
}
.analysis-top>span:before{
background:var(--atlas-overview-ink)!important;
opacity:.78;
}
.node-spark svg,
.node-spark[data-metric=net_in_speed] svg,
.node-spark[data-metric=net_out_speed] svg{
color:var(--atlas-overview-ink)!important;
}
.meters [data-bar=cpu],
.meters [data-bar=ram],
.meters [data-bar=disk],
.meters b.safe,
.meters b.warn,
.quota-track>b.safe,
.quota-track>b.warn{
--meter-color:var(--atlas-meter-neutral)!important;
background:var(--atlas-meter-neutral)!important;
color:var(--atlas-meter-neutral)!important;
}
.meters b.hot,
.quota-track>b.hot{
--meter-color:var(--warn)!important;
background:var(--warn)!important;
color:var(--warn)!important;
}
.meters b.critical,
.quota-track>b.critical,
.quota-track>b.over{
--meter-color:var(--bad)!important;
background:var(--bad)!important;
color:var(--bad)!important;
}
.meters b::after,
.quota-track>b::after{
background:var(--meter-color)!important;
color:var(--meter-color)!important;
box-shadow:0 0 0 1px var(--panel)!important;
opacity:.92!important;
}
@media(max-width:800px){
.header-inner{
grid-template-columns:minmax(54px,1fr) auto minmax(54px,1fr)!important;
grid-template-areas:
". brand actions"
"nav nav nav"!important;
column-gap:7px!important;
}
.brand{
grid-area:brand!important;
justify-self:center;
width:max-content;
max-width:210px;
}
.header-actions{
grid-area:actions!important;
justify-self:end;
}
.brand-site-badge{
max-width:74px!important;
}
nav{
grid-area:nav!important;
justify-self:start!important;
}
.kpis{
display:grid!important;
grid-template-columns:repeat(2,minmax(0,1fr))!important;
overflow:visible!important;
border:0!important;
border-radius:0!important;
background:transparent!important;
}
.kpi{
border:.5px solid var(--atlas-border)!important;
border-radius:var(--atlas-r-lg)!important;
background:var(--panel)!important;
}
.kpi:nth-child(n){
border-right:.5px solid var(--atlas-border)!important;
border-bottom:.5px solid var(--atlas-border)!important;
}
.observatory{
gap:8px!important;
}
.regions-panel,.map-panel{
border-radius:var(--atlas-r-lg)!important;
}
.node-row{
background:var(--panel)!important;
}
.node-region,
.node-meta .meta-tag{
background:color-mix(in srgb,var(--panel) 62%,var(--atlas-surface) 38%)!important;
}
.meters i,
.quota-track{
height:3px!important;
}
.node-spark{
background:color-mix(in srgb,var(--panel) 62%,var(--atlas-surface) 38%)!important;
}
.network-mobile-tabs{
padding:5px 8px!important;
border-bottom:.5px solid var(--atlas-border)!important;
background:var(--atlas-surface)!important;
}
.network-mobile-tabs button{
min-height:28px!important;
border-radius:var(--atlas-r-sm)!important;
}
.network-mobile-tabs button[aria-pressed=true]{
background:var(--atlas-fill)!important;
color:var(--atlas-onfill)!important;
}
}
@media(max-width:430px){
.header-inner{
grid-template-columns:minmax(48px,1fr) auto minmax(48px,1fr)!important;
}
.brand{
font-size:17px!important;
}
.brand-site-badge{
max-width:64px!important;
}
.kpis{
gap:6px!important;
}
.kpi{
padding:9px 10px!important;
}
}
.observatory{
grid-template-columns:minmax(210px,.88fr) minmax(0,2.55fr)!important;
}
nav a{
height:30px!important;
min-height:30px!important;
padding:0 10px!important;
display:inline-flex!important;
align-items:center!important;
justify-content:center!important;
line-height:1!important;
transform:none!important;
}
.admin-link svg{
width:15px;
height:15px;
fill:none;
stroke:currentColor;
stroke-width:1.7;
stroke-linecap:round;
stroke-linejoin:round;
flex:0 0 auto;
}
.admin-link-label{
display:inline;
}
.activity-toolbar #activity-kind{
display:none!important;
}
#activity .activity-note{
max-width:920px;
}
@media(max-width:1180px){
.observatory{
grid-template-columns:minmax(190px,.82fr) minmax(0,2.18fr)!important;
}
}
@media(max-width:800px){
.observatory{
display:flex!important;
flex-direction:column!important;
}
.map-panel{
order:-1!important;
}
.regions-panel{
order:0!important;
}
nav a{
padding:0 9px!important;
}
.header-actions .admin-link{
display:inline-flex!important;
align-items:center!important;
justify-content:center!important;
width:30px!important;
min-width:30px!important;
height:30px!important;
min-height:30px!important;
margin-left:0!important;
padding:0!important;
border:.5px solid transparent!important;
border-radius:var(--atlas-r-sm)!important;
background:transparent!important;
color:var(--muted)!important;
}
.header-actions .admin-link:hover{
border-color:var(--atlas-border)!important;
background:var(--atlas-hover)!important;
color:var(--text)!important;
}
.admin-link-label{
display:none!important;
}
}
@media(max-width:430px){
nav a{
padding-inline:8px!important;
}
}
.meters [data-bar=cpu],
.meters [data-bar=ram],
.meters [data-bar=disk],
.meters b.safe,
.meters b.warn,
.quota-track>b.safe,
.quota-track>b.warn{
--meter-color:var(--atlas-meter-neutral)!important;
background:var(--atlas-meter-neutral)!important;
color:var(--atlas-meter-neutral)!important;
box-shadow:none!important;
}
.meters b.hot,.quota-track>b.hot{
--meter-color:var(--warn)!important;
background:var(--warn)!important;
color:var(--warn)!important;
}
.meters b.critical,.quota-track>b.critical,.quota-track>b.over{
--meter-color:var(--bad)!important;
background:var(--bad)!important;
color:var(--bad)!important;
}
.shell{
width:min(1240px,calc(100% - 40px))!important;
}
.node-meta .os-tag{
display:inline-flex;
align-items:center;
flex:0 0 auto;
border:.5px solid var(--atlas-border);
background:color-mix(in srgb,var(--panel) 60%,var(--atlas-surface) 40%);
color:var(--muted);
}
.node-meta .os-logo{
display:inline-grid;
place-items:center;
color:currentColor;
}
.node-meta .os-logo svg{
display:block;
fill:none;
stroke:currentColor;
stroke-linecap:round;
stroke-linejoin:round;
}
.node-meta .os-logo[data-os=windows] svg,
.node-meta .os-logo[data-os=ubuntu] svg{
fill:currentColor;
stroke:none;
}
.node-meta .os-tag:hover{
border-color:var(--atlas-ring);
background:var(--atlas-hover);
color:var(--text);
}
.kpi-live-traffic{
padding-bottom:39px!important;
}
.kpi-live-traffic .kpi-spark{
left:15px!important;
right:15px!important;
bottom:8px!important;
width:auto!important;
height:25px!important;
opacity:.38!important;
color:var(--atlas-overview-ink)!important;
}
.kpi-live-traffic .kpi-spark-series{
stroke-width:1.05!important;
}
.kpi-live-traffic .kpi-spark-baseline{
stroke:color-mix(in srgb,var(--text) 7%,transparent)!important;
}
.kpi-live-traffic .plot-area{
opacity:.18!important;
}
.kpi-live-traffic>strong{
position:relative;
z-index:1;
margin-bottom:0!important;
}
@media(max-width:1300px){
.shell{
width:min(1240px,calc(100% - 32px))!important;
}
}
@media(max-width:800px){
.shell{
width:calc(100% - 20px)!important;
}
.header-actions .admin-link svg{
width:19px!important;
height:19px!important;
}
.node-row,
#node-list[data-view=cards] .node-row{
position:relative!important;
display:grid!important;
grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
grid-template-areas:
"main main"
"region uptime"
"down up"
"meters meters"
"transfer transfer"
"pings pings"
"node-detail node-detail"!important;
min-height:0!important;
}
.node-row>.status-cell,
#node-list[data-view=cards] .status-cell{
position:absolute!important;
display:block!important;
width:7px!important;
min-width:7px!important;
height:7px!important;
min-height:7px!important;
padding:0!important;
border:0!important;
border-radius:50%!important;
background:transparent!important;
color:transparent!important;
}
.node-row>.status-cell span{
display:none!important;
}
.node-row>.status-cell .status-dot{
display:block!important;
width:7px!important;
height:7px!important;
margin:0!important;
box-shadow:none!important;
}
.node-main,
#node-list[data-view=cards] .node-main{
grid-area:main!important;
}
.node-main>small.node-meta{
padding-left:0!important;
flex-wrap:wrap!important;
white-space:normal!important;
}
.node-meta .os-tag{
padding:2px 5px!important;
}
.node-meta .os-logo{
width:12px!important;
height:12px!important;
flex-basis:12px!important;
}
.node-meta .os-logo svg{
width:12px!important;
height:12px!important;
}
.node-row>.node-region,
#node-list[data-view=cards] .node-region{
grid-area:region!important;
justify-self:start!important;
align-self:center!important;
margin:0!important;
}
.node-row>.uptime-cell,
#node-list[data-view=cards] .uptime-cell{
grid-area:uptime!important;
justify-self:end!important;
align-self:center!important;
text-align:right!important;
}
.node-row>.rate-cell.down,
#node-list[data-view=cards] .rate-cell.down{
grid-area:down!important;
}
.node-row>.rate-cell.up,
#node-list[data-view=cards] .rate-cell.up{
grid-area:up!important;
}
.node-row>.rate-cell,
#node-list[data-view=cards] .rate-cell{
min-width:0!important;
padding:8px 0 0!important;
border-top:.5px solid var(--atlas-border)!important;
}
.node-row>.rate-cell small,
#node-list[data-view=cards] .rate-cell small{
display:block!important;
margin:0 0 4px!important;
color:var(--muted)!important;
font-size:9px!important;
line-height:1!important;
text-align:left!important;
}
.node-row>.rate-cell strong,
#node-list[data-view=cards] .rate-cell strong{
display:block!important;
margin:0!important;
font-size:16px!important;
line-height:1.18!important;
text-align:left!important;
}
.node-row>.meters,
#node-list[data-view=cards] .meters{
grid-area:meters!important;
display:grid!important;
grid-template-columns:repeat(3,minmax(0,1fr))!important;
}
.node-row>.meters>div,
#node-list[data-view=cards] .meters>div{
display:grid!important;
grid-template-columns:1fr auto!important;
min-width:0!important;
}
.node-row>.meters>div>i,
#node-list[data-view=cards] .meters>div>i{
grid-column:1/-1!important;
width:100%!important;
}
.node-row>.meters span,
.node-row>.meters strong{
width:auto!important;
font-size:9.5px!important;
}
.node-row>.transfer-cell,
#node-list[data-view=cards] .transfer-cell{
grid-area:transfer!important;
}
.node-row>.node-pings,
#node-list[data-view=cards] .node-pings{
grid-area:pings!important;
display:grid!important;
grid-template-columns:repeat(3,minmax(0,1fr))!important;
border-top:.5px solid var(--atlas-border)!important;
font-size:9.5px!important;
}
.node-row>.detail-cell,
#node-list[data-view=cards] .detail-cell{
position:absolute!important;
}
.node-row>.node-detail-cell,
#node-list[data-view=cards] .node-detail-cell{
grid-area:node-detail!important;
grid-column:1/-1!important;
}
}
@media(max-width:430px){
.shell{
width:calc(100% - 16px)!important;
}
}
@font-face{
font-family:"Atlas Mono";
src:url("./vendor/fonts/JetBrainsMono-Regular.woff2") format("woff2");
font-weight:400;
font-style:normal;
font-display:swap;
}
@font-face{
font-family:"Atlas Mono";
src:url("./vendor/fonts/JetBrainsMono-Medium.woff2") format("woff2");
font-weight:500 600;
font-style:normal;
font-display:swap;
}
@font-face{
font-family:"Atlas Mono";
src:url("./vendor/fonts/JetBrainsMono-Bold.woff2") format("woff2");
font-weight:700 800;
font-style:normal;
font-display:swap;
}
:root{
--atlas-mono:"Atlas Mono","JetBrains Mono","SFMono-Regular","Cascadia Code","Roboto Mono",ui-monospace,monospace;
--atlas-ui:"Atlas Mono","JetBrains Mono","PingFang SC","Microsoft YaHei UI","Noto Sans CJK SC",system-ui,sans-serif;
}
body,
button,
input,
select,
textarea,
.brand,
nav,
.kpi,
.kpi-label,
.kpi>strong,
.node-name,
.node-meta,
.node-region,
.rate-cell,
.rate-cell small,
.rate-cell strong,
.meters,
.meters span,
.meters strong,
.transfer-cell,
.quota-used,
.quota-remaining,
.node-pings,
.uptime-cell,
.region-info,
.region-count,
.map-label,
.live-label,
#map-latency,
.network-server,
.analysis-card,
.network-history-note,
.tracker-key,
.activity-list,
.activity-list time,
.node-detail,
.node-detail dt,
.node-detail dd{
font-family:var(--atlas-ui)!important;
}
.kpi>strong,
.rate-cell strong,
.meters strong,
.quota-used,
.quota-remaining,
.node-pings,
.uptime-cell,
.region-count,
#map-latency,
.network-server .analysis-top strong,
.activity-list time,
.node-detail dd{
font-variant-numeric:tabular-nums;
}
:root{
--atlas-quota-dot-empty:color-mix(in srgb,var(--text) 13%,transparent);
--atlas-quota-dot-fill:color-mix(in srgb,var(--text) 72%,transparent);
}
/* Desktop uses one canonical long-row layout only. */
.node-heading-actions{
display:flex;
align-items:center;
gap:6px;
}
#node-list{
display:grid;
grid-template-columns:1fr;
gap:6px;
}
.node-row{
align-items:center!important;
}
.node-name,
.node-name h3{
line-height:1.25!important;
}
.node-main>small.node-meta,
.node-meta{
display:flex!important;
align-items:center!important;
flex-wrap:wrap!important;
gap:5px!important;
}
.node-meta .os-tag{
min-height:23px!important;
padding:3px 7px!important;
gap:6px!important;
border-radius:6px!important;
font-size:10.5px!important;
line-height:1!important;
color:var(--text)!important;
}
.node-meta .os-logo{
width:16px!important;
height:16px!important;
flex:0 0 16px!important;
}
.node-meta .os-logo svg{
width:16px!important;
height:16px!important;
stroke-width:1.7!important;
}
.node-meta .meta-tag{
display:inline-flex!important;
align-items:center!important;
min-height:21px!important;
padding:2px 6px!important;
font-size:10px!important;
line-height:1!important;
}
.node-region{
display:inline-flex!important;
align-items:center!important;
justify-content:flex-start!important;
gap:5px!important;
width:max-content!important;
min-height:22px!important;
padding:2px 6px!important;
line-height:1!important;
}
.node-region .flag,
.node-region img,
.node-region svg{
flex:0 0 auto!important;
margin:0!important;
}
.node-region span,
.node-region small{
margin:0!important;
line-height:1!important;
white-space:nowrap!important;
}
.rate-cell{
display:flex!important;
flex-direction:column!important;
justify-content:center!important;
gap:4px!important;
min-width:0!important;
}
.rate-cell small{
display:block!important;
margin:0!important;
font-size:10px!important;
line-height:1.1!important;
}
.rate-cell strong{
display:block!important;
margin:0!important;
font-family:var(--atlas-ui-mono)!important;
font-size:14px!important;
line-height:1.1!important;
white-space:nowrap!important;
}
.meters{
display:grid!important;
gap:4px!important;
}
.meters>div{
align-items:center!important;
}
.meters span,
.meters strong{
font-size:10px!important;
line-height:1.08!important;
}
.meters strong{
font-family:var(--atlas-ui-mono)!important;
}
.transfer-cell{
display:flex!important;
flex-direction:column!important;
justify-content:center!important;
align-items:stretch!important;
gap:3px!important;
min-width:0!important;
font-size:10px!important;
line-height:1.12!important;
}
.transfer-cell>strong{
display:block!important;
width:100%!important;
margin:0!important;
overflow:visible!important;
text-overflow:clip!important;
white-space:nowrap!important;
font-family:var(--atlas-ui-mono)!important;
font-size:11px!important;
font-weight:500!important;
line-height:1.12!important;
letter-spacing:-.035em;
}
.transfer-cell>small{
margin:0!important;
line-height:1.1!important;
}
:root{
--atlas-quota-pill-empty:color-mix(in srgb,var(--text) 12%,transparent);
--atlas-quota-pill-used:color-mix(in srgb,var(--text) 48%,transparent);
}
html[data-theme=dark]{
--atlas-quota-pill-empty:color-mix(in srgb,var(--text) 15%,transparent);
--atlas-quota-pill-used:color-mix(in srgb,var(--text) 54%,transparent);
}
.quota-track{
--quota-pill:var(--atlas-quota-pill-empty);
display:block;
position:relative;
width:100%!important;
height:7px!important;
margin:4px 0 1px!important;
border:0!important;
border-radius:999px!important;
overflow:hidden!important;
background-color:transparent!important;
background-image:
radial-gradient(ellipse at center,var(--quota-pill) 0 58%,transparent 62%)!important;
background-size:10px 5px!important;
background-position:left center!important;
background-repeat:repeat-x!important;
box-shadow:none!important;
}
.quota-track[hidden]{
display:none!important;
}
.quota-track>b{
--quota-pill-used:var(--atlas-quota-pill-used);
display:block!important;
height:100%!important;
margin:0!important;
border:0!important;
border-radius:999px!important;
overflow:hidden!important;
background-color:transparent!important;
background-image:
radial-gradient(ellipse at center,var(--quota-pill-used) 0 58%,transparent 62%)!important;
background-size:10px 5px!important;
background-position:left center!important;
background-repeat:repeat-x!important;
color:var(--quota-pill-used)!important;
box-shadow:none!important;
transition:width 180ms ease!important;
}
.quota-track>b::after{
display:none!important;
}
.quota-track>b.safe,
.quota-track>b.warn{
--quota-pill-used:var(--atlas-quota-pill-used);
}
.quota-track>b.hot{
--quota-pill-used:color-mix(in srgb,var(--warn) 68%,var(--text));
}
.quota-track>b.over,
.quota-track>b.critical{
--quota-pill-used:color-mix(in srgb,var(--bad) 82%,var(--text));
}
.quota-track>b.unknown{
--quota-pill-used:var(--atlas-quota-pill-empty);
}
@media(prefers-reduced-motion:reduce){
.quota-track>b{
transition:none!important;
}
}
.node-pings{
display:grid!important;
gap:3px!important;
font-family:var(--atlas-ui-mono)!important;
font-size:10.5px!important;
line-height:1.15!important;
}
.uptime-cell{
font-family:var(--atlas-ui-mono)!important;
font-size:11px!important;
line-height:1.15!important;
}
/* Same numeric face everywhere; no extra Geist/Atlas Latin request. */
.brand,.kpi>strong,.rate-cell strong,.transfer-cell,.node-pings,.uptime-cell,kbd{
font-family:var(--atlas-ui-mono)!important;
}
.kpi>strong,
.kpi #stat-in,
.kpi #stat-out,
.kpi #stat-month,
.kpi #stat-cost{
font-family:var(--atlas-ui-mono)!important;
font-variant-numeric:tabular-nums;
}
.kpi>strong,
.kpi #stat-in,
.kpi #stat-out,
.kpi #stat-month,
.kpi #stat-cost{
font-size:24px!important;
line-height:1.18!important;
letter-spacing:-.045em;
}
.kpi #stat-cost{
white-space:nowrap!important;
overflow:visible!important;
}
.kpi #stat-cost.multi-currency{
font-size:17px!important;
line-height:1.3!important;
white-space:normal!important;
letter-spacing:-.025em;
}
/* Long-row desktop proportions. */
@media(min-width:1101px){
.node-columns,
.node-row{
grid-template-columns:
62px
minmax(160px,1.35fr)
62px
minmax(84px,.72fr)
minmax(84px,.72fr)
minmax(125px,1fr)
minmax(116px,.95fr)
minmax(110px,.9fr)
72px
28px!important;
}
}
/* Existing mobile card-like row stays untouched in structure. */
@media(max-width:1100px){
.kpi>strong,
.kpi #stat-in,
.kpi #stat-out,
.kpi #stat-month,
.kpi #stat-cost{
font-size:19px!important;
}
.kpi #stat-cost.multi-currency{
font-size:15px!important;
}
}
@media(max-width:800px){
.kpi>strong,
.kpi #stat-in,
.kpi #stat-out,
.kpi #stat-month,
.kpi #stat-cost{
font-size:18px!important;
}
.node-meta .os-tag{
min-height:24px!important;
font-size:10.5px!important;
}
.node-meta .meta-tag{
min-height:22px!important;
font-size:10px!important;
}
.node-row>.rate-cell strong{
font-size:16px!important;
}
.node-row>.rate-cell small,
.node-row>.transfer-cell,
.node-row>.node-pings,
.node-row>.uptime-cell,
.node-row>.meters span,
.node-row>.meters strong{
font-size:10.5px!important;
}
.transfer-cell>strong{
font-size:12px!important;
}
.quota-remaining{
font-size:9.5px!important;
}
}
@media(max-width:430px){
.kpi>strong,
.kpi #stat-in,
.kpi #stat-out,
.kpi #stat-month,
.kpi #stat-cost{
font-size:17px!important;
}
}
@media(prefers-reduced-motion:reduce){
.quota-track>b{transition:none!important}
}
/* Shared node identity alignment */
.node-main{
display:grid!important;
grid-template-columns:27px minmax(0,1fr)!important;
grid-template-rows:auto auto!important;
column-gap:7px!important;
row-gap:3px!important;
align-items:center!important;
align-self:center!important;
}
.node-os-emblem{
grid-column:1!important;
grid-row:1 / 3!important;
align-self:center!important;
justify-self:center!important;
width:24px!important;
height:24px!important;
display:inline-flex!important;
align-items:center!important;
justify-content:center!important;
}
.node-os-emblem svg{
width:22px!important;
height:22px!important;
display:block!important;
overflow:visible!important;
}
.node-main>.node-name{
grid-column:2!important;
grid-row:1!important;
min-width:0!important;
margin:0!important;
}
.node-main>[data-field="meta"]{
grid-column:2!important;
grid-row:2!important;
min-width:0!important;
margin:0!important;
}
/* Desktop density + header polish */
@media(min-width:1301px){
.node-columns,
.node-row{
grid-template-columns:
56px
minmax(214px,1.38fr)
54px
minmax(64px,.45fr)
minmax(64px,.45fr)
minmax(172px,.97fr)
minmax(190px,1.08fr)
100px
42px
28px!important;
column-gap:8px!important;
}
}
@media(min-width:1101px) and (max-width:1300px){
.node-columns,
.node-row{
grid-template-columns:
54px
minmax(184px,1.31fr)
52px
minmax(60px,.43fr)
minmax(60px,.43fr)
minmax(156px,.93fr)
minmax(172px,1.02fr)
94px
40px
26px!important;
column-gap:8px!important;
}
}
@media(min-width:1101px){
.node-columns{
align-items:end!important;
padding-top:0!important;
padding-bottom:10px!important;
font-size:10.35px!important;
line-height:1.15!important;
letter-spacing:-.018em!important;
color:color-mix(in srgb,var(--muted) 90%,transparent)!important;
}
.node-columns>span{
white-space:nowrap!important;
}
.node-columns>span:nth-child(6),
.node-columns>span:nth-child(7),
.node-columns>span:nth-child(8),
.node-columns>span:nth-child(9),
.node-columns>span:nth-child(10){
justify-self:center!important;
}
.rate-cell{
padding-inline:0!important;
}
.meters{
gap:5px!important;
padding-right:2px!important;
}
.meters>div{
display:grid!important;
grid-template-columns:28px minmax(92px,1fr) 34px!important;
align-items:center!important;
gap:6px!important;
}
.meters span{
width:auto!important;
}
.meters strong{
width:auto!important;
min-width:32px!important;
}
.meters i{
width:100%!important;
min-width:92px!important;
height:5px!important;
border-radius:999px!important;
overflow:hidden!important;
background:color-mix(in srgb,var(--text) 13%,transparent)!important;
}
.meters b{
border-radius:999px!important;
}
.transfer-cell{
min-width:0!important;
align-self:center!important;
padding-left:6px!important;
padding-right:10px!important;
display:grid!important;
grid-template-columns:minmax(0,1fr)!important;
grid-auto-rows:min-content!important;
justify-items:stretch!important;
row-gap:4px!important;
}
.transfer-cell>small{
display:none!important;
}
.transfer-cell>strong,
.transfer-cell .quota-used,
.quota-used{
display:block!important;
width:min(100%,190px)!important;
max-width:190px!important;
margin:0 auto!important;
justify-self:center!important;
text-align:center!important;
font-variant-numeric:tabular-nums!important;
letter-spacing:0!important;
}
.transfer-cell>small,
.transfer-cell .quota-remaining,
.quota-remaining{
display:block!important;
width:min(100%,208px)!important;
margin:0 auto!important;
justify-self:center!important;
text-align:center!important;
font-variant-numeric:tabular-nums!important;
}
.transfer-cell>.quota-track,
.transfer-cell .quota-track,
.quota-track{
width:min(100%,194px)!important;
max-width:194px!important;
justify-self:center!important;
margin:4px auto 2px!important;
height:7px!important;
background-size:8px 5px!important;
background-position:center center!important;
}
.transfer-cell>.quota-track>b,
.transfer-cell .quota-track>b,
.quota-track>b{
background-size:8px 5px!important;
background-position:center center!important;
}
.transfer-cell>strong{
overflow:visible!important;
text-overflow:clip!important;
}
.node-pings{
justify-self:start!important;
width:100%!important;
min-width:0!important;
padding-left:0!important;
font-size:9.75px!important;
}
.node-pings>span{
white-space:nowrap!important;
}
.uptime-cell{
justify-self:start!important;
padding-left:0!important;
white-space:nowrap!important;
}
}
/* Mobile overview: preserve 2x3 KPI hierarchy and the denser node cards */
@media(max-width:800px){
.header-inner{
row-gap:6px!important;
padding-top:7px!important;
padding-bottom:6px!important;
}
nav{
gap:2px!important;
}
nav a{
height:28px!important;
min-height:28px!important;
}
.kpis{
gap:6px!important;
}
.kpi{
min-height:86px!important;
padding:9px 10px!important;
}
.kpi-live-traffic{
padding-bottom:34px!important;
}
.kpi-live-traffic .kpi-spark{
left:10px!important;
right:10px!important;
bottom:7px!important;
height:22px!important;
opacity:.36!important;
}
.map-panel{
min-height:310px!important;
}
#map-stage{
height:238px!important;
}
#globe-holder{
width:294px!important;
height:294px!important;
}
.section-heading{
margin-top:18px!important;
margin-bottom:8px!important;
}
.table-toolbar{
margin-bottom:7px!important;
}
.quick-filters{
margin-bottom:7px!important;
}
.node-row,
#node-list[data-view=cards] .node-row{
gap:7px 10px!important;
padding:11px!important;
}
.node-row>.status-cell,
#node-list[data-view=cards] .status-cell{
top:18px!important;
left:11px!important;
}
.node-main,
#node-list[data-view=cards] .node-main{
grid-template-columns:29px minmax(0,1fr)!important;
column-gap:6px!important;
padding-left:15px!important;
padding-right:35px!important;
min-height:27px!important;
}
.node-os-emblem{
width:26px!important;
height:26px!important;
}
.node-os-emblem svg{
width:23px!important;
height:23px!important;
}
.node-main>small.node-meta{
gap:4px!important;
margin-top:4px!important;
}
.node-row>.rate-cell,
#node-list[data-view=cards] .rate-cell{
padding-top:5px!important;
}
.node-row>.rate-cell small,
#node-list[data-view=cards] .rate-cell small{
margin-bottom:3px!important;
}
.node-row>.meters,
#node-list[data-view=cards] .meters{
gap:7px!important;
}
.node-row>.meters>div,
#node-list[data-view=cards] .meters>div{
gap:2px 5px!important;
}
.node-row>.meters>div>i,
#node-list[data-view=cards] .meters>div>i{
height:4px!important;
}
.node-row>.transfer-cell,
#node-list[data-view=cards] .transfer-cell{
margin-top:1px!important;
}
.node-row>.transfer-cell>.quota-track,
#node-list[data-view=cards] .transfer-cell>.quota-track,
.node-row>.transfer-cell .quota-track,
#node-list[data-view=cards] .transfer-cell .quota-track{
width:100%!important;
max-width:none!important;
justify-self:stretch!important;
margin:4px 0 2px!important;
background-position:left center!important;
}
.node-row>.node-pings,
#node-list[data-view=cards] .node-pings{
gap:4px!important;
padding-top:7px!important;
white-space:nowrap!important;
}
.node-row>.detail-cell,
#node-list[data-view=cards] .detail-cell{
top:8px!important;
right:8px!important;
}
.node-detail-cell>.node-detail{
padding-top:11px!important;
}
.node-detail .node-sparks{
gap:6px!important;
}
.node-detail .node-spark{
padding:8px 8px 4px!important;
}
.node-detail .details{
gap:0 18px!important;
}
.node-detail .details>div{
padding:7px 0!important;
gap:8px!important;
}
footer{
display:grid!important;
grid-template-columns:auto minmax(0,1fr)!important;
gap:7px 14px!important;
align-items:center!important;
padding-block:18px!important;
font-size:9px!important;
}
footer>*{
min-width:0!important;
}
footer>*:nth-child(even){
justify-self:end!important;
text-align:right!important;
}
}
@media(max-width:430px){
.kpi{
min-height:84px!important;
}
.map-panel{
min-height:302px!important;
}
#map-stage{
height:230px!important;
}
#globe-holder{
width:286px!important;
height:286px!important;
}
.node-row,
#node-list[data-view=cards] .node-row{
padding:10px!important;
gap:7px 9px!important;
}
.node-main,
#node-list[data-view=cards] .node-main{
padding-left:14px!important;
}
}