/* Public UI v2.3.3. Scoped to the monitor; the accepted admin theme is untouched. */
#mainContainer { width:min(100%,1480px)!important; padding:28px 24px!important; }
#mainContainer .topbar { padding:0 0 20px!important; border:0!important; border-radius:0; background:transparent!important; margin-bottom:18px!important; }
#mainContainer .topbar h1 { font-size:30px!important; }
#mainContainer .topbar-icon { border-radius:14px; }
#mainContainer .status-pill { border:0; background:var(--blue-soft); padding:7px 12px; }
#mainContainer .summary-grid { gap:12px; margin-bottom:14px; }
#mainContainer .metric-card { padding:16px 20px!important; padding-right:46px!important; border-radius:8px!important; }
#mainContainer .metric-card::after { display:none; }
#mainContainer .metric-card>svg { color:var(--blue); }
#mainContainer .metric-card>strong { font-size:27px!important; }
#mainContainer .online-caption { font-size:13px; }

/* A compact information strip: identity, four facts, then features/provenance. */
#mainContainer .myip-panel { grid-template-columns:minmax(220px,.8fr) minmax(0,2.5fr); padding:16px 18px!important; gap:12px 24px; margin-bottom:20px; align-items:center; }
#mainContainer .myip-main { gap:3px; }
#mainContainer .myip-main>span { font-size:13px!important; }
#mainContainer .myip-address strong { font-size:21px!important; }
#mainContainer .myip-main small { font-size:13px!important; }
#mainContainer .myip-grid { grid-template-columns:minmax(0,1.7fr) minmax(80px,.7fr) minmax(90px,.8fr) minmax(100px,1fr)!important; gap:10px 18px; }
#mainContainer .myip-grid .myip-item { gap:4px; font-size:14px!important; line-height:1.5; }
#mainContainer .myip-item>span { font-size:12px; }
#mainContainer .ip-details { padding-top:10px; }
#mainContainer .ip-details>div { display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,1fr); gap:8px 20px; }
#mainContainer .ip-features { gap:12px; align-items:center; }
#mainContainer .ip-section-label { font-size:12px; }
#mainContainer .ip-feature-list { display:flex; gap:5px 12px; }
#mainContainer .ip-feature { padding:2px 7px; border:0; border-radius:4px; background:var(--soft); gap:5px; font-size:13px; line-height:1.7; }
#mainContainer .ip-feature>b { font-weight:500; color:var(--muted); }
#mainContainer .ip-feature[data-feature-state=yes]>b { color:var(--blue); }
#mainContainer .ip-source-grid,#mainContainer .ip-source-grid.same-organization { display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 18px; border:0; padding:0; }
#mainContainer .myip-detail { display:inline-flex; flex-direction:row; gap:6px; font-size:13px; line-height:1.7; min-width:0; }
#mainContainer .myip-detail>span:first-child { font-size:12px; flex-shrink:0; }
#mainContainer .ip-disclaimer { grid-column:1/-1; font-size:12px; line-height:1.5; }

/* Reference-like node strips: no duplicate header, fixed modest name budget. */
#mainContainer .servers-title { margin:20px 0 12px; }
#mainContainer .servers-title h2 { font-size:20px; }
#mainContainer .servers-title>span { background:transparent; padding:0; font-size:13px; }
#mainContainer .server-columns { display:none!important; }
#mainContainer .server-grid { gap:10px; }
#mainContainer .server-card { padding:14px 16px!important; border-radius:8px!important; }
#mainContainer .server-summary { grid-template-columns:68px 200px 106px 106px 82px 82px minmax(165px,1fr) 156px; gap:12px; min-height:52px; align-items:center; }
#mainContainer .node-status { grid-column:auto; grid-row:auto; padding:3px 5px; gap:5px; }
#mainContainer .server-head { grid-column:auto; grid-row:auto; margin:0; }
#mainContainer .server-name { font-size:15px!important; line-height:1.45; }
#mainContainer .server-copy { gap:3px; }
#mainContainer .server-meta { font-size:12px!important; line-height:1.5; gap:4px; }
#mainContainer .server-summary>.metric-cell { grid-column:auto; padding:0 0 0 12px!important; border:0; border-left:1px solid var(--line); background:transparent; border-radius:0; min-height:60px; align-self:start; }
#mainContainer .metric-label { font-size:12px; }
#mainContainer .metric-label strong { font-size:16px; }
#mainContainer .metric-cell .bar { height:4px; margin-top:5px; }
#mainContainer .server-summary .metric-cell small { font-size:11px!important; margin-top:3px; white-space:normal; min-height:16px; }
#mainContainer .traffic-cell { grid-column:auto; flex-direction:column; gap:4px; padding:0; }
#mainContainer .traffic-cell>span { font-size:12px; }
#mainContainer .traffic-cell strong { font-size:13px; white-space:nowrap; }
#mainContainer .monthly { grid-column:auto; padding:0 0 0 12px; border:0; border-left:1px solid var(--line); }
#mainContainer .monthly-head { gap:3px 8px; }
#mainContainer .monthly-head strong { font-size:13px; }
#mainContainer .monthly>.bar { height:4px; margin-top:5px; }
#mainContainer .card-actions { grid-column:auto; grid-row:auto; gap:6px; }
#mainContainer .card-actions button { min-height:38px!important; padding:7px 10px!important; font-size:13px!important; }
#mainContainer .chart-toggle[aria-expanded=true],#mainContainer [data-speed-toggle][aria-expanded=true] { background:var(--blue)!important; color:#101114!important; border-color:var(--blue)!important; }
#mainContainer .chart-wrap { padding:0; border:0; border-radius:0; background:transparent; }
#mainContainer .server-detail { margin:0; padding:0; }
#mainContainer .server-detail:has(.open) { margin-top:14px!important; padding-top:16px!important; }
#mainContainer .speed-grid { background:transparent; border:0; }
#mainContainer .speed-cell { padding:10px 12px; background:transparent; }

