/* pvedash: страница «Сервисы» (поток E). Только токены из style.css (--blue*, --green*, --red*, --orange*, --ink, --muted, --line, --surface).
   Все классы с префиксом sv- (svc- уже занят блоком «Службы» в style.css), чтобы переносить файл в общий каркас потока B без пересечений.
   Образцы: плитки сервисов AI Studio (панель admin.css, .sv-*) и админка VPN (мягкие карточки, бейджи со статусом). */

.svcwrap { max-width: 1280px; }
/* заголовок страницы: как .page-head каркаса потока B (shell.css); здесь запасной вариант, пока каркаса нет */
.svcwrap .page-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px 20px; flex-wrap: wrap; padding: 12px 0 16px; }
.svcwrap .page-head h1 { font-size: clamp(20px, 2vw, 24px); letter-spacing: -.03em; font-weight: 700; margin: 0; line-height: 1.15; }
.svcwrap .page-head p { margin: 6px 0 0; color: var(--muted); font-size: 14px; max-width: 68ch; }
.sv-ta { position: fixed; left: -9999px; top: 0; opacity: 0; }

/* ---------- сводка ---------- */
.sv-sum { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 18px 20px; margin: 0 0 8px; border-left: 4px solid var(--line); }
.sv-sum.st-ok { border-left-color: var(--green); }
.sv-sum.st-warn { border-left-color: var(--orange); }
.sv-sum.st-bad { border-left-color: var(--red); }
.sv-sum-ic { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: var(--surface-2); color: var(--muted); flex: none; }
.sv-sum-ic svg { width: 26px; height: 26px; }
.st-ok > .sv-sum-ic { background: var(--green-soft); color: var(--green-ink); }
.st-warn > .sv-sum-ic { background: var(--orange-soft); color: var(--orange-ink); }
.st-bad > .sv-sum-ic { background: var(--red-soft); color: var(--red-ink); }
.sv-sum-body { min-width: 0; }
.sv-sum-t { font-size: clamp(19px, 2.2vw, 24px); font-weight: 730; letter-spacing: -.025em; line-height: 1.2; }
.sv-sum-p { margin: 4px 0 0; min-height: 1.5em; font-size: 14px; font-weight: 600; color: var(--soft); overflow-wrap: anywhere; }
.st-bad .sv-sum-p { color: var(--red-ink); }
.st-warn .sv-sum-p { color: var(--orange-ink); }
.sv-sum-m { margin: 2px 0 0; min-height: 1.5em; font-size: 13px; color: var(--muted); overflow-wrap: anywhere; }
.sv-sum.stale .sv-sum-m { color: var(--red-ink); }
.sv-check { min-width: 188px; gap: 8px; }
.sv-check svg { width: 17px; height: 17px; }
.sv-check span { color: inherit; }
.sv-check.busy svg { animation: sv-spin 1s linear infinite; }
@keyframes sv-spin { to { transform: rotate(360deg); } }
.sv-hint { min-height: 22px; margin: 0 0 6px; font-size: 13px; color: var(--red-ink); }
.sv-hint:empty { min-height: 22px; }
.sv-body { display: flow-root; } /* поля первой группы не «вылезают» наружу и не двигают страницу при замене заглушки */
.sv-skel { margin-top: 18px; height: 420px; border-radius: var(--radius); background: linear-gradient(90deg, var(--surface-2), var(--surface), var(--surface-2)); background-size: 200% 100%; border: 1px solid var(--line); animation: sv-sheen 1.6s ease-in-out infinite; }
@keyframes sv-sheen { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }

/* ---------- группы и плитки ---------- */
.sv-group { margin-top: 26px; }
.sv-body > .sv-group:first-child { margin-top: 18px; }
.sv-gh { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0 0 12px; font-size: 18px; font-weight: 720; letter-spacing: -.015em; }
.sv-gcount { font-size: 13px; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; }
.sv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 14px; }

