.bot-health {
    --health-navy: #102f46;
    --health-blue: #2474a5;
    --health-text: #263845;
    --health-muted: #738391;
    --health-border: #e2e9ef;
    --health-green: #1f9d70;
    --health-orange: #d98a18;
    --health-red: #d65454;
    max-width: 1480px;
    margin: 0 auto;
    padding: 26px;
    color: var(--health-text);
}

.health-hero {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 26px;
    min-height: 220px;
    padding: 35px 42px;
    overflow: hidden;
    color: #fff;
    background:
        radial-gradient(circle at 7% 12%, rgba(89, 224, 184, .26), transparent 30%),
        linear-gradient(135deg, #102f46 0%, #155272 56%, #147866 120%);
    border-radius: 24px;
    box-shadow: 0 20px 50px rgba(16, 47, 70, .2);
}
.health-hero:after {
    content: '';
    position: absolute;
    left: -70px;
    bottom: -130px;
    width: 310px;
    height: 310px;
    border: 50px solid rgba(255, 255, 255, .055);
    border-radius: 50%;
}
.health-hero.is-warning { background: radial-gradient(circle at 7% 12%, rgba(255,255,255,.17), transparent 30%), linear-gradient(135deg, #3d3543, #8a5b20); }
.health-hero.is-critical { background: radial-gradient(circle at 7% 12%, rgba(255,255,255,.16), transparent 30%), linear-gradient(135deg, #432b35, #9e3e45); }
.health-hero-copy, .health-hero-actions { position: relative; z-index: 1; }
.health-back { display: inline-block; margin-bottom: 17px; color: rgba(255,255,255,.78); font-size: 12px; }
.health-back:hover, .health-back:focus { color: #fff; text-decoration: none; }
.health-eyebrow { display: block; margin-bottom: 6px; color: #83efd0; font-size: 11px; font-weight: 800; letter-spacing: 1.7px; }
.health-hero h2 { margin: 0 0 9px; font-size: 36px; font-weight: 900; }
.health-hero p { max-width: 720px; margin: 0; color: rgba(255,255,255,.78); font-size: 15px; }
.health-bot-meta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.health-bot-meta span { padding: 6px 10px; color: rgba(255,255,255,.84); background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.12); border-radius: 8px; font-size: 11px; direction: ltr; }
.health-bot-meta i { margin-right: 4px; }

.health-hero-actions { display: flex; flex-direction: column; align-items: stretch; min-width: 245px; }
.health-overall { display: flex; align-items: center; gap: 13px; padding: 17px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.18); border-radius: 15px; backdrop-filter: blur(9px); }
.health-overall small, .health-overall strong { display: block; }
.health-overall small { margin-bottom: 3px; color: rgba(255,255,255,.67); font-size: 11px; }
.health-overall strong { font-size: 16px; }
.health-pulse { flex: 0 0 14px; width: 14px; height: 14px; background: #53e2aa; border: 3px solid rgba(255,255,255,.5); border-radius: 50%; box-shadow: 0 0 0 6px rgba(83,226,170,.13); }
.health-hero.is-warning .health-pulse { background: #ffd166; box-shadow: 0 0 0 6px rgba(255,209,102,.14); }
.health-hero.is-critical .health-pulse { background: #ff7c87; box-shadow: 0 0 0 6px rgba(255,124,135,.15); }
.health-refresh { margin-top: 10px; padding: 9px 13px; color: #fff; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18); border-radius: 9px; font-weight: 700; }
.health-refresh:hover { background: rgba(255,255,255,.18); }
.health-refresh:disabled { opacity: .6; cursor: wait; }
.health-refresh.is-loading i { animation: health-spin .8s linear infinite; }
.health-updated { margin-top: 8px; color: rgba(255,255,255,.6); text-align: center; font-size: 10px; }
@keyframes health-spin { to { transform: rotate(360deg); } }

.health-alert { margin: 18px 0 0; border-radius: 11px; }
.health-api-error { margin-top: 16px; padding: 12px 16px; color: #923c3c; background: #fff1f1; border: 1px solid #f3cccc; border-radius: 10px; }
.health-account-panel { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 20px; align-items: center; margin-top: 20px; padding: 22px 24px; background: #fff; border: 1px solid var(--health-border); border-radius: 16px; box-shadow: 0 7px 22px rgba(27, 57, 78, .05); }
.health-account-copy { display: flex; align-items: center; gap: 14px; min-width: 0; }
.health-account-icon { display: grid; flex: 0 0 50px; width: 50px; height: 50px; color: #fff; background: linear-gradient(145deg, #25b77e, #168862); border-radius: 15px; place-items: center; font-size: 25px; box-shadow: 0 8px 18px rgba(31, 157, 112, .2); }
.health-account-copy small { display: block; color: var(--health-muted); font-size: 10px; }
.health-account-copy h3 { margin: 3px 0 4px; color: var(--health-navy); font-size: 17px; font-weight: 850; }
.health-account-copy p { margin: 0; color: var(--health-muted); font-size: 11px; }
.health-account-actions { display: flex; align-items: center; gap: 10px; }
.health-account-state { padding: 7px 11px; color: #166e50; background: #e5f7ef; border-radius: 999px; font-size: 10px; font-weight: 800; white-space: nowrap; }
.health-account-state.is-offline { color: #a44242; background: #fde8e8; }
.health-account-state.is-warning { color: #98600f; background: #fff1d7; }
.health-logout { padding: 9px 13px; color: #b23f45; background: #fff4f4; border: 1px solid #efc8ca; border-radius: 9px; font-size: 11px; font-weight: 800; }
.health-logout:hover { color: #fff; background: #c94b52; border-color: #c94b52; }
.health-logout:disabled { opacity: .6; cursor: wait; }
.health-logout.is-loading i { animation: health-spin .8s linear infinite; }
.health-qr-area { grid-column: 1 / -1; display: grid; grid-template-columns: 360px minmax(0, 1fr); gap: 30px; align-items: center; padding-top: 20px; border-top: 1px solid #edf1f4; }
.health-qr-area[hidden] { display: none; }
.health-qr-frame { display: grid; grid-template: minmax(0, 1fr) / minmax(0, 1fr); width: 360px; height: 360px; box-sizing: border-box; padding: 18px; overflow: hidden; background: #fff; border: 1px solid #dce5eb; border-radius: 15px; box-shadow: 0 8px 25px rgba(16, 47, 70, .08); }
.health-qr-frame > [hidden] { display: none !important; }
.health-qr-frame img { grid-area: 1 / 1; display: block; width: 100%; height: 100%; min-width: 0; min-height: 0; object-fit: contain; image-rendering: pixelated; }
.health-qr-loader { grid-area: 1 / 1; display: grid; gap: 9px; color: var(--health-muted); place-items: center; font-size: 11px; }
.health-qr-loader i { color: var(--health-green); font-size: 25px; }
.health-qr-copy h4 { margin: 0 0 10px; color: var(--health-navy); font-size: 18px; font-weight: 850; }
.health-qr-copy ol { margin: 0; padding-right: 20px; color: #536a79; font-size: 12px; line-height: 2; }
.health-qr-copy p { margin: 11px 0; color: var(--health-muted); font-size: 10px; }
.health-qr-refresh { padding: 8px 12px; color: #246f9c; background: #eef7fc; border: 1px solid #d2e7f3; border-radius: 8px; font-size: 10px; font-weight: 800; }
.health-qr-refresh:disabled { opacity: .6; cursor: wait; }
.health-kpi-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin: 20px 0; }
.health-kpi { display: flex; align-items: center; gap: 13px; min-height: 103px; padding: 17px; background: #fff; border: 1px solid var(--health-border); border-radius: 15px; box-shadow: 0 7px 22px rgba(27, 57, 78, .055); }
.health-kpi-icon { display: grid; flex: 0 0 43px; width: 43px; height: 43px; place-items: center; border-radius: 12px; font-size: 17px; }
.health-kpi-icon.is-green { color: #187655; background: #e2f6ed; }
.health-kpi-icon.is-blue { color: #256f9c; background: #e6f2f9; }
.health-kpi-icon.is-purple { color: #7352a0; background: #f0eafb; }
.health-kpi-icon.is-orange { color: #ab6a10; background: #fff0d8; }
.health-kpi-icon.is-cyan { color: #157787; background: #e2f5f7; }
.health-kpi-icon.is-red { color: #b24949; background: #fbe7e7; }
.health-kpi small, .health-kpi strong, .health-kpi em { display: block; }
.health-kpi small { color: var(--health-muted); font-size: 11px; }
.health-kpi strong { margin-top: 4px; color: var(--health-navy); font-size: 20px; line-height: 1.2; }
.health-kpi em { max-width: 180px; margin-top: 4px; overflow: hidden; color: #91a0ab; font-size: 10px; font-style: normal; text-overflow: ellipsis; white-space: nowrap; }
.health-kpi.is-warning { border-color: #edd5a6; background: #fffbf3; }
.health-kpi.is-critical { border-color: #edc2c2; background: #fff7f7; }

.health-main-grid { display: grid; grid-template-columns: minmax(0, 1fr) 365px; gap: 18px; align-items: start; }
.health-panel { margin-bottom: 18px; padding: 21px; background: #fff; border: 1px solid var(--health-border); border-radius: 16px; box-shadow: 0 7px 22px rgba(27, 57, 78, .05); }
.health-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 18px; }
.health-panel-head h3 { margin: 0; color: var(--health-navy); font-size: 17px; font-weight: 850; }
.health-panel-head p { margin: 4px 0 0; color: var(--health-muted); font-size: 11px; }
.health-legend { display: flex; gap: 13px; color: var(--health-muted); font-size: 10px; }
.health-legend span:before { content: ''; display: inline-block; width: 8px; height: 8px; margin-left: 5px; border-radius: 3px; }
.health-legend .incoming:before { background: #2e91bd; }
.health-legend .outgoing:before { background: #47bd8b; }

.health-chart { display: flex; align-items: stretch; gap: 4px; height: 235px; padding: 14px 8px 0; overflow-x: auto; background: repeating-linear-gradient(to top, #f0f4f7 0, #f0f4f7 1px, transparent 1px, transparent 25%); border-bottom: 1px solid #dce5eb; }
.health-bar-column { display: flex; flex: 1 0 25px; min-width: 25px; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%; }
.health-bar-stack { display: flex; align-items: flex-end; justify-content: center; gap: 2px; width: 100%; height: calc(100% - 25px); }
.health-bar { width: 38%; min-height: 0; border-radius: 5px 5px 1px 1px; transition: height .25s ease; }
.health-bar.incoming { background: linear-gradient(to top, #2475a4, #45a7cf); }
.health-bar.outgoing { background: linear-gradient(to top, #258863, #53c89a); }
.health-bar-column label { height: 21px; padding-top: 6px; color: #91a0ab; font-size: 8px; font-weight: 500; direction: ltr; }
.health-bar-column:nth-child(odd) label { visibility: hidden; }

.health-table-wrap { overflow-x: auto; }
.health-table { width: 100%; border-collapse: collapse; }
.health-table th { padding: 10px 9px; color: #788995; background: #f7f9fb; border-bottom: 1px solid #e7edf1; font-size: 10px; text-align: right; white-space: nowrap; }
.health-table td { padding: 12px 9px; border-bottom: 1px solid #edf1f4; font-size: 11px; }
.health-table tr:last-child td { border-bottom: 0; }
.health-table-empty { padding: 28px !important; color: var(--health-muted); text-align: center !important; }
.health-state { display: inline-block; padding: 4px 7px; border-radius: 999px; font-size: 9px; font-weight: 800; }
.health-state.is-healthy, .health-state.is-completed { color: #147251; background: #e5f7ef; }
.health-state.is-warning, .health-state.is-running, .health-state.is-queued, .health-state.is-completed_with_errors { color: #98600f; background: #fff1d7; }
.health-state.is-critical, .health-state.is-failed { color: #a44242; background: #fde8e8; }
.health-state.is-never, .health-state.is-unknown { color: #71808b; background: #edf1f4; }
.health-mini-badge { padding: 5px 8px; color: #4b687c; background: #eef5f8; border-radius: 999px; font-size: 9px; font-weight: 700; }

.health-errors { display: grid; gap: 9px; }
.health-error-row { display: grid; grid-template-columns: 145px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 11px 12px; background: #fff8f8; border: 1px solid #f2dddd; border-radius: 9px; }
.health-error-source strong, .health-error-source small { display: block; }
.health-error-source strong { color: #893e3e; font-size: 11px; }
.health-error-source small { margin-top: 2px; color: #a78888; font-size: 9px; }
.health-error-row p { margin: 0; overflow-wrap: anywhere; color: #674e4e; font-size: 10px; }
.health-error-row time { color: #a99393; font-size: 9px; white-space: nowrap; }
.health-empty { padding: 22px; color: var(--health-muted); background: #f8fafb; border: 1px dashed #dbe4e9; border-radius: 9px; text-align: center; font-size: 11px; }

.health-signals { display: grid; gap: 9px; }
.health-signal { display: flex; align-items: flex-start; gap: 9px; padding: 11px; background: #f7fafb; border-radius: 9px; font-size: 10px; line-height: 1.65; }
.health-signal i { margin-top: 3px; color: var(--health-green); }
.health-signal.is-warning { color: #79551f; background: #fff8e9; }
.health-signal.is-warning i { color: var(--health-orange); }
.health-signal.is-critical { color: #813d3d; background: #fff0f0; }
.health-signal.is-critical i { color: var(--health-red); }
.health-runs { display: grid; gap: 9px; }
.health-run { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 10px; align-items: center; padding-bottom: 9px; border-bottom: 1px solid #edf1f4; }
.health-run:last-child { padding-bottom: 0; border: 0; }
.health-run strong { font-size: 10px; }
.health-run small { grid-column: 1 / -1; color: #93a0aa; font-size: 9px; }

.health-settings-form { display: grid; gap: 12px; }
.health-settings-form label { display: block; margin: 0; color: #526775; font-size: 10px; font-weight: 700; }
.health-settings-form label > div { display: flex; align-items: center; margin-top: 5px; overflow: hidden; border: 1px solid #dce5eb; border-radius: 8px; }
.health-settings-form input { width: 100%; min-width: 0; padding: 9px 10px; background: #fff; border: 0; outline: 0; font-size: 12px; }
.health-settings-form b { align-self: stretch; min-width: 55px; padding: 10px 8px; color: #758692; background: #f2f6f8; text-align: center; font-size: 9px; }
.health-settings-form button { margin-top: 4px; border-radius: 8px; }
.health-runtime dl { margin: 0; }
.health-runtime dl > div { display: flex; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1px solid #edf1f4; }
.health-runtime dl > div:last-child { border-bottom: 0; }
.health-runtime dt, .health-runtime dd { margin: 0; font-size: 10px; }
.health-runtime dt { color: var(--health-muted); font-weight: 500; }
.health-runtime dd { color: var(--health-navy); font-weight: 800; direction: ltr; }

@media (max-width: 1180px) {
    .health-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .health-main-grid { grid-template-columns: 1fr; }
    .health-sidebar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
    .health-sidebar .health-panel { margin-bottom: 0; }
}
@media (max-width: 720px) {
    .bot-health { padding: 12px; }
    .health-hero { flex-direction: column; align-items: stretch; padding: 26px 22px; border-radius: 17px; }
    .health-hero h2 { font-size: 29px; }
    .health-hero-actions { min-width: 0; }
    .health-kpi-grid { grid-template-columns: 1fr; gap: 9px; }
    .health-main-grid, .health-sidebar { display: block; }
    .health-sidebar .health-panel { margin-bottom: 18px; }
    .health-error-row { grid-template-columns: 1fr; }
    .health-error-row time { white-space: normal; }
    .health-panel { padding: 16px; }
    .health-account-panel { grid-template-columns: 1fr; padding: 18px; }
    .health-account-actions { align-items: stretch; flex-direction: column; }
    .health-account-state { text-align: center; }
    .health-qr-area { grid-template-columns: 1fr; }
    .health-qr-frame { width: min(360px, 100%); height: auto; aspect-ratio: 1; margin: 0 auto; }
}