/* ─── dashboard KPI band ─── */
.kpi-band {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px;
  margin: 26px 0 30px;
}
@media (max-width: 900px) { .kpi-band { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 520px) { .kpi-band { grid-template-columns: repeat(2, 1fr); } }
.kpi {
  border: 1px solid var(--border); border-radius: 13px;
  background: var(--panel); backdrop-filter: blur(6px);
  padding: 14px 16px; position: relative; overflow: hidden;
}
.kpi::after {
  content: ""; position: absolute; left: 0; top: 0; height: 2px; width: 100%;
  background: var(--grad); opacity: 0.7;
}
.kpi .k { font-family: var(--mono); font-size: 0.52rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--faint); }
.kpi .v { font-size: 1.5rem; font-weight: 700; margin-top: 6px; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.kpi .v.good { color: var(--green); }
.kpi .sub { font-family: var(--mono); font-size: 0.54rem; color: var(--dim); margin-top: 2px; }

.steps { display: grid; gap: 16px; margin: 26px 0; }
.step {
  border: 1px solid var(--border); border-radius: 15px; background: var(--panel);
  padding: 22px 24px; position: relative; overflow: hidden;
  transition: border-color 0.25s, transform 0.25s;
}
.step:hover { border-color: rgba(0, 224, 122, 0.28); transform: translateY(-1px); }
.step::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--green); box-shadow: 0 0 16px rgba(0, 224, 122, 0.5);
}
.step-head { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; }
.step-num {
  font-family: var(--mono); font-size: 0.7rem; font-weight: 600;
  color: #04140c; background: var(--green); border-radius: 7px;
  width: 26px; height: 26px; display: grid; place-items: center; flex: none;
}
.step-title { font-size: 1.02rem; font-weight: 600; }
.step-badge {
  margin-left: auto; font-family: var(--mono); font-size: 0.58rem;
  color: var(--green); border: 1px solid rgba(0,224,122,0.4);
  padding: 3px 10px; border-radius: 100px; letter-spacing: 0.08em;
}
.step-desc { font-size: 0.72rem; color: var(--dim); line-height: 1.6; margin-bottom: 14px; }
.step-body { font-family: var(--mono); font-size: 0.68rem; }

.kv { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px,1fr)); gap: 10px; }
.kv .cell { border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; background: rgba(255,255,255,0.015); }
.kv .cell .k { font-size: 0.54rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint); }
.kv .cell .v { font-size: 1.3rem; font-weight: 700; margin-top: 3px; font-variant-numeric: tabular-nums; }

/* ─── card 1 · DB schema proof ─── */
.schema { border: 1px solid var(--border); border-radius: 11px; overflow: hidden; background: rgba(255,255,255,0.012); }
.schema-row { display: flex; justify-content: space-between; padding: 10px 14px; border-bottom: 1px solid var(--border); }
.schema-row:last-child { border-bottom: none; }
.schema-head { color: var(--faint); font-size: 0.54rem; letter-spacing: 0.12em; text-transform: uppercase; background: rgba(255,255,255,0.02); }
.schema-row .tname { color: var(--cyan); }
.schema-row .tn { color: var(--text); font-weight: 700; font-variant-numeric: tabular-nums; }
.foot-note { font-size: 0.62rem; color: var(--dim); line-height: 1.6; margin-top: 12px; }
.foot-note code { color: var(--cyan); background: rgba(77,208,196,0.08); padding: 1px 6px; border-radius: 5px; }
.foot-note b { color: var(--text); }

