*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                 "Helvetica Neue", Arial, sans-serif;
    font-size: 14px;
    background: #fff;
    color: #5c5962;
    line-height: 1.4;
}

/* ── Layout shell ── */
.layout {
    display: flex;
    min-height: 100vh;
}

/* ── Content area ── */
.content-area {
    flex: 1;
    min-width: 0;
    padding: 1.5rem;
}

/* ── Sidebar ── */
.side-bar {
    width: 15.5rem;
    min-width: 15.5rem;
    background: #f5f6fa;
    border-right: 1px solid #eeebee;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
    overflow-x: hidden;
    transition: width 0.18s ease, min-width 0.18s ease;
}
.side-bar.collapsed {
    width: 5rem;
    min-width: 5rem;
}

.side-bar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid #eeebee;
    min-height: 3.75rem;
}
.side-bar.collapsed .side-bar-header { justify-content: center; padding: 0.75rem 0.35rem; }

.side-title {
    font-size: 1.125rem;
    font-weight: 500;
    color: #27262b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.side-toggle {
    background: none;
    border: none;
    cursor: pointer;
    color: #5c5962;
    font-size: 1rem;
    padding: 0.1rem 0.25rem;
    border-radius: 3px;
    line-height: 1;
    flex-shrink: 0;
}
.side-toggle:hover { background: #eeebee; color: #27262b; }

.side-nav {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 0.5rem 0;
    gap: 0.1rem;
}

.side-btn {
    display: block;
    width: 100%;
    text-align: left;
    padding: 0.4rem 1rem;
    font: inherit;
    font-size: 0.8rem;
    color: #5c5962;
    background: none;
    border: none;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    border-radius: 0;
}
.side-btn:hover { color: #27262b; background: #eeebee; }
.side-bar.collapsed .side-btn { padding: 0.4rem 0.35rem; }

.side-dropdown { position: relative; }
.side-dropdown > summary { list-style: none; cursor: pointer; }
.side-dropdown > summary::marker,
.side-dropdown > summary::-webkit-details-marker { display: none; }

.side-dropdown-menu {
    position: absolute;
    left: 100%;
    top: 0;
    background: #fff;
    border: 1px solid #eeebee;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    min-width: 7rem;
    list-style: none;
    padding: 0.25rem 0;
    z-index: 200;
}
.side-bar:not(.collapsed) .side-dropdown-menu {
    left: 0;
    top: 100%;
}
.side-dropdown-menu a {
    display: block;
    padding: 0.3rem 0.75rem;
    color: #7253ed;
    font-size: 0.8rem;
    text-decoration: none;
}
.side-dropdown-menu a:hover { background: #f5f6fa; color: #27262b; }

.sidebar-badge {
    display: block;
    margin: 0.5rem 0.75rem;
    text-align: center;
}
.side-bar.collapsed .sidebar-badge { margin: 0.5rem 0.2rem; font-size: 0.6rem; }

.side-docs-link {
    margin-top: auto;
    border-top: 1px solid #eeebee;
    color: #7253ed;
}
.side-docs-link:hover { color: #27262b; }

section { margin-bottom: 2rem; }

h2 {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #5c5962;
    border-bottom: 1px solid #eeebee;
    padding-bottom: 0.3rem;
    margin-bottom: 0.85rem;
}

/* ── Run summary ── */
.run-stats {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1.25rem;
    font-size: 0.85rem;
    color: #5c5962;
    margin-bottom: 0.75rem;
}
.run-stats b { color: #27262b; }

.deployment-chips { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.chip {
    background: #f5f6fa;
    border: 1px solid #eeebee;
    border-radius: 3px;
    padding: 0.15rem 0.5rem;
    font-size: 0.75rem;
    color: #5c5962;
}

/* ── Tables ── */
table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 0.82rem; }
th {
    text-align: left;
    padding: 0.4rem 0.75rem;
    background: #f5f6fa;
    border-bottom: 1px solid #eeebee;
    border-left: 1px solid #eeebee;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #27262b;
    font-weight: 600;
    white-space: nowrap;
}
th:first-child { border-left: none; }
td {
    padding: 0.35rem 0.75rem;
    background-color: #fff;
    border-bottom: 1px solid rgba(238, 235, 238, 0.5);
    border-left: 1px solid #eeebee;
    vertical-align: top;
}
td:first-child { border-left: none; }
tr:hover td { background: #f5f6fa; }
.row-shared td { background: #f5fbf5; }
.row-shared:hover td { background: #e8f5e8; }

.num { text-align: right; }
.mono { font-family: 'Courier New', Courier, monospace; }
.hash { color: #7253ed; font-size: 0.78rem; opacity: 0.7; }
.small { font-size: 0.78rem; color: #5c5962; }
.cell-error { color: #cf222e; font-weight: bold; }

/* ── Status / messages ── */
.status-msg { color: #5c5962; padding: 1.5rem 0; font-size: 0.85rem; }
.status-msg.hint { padding-top: 0.5rem; }
.subtitle { font-size: 0.78rem; color: #5c5962; margin-bottom: 0.6rem; }

.error-banner {
    background: #fff5f5;
    border-left: 3px solid #cf222e;
    border-radius: 0 3px 3px 0;
    padding: 0.6rem 0.9rem;
    margin-bottom: 0.75rem;
    color: #5c5962;
    font-size: 0.82rem;
}
.error-banner.warn {
    background: #fffbf0;
    border-left-color: #d4a017;
    color: #5c5962;
}

.loaded-badge {
    margin-left: 0.75rem;
    background: #f5f6fa;
    border: 1px solid #eeebee;
    border-radius: 3px;
    padding: 0.1rem 0.45rem;
    font-size: 0.75rem;
    color: #5c5962;
}

/* ── Toggle ── */
.toggle-label {
    margin-left: 0.5rem;
    font-size: 0.75rem;
    color: #5c5962;
    cursor: pointer;
    user-select: none;
}
.toggle-label input { margin-right: 0.2rem; }

/* ── Tabs ── */
.tabs { display: flex; gap: 0; border-bottom: 1px solid #eeebee; margin-bottom: 1rem; }
.tab-btn {
    padding: 0.4rem 1rem; font: inherit; font-size: 0.8rem; background: none;
    border: none; border-bottom: 2px solid transparent; margin-bottom: -1px;
    cursor: pointer; color: #5c5962; letter-spacing: 0.04em; text-transform: uppercase;
}
.tab-btn:hover  { color: #27262b; }
.tab-btn.active { color: #7253ed; border-bottom-color: #7253ed; font-weight: 600; }

/* ── Welcome / empty state ── */
.welcome-msg {
    padding: 4rem 1.5rem;
    text-align: center;
    color: #5c5962;
    font-size: 0.9rem;
    line-height: 1.7;
}
.welcome-msg code {
    background: #f5f6fa;
    padding: 0.1rem 0.35rem;
    border-radius: 2px;
    font-size: 0.85rem;
    font-family: 'Courier New', Courier, monospace;
}

/* ── Charts / Overview tabs ── */
.chart-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    margin-bottom: 2rem;
}
.chart-figure {
    background: #fff;
    border: 1px solid #eeebee;
    border-radius: 4px;
    padding: 1rem;
}
.chart-figure figcaption {
    font-size: 0.72rem;
    color: #5c5962;
    margin-top: 0.5rem;
    line-height: 1.4;
}
.heatmap-row {
    display: flex;
    gap: 1.5rem;
    align-items: flex-start;
    overflow-x: auto;
    margin-bottom: 2rem;
}
.heatmap-row .chart-figure { flex: 1; min-width: 0; }