/* Promotion color belongs to a placement, never to the entire physical server. */
.mon-page .mon-filter--priority{grid-template-columns:minmax(180px,2fr) minmax(130px,1fr) minmax(150px,1fr) auto}
.mon-page .mon-color-dot{display:inline-block;width:7px;height:7px;margin-left:5px;border-radius:50%;background:var(--mon-accent);box-shadow:0 0 0 3px #f5a63218;vertical-align:middle}
.mon-page .mon-service-icons .mon-service-icon{position:relative}
.mon-page .mon-service-color-dot{position:absolute;right:0;bottom:0;margin:0;border:1px solid var(--mon-panel);width:8px;height:8px}
.mon-page .mon-badge--top,.mon-page .mon-badge--color{color:var(--mon-accent);border-color:#f5a63255;background:#f5a63212}
.mon-page .mon-badge--unique{color:#b6c4d3;border-color:#687d934d;background:#687d9310}
.mon-page .mon-badge svg{flex:none;vertical-align:middle;margin-right:4px}
.mon-page .mon-server-row--color{background:linear-gradient(90deg,#f5a6320c,transparent 65%),var(--mon-panel);box-shadow:inset 3px 0 var(--mon-accent)}
.mon-page .mon-server-row--color .mon-server-name h3 a{color:var(--mon-accent)}
.mon-page .mon-server-row--color:hover{background:linear-gradient(90deg,#f5a63213,transparent 75%),var(--mon-panel-soft)}
.mon-page .mon-position-expiry{display:block;color:var(--mon-muted);font-size:10px;line-height:1.5;margin-top:4px}
.mon-page .mon-paid-heading{display:flex;justify-content:space-between;align-items:center;gap:24px;margin:8px 0 36px;padding:30px 0;border-bottom:1px solid var(--mon-line)}
.mon-page .mon-paid-heading>div{max-width:720px}
.mon-page .mon-paid-heading h1{font-size:clamp(30px,3vw,46px)}
.mon-page .mon-paid-heading p{color:var(--mon-muted);margin-bottom:0;max-width:620px}
.mon-page .mon-paid-top,.mon-page .mon-paid-other{margin-bottom:36px}
.mon-page .mon-top-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.mon-page .mon-top-card{min-width:0;overflow:hidden;border:1px solid var(--mon-line);border-radius:12px;background:var(--mon-panel);transition:border-color .16s}
.mon-page .mon-top-card:hover{border-color:#66717e}
.mon-page .mon-top-image{display:block;position:relative;aspect-ratio:16/8;overflow:hidden;background:#15181c}
.mon-page .mon-top-image::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,#1c20252b,transparent 55%);pointer-events:none}
.mon-page .mon-top-image img{width:100%;height:100%;object-fit:cover;display:block}
.mon-page .mon-top-body{padding:20px}
.mon-page .mon-top-meta{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:15px}
.mon-page .mon-top-meta .mon-badge{display:inline-flex;align-items:center;gap:4px}
.mon-page .mon-top-card h3{font-size:18px;line-height:1.4;min-height:2.8em;margin-bottom:9px;overflow-wrap:anywhere}
.mon-page .mon-top-card--color{border-color:#a97428;box-shadow:inset 0 3px var(--mon-accent)}
.mon-page .mon-top-card--color h3 a{color:var(--mon-accent)}
.mon-page .mon-top-current{display:flex;justify-content:space-between;gap:15px;align-items:center;margin:22px 0 8px;color:var(--mon-muted);font-size:12px}
.mon-page .mon-top-current strong{font-size:19px;color:var(--mon-text);font-variant-numeric:tabular-nums}
.mon-page .mon-top-current strong small{font-size:12px;font-weight:400;color:var(--mon-muted);margin-left:2px}
.mon-page .mon-top-progress{display:block;width:100%;height:4px;appearance:none;border:0;border-radius:4px;overflow:hidden;background:#39424b;color:var(--mon-accent)}
.mon-page .mon-top-progress::-webkit-progress-bar{background:#39424b}
.mon-page .mon-top-progress::-webkit-progress-value{background:var(--mon-accent);border-radius:4px}
.mon-page .mon-top-progress::-moz-progress-bar{background:var(--mon-accent);border-radius:4px}
.mon-page .mon-top-footer{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:20px;padding-top:14px;border-top:1px solid var(--mon-line);font-size:10px;color:var(--mon-muted)}
.mon-page .mon-top-footer a{font-size:12px;color:var(--mon-accent);font-weight:650}
.mon-page .mon-empty--compact{padding:30px 24px}
.mon-page .mon-empty--compact p{max-width:590px;margin:0 auto}
.mon-page .mon-plan-target{margin:12px 0}
.mon-page .mon-plan-target>span{display:block;margin-bottom:6px;color:var(--mon-muted);font-size:12px}
.mon-page .mon-plan-target select{width:100%;min-height:43px}
.mon-page .mon-active-color{margin:4px 0}
.mon-page .mon-purchase-target{display:block;margin-top:4px;color:var(--mon-muted);font-size:11px}
.mon-page .mon-comments-panel{margin-top:28px}
@container monitoring (max-width:1050px){.mon-page .mon-top-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.mon-page .mon-paid-heading{align-items:flex-start}.mon-page .mon-paid-heading>.mon-button{flex:none}}
@container monitoring (max-width:650px){.mon-page .mon-filter--priority{grid-template-columns:1fr 1fr}.mon-page .mon-filter--priority .mon-search{grid-column:1/-1}.mon-page .mon-filter--priority>.mon-button{grid-column:1/-1}.mon-page .mon-top-grid{grid-template-columns:1fr}.mon-page .mon-paid-heading{display:block;padding-top:10px}.mon-page .mon-paid-heading>.mon-button{margin-top:20px}.mon-page .mon-top-card h3{min-height:0}.mon-page .mon-top-body{padding:18px}.mon-page .mon-nav a{padding:8px 10px;font-size:12px}}

/* Keep service hints inside the monitoring content, including while hidden. */
.mon-page .mon-service-tooltip{display:none;left:auto;right:0}
.mon-page .mon-service-icon:hover>.mon-service-tooltip,.mon-page .mon-service-icon:focus>.mon-service-tooltip{display:block}
.mon-page .mon-server-hero .mon-service-tooltip{left:0;right:auto}
@container monitoring (max-width:620px){
    .mon-page .mon-server-row .mon-service-tooltip{left:0;right:auto}
    .mon-page .mon-server-hero .mon-service-tooltip{left:50%;right:auto;transform:translate(-50%,-3px)}
    .mon-page .mon-server-hero .mon-service-icon:hover>.mon-service-tooltip,.mon-page .mon-server-hero .mon-service-icon:focus>.mon-service-tooltip{transform:translate(-50%,0)}
}