.ingestion-dashboard { max-width: 1480px; margin: auto; padding: 24px; font-size: 13px; font-variant-numeric: tabular-nums; }
.ingestion-dashboard h1 { font-size: 26px; font-weight: 700; letter-spacing: -.03em; margin: 6px 0; }
.ingestion-dashboard h2 { font-size: 17px; font-weight: 650; margin: 22px 0 12px; }
.ingestion-dashboard p { color: #a1a1aa; }
.ingestion-dashboard a { color: #fbbf24; cursor: pointer; }
.ingestion-heading { display: flex; justify-content: space-between; align-items: end; gap: 20px; flex-wrap: wrap; }
#ingestion-filters { display: flex; gap: 12px; flex-wrap: wrap; }
#ingestion-filters label { display: grid; gap: 5px; color: #a1a1aa; font-size: 12px; }
#ingestion-filters select { max-width: 240px; padding: 8px 10px; border: 1px solid #3f3f46; border-radius: 6px; background: #18181b; color: #fafafa; cursor: pointer; }
.ingestion-dashboard :focus-visible { outline: 2px solid #fbbf24; outline-offset: 3px; }
#ingestion-status { margin: 16px 0; }
.ingestion-summary, .ingestion-trends { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.ingestion-summary > div, .ingestion-trends > div { padding: 14px; border: 1px solid #27272a; border-radius: 8px; background: #18181b; }
.ingestion-summary strong { font-size: 22px; display: block; color: #fafafa; }
.ingestion-summary span, .ingestion-trends span { color: #a1a1aa; font-size: 12px; }
.ingestion-note { font-size: 12px; line-height: 1.6; margin: 12px 0; }
.ingestion-trends svg { width: 100%; height: 48px; margin-top: 8px; }
.ingestion-layout { display: grid; grid-template-columns: minmax(0, 3fr) minmax(250px, 1fr); gap: 32px; }
.ingestion-layout aside section { border-bottom: 1px solid #27272a; padding-bottom: 16px; }
.ingestion-stage { display: grid; grid-template-columns: minmax(0, 3fr) minmax(130px, 1fr); gap: 16px; align-items: center; }
.ingestion-node { border: 1px solid #3f3f46; border-radius: 8px; padding: 14px; background: #18181b; }
.ingestion-node.final { border-color: #34d399; }
.ingestion-node h3 { font-weight: 650; margin: 0 0 10px; }
.ingestion-node small { color: #a1a1aa; font-weight: 400; }
.ingestion-node dl { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 0; }
.ingestion-node dt { font-size: 11px; color: #a1a1aa; }
.ingestion-node dd { margin: 3px 0 0; }
.ingestion-arrow { border-left: var(--flow-width, 2px) solid #34d399; color: #a1a1aa; margin-left: 24px; padding: 9px 12px; font-size: 11px; }
.ingestion-branches { color: #fbbf24; font-size: 11px; list-style: none; padding: 0; }
.ingestion-branches li { border-left: 2px solid #52525b; padding: 5px 8px; margin: 5px 0; }
#ingestion-queue > div { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid #27272a; }
#ingestion-queue dt { color: #a1a1aa; }
.ingestion-table { overflow-x: auto; border: 1px solid #27272a; border-radius: 8px; }
.ingestion-table table { border-collapse: collapse; width: 100%; white-space: nowrap; }
.ingestion-table th, .ingestion-table td { padding: 10px 12px; text-align: right; border-bottom: 1px solid #27272a; }
.ingestion-table th:first-child, .ingestion-table td:first-child { text-align: left; }
.ingestion-table th { color: #a1a1aa; font-size: 11px; background: #18181b; }
.ingestion-table tr:last-child td { border-bottom: 0; }
.ingestion-dashboard details { margin: 24px 0; }
.ingestion-dashboard summary { cursor: pointer; margin-bottom: 12px; }
@media (max-width: 900px) { .ingestion-layout { grid-template-columns: 1fr; } .ingestion-summary, .ingestion-trends { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 600px) { .ingestion-dashboard { padding: 16px; } .ingestion-summary, .ingestion-trends { grid-template-columns: repeat(2, 1fr); } .ingestion-stage { grid-template-columns: 1fr; gap: 0; } .ingestion-branches { display: flex; flex-wrap: wrap; } .ingestion-node dl { grid-template-columns: repeat(2, 1fr); } }
