:root {
  color-scheme: light;
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
  background: #f5f7fb;
  color: #172033;
}

* { box-sizing: border-box; }
body { margin: 0; background: #f5f7fb; }
.page { max-width: 1180px; margin: 0 auto; padding: 28px 18px 56px; }
.topbar { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; margin-bottom: 18px; }
.eyebrow { margin: 0 0 4px; font-size: 12px; color: #5c6f8c; text-transform: uppercase; }
h1, h2 { margin: 0; }
h1 { font-size: 28px; }
h2 { font-size: 18px; }
.status { border-radius: 8px; background: #172033; color: #fff; padding: 8px 12px; font-size: 13px; }
.status.error { background: #b42318; }
.status.ok { background: #087443; }
.panel { background: #fff; border: 1px solid #dde5f2; border-radius: 8px; padding: 16px; margin-bottom: 14px; }
.settings, .form-row, .section-head, .filters { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
.section-head { justify-content: space-between; margin-bottom: 12px; }
label { display: flex; flex-direction: column; gap: 5px; font-size: 13px; color: #42526b; }
input, select, button { height: 38px; border-radius: 6px; border: 1px solid #c8d2e3; padding: 0 10px; font-size: 14px; }
input { min-width: 220px; }
button { background: #1d4ed8; color: #fff; border-color: #1d4ed8; cursor: pointer; }
button.secondary { background: #fff; color: #1d4ed8; }
button.danger { background: #b42318; border-color: #b42318; }
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th, td { border-bottom: 1px solid #e7edf6; padding: 10px; text-align: left; vertical-align: top; }
th { color: #52637a; background: #f8fafd; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; word-break: break-all; }
.pill { display: inline-flex; border-radius: 999px; padding: 3px 8px; background: #eef4ff; color: #1d4ed8; }
.pill.disabled { background: #f2f4f7; color: #667085; }
.summary-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; margin-bottom: 12px; }
.summary-item { background: #f8fafd; border-radius: 6px; padding: 10px; }
.summary-item strong { display: block; font-size: 18px; margin-top: 4px; }
.hidden { display: none; }
@media (max-width: 700px) {
  .topbar, .section-head { align-items: flex-start; }
  input { min-width: 100%; width: 100%; }
  button, select { width: 100%; }
}