/* «Монитор системы» (static/sysmon.js). Шапка с периодом стоит на месте, лист прокручивается
   под ней; выбор периода — выпадающий список поверх листа, подсказка графика — в отведённой
   строке: вёрстка не прыгает.

   Оформление 16.09.2026 (владелец: «тускло»): светлый фон с живым созвездием на канвасе,
   стеклянные карточки, у плиток «Сейчас» — рамка из бегущего размытого пятна, цвет пятна =
   статус. Движение только transform; при «уменьшить движение» всё стоит. */

.sm-body {
  --sm-violet: #7c4dff; --sm-pink: #ff3d8b; --sm-cyan: #00a8e8; --sm-amber: #ff9500; --sm-mint: #00c48c;
  --sm-glass: rgba(255, 255, 255, .84); --sm-edge: rgba(124, 77, 255, .16);
  position: relative; overflow: hidden;
  width: 96vw; max-width: 1680px; height: 92vh; display: flex; flex-direction: column;
  border-radius: var(--r-xl); padding: 0;
  background:
    radial-gradient(900px 520px at 8% -6%, #efe6ff 0%, transparent 60%),
    radial-gradient(800px 600px at 104% 18%, #dff4ff 0%, transparent 60%),
    radial-gradient(700px 500px at 40% 110%, #ffe6f1 0%, transparent 60%),
    #f7f8fc;
}
/* раздел открыт страницей: на весь экран, прокручивается лист, а не коробка */
.modal.as-page > .sm-body { overflow: hidden !important; border-radius: 0; }

.sm-stars { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.sm-head, .sm-sheet { position: relative; z-index: 1; }

/* ---- шапка ---- */
.sm-head { display: flex; align-items: center; gap: var(--sp-3) var(--sp-5); flex-wrap: wrap;
           padding: var(--sp-3) clamp(12px, 2.4vw, 32px); z-index: 5;
           background: rgba(255, 255, 255, .7); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
           border-bottom: 1px solid var(--sm-edge); }
.sm-title { flex: 1 1 260px; min-width: 0; }
.sm-title h2 { margin: 0 0 2px; font-size: 22px; letter-spacing: -.01em;
               background: linear-gradient(90deg, #2a1b6b, var(--sm-violet) 55%, var(--sm-pink));
               -webkit-background-clip: text; background-clip: text; color: transparent; }
.sm-sub, .sm-hint { font-size: var(--fs-cap); color: var(--muted); }
.sm-head-act, .sm-chips { display: flex; gap: var(--sp-2); flex-wrap: wrap; }

/* выбор периода — как в панели хостинга: «Статистика за [сутки ▾]» */
.sm-period { position: relative; display: flex; align-items: baseline; gap: 8px; font-size: 17px; font-weight: 700; color: var(--text); }
.sm-period-btn { font: inherit; color: var(--sm-violet); background: none; border: 0; padding: 2px 4px; cursor: pointer;
                 border-radius: 6px; }
.sm-period-btn:hover { background: rgba(124, 77, 255, .08); }
.sm-period-btn i { font-style: normal; font-size: 13px; display: inline-block; transition: transform .15s; }
.sm-period-menu { position: absolute; top: calc(100% + 6px); left: 96px; z-index: 30; min-width: 150px; padding: 6px;
                  background: #fff; border: 1px solid var(--sm-edge); border-radius: 12px;
                  box-shadow: 0 18px 40px -12px rgba(42, 27, 107, .35); display: flex; flex-direction: column; }
.sm-period-menu button { font: 600 14px/1.2 inherit; font-family: inherit; text-align: left; padding: 9px 12px; border: 0; background: none;
                         border-radius: 8px; cursor: pointer; color: var(--text); }
.sm-period-menu button:hover { background: #f2eeff; }
.sm-period-menu button.active { background: linear-gradient(90deg, var(--sm-violet), var(--sm-pink)); color: #fff; }

.sm-sheet { flex: 1; overflow: auto; min-height: 0; padding: var(--sp-5) clamp(12px, 2.4vw, 32px) var(--sp-6); }
.sm-block { margin-bottom: var(--sp-6); max-width: 2100px; margin-inline: auto; }
.sm-block-head { display: flex; align-items: center; gap: 6px var(--sp-3); margin-bottom: var(--sp-3); flex-wrap: wrap; }
.sm-block-head h3 { margin: 0; font-size: 19px; color: #1b1540; }
.sm-info { display: inline-grid; place-items: center; width: 17px; height: 17px; margin-left: 3px; border-radius: 50%;
           background: #eee9ff; color: var(--sm-violet); font: 800 11px/1 inherit; cursor: help; vertical-align: 1px; }
.sm-info:focus { outline: 2px solid var(--sm-violet); outline-offset: 2px; }
.sm-n { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; flex: 0 0 auto;
        background: linear-gradient(135deg, var(--sm-violet), var(--sm-pink)); color: #fff; font-weight: 700;
        box-shadow: 0 6px 16px -6px rgba(255, 61, 139, .6); }
.sm-empty { color: var(--muted); font-size: var(--fs-cap); padding: var(--sp-2) 0; }
.sm-mt { margin-top: var(--sp-4); }

/* стеклянная карточка: статичная градиентная кромка */
.sm-card { position: relative; background: var(--sm-glass); border-radius: 14px; padding: var(--sp-4); min-width: 0;
           backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
           border: 1px solid transparent;
           background-image: linear-gradient(var(--sm-glass), var(--sm-glass)),
                             linear-gradient(135deg, rgba(124,77,255,.35), rgba(0,168,232,.18) 45%, rgba(255,61,139,.3));
           background-origin: border-box; background-clip: padding-box, border-box;
           box-shadow: 0 10px 30px -18px rgba(42, 27, 107, .35); }
.sm-card + .sm-two, .sm-two + .sm-card { margin-top: var(--sp-3); }
.sm-card-t { font-weight: 700; font-size: 13px; color: #1b1540; margin-bottom: 6px; }

/* ---- вердикт ---- */
.sm-verdict { padding: 10px 16px; border-radius: 12px; margin-bottom: var(--sp-3); font-size: 13px; color: #fff;
              box-shadow: 0 10px 24px -14px rgba(0, 0, 0, .4); }
.sm-verdict.ok { background: linear-gradient(90deg, #00b37e, #00a8e8); }
.sm-verdict.warn { background: linear-gradient(90deg, #ff9500, #ff5e3a); }
.sm-verdict.bad { background: linear-gradient(90deg, #ff2d55, #ff3d8b 60%, #b43cff); }

/* ---- плитки «Сейчас»: рамка из бегущего пятна (перенос Gradient Blob Card) ---- */
.sm-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-3); }
.sm-glow { position: relative; border-radius: 16px; padding: 3px; overflow: hidden; isolation: isolate;
           box-shadow: 0 14px 34px -18px rgba(124, 77, 255, .55); }
.sm-glow::before { content: ""; position: absolute; left: 50%; top: 50%; width: max(62%, 150px); aspect-ratio: 1;
                   border-radius: 50%; filter: blur(14px); z-index: -1;
                   background: linear-gradient(90deg, var(--sm-violet), var(--sm-cyan), var(--sm-mint));
                   animation: sm-blob 6s linear infinite; animation-delay: var(--d, 0s); }
.sm-glow.warn::before { background: linear-gradient(90deg, #ffc400, var(--sm-amber), #ff5e3a); }
.sm-glow.bad::before { background: linear-gradient(90deg, var(--sm-pink), #ff2d55, #ffc400); }
.sm-glow.bad { box-shadow: 0 14px 34px -14px rgba(255, 45, 85, .6); }
@keyframes sm-blob {
  0%   { transform: translate(-100%, -100%); }
  25%  { transform: translate(0%, -100%); }
  50%  { transform: translate(0%, 0%); }
  75%  { transform: translate(-100%, 0%); }
  100% { transform: translate(-100%, -100%); }
}
.sm-in { height: 100%; border-radius: 13px; padding: 14px 16px; background: rgba(255, 255, 255, .94);
         backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); outline: 1px solid #fff; }
.sm-kpi-l { font-size: 12px; color: #4b4f66; font-weight: 600; display: flex; align-items: center; gap: 6px; }
.sm-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--sm-mint); box-shadow: 0 0 0 3px rgba(0, 196, 140, .18); }
.warn .sm-dot { background: var(--sm-amber); box-shadow: 0 0 0 3px rgba(255, 149, 0, .2); }
.bad .sm-dot { background: #ff2d55; box-shadow: 0 0 0 3px rgba(255, 45, 85, .2); }
.neutral .sm-dot { background: #8a94a6; box-shadow: 0 0 0 3px rgba(138, 148, 166, .18); }
.sm-kpi-v { font-size: 30px; font-weight: 800; margin: 4px 0 2px; letter-spacing: -.02em; color: #1b1540; font-variant-numeric: tabular-nums; }
.sm-kpi-v small { font-size: 14px; font-weight: 600; color: var(--muted); }
.bad .sm-kpi-v { color: #e0123f; }
.sm-kpi-h { font-size: var(--fs-cap); color: var(--muted); }
.sm-ring { display: flex; align-items: center; gap: 12px; }
.sm-ring svg { flex: none; }
.sm-ring-bg { fill: none; stroke: #eceaf6; stroke-width: 9; }
.sm-ring-fg { fill: none; stroke-width: 9; stroke-linecap: round; }
.sm-ring-t { font-size: 17px; font-weight: 800; fill: #1b1540; }
.sm-rg-a { stop-color: var(--sm-violet); } .sm-rg-b { stop-color: var(--sm-cyan); }
.warn .sm-rg-a { stop-color: #ffc400; } .warn .sm-rg-b { stop-color: #ff5e3a; }
.bad .sm-rg-a { stop-color: var(--sm-pink); } .bad .sm-rg-b { stop-color: #ff2d55; }
.neutral .sm-rg-a { stop-color: #8a94a6; } .neutral .sm-rg-b { stop-color: #b8bfcc; }

/* ---- память ---- */
.sm-memory { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: var(--sp-5); }
.sm-donut { width: 164px; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; flex: none;
            box-shadow: inset 0 0 0 1px rgba(124,77,255,.12), 0 12px 30px -18px rgba(42,27,107,.5); }
.sm-donut > div { width: 92px; aspect-ratio: 1; border-radius: 50%; display: flex; flex-direction: column; align-items: center;
                  justify-content: center; background: rgba(255,255,255,.96); box-shadow: 0 0 0 2px rgba(255,255,255,.7); }
.sm-donut b { font-size: 21px; color: #1b1540; font-variant-numeric: tabular-nums; }
.sm-donut span { font-size: 11px; color: var(--muted); }
.sm-legend { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 8px var(--sp-4); font-size: 12px; }
.sm-legend em { font-style: normal; color: var(--muted); }
.sm-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }
.sm-legend i.sm-swap { background: repeating-linear-gradient(45deg, #ff2d55 0 2px, transparent 2px 4px); }
.sm-fact { margin-top: 8px; padding: 7px 10px; border-radius: 8px; font-size: 12px; background: #f4f1ff; }
.sm-fact.bad { background: #fff0f3; color: #c5103c; }
.sm-config-facts { display: grid; grid-template-columns: repeat(4, minmax(130px, 1fr)); gap: var(--sp-2); margin-bottom: var(--sp-3); }
.sm-config-facts span { padding: 10px 12px; border-radius: 10px; background: rgba(255,255,255,.82); border: 1px solid var(--sm-edge); color: var(--muted); }
.sm-config-facts b { display: block; color: #1b1540; font-size: 18px; }
.sm-capacity { display: grid; gap: 4px; margin-bottom: var(--sp-3); padding: 12px 14px; border-radius: 12px; font-size: 12px; }
.sm-capacity.ok { background: #e7f8f2; border: 1px solid #bdebdc; color: #12634e; }
.sm-capacity.warn { background: #fff3df; border: 1px solid #ffd99b; color: #8a4c00; }
.sm-capacity b { font-size: 14px; }
.sm-legend-s { margin: 6px 0 0; font-size: var(--fs-cap); }
.sm-two { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(520px, 100%), 1fr)); gap: var(--sp-3); align-items: start; }
.sm-af { margin: 0; padding-left: 18px; font-size: 12px; }
.sm-af li { margin: 2px 0; }

/* ---- таблицы ---- */
.sm-scroll { overflow-x: auto; }
.sm-table { width: 100%; border-collapse: collapse; font-size: var(--fs-base); }
.sm-body .sm-table th, .sm-body .sm-table td { text-align: left; }
.sm-table th { font-weight: 600; color: var(--muted); font-size: var(--fs-cap); position: static; background: none; cursor: default;
               border-bottom: 1px solid #e7e3f5; padding: 6px 8px; white-space: nowrap; }
.sm-table td { border-bottom: 1px solid #efedf7; padding: 6px 8px; vertical-align: top; }
.sm-table tbody tr:hover td { background: rgba(124, 77, 255, .05); }
.sm-body .sm-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sm-name { font-weight: 600; color: #1b1540; white-space: nowrap; }
.sm-where { color: var(--muted); white-space: nowrap; }
.sm-pct { min-width: 110px; }
.sm-meter { display: inline-block; width: 52px; height: 6px; border-radius: 3px; background: #ece9f7; margin-right: 6px; vertical-align: middle; overflow: hidden; }
.sm-meter i { display: block; height: 100%; background: linear-gradient(90deg, var(--sm-mint), var(--sm-cyan)); }
.sm-meter i.sm-warn { background: linear-gradient(90deg, #ffc400, var(--sm-amber)); }
.sm-meter i.sm-bad { background: linear-gradient(90deg, var(--sm-pink), #ff2d55); }
.sm-cfg td.sm-why { color: var(--muted); min-width: 260px; max-width: 560px; }
.sm-cfg code { font-size: 12px; background: #f1eefb; padding: 0 3px; border-radius: 3px; }
.sm-key { font-size: 11px; color: var(--muted); font-family: ui-monospace, Consolas, monospace; }
.sm-sec { margin: var(--sp-4) 0 var(--sp-2); font-size: 15px; color: #1b1540; }
.sm-tag { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: var(--fs-cap); white-space: nowrap; font-weight: 600; }
.sm-tag.sm-ok { background: #dcf7ec; color: #00875f; }
.sm-tag.sm-bad { background: #ffe3ea; color: #d70f3c; }
.sm-tag.sm-warn { background: #fff0d9; color: #b35c00; }
.sm-tag.sm-grey { background: #eef0f5; color: var(--muted); }
span.sm-bad { color: #e0123f; font-weight: 700; }
span.sm-warn { color: #c46a00; font-weight: 700; }
.sm-chips { margin-bottom: var(--sp-2); }
.sm-chip { font: 600 12px/1 inherit; font-family: inherit; padding: 7px 12px; border-radius: 999px; cursor: pointer;
           border: 1px solid #ddd6f7; background: #fff; color: #3b3360; }
.sm-chip.active { background: linear-gradient(90deg, var(--sm-violet), var(--sm-pink)); color: #fff; border-color: transparent; }
.sm-journal { list-style: none; margin: 0; padding: 0; }
.sm-journal li { display: flex; gap: 12px; padding: 6px 0; border-bottom: 1px solid #efedf7; font-size: 13px; }
.sm-journal li b { flex: none; color: var(--sm-violet); min-width: 42px; }

/* ---- кто грузил сервер ---- */
.sm-dags { display: flex; flex-direction: column; gap: 7px; }
.sm-dag { display: grid; grid-template-columns: minmax(120px, 34%) 1fr auto; align-items: center; gap: 10px; font-size: 12px; }
.sm-dag-n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; color: #1b1540; }
.sm-dag-bar { height: 10px; border-radius: 5px; background: #efecf8; overflow: hidden; }
.sm-dag-bar i { display: block; height: 100%; border-radius: 5px; }
.sm-dag-v { white-space: nowrap; color: var(--muted); }
.sm-dag-v b { color: #1b1540; }
.sm-heavy { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px; }
.sm-heavy > div { border-radius: 10px; padding: 8px 10px; background: #f4f1ff; display: flex; flex-direction: column; }
.sm-heavy.bad > div { background: #fff0f3; }
.sm-heavy span { font-size: var(--fs-cap); color: var(--muted); }
.sm-heavy b { font-size: 18px; color: #1b1540; }
.sm-heavy.bad b { color: #e0123f; }
.sm-heavy em { font-style: normal; font-size: var(--fs-cap); color: var(--muted); }

/* ---- графики ---- */
.sm-charts { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(480px, 100%), 1fr)); gap: var(--sp-3); }
.sm-chart { padding: var(--sp-3) var(--sp-4); }
.sm-chart-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 6px 12px; flex-wrap: wrap; }
.sm-chart-t { font-weight: 700; color: #1b1540; font-size: 14px; }
.sm-chart-t span { font-weight: 500; color: var(--sm-violet); font-size: 12px; }
.sm-chart-n { font-size: var(--fs-cap); color: var(--muted); }
.sm-stats { display: flex; gap: 4px; flex-wrap: wrap; }
.sm-stats span { font-size: 10px; color: var(--muted); background: #f4f1ff; border-radius: 6px; padding: 2px 7px; white-space: nowrap; }
.sm-stats b { font-size: 12px; color: #1b1540; }
.sm-read { height: 18px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: var(--fs-cap); margin-top: 4px; }
.sm-svg { width: 100%; }
.sm-svg svg { display: block; touch-action: pan-y; }
.sm-grid { stroke: #ece9f6; stroke-width: 1; }
.sm-ax { fill: #8a8fa8; font-size: 10px; }
.sm-th { stroke: #ff2d55; stroke-width: 1.2; stroke-dasharray: 5 4; }
.sm-cross { stroke: #a99bd8; stroke-width: 1; }

@media (prefers-reduced-motion: reduce) {
  .sm-glow::before { animation: none; transform: none; left: -20%; top: -20%; width: 140%; filter: blur(10px); }
}
@media (max-width: 700px) {
  .sm-body { width: 100vw; height: 100vh; border-radius: 0; }
  .sm-head { gap: 8px; }
  .sm-title h2 { font-size: 18px; }
  .sm-period { font-size: 15px; }
  .sm-period-menu { left: 0; }
  .sm-kpi-v { font-size: 24px; }
  .sm-dag { grid-template-columns: 1fr auto; }
  .sm-dag-bar { grid-column: 1 / -1; order: 3; }
  .sm-card { padding: var(--sp-3); }
  .sm-memory { grid-template-columns: 1fr; justify-items: center; }
  .sm-legend { width: 100%; grid-template-columns: 1fr; }
  .sm-config-facts { grid-template-columns: repeat(2, minmax(120px, 1fr)); }
  .sm-kpis { grid-template-columns: 1fr; }
}
@media (min-width: 701px) and (max-width: 1050px) { .sm-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }