.logs-page {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}

.logs-page .page-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.logs-page .page-title {
    margin: 0 0 6px;
}

.logs-page .page-subtitle {
    margin: 0;
}

.logs-page .toolbar,
.logs-page .row,
.logs-page .chip-list,
.logs-page .ref-list {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
}

.logs-page .stack {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.logs-page .grid {
    display: grid;
    gap: 16px;
}

.logs-page .grid-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.logs-page .grid-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.logs-page .layout-main {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
    gap: 16px;
}

.logs-page .card {
    min-width: 0;
}

.logs-page .card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.logs-page .card-title {
    margin: 0;
}

.logs-page .card-subtitle {
    margin-top: 4px;
}

.logs-page .card-body {
    min-width: 0;
}

.logs-page .metric {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.logs-page .metric-label {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.logs-page .metric-value {
    font-size: 28px;
    font-weight: 800;
    letter-spacing: -.03em;
}

.logs-page .metric-foot,
.logs-page .tiny,
.logs-page .muted {
    color: var(--muted);
}

.logs-page .table-wrap {
    overflow: auto;
}

.logs-page table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.logs-page th,
.logs-page td {
    text-align: left;
    padding: 12px 10px;
    border-bottom: 1px solid rgba(255,255,255,.06);
    vertical-align: top;
}

.logs-page th {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--muted);
}

.logs-page .trace-chip,
.logs-page .ref-chip,
.logs-page .json-chip,
.logs-page .download-chip,
.logs-page .raw-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 12px;
    background: var(--chip);
    border: 1px solid rgba(255,255,255,.06);
}

.logs-page .progress {
    width: 100%;
    height: 10px;
    border-radius: 999px;
    background: rgba(255,255,255,.05);
    overflow: hidden;
}

.logs-page .progress > span {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, var(--accent), #9c7bff);
    border-radius: 999px;
}

.logs-page .json-box {
    overflow: auto;
    font-size: 12px;
    line-height: 1.45;
}

.logs-page .timeline {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.logs-page .timeline-item {
    display: grid;
    grid-template-columns: 180px minmax(0, 1fr);
    gap: 12px;
    align-items: start;
}

.logs-page .timeline-left,
.logs-page .timeline-right {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
}

.logs-page .gantt {
    width: 100%;
    height: 12px;
    border-radius: 999px;
    background: rgba(255,255,255,.05);
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.05);
}

.logs-page .gantt > span {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, #38d9ff, var(--accent));
    border-radius: 999px;
}

.logs-page .error-item {
    padding: 14px;
    border-radius: 14px;
    background: rgba(255,93,108,.06);
    border: 1px solid rgba(255,93,108,.12);
}

.logs-page .truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.logs-page .empty {
    padding: 0;
    text-align: left;
    border: 0;
    background: transparent;
    border-radius: 0;
}

.logs-page .mb-8 { margin-bottom: 8px; }
.logs-page .mb-12 { margin-bottom: 12px; }
.logs-page .mb-16 { margin-bottom: 16px; }
.logs-page .mt-8 { margin-top: 8px; }
.logs-page .mt-12 { margin-top: 12px; }
.logs-page .mt-16 { margin-top: 16px; }

@media (max-width: 1320px) {
    .logs-page .grid-4,
    .logs-page .grid-2,
    .logs-page .layout-main {
        grid-template-columns: 1fr;
    }

    .logs-page .timeline-item {
        grid-template-columns: 1fr;
    }
}

/* unified header spacing */
.logs-page .page-head,
.logs-page .unified-page-head {
  margin-bottom: var(--page-gap) !important;
}

.logs-page .page-head > .page-head-main,
.logs-page .page-head > div:first-child {
  display: flex;
  flex-direction: column;
  gap: var(--title-gap) !important;
}

.logs-page .page-title,
.logs-page .page-subtitle {
  margin: 0 !important;
}

.logs-page > .grid,
.logs-page > .stack,
.logs-page > section + section {
  margin-top: 0 !important;
}

/* logs kpi cleanup */
.logs-page .logs-kpi-body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--content-gap) !important;
  padding: 18px 20px !important;
}

.logs-page .grid-4 > .card {
  overflow: hidden;
}

.logs-page .grid-4 > .card .card-head {
  padding-bottom: 10px !important;
}

.logs-page .grid-4 > .card .metric-label,
.logs-page .grid-4 > .card .metric-value,
.logs-page .grid-4 > .card .metric-foot {
  margin: 0 !important;
}