/* ext_infra — «Инфра» (подключить после app.css: <link rel="stylesheet" href="/ext_infra.css">) */
.x-infra-strip { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; background: var(--card); border-radius: var(--radius); padding: 12px 14px; position: relative; overflow: hidden; }
.x-infra-strip::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--warn); }
.x-infra-strip.danger::before { background: var(--danger); }
.x-infra-strip b { display: block; font-size: 15px; }
.x-infra-strip:active { transform: scale(.99); }
.x-infra-ico { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; font-size: 18px; flex: none; background: var(--soft-warn); }
.x-infra-strip.danger .x-infra-ico { background: var(--soft-danger); }
.x-infra-line { display: block; font-size: 13px; color: var(--sub); margin-top: 2px; line-height: 1.3; overflow-wrap: anywhere; }
.x-infra-line.danger { color: var(--danger); }
.x-infra-card { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; background: linear-gradient(120deg, color-mix(in srgb, #5b8def 16%, var(--card)), var(--card) 60%); border-radius: var(--radius); padding: 13px 14px; }
.x-infra-card b { display: block; font-size: 15px; }
.x-infra-card span { display: block; color: var(--sub); font-size: 13px; margin-top: 1px; }
.x-infra-card:active { transform: scale(.99); }
.x-infra-cico { width: 40px; height: 40px; border-radius: 12px; background: color-mix(in srgb, #5b8def 24%, transparent); display: grid; place-items: center; font-size: 21px; flex: none; }
.x-infra-card .x-infra-sum { font-weight: 650; margin-top: 3px; }
.x-infra-sum.ok { color: var(--ok); }
.x-infra-sum.warn { color: #c27a10; }
.x-infra-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; margin: 0 2px; background: var(--ok); box-shadow: 0 0 0 3px var(--soft-ok); }
.x-infra-dot.warn, .x-infra-dot.soon { background: var(--warn); box-shadow: 0 0 0 3px var(--soft-warn); }
.x-infra-dot.danger { background: var(--danger); box-shadow: 0 0 0 3px var(--soft-danger); }
.x-infra-dot.gray { background: color-mix(in srgb, var(--hint) 60%, transparent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--hint) 14%, transparent); }
.x-infra-allok { background: var(--soft-ok); color: var(--ok); border-radius: var(--radius); padding: 11px 14px; font-size: 14px; font-weight: 600; }
.x-infra-hint { color: var(--hint); font-size: 12px; margin: 6px 4px 0; line-height: 1.35; }
.x-infra-err { color: var(--danger) !important; }
.x-infra-note { color: var(--hint) !important; font-size: 13px !important; }
.x-infra-num { font-variant-numeric: tabular-nums; font-size: 15px; white-space: nowrap; }
.x-infra-mono { font-variant-numeric: tabular-nums; }
.x-infra-verdict { max-width: 46%; }
.x-infra-verdict .pill { white-space: normal; text-align: right; line-height: 1.25; }
.x-infra-white { background: var(--soft-ok); color: var(--ok); border-radius: 12px; padding: 9px 12px; font-size: 13px; font-weight: 600; line-height: 1.4; overflow-wrap: anywhere; }
.x-infra-more { width: 100%; }
.x-infra-pre { background: color-mix(in srgb, var(--text) 5%, transparent); border-radius: 12px; padding: 10px 12px; font-size: 13px; line-height: 1.4; white-space: pre-wrap; overflow-wrap: anywhere; max-height: 220px; overflow-y: auto; }