:root {
  color-scheme: light;
  --bg: var(--surface-3, #f4f6f8);
  --panel: var(--surface-1, #ffffff);
  --text: var(--text-primary, #17202a);
  --muted: var(--text-secondary, #627184);
  --line: var(--border-color, #d8e0e8);
  --blue: var(--color-primary, #1f6feb);
  --green: var(--color-success, #137333);
  --yellow: var(--color-warning, #9a6700);
  --red: var(--color-danger, #b42318);
  --shadow: var(--shadow-md, 0 8px 24px rgba(23, 32, 42, 0.08));
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  line-height: 1.45;
}

.shell {
  width: min(1440px, calc(100% - 32px));
  margin: 0 auto;
  padding: 24px 0 40px;
}

header.firmao-topbar { margin-bottom: 18px; }
header.firmao-topbar .wrap { align-items: flex-start; }
header.firmao-topbar .nav { align-items: center; }
header.firmao-topbar .btn {
  min-height: 40px;
  border-radius: var(--radius-md, 10px);
  padding: 9px 14px;
  font-weight: 700;
  transition:
    background-color var(--transition-normal, 190ms cubic-bezier(.22,.61,.36,1)),
    border-color var(--transition-normal, 190ms cubic-bezier(.22,.61,.36,1)),
    box-shadow var(--transition-normal, 190ms cubic-bezier(.22,.61,.36,1)),
    transform var(--transition-fast, 150ms cubic-bezier(.22,.61,.36,1));
}

h1, h2, h3, p { margin: 0; }
h1 { font-size: 28px; font-weight: 750; letter-spacing: 0; }
h2 { font-size: 18px; font-weight: 700; letter-spacing: 0; }
h3 { font-size: 14px; font-weight: 700; letter-spacing: 0; margin-bottom: 8px; }

.kicker {
  margin-bottom: 3px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0;
}

.userbox {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
  color: var(--muted);
  font-size: 13px;
}

.userbox span,
.badge {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm, 8px);
  padding: 5px 8px;
  background: #fff;
}

.grid {
  display: grid;
  gap: 16px;
  margin-bottom: 16px;
}

.grid.two { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); }

.panel {
  margin-bottom: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg, 16px);
  background: var(--panel);
  box-shadow: var(--shadow);
  padding: var(--space-md, 16px);
  transition: border-color var(--transition-normal, .19s ease), box-shadow var(--transition-normal, .19s ease), transform var(--transition-fast, .15s ease);
}

@media (hover:hover) {
  .panel:hover { box-shadow: var(--shadow-lg, var(--shadow)); }
}

.panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 16px;
}

.actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

.firmao-page .btn,
.firmao-page select,
.firmao-page input {
  min-height: var(--fld-h, 42px);
  border: 1px solid var(--line);
  border-radius: var(--radius-md, 12px);
  background: #fff;
  color: var(--text);
  font: inherit;
}

.firmao-page .btn {
  padding: 9px 14px;
  cursor: pointer;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: background-color var(--transition-normal, .19s ease), border-color var(--transition-normal, .19s ease), box-shadow var(--transition-normal, .19s ease), transform var(--transition-fast, .15s ease);
}

.firmao-page .btn.primary { border-color: var(--blue); background: var(--blue); color: #fff; }
.firmao-page .btn.secondary { background: var(--color-secondary-hover, #eef3f8); }
.firmao-page .btn.danger { border-color: var(--color-danger, #b42318); background: var(--color-danger, #b42318); color: #fff; }
.firmao-page .btn:disabled { cursor: wait; opacity: 0.65; }

header.firmao-topbar .nav .btn-secondary,
header.firmao-topbar .nav .btn.secondary {
  background: var(--color-secondary, #fff);
  border-color: var(--border-color, #d8e0e8);
  color: var(--text-primary, #17202a);
}

header.firmao-topbar .nav .btn-danger,
header.firmao-topbar .nav .btn.danger {
  background: var(--color-danger, #b42318);
  border-color: var(--color-danger, #b42318);
  color: #fff;
}

@media (hover:hover) {
  .firmao-page .btn:hover:not(:disabled) { transform: translateY(-1px); box-shadow: var(--shadow-sm, 0 1px 2px rgba(15,23,42,.08)); }
  header.firmao-topbar .nav .btn-secondary:hover,
  header.firmao-topbar .nav .btn.secondary:hover {
    background: var(--color-secondary-hover, #eef3f8);
    color: var(--text-primary, #17202a);
  }
  header.firmao-topbar .nav .btn-danger:hover,
  header.firmao-topbar .nav .btn.danger:hover {
    background: var(--color-danger-hover, #991b1b);
    color: #fff;
  }
}

.firmao-page input,
.firmao-page select { padding: 8px 12px; }

.status-list {
  display: grid;
  gap: 10px;
  margin: 0 0 16px;
}

.status-list div {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
}

dt { color: var(--muted); font-size: 13px; }
dd { margin: 0; font-weight: 650; }

.sync-form,
.config-form { display: grid; gap: 14px; }
.checks {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  padding: 0;
  border: 0;
  margin: 0;
}

.compact-actions { margin-bottom: -4px; }
.compact-actions .btn { min-height: 34px; padding: 6px 10px; }

.checks label,
.inline {
  display: flex;
  gap: 8px;
  align-items: center;
  color: var(--text);
}

.checks input,
.inline input { min-height: auto; }

.fields {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.fields label {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 650;
}

.details-box {
  border: 1px solid var(--line);
  border-radius: var(--radius-md, 12px);
  background: #f7f9fb;
  padding: 10px 12px;
}

.details-box summary {
  cursor: pointer;
  color: var(--text);
  font-weight: 700;
}

.endpoint-fields {
  margin-top: 12px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.field-wide { grid-column: span 2; }

.pipeline-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}

.pipeline-summary span {
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #f7f9fb;
  padding: 6px 9px;
  font-size: 13px;
}

.pipeline-actions { margin-bottom: 14px; }
.pipeline-table td:nth-child(1) { max-width: 260px; overflow-wrap: anywhere; }
.pipeline-table td:nth-child(5) { max-width: 420px; overflow-wrap: anywhere; }

.sync-live {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f7f9fb;
  padding: 12px;
}

.progress-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

.progress-track {
  height: 12px;
  overflow: hidden;
  border-radius: 6px;
  background: #dfe7ef;
}

.progress-track i {
  display: block;
  width: 0;
  height: 100%;
  background: var(--blue);
  transition: width .22s ease;
}

.progress-counters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  margin-top: 9px;
  color: var(--muted);
  font-size: 13px;
}

.object-progress-list {
  display: grid;
  gap: 7px;
  margin-top: 12px;
}

.object-progress-row {
  display: grid;
  grid-template-columns: minmax(130px, .8fr) minmax(160px, 1.6fr) auto;
  gap: 10px;
  align-items: center;
  font-size: 13px;
}

.object-progress-row .mini-track {
  height: 7px;
  overflow: hidden;
  border-radius: 4px;
  background: #dfe7ef;
}

.object-progress-row .mini-track i {
  display: block;
  height: 100%;
  background: var(--green);
}

.object-progress-row.is-failed { color: var(--red); }

.run-summary {
  display: grid;
  gap: 8px;
  color: var(--muted);
}

.notice {
  margin-bottom: 16px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--blue);
  border-radius: var(--radius-md, 12px);
  background: #fff;
  padding: 12px 14px;
}

.notice.error { border-left-color: var(--red); color: var(--red); }
.notice.ok { border-left-color: var(--green); color: var(--green); }

.table-wrap { overflow: auto; border: 1px solid var(--line); border-radius: var(--radius-md, 12px); }
.firmao-page table { width: 100%; border-collapse: collapse; min-width: 900px; }
.firmao-page th,
.firmao-page td { padding: 10px 12px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.firmao-page th { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: 0; background: var(--surface-2, #f7f9fb); }
.firmao-page td { font-size: 14px; }
.firmao-page tr:last-child td { border-bottom: 0; }
@media (hover:hover) {
  .firmao-page tbody tr:hover { background: var(--surface-2, #f7f9fb); }
}

.firmao-page dialog {
  width: min(1100px, calc(100% - 28px));
  max-height: min(760px, calc(100vh - 28px));
  border: 1px solid var(--line);
  border-radius: var(--radius-lg, 16px);
  padding: 0;
  box-shadow: var(--shadow-lg, 0 24px 64px rgba(15,23,42,.2));
  animation: ui-fade-in var(--transition-normal, .19s ease) both;
}

.firmao-page dialog::backdrop { background: rgba(17, 24, 39, 0.35); }

.dialog-head {
  position: sticky;
  top: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid var(--line);
  background: #fff;
  padding: 14px 16px;
}

.json-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  padding: 16px;
}

pre {
  max-height: 560px;
  overflow: auto;
  margin: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-md, 12px);
  background: #101820;
  color: #e8eef5;
  padding: 12px;
  font-size: 12px;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
}

@media (max-width: 880px) {
  .shell { width: min(100% - 20px, 1440px); padding-top: 16px; }
  .panel-head { flex-direction: column; }
  .grid.two, .fields, .checks, .json-grid { grid-template-columns: 1fr; }
  .field-wide { grid-column: auto; }
  .object-progress-row { grid-template-columns: 1fr; gap: 4px; }
  .status-list div { grid-template-columns: 1fr; gap: 2px; }
  .actions { width: 100%; }
  .panel .btn,
  .panel select { width: 100%; }
}