@media(max-width:1239px) and (min-width:768px) {
  #mainContainer .server-summary { grid-template-columns:68px minmax(0,220px) minmax(106px,1fr) minmax(106px,1fr); gap:14px 18px; }
  #mainContainer .node-status { grid-column:1; grid-row:1; }
  #mainContainer .server-head { grid-column:2; grid-row:1; }
  #mainContainer .server-summary>.metric-cell { grid-column:auto; }
  #mainContainer .traffic-cell { flex-direction:row; justify-content:space-between; }
  #mainContainer .traffic-cell:nth-child(5) { grid-column:1/3; }
  #mainContainer .traffic-cell:nth-child(6) { grid-column:1/3; grid-row:3; }
  #mainContainer .monthly { grid-column:3; grid-row:2/4; align-self:center; }
  #mainContainer .card-actions { grid-column:4; grid-row:2/4; }
  #mainContainer .myip-panel { grid-template-columns:minmax(200px,.8fr) minmax(0,1.5fr); gap:12px 18px; }
  #mainContainer .myip-grid { grid-template-columns:repeat(2,minmax(0,1fr))!important; }
  #mainContainer .ip-details>div { grid-template-columns:1fr; }
}
@media(max-width:767px) {
  #mainContainer { padding:20px 16px!important; }
  #mainContainer .topbar { gap:10px; padding:0 0 4px!important; }
  #mainContainer .topbar h1 { font-size:25px!important; }
  #mainContainer .topbar-icon { width:56px; height:56px; flex-basis:56px; border-radius:12px; }
  #mainContainer .topbar p { font-size:13px!important; }
  #mainContainer .summary-grid { gap:10px; }
  #mainContainer .metric-card { padding:14px!important; padding-right:24px!important; }
  #mainContainer .metric-card>span { font-size:13px!important; }
  #mainContainer .metric-card>strong { font-size:23px!important; }
  #mainContainer .metric-card>svg { width:16px; height:16px; right:10px; top:15px; }
  #mainContainer .myip-panel { grid-template-columns:1fr; padding:15px!important; gap:12px; }
  #mainContainer .myip-main { gap:2px; }
  #mainContainer .myip-address strong { font-size:20px!important; }
  #mainContainer .myip-grid { grid-template-columns:repeat(3,minmax(0,1fr))!important; gap:10px 12px; }
  #mainContainer .myip-grid .myip-item:first-child { grid-column:1/-1; }
  #mainContainer .myip-grid .myip-item { font-size:14px!important; gap:3px; }
  #mainContainer .ip-details { grid-column:1; padding-top:10px; }
  #mainContainer .ip-details>div { grid-template-columns:1fr; gap:10px; }
  #mainContainer .ip-features { flex-direction:column; align-items:flex-start; gap:5px; }
  #mainContainer .ip-feature-list { display:flex; width:100%; gap:5px 12px; }
  #mainContainer .ip-feature { font-size:14px; }
  #mainContainer .ip-source-grid { gap:4px 14px; }
  #mainContainer .ip-source-grid .myip-detail { grid-column:auto; grid-row:auto; }
  #mainContainer .ip-disclaimer { font-size:12px; }
  #mainContainer .servers-title { margin:22px 0 12px; }
  #mainContainer .server-card { padding:16px!important; position:relative; }
  #mainContainer .server-summary { grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px 16px; }
  #mainContainer .node-status { position:absolute; top:17px; left:16px; padding:3px 5px; }
  #mainContainer .node-status .pill { font-size:12px; }
  #mainContainer .server-head { grid-column:1/-1; grid-row:1; padding-left:76px; min-height:46px; }
  #mainContainer .server-name { font-size:16px!important; }
  #mainContainer .server-meta { font-size:12px!important; }
  #mainContainer .server-summary>.metric-cell { grid-column:span 1; padding:0!important; border:0; align-self:stretch; min-height:60px; }
  #mainContainer .metric-label { font-size:13px; }
  #mainContainer .metric-label strong { font-size:19px; }
  #mainContainer .metric-cell .bar { height:5px; margin-top:6px; }
  #mainContainer .server-summary .metric-cell small { font-size:12px!important; min-height:18px; }
  #mainContainer .traffic-cell { grid-column:span 1; flex-direction:row; align-items:baseline; gap:6px; }
  #mainContainer .traffic-cell>span { font-size:12px; }
  #mainContainer .traffic-cell strong { font-size:14px; }
  #mainContainer .monthly { grid-column:1/-1; border:0; border-top:1px solid var(--line); padding:12px 0 0; }
  #mainContainer .monthly-head strong { font-size:14px; }
  #mainContainer .monthly-head span { font-size:12px; }
  #mainContainer .card-actions { grid-column:1/-1; gap:10px; }
  #mainContainer .card-actions button { min-height:44px!important; font-size:14px!important; }
  #mainContainer .chart-wrap { padding:0; }
}
@media(max-width:380px) {
  #mainContainer { padding:18px 12px!important; }
  #mainContainer .topbar h1 { font-size:23px!important; }
  #mainContainer .topbar-icon { width:52px; height:52px; flex-basis:52px; }
  #mainContainer .server-head { padding-left:70px; }
  #mainContainer .traffic-cell { flex-direction:column; gap:2px; }
}
@media(prefers-reduced-motion:reduce) {
  #mainContainer *,#mainContainer *::before,#mainContainer *::after { transition:none!important; animation:none!important; }
}