/* ─── card 2 · pipeline flow + stat strip ─── */
.flow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 14px; }
.fstep { font-family: var(--mono); font-size: 0.6rem; color: var(--text); border: 1px solid var(--border); background: rgba(0,224,122,0.05); border-radius: 7px; padding: 5px 10px; letter-spacing: 0.03em; }
.farrow { color: var(--faint); font-size: 0.7rem; }
.stat-strip { display: flex; flex-wrap: wrap; gap: 22px; padding: 12px 2px 14px; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); margin-bottom: 12px; font-size: 0.66rem; color: var(--dim); }
.stat-strip b { color: var(--text); font-size: 0.82rem; font-variant-numeric: tabular-nums; }
.stat-strip b.src { color: var(--green); font-size: 0.66rem; }
.rows-head { display: flex; gap: 12px; font-size: 0.52rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint); padding: 0 4px 4px; }
.rows-head span:nth-child(1) { min-width: 42px; }
.rows-head span:nth-child(2) { flex: 1; }
.rows-head span:nth-child(3) { min-width: 40px; text-align: right; }

.rows { display: grid; gap: 2px; }
.row { display: flex; gap: 12px; align-items: baseline; color: var(--dim); border-bottom: 1px solid var(--border); padding: 8px 4px; transition: background 0.2s; }
.row:hover { background: rgba(255,255,255,0.02); }
.row .tag { color: var(--green); font-size: 0.6rem; min-width: 42px; }
.row .tag.warn { color: var(--amber); }
.row .tag.no { color: var(--red); }
.row .q { color: var(--text); flex: 1; }
.row .pv { color: var(--text); font-variant-numeric: tabular-nums; min-width: 40px; text-align: right; }

.qbars { display: grid; gap: 7px; margin-top: 6px; }
.qbar { display: grid; grid-template-columns: 120px 1fr 42px; gap: 10px; align-items: center; }
.qbar .lbl { color: var(--faint); font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.06em; }
.qbar .track { height: 7px; background: rgba(255,255,255,0.07); border-radius: 100px; overflow: hidden; }
.qbar .fill { height: 100%; border-radius: 100px; transition: width 0.5s ease; }
.qbar .fill.hi { background: linear-gradient(90deg, #34d399, #00e07a); }
.qbar .fill.mid { background: linear-gradient(90deg, #4dd0c4, #7c6cff); }
.qbar .fill.lo { background: linear-gradient(90deg, #fbbf24, #ff5a4d); }
.qbar .n { text-align: right; color: var(--text); font-variant-numeric: tabular-nums; }
.qjson { margin-top: 8px; background: #04060c; border: 1px solid var(--border); border-radius: 10px; padding: 14px; color: var(--cyan); font-size: 0.62rem; max-height: 240px; overflow: auto; white-space: pre; }

/* ─── card 4 · calibration internals + mini curve ─── */
.cal-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 16px; align-items: stretch; }
@media (max-width: 760px) { .cal-grid { grid-template-columns: 1fr; } }
.cal-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-content: start; }
.cal-metrics .cell { border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; background: rgba(255,255,255,0.015); }
.cal-metrics .cell .k { font-size: 0.54rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint); }
.cal-metrics .cell .v { font-size: 1.15rem; font-weight: 700; margin-top: 3px; font-variant-numeric: tabular-nums; }
.cal-chart { border: 1px solid var(--border); border-radius: 11px; padding: 12px; background: rgba(255,255,255,0.012); display: flex; flex-direction: column; }
.phead-sm { font-size: 0.52rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint); margin-bottom: 8px; }
.cal-chart canvas { width: 100%; height: auto; flex: 1; }

/* ─── card 5 · audit hash chip ─── */
.hash-chip { display: flex; align-items: center; gap: 12px; border: 1px solid var(--border); border-radius: 10px; padding: 11px 14px; background: rgba(77,208,196,0.04); }
.hash-chip .hk { font-size: 0.52rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint); flex: none; }
.hash-chip .hv { color: var(--cyan); font-size: 0.62rem; word-break: break-all; line-height: 1.5; }

.dont ul { list-style: none; display: grid; gap: 10px; }
.dont li { font-size: 0.7rem; color: var(--dim); line-height: 1.6; padding-left: 22px; position: relative; }
.dont li::before { content: "✓"; position: absolute; left: 0; color: var(--green); font-weight: 700; }
.dont li b { color: var(--text); }
.mini-link { color: var(--cyan); }