.sv-card {
  --sv-accent: var(--line);
  display: grid; grid-template-rows: auto auto auto 1fr auto; gap: 8px; min-width: 0; padding: 16px 18px 14px;
  background: var(--surface); border: 1px solid var(--line); border-top: 3px solid var(--sv-accent); border-radius: var(--radius);
  box-shadow: var(--shadow); transition: border-color .15s, box-shadow .15s, transform .16s;
}
.sv-card:hover { border-color: var(--blue-line); border-top-color: var(--sv-accent); box-shadow: 0 14px 30px color-mix(in srgb, var(--ink) 9%, transparent); transform: translateY(-1px); }
.sv-card.st-up { --sv-accent: var(--green); }
.sv-card.st-warn { --sv-accent: var(--orange); background: color-mix(in srgb, var(--orange-soft) 45%, var(--surface)); }
.sv-card.st-down.must { --sv-accent: var(--red); background: color-mix(in srgb, var(--red-soft) 55%, var(--surface)); border-color: var(--red-line); }
.sv-card.st-down.opt, .sv-card.st-unknown { --sv-accent: var(--muted); background: var(--surface-2); }
.sv-card.st-off { --sv-accent: var(--line); background: var(--surface-2); border-style: dashed; }
.sv-card.st-off .sv-ic, .sv-card.st-down.opt .sv-ic { filter: grayscale(.8); opacity: .75; }

.sv-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 11px; align-items: start; }
.sv-ic { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; flex: none; border: 1px solid transparent; }
.sv-ic svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.sv-ic.tone-blue { background: var(--blue-soft); color: var(--blue-ink); border-color: var(--blue-line); }
.sv-ic.tone-teal { background: color-mix(in srgb, var(--teal) 12%, var(--surface)); color: var(--teal); border-color: color-mix(in srgb, var(--teal) 30%, var(--surface)); }
.sv-ic.tone-violet { background: color-mix(in srgb, var(--violet) 12%, var(--surface)); color: var(--violet); border-color: color-mix(in srgb, var(--violet) 30%, var(--surface)); }
.sv-ic.tone-slate { background: color-mix(in srgb, var(--slate) 12%, var(--surface)); color: var(--slate); border-color: color-mix(in srgb, var(--slate) 30%, var(--surface)); }
.sv-title { min-width: 0; display: grid; gap: 1px; }
.sv-name { margin: 0; font-size: 16px; font-weight: 720; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sv-addr { min-height: 1.4em; font-size: 12px; color: var(--muted); font-family: ui-monospace, Menlo, monospace; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.sv-badge { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 99px; border: 1px solid var(--line); background: var(--surface-2); color: var(--soft); font-size: 12px; font-weight: 700; line-height: 1.4; white-space: nowrap; }
.sv-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }
.sv-ms { font-weight: 600; font-variant-numeric: tabular-nums; opacity: .85; }
.sv-ms:empty { display: none; }
.st-up .sv-badge { background: var(--green-soft); border-color: var(--green-line); color: var(--green-ink); }
.st-warn .sv-badge { background: var(--orange-soft); border-color: var(--orange-line); color: var(--orange-ink); }
.st-down.must .sv-badge { background: var(--red-soft); border-color: var(--red-line); color: var(--red-ink); }
.st-down.opt .sv-badge, .st-unknown .sv-badge, .st-off .sv-badge { background: var(--surface); color: var(--muted); }

.sv-desc { margin: 0; font-size: 13.5px; color: var(--soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-height: 1.5em; }
.sv-facts { margin: 0; font-size: 13px; font-weight: 600; color: var(--ink); min-height: 1.5em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: tabular-nums; }
.sv-note { margin: 0; font-size: 12.5px; line-height: 1.45; color: var(--muted); min-height: 1.45em; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; line-clamp: 4; overflow: hidden; }
.st-down.must .sv-note { color: var(--red-ink); }
.st-warn .sv-note { color: var(--orange-ink); }

.sv-acts { display: flex; align-items: center; gap: 8px; min-height: 36px; padding-top: 6px; border-top: 1px solid var(--line-2); }
.sv-acts .btn.small { min-height: 34px; }
.sv-open { text-decoration: none; }
.sv-copy { width: 38px; padding: 0; }
.sv-only { font-size: 12.5px; color: var(--muted); }
.sv-card [hidden] { display: none !important; }
.sv-card :focus-visible, .sv-check:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; box-shadow: none; }

@media (max-width: 719px) {
  .sv-sum { grid-template-columns: auto minmax(0, 1fr); align-items: start; padding: 16px; }
  .sv-check { grid-column: 1 / -1; width: 100%; }
  .sv-grid { grid-template-columns: minmax(0, 1fr); }
  .sv-head { grid-template-columns: auto minmax(0, 1fr); }
  .sv-badge { grid-column: 2; justify-self: start; }
  .sv-name { white-space: normal; }
  .sv-acts .btn.small { min-height: 42px; }
  .sv-copy { width: 46px; }
  .sv-acts .sv-open { flex: 1 1 auto; }
}
@media (prefers-reduced-motion: reduce) { .sv-check.busy svg, .sv-skel { animation: none; } .sv-card { transition: none; } .sv-card:hover { transform: none; } }