.hp{flex:1;min-height:0;overflow-y:auto;background:var(--color-bg);color:var(--color-text);-webkit-font-smoothing:antialiased}.hp__inner{width:100%;max-width:640px;margin-inline:auto;padding:var(--space-6) var(--space-5) var(--space-12);display:flex;flex-direction:column;gap:var(--space-5)}.hp__head{display:flex;align-items:center;gap:var(--space-3)}.hp__brand{display:inline-flex;align-items:center;gap:var(--space-2)}.hp__brandorb{flex:none}.hp__brandname{font-weight:var(--fw-bold);font-size:var(--text-lg)}.hp__title{margin-inline-start:auto;color:var(--color-text-muted);font-size:var(--text-sm);font-weight:var(--fw-medium)}.hp__banner{display:flex;align-items:center;gap:var(--space-4);padding:var(--space-4) var(--space-5);border-radius:var(--radius-lg);border:1px solid var(--tone-border, var(--color-border));background:var(--tone-weak, var(--color-surface))}.hp__banner--success{--tone-weak: var(--color-success-weak);--tone-border: var(--color-success-weak-border)}.hp__banner--warning{--tone-weak: var(--color-warning-weak);--tone-border: var(--color-warning-weak-border)}.hp__banner--danger{--tone-weak: var(--color-danger-weak);--tone-border: var(--color-danger-weak-border)}.hp__banner--muted{--tone-weak: var(--color-surface-2);--tone-border: var(--color-border)}.hp__bannerorb{flex:none}.hp__banner-txt{display:flex;flex-direction:column;gap:2px;min-width:0}.hp__banner-title{font-size:var(--text-lg);font-weight:var(--fw-bold)}.hp__banner-sub{font-size:var(--text-xs);color:var(--color-text-muted)}.hp__refresh{margin-inline-start:auto;flex:none;gap:var(--space-2);white-space:nowrap}.hp__spin{animation:hp-spin .9s linear infinite}@keyframes hp-spin{to{transform:rotate(360deg)}}.hp__tiles{display:grid;gap:var(--space-3);grid-template-columns:repeat(2,minmax(0,1fr))}.hp__tile{display:flex;flex-direction:column;gap:var(--space-2);padding:var(--space-4);border-radius:var(--radius-md);border:1px solid var(--color-border);background:var(--color-surface)}.hp__tile-head{display:flex;align-items:center;gap:var(--space-2)}.hp__tile-icon{display:inline-flex;color:var(--color-text-muted)}.hp__tile-label{font-weight:var(--fw-semibold);font-size:var(--text-base)}.hp__dot{margin-inline-start:auto;width:9px;height:9px;border-radius:var(--radius-full);background:var(--tone-dot, var(--color-text-subtle))}.hp__tile-status{font-size:var(--text-sm);color:var(--tone-text, var(--color-text-muted));font-weight:var(--fw-medium)}.hp__dot--success{background:var(--color-success)}.hp__dot--warning{background:var(--color-warning)}.hp__dot--danger{background:var(--color-danger)}.hp__dot--muted{background:var(--color-text-subtle)}.hp__tile--success{--tone-text: var(--color-success-text)}.hp__tile--warning{--tone-text: var(--color-warning-text)}.hp__tile--danger{--tone-text: var(--color-danger-text)}.hp__tile--muted{--tone-text: var(--color-text-muted)}.hp__deps{list-style:none;margin:var(--space-1) 0 0;padding:0;display:flex;flex-direction:column;gap:4px}.hp__dep{display:flex;align-items:center;gap:var(--space-2);font-size:var(--text-xs)}.hp__dep--ok{color:var(--color-success-text)}.hp__dep--off{color:var(--color-text-subtle)}.hp__dep--down{color:var(--color-danger-text)}.hp__uptime{display:flex;flex-direction:column;gap:var(--space-2);padding:var(--space-4) var(--space-5);border-radius:var(--radius-md);border:1px solid var(--color-border);background:var(--color-surface)}.hp__uptime-head{display:flex;align-items:baseline;justify-content:space-between}.hp__uptime-title{font-size:var(--text-sm);color:var(--color-text-muted)}.hp__uptime-pct{font-size:var(--text-xl);font-weight:var(--fw-bold)}.hp__bar{height:8px;border-radius:var(--radius-full);background:var(--color-surface-3);overflow:hidden}.hp__bar-fill{display:block;height:100%;border-radius:inherit;background:var(--color-success);transition:width .4s var(--ease-out)}.hp__uptime-ep{font-size:var(--text-xs);color:var(--color-text-muted)}.hp__err{font-size:var(--text-sm);color:var(--color-danger-text);text-align:center;margin:0}.hp__foot{text-align:center;font-size:var(--text-xs);color:var(--color-text-subtle);margin-top:var(--space-2)}@media (max-width: 420px){.hp__tiles{grid-template-columns:1fr}.hp__banner{flex-wrap:wrap}.hp__refresh{margin-inline-start:0;width:100%;justify-content:center}}