@layer components{.health-page{--health-green:var(--success);--health-amber:#e8bd6d;--health-gray:#657087;padding:4px 0 34px;animation:.35s both health-enter}[data-theme=light] .health-page{--health-amber:#986811;--health-gray:#a3adbf}.health-up{--health-state:var(--health-green)}.health-degraded{--health-state:var(--health-amber)}.health-down{--health-state:var(--danger)}.health-unknown{--health-state:var(--health-gray)}.health-heading{justify-content:space-between;align-items:center;gap:20px;margin-bottom:26px;display:flex}.health-heading h1{letter-spacing:-.6px;align-items:center;gap:15px;margin:0;font-size:32px;font-weight:900;display:flex}.health-heading h1 svg{width:29px;height:29px;color:var(--lemon);flex-shrink:0}.health-update{color:var(--muted);white-space:nowrap;align-items:center;gap:7px;font-size:12px;display:flex}.health-overview{background:var(--surface);border-radius:18px;align-items:center;gap:18px;margin-bottom:26px;padding:23px 26px;display:flex}.health-overview-icon{width:45px;height:45px;color:var(--health-state);background:color-mix(in srgb,var(--health-state) 12%,transparent);border-radius:50%;flex-shrink:0;place-items:center;transition:color .2s,background .2s;display:grid}.health-overview-icon svg{width:25px;height:25px}.health-overview h2{margin:0;font-size:21px;font-weight:900;line-height:1.3}.health-overview p{color:var(--muted);margin:4px 0 0;font-size:13px}.health-total{color:var(--health-state);font-variant-numeric:tabular-nums;white-space:nowrap;margin-left:auto;font-size:27px;font-weight:900}.health-total small{color:var(--muted);font-size:15px;font-weight:600}.health-service-title{flex-direction:column;gap:2px;display:flex}.health-service-title>span{color:var(--muted);font-size:13px;font-weight:600;line-height:1.35}.health-columns,.health-row{grid-template-columns:minmax(200px,1.3fr) 110px 166px 115px minmax(180px,1fr);align-items:center;gap:18px;display:grid}.health-columns{color:var(--muted);padding:0 20px 12px;font-size:15px;font-weight:700}.health-columns>span:last-child{text-align:right}.health-rows{background:var(--surface);border-radius:16px}.health-row{min-height:78px;animation:health-enter .35s var(--health-delay) ease backwards;padding:18px 20px;transition:background .2s;position:relative}.health-row:first-child{border-radius:16px 16px 0 0}.health-row:last-child{border-radius:0 0 16px 16px}.health-row+.health-row:before{content:"";background:var(--line);opacity:.5;height:1px;position:absolute;top:0;left:20px;right:20px}.health-row:hover{background:color-mix(in srgb,var(--raised) 75%,var(--surface))}.health-name{align-items:center;gap:13px;min-width:0;display:flex}.health-name>svg{width:23px;height:23px;color:var(--lemon);flex-shrink:0;transition:transform .2s}.health-row:hover .health-name>svg{transform:translateY(-2px)}.health-name h2{margin:0;font-size:15px;font-weight:800;line-height:1.4}.health-state{color:var(--health-state);white-space:nowrap;align-items:center;gap:7px;font-size:12px;font-weight:800;transition:color .25s;display:flex}.health-state i{background:currentColor;border-radius:50%;flex-shrink:0;width:6px;height:6px}.health-measure{white-space:nowrap;font-variant-numeric:tabular-nums;font-size:16px}.health-measure .dle-text-tooltip-anchor{align-items:baseline;gap:4px}.health-measure strong{font-weight:800}.health-measure small{color:var(--muted);font-size:12px}.health-availability{color:var(--muted);font-variant-numeric:tabular-nums;font-size:14px;font-weight:700}.health-timeline{align-items:center;gap:3px;min-width:0;height:25px;display:flex}.health-timeline>.dle-text-tooltip-anchor{flex:1;align-items:center;min-width:0;height:25px}.health-day{background:var(--health-state);opacity:.8;border-radius:3px;width:100%;height:18px;transition:height .16s,opacity .16s;display:block}.health-day.health-unknown{opacity:.18}.health-timeline>.health-day{flex:1;min-width:0}.health-timeline>.dle-text-tooltip-anchor:is(:hover,:focus-visible) .health-day{opacity:1;height:25px}.health-legend{color:var(--muted);justify-content:space-between;gap:15px;padding:12px 20px;font-size:14px;display:flex}.health-legend>span:first-child{align-items:center;gap:7px;display:flex}.health-legend i{background:var(--health-amber);border-radius:50%;width:5px;height:5px}.health-events{margin-top:20px}.health-events>p{color:var(--muted);margin:0;font-size:12px}.health-event{align-items:center;gap:12px;padding:10px 0;font-size:13px;display:flex}.health-event>i{background:var(--health-state);border-radius:50%;width:6px;height:6px}.health-event>.dle-text-tooltip-anchor{color:var(--muted);margin-left:auto;font-size:12px}.health-tooltip{white-space:pre-line;z-index:90;font-size:13px;line-height:1.5;animation:.16s both health-tooltip-enter}@keyframes health-enter{0%{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}@keyframes health-tooltip-enter{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}@media (max-width:1100px){.health-columns,.health-row{grid-template-columns:minmax(182px,1.2fr) 103px 155px 100px minmax(140px,1fr);gap:12px}.health-name{gap:10px}.health-row{padding-left:16px;padding-right:16px}.health-columns{padding-left:16px;padding-right:16px;font-size:14px}}@media (max-width:850px){.health-columns{display:none}.health-row{grid-template-columns:1fr auto;gap:9px 18px;padding:17px 20px}.health-name{grid-area:1/1}.health-state{grid-area:1/2;justify-self:end}.health-measure{grid-area:2/1;font-size:14px}.health-measure:before{content:attr(data-label);color:var(--muted);margin-right:7px;font-size:11px}.health-availability{grid-area:2/2;justify-self:end;font-size:12px}.health-availability:before{content:"30 дней · ";font-weight:500}.health-timeline{grid-area:3/1/auto/-1;height:19px}.health-timeline>.dle-text-tooltip-anchor{height:19px}.health-day{height:13px}.health-timeline>.dle-text-tooltip-anchor:is(:hover,:focus-visible) .health-day{height:19px}.health-heading h1{font-size:29px}.health-legend{padding-left:0;padding-right:0}}@media (max-width:480px){.health-heading{margin-bottom:20px;display:block}.health-heading h1{gap:10px;font-size:27px}.health-heading h1 svg{width:25px;height:25px}.health-heading>.dle-text-tooltip-anchor{margin-top:8px}.health-update{font-size:11px}.health-overview{gap:12px;margin-bottom:18px;padding:18px}.health-overview-icon{width:34px;height:34px}.health-overview-icon svg{width:21px;height:21px}.health-overview h2{font-size:17px}.health-overview p{font-size:11px}.health-total{font-size:22px}.health-total small{font-size:12px}.health-row{gap:8px 10px;padding:16px}.health-name h2{font-size:14px}.health-name{gap:9px}.health-name>svg{width:20px;height:20px}.health-state{gap:5px;font-size:10px}.health-measure{font-size:13px}.health-measure small{font-size:11px}.health-measure:before{font-size:10px}.health-row+.health-row:before{left:16px;right:16px}.health-legend{font-size:13px}.health-event{flex-wrap:wrap;gap:6px 10px}.health-event>.dle-text-tooltip-anchor{width:100%;margin-left:16px}}@media (prefers-reduced-motion:reduce){.health-page,.health-row,.health-tooltip,.health-day,.health-name>svg,.health-state{transition:none!important;animation:none!important}}.health-navigation{flex-wrap:wrap;gap:24px;margin:-8px 0 24px;display:flex}.health-navigation a{color:var(--muted);border-bottom:2px solid #0000;align-items:center;gap:8px;padding:9px 0;font-size:15px;font-weight:800;text-decoration:none;transition:color .2s,border-color .2s;display:flex}.health-navigation a[aria-current=page]{color:var(--lemon);border-color:var(--lemon)}.health-navigation a:hover{color:var(--text)}.health-navigation a:focus-visible{outline:2px solid var(--lemon);outline-offset:5px}.game-health-page .health-name h2{overflow-wrap:anywhere}.game-health-page .health-measure{align-items:baseline;gap:5px;display:flex}.game-health-ping{color:var(--muted);margin-left:8px;font-size:13px}.game-health-ping small{margin-left:4px}.game-health-empty{color:var(--muted);margin:0;padding:24px}.game-health-legend .dle-text-tooltip-anchor>span{align-items:center;gap:7px;display:flex}.game-health-legend i{width:6px;height:6px;display:inline-block}.game-restarting-icon{flex-shrink:0;animation:3s linear infinite game-restarting}@keyframes game-restarting{to{transform:rotate(360deg)}}@media (max-width:850px){.game-health-page .health-availability:before{content:"24 часа · "}.game-health-page .health-row>.dle-text-tooltip-anchor{grid-area:1/2;justify-self:end}}@media (max-width:480px){.health-navigation{gap:18px}.health-navigation a{font-size:14px}.game-health-legend{flex-wrap:wrap;gap:8px}.game-health-ping{margin-left:4px}}@media (prefers-reduced-motion:reduce){.game-restarting-icon{animation:none}.health-navigation a{transition:none}}}
