* { box-sizing: border-box; }

body {
  font-family: -apple-system, "Segoe UI", Roboto, sans-serif;
  margin: 0; color: #1a1a1a; background: #eef1f6;
}

header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 24px; background: #16324f;
  box-shadow: 0 2px 8px rgba(10, 25, 47, .25);
}
header h1 { font-size: 18px; margin: 0; color: #fff; font-weight: 700; letter-spacing: .02em; }
header .muted { color: rgba(255, 255, 255, .75); }

.panel {
  margin: 18px 24px; padding: 20px 24px;
  background: #fff; border: none; border-radius: 12px;
  box-shadow: 0 1px 3px rgba(16, 36, 62, .08), 0 4px 14px rgba(16, 36, 62, .05);
}
.panel h2 {
  font-size: 13px; margin: 0 0 14px; text-transform: uppercase;
  letter-spacing: .07em; color: #16324f;
  display: flex; align-items: center; gap: 8px;
}
.panel h2::before {
  content: ""; display: inline-block; width: 4px; height: 16px;
  background: #16324f; border-radius: 2px;
}
.panel h3 { font-size: 14px; margin: 0 0 6px; color: #16324f; }

.source-row { display: flex; gap: 20px; flex-wrap: wrap; }
.source-block {
  min-width: 280px; flex: 1; max-width: 480px;
  border: 1px solid #e6e9f0; border-radius: 10px; padding: 16px 18px;
  background: #fafbfd;
}

.filter-row { display: flex; gap: 16px; align-items: flex-end; flex-wrap: wrap; }
.filter-row label {
  font-size: 11px; font-weight: 600; color: #16324f; text-transform: uppercase;
  letter-spacing: .05em; display: flex; flex-direction: column; gap: 5px;
}
/* multi-select dropdowns */
.dd-group { display: flex; flex-direction: column; gap: 5px; }
.dd-name {
  font-size: 11px; font-weight: 600; color: #16324f;
  text-transform: uppercase; letter-spacing: .05em;
}
.dd { position: relative; }
.dd-btn {
  min-width: 150px; max-width: 240px; text-align: left;
  padding: 8px 30px 8px 12px; border: 1px solid #d4d9e2; border-radius: 8px;
  background: #fafbfd; font-size: 13px; color: #1a1a1a; cursor: pointer;
  position: relative; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dd-btn::after {
  content: "▾"; position: absolute; right: 10px; top: 50%;
  transform: translateY(-50%); color: #888; font-size: 11px;
}
.dd-btn:hover { border-color: #16324f; }
.dd-btn.active { border-color: #16324f; background: #eaf0f7; font-weight: 600; color: #16324f; }
.dd-menu {
  display: none; position: absolute; top: calc(100% + 4px); left: 0; z-index: 50;
  min-width: 220px; max-height: 280px; overflow-y: auto;
  background: #fff; border: 1px solid #d4d9e2; border-radius: 10px;
  box-shadow: 0 8px 28px rgba(16, 36, 62, .2); padding: 6px;
}
.dd.open .dd-menu { display: block; }
.dd.open .dd-btn { border-color: #16324f; box-shadow: 0 0 0 3px rgba(22, 50, 79, .12); }
.dd-item {
  display: flex; gap: 8px; align-items: center; padding: 6px 8px;
  font-size: 13px; border-radius: 6px; cursor: pointer; white-space: nowrap;
}
.dd-item:hover { background: #eef1f6; }
.dd-item input { accent-color: #16324f; }
.dd-actions {
  display: flex; gap: 6px; padding: 2px 4px 8px; margin-bottom: 6px;
  border-bottom: 1px solid #eef0f4;
}
.dd-actions button {
  border: none; background: none; color: #16324f; font-size: 12px;
  font-weight: 600; cursor: pointer; padding: 3px 8px; border-radius: 5px;
}
.dd-actions button:hover { background: #eef1f6; }

.btn {
  padding: 8px 16px; border: 1px solid #d4d9e2; border-radius: 8px;
  background: #fff; cursor: pointer; font-size: 13px; font-weight: 600;
  color: #16324f; transition: all .15s;
}
.btn:hover { background: #eef1f6; border-color: #16324f; }
.btn.primary {
  background: #16324f; border-color: #16324f; color: #fff;
  box-shadow: 0 2px 6px rgba(22, 50, 79, .3);
}
.btn.primary:hover { background: #0f2438; }
.btn.small { padding: 5px 12px; font-size: 12px; }
.btn:disabled { opacity: .5; cursor: default; }

/* buttons inside the navy header */
header .btn { border-color: rgba(255, 255, 255, .4); background: transparent; color: #fff; }
header .btn:hover { background: rgba(255, 255, 255, .12); }
header .btn.primary { background: #e8b73c; border-color: #e8b73c; color: #16324f; }
header .btn.primary:hover { background: #d9a82e; }

.muted { color: #777; font-size: 13px; }

main { margin: 18px 24px 40px; display: flex; flex-direction: column; gap: 18px; }

.card {
  background: #fff; border: none; border-radius: 12px; padding: 18px 22px;
  box-shadow: 0 1px 3px rgba(16, 36, 62, .08), 0 4px 14px rgba(16, 36, 62, .05);
}
.card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.card-head h3 { margin: 0; font-size: 15px; }

.empty-state { text-align: center; padding: 40px 20px; }
.empty-state h3 { margin: 0 0 8px; color: #16324f; }

.table-wrap {
  overflow-x: auto; display: inline-block; background: #fff;
  padding: 20px 26px; border: 1px solid #e2e4e9; border-radius: 12px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .06);
}

.img-title {
  text-align: center; font-weight: 800; font-size: 16px;
  letter-spacing: .08em; white-space: nowrap; color: #16324f;
  padding-bottom: 10px; margin-bottom: 2px;
  border-bottom: 3px solid #16324f;
}
.img-sub {
  text-align: center; font-size: 12px; color: #6b7280;
  margin-bottom: 14px;
}

table.pivot {
  border-collapse: collapse; font-size: 13px;
  font-variant-numeric: tabular-nums; width: 100%;
}
table.pivot th, table.pivot td {
  border: none; padding: 7px 14px; white-space: nowrap;
}
table.pivot thead th {
  background: #16324f; color: #fff; font-weight: 600; font-size: 12px;
  letter-spacing: .03em; border-right: 1px solid rgba(255, 255, 255, .18);
}
table.pivot thead th:first-child { border-radius: 6px 0 0 0; }
table.pivot thead th:last-child { border-right: none; border-radius: 0 6px 0 0; }
table.pivot tbody td { border-bottom: 1px solid #e8ebef; }
table.pivot tbody tr:nth-child(even) td { background: #f5f8fb; }
table.pivot td.num { text-align: right; min-width: 44px; }
table.pivot td.rowhead {
  font-weight: 700; color: #16324f; border-right: 2px solid #16324f;
}
table.pivot td.subhead { padding-left: 24px; border-right: 2px solid #e8ebef; }

/* Enhanced tables: model group block + divider */
table.pivot tbody tr td.modelhead {
  background: #e2e8f0; color: #16324f; font-weight: 700;
  border-right: 1px solid rgba(0, 0, 0, .12);
  vertical-align: middle;
}
table.pivot tbody tr.group-start td { border-top: 2px solid var(--gc, #16324f); }
table.pivot tbody td.total {
  font-weight: 700; background: #e8eef6;
}
table.pivot tbody tr.total td {
  font-weight: 700; background: #dbe5f0; color: #16324f;
  border-top: 2px solid #16324f; border-bottom: none;
}
table.pivot tbody tr.total td:first-child { border-radius: 0 0 0 6px; }
table.pivot tbody tr.total td:last-child { border-radius: 0 0 6px 0; }
table.pivot thead th.over30 { background: #b91c1c; color: #fff; }
table.pivot tbody tr td.over30 {
  font-weight: 700; background: #fde8e8; color: #b91c1c;
  border-left: 2px solid #f3c8c8;
}

.filecheck { display: block; padding: 4px 0; font-size: 13px; }

#toast {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
  background: #16324f; color: #fff; padding: 11px 20px; border-radius: 8px;
  font-size: 13px; opacity: 0; transition: opacity .2s; pointer-events: none;
  box-shadow: 0 4px 16px rgba(16, 36, 62, .35);
}
#toast.show { opacity: .95; }

footer { padding: 12px 24px 30px; }

#operatorControls { display: flex; gap: 10px; align-items: center; }

.badge {
  font-size: 11px; font-weight: 700; letter-spacing: .06em;
  background: #e8b73c; color: #16324f; border-radius: 4px;
  padding: 3px 9px; vertical-align: middle; margin-left: 8px;
}

/* connection wizard */
.fld { display: flex; flex-direction: column; gap: 5px; font-size: 12px; font-weight: 600; color: #16324f; text-transform: uppercase; letter-spacing: .04em; margin: 12px 0; max-width: 520px; }
.fld input, .linkrow input {
  padding: 9px 12px; border: 1px solid #d4d9e2; border-radius: 8px; font-size: 13px;
  font-family: ui-monospace, monospace; background: #fafbfd; outline: none;
  text-transform: none; letter-spacing: normal; font-weight: 400;
}
.fld input:focus, .linkrow input:focus {
  border-color: #16324f; box-shadow: 0 0 0 3px rgba(22, 50, 79, .12); background: #fff;
}
.linkrow { display: flex; gap: 8px; margin: 10px 0; }
.linkrow input { flex: 1; max-width: 560px; }
.ok { color: #15803d; font-weight: 600; }
.err { color: #b91c1c; font-size: 13px; }