/* Global design tokens */
:root {
    --hb-bg: #f7f8fb;
    --hb-card: #ffffff;
    --hb-accent: #0d6efd;
    --hb-muted: #6c757d;
    --hb-border: #e3e6ed;
    --hb-radius: 10px;
    --hb-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
    --hb-code-bg: #0f172a;
    --hb-code-fg: #e2e8f0;
}

body {
    background: radial-gradient(circle at 20% 20%, rgba(13, 110, 253, 0.08), transparent 35%), var(--hb-bg);
}

.card {
    border: 1px solid var(--hb-border);
    border-radius: var(--hb-radius);
    box-shadow: var(--hb-shadow);
    background: var(--hb-card);
}

.heartbeat-scroll {
    max-height: 500px;
    overflow-y: auto;
}

.summary-strip {
    position: sticky;
    top: 0;
    z-index: 1030;
    background: rgba(247, 248, 251, 0.9);
    backdrop-filter: blur(6px);
    padding: 0.75rem 1rem;
    border: 1px solid var(--hb-border);
    border-radius: var(--hb-radius);
    box-shadow: var(--hb-shadow);
}

.summary-pill {
    border-radius: 999px;
    border: 1px solid var(--hb-border);
    padding: 0.5rem 0.75rem;
    background: #fff;
    min-width: 120px;
}

.code-slab {
    background: var(--hb-code-bg);
    color: var(--hb-code-fg);
    border-radius: var(--hb-radius);
    border: 1px solid #1f2937;
}

.table-responsive-stack table {
    width: 100%;
}

@media (max-width: 768px) {
    .table-responsive-stack thead {
        display: none;
    }

    .table-responsive-stack tbody tr {
        display: block;
        border: 1px solid var(--hb-border);
        border-radius: var(--hb-radius);
        margin-bottom: 0.75rem;
        padding: 0.5rem 0.75rem;
        box-shadow: var(--hb-shadow);
    }

    .table-responsive-stack tbody td {
        display: flex;
        justify-content: space-between;
        gap: 0.75rem;
        padding: 0.25rem 0;
    }

    .table-responsive-stack tbody td::before {
        content: attr(data-label);
        font-weight: 600;
        color: var(--hb-muted);
    }
}

.filter-buttons .btn {
    border-radius: 999px;
    padding: 0.25rem 0.75rem;
}

.copy-btn, .download-btn {
    border-radius: 999px;
}

.auto-refresh-toggle {
    border-radius: 999px;
}

#summary-cert {
    font-size: 0.9rem;
    word-break: break-word;
}

.icon-btn {
    width: 50px;
    min-width: 50px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.3rem 0.25rem;
}

.dropdown {
    z-index: 1050 !important;
}