.query-chart-state {
  min-height: 230px;
  display: grid;
  place-items: center;
  padding: 24px;
  color: var(--muted);
  text-align: center;
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface) 86%, var(--line));
}

.query-chart-state.is-loading {
  animation: hybrid-pulse 1.35s ease-in-out infinite;
}

.query-chart-state.is-error {
  min-height: 170px;
  color: var(--danger, #b84c43);
}

.query-chart-retry {
  margin: 10px auto 0;
}

.query-filter-summary {
  margin: 12px 0 0;
  color: var(--muted);
  font-size: 0.84rem;
}

.hybrid-admin {
  display: grid;
  gap: 18px;
}

.hybrid-subtabs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 4px 0 10px;
  scrollbar-width: thin;
}

.hybrid-subtabs button {
  flex: 0 0 auto;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--muted);
  padding: 8px 13px;
  cursor: pointer;
}

.hybrid-subtabs button.active {
  border-color: var(--brand-strong);
  background: var(--brand-soft, rgba(63, 139, 230, 0.12));
  color: var(--ink);
}

.integration-primer {
  display: grid;
  grid-template-columns: minmax(260px, 0.8fr) minmax(420px, 1.2fr);
  gap: 20px;
  align-items: center;
  margin: 18px 0;
  padding: 20px;
  border: 1px solid color-mix(in srgb, var(--brand-strong) 28%, var(--line));
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface) 92%, var(--brand-soft, #d8eaff));
}

.integration-primer h2,
.integration-panel-intro h2 {
  margin: 0 0 7px;
}

.integration-primer p,
.integration-panel-intro p,
.integration-subtab-intro,
.integration-help-text {
  color: var(--muted);
  line-height: 1.55;
}

.integration-primer-copy > p:last-child,
.integration-panel-intro p:last-child {
  margin-bottom: 0;
}

.integration-flow {
  display: grid;
  grid-template-columns: minmax(100px, 1fr) 30px minmax(100px, 1fr) 30px minmax(100px, 1fr);
  gap: 8px;
  align-items: center;
  padding: 0;
  margin: 0;
  list-style: none;
}

.integration-flow li:not(.integration-flow-arrow) {
  display: grid;
  gap: 4px;
  min-height: 94px;
  align-content: center;
  justify-items: center;
  padding: 12px 8px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  text-align: center;
}

.integration-flow-step {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--brand-strong);
  color: #fff;
  font-weight: 800;
}

.integration-flow small { color: var(--muted); }
.integration-flow-arrow { color: var(--brand-strong); font-size: 1.35rem; font-weight: 800; text-align: center; }

.integration-context {
  grid-column: 1 / -1;
  border-top: 1px solid var(--line);
  padding-top: 12px;
}

.integration-context summary,
.integration-settings-panel summary { cursor: pointer; font-weight: 750; }

.integration-status-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 9px 16px;
  margin-top: 11px;
  color: var(--muted);
  font-size: .82rem;
}

.integration-status-legend span { display: inline-flex; align-items: center; gap: 6px; }
.status-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--neutral, #8493a6); }
.status-dot.is-success { background: #2e7d59; }
.status-dot.is-warning { background: #b47d19; }
.status-dot.is-error { background: var(--danger, #b84c43); }
.status-dot.is-disabled { background: #667488; }

.integration-panel-guidance,
.integration-subtab-intro {
  margin: 0;
  color: var(--muted);
  line-height: 1.5;
}

.integration-panel-intro {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 14px;
  padding: 16px 18px;
  border-left: 3px solid var(--brand-strong);
  background: color-mix(in srgb, var(--surface) 94%, var(--brand-soft, #d8eaff));
}

.integration-panel-intro > div { max-width: 780px; }
.integration-subtab-intro { margin-bottom: 13px; }

.integration-tooltip {
  position: fixed;
  z-index: 1600;
  max-width: calc(100vw - 24px);
  padding: 9px 11px;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 8px;
  background: #15283e;
  box-shadow: 0 12px 28px rgba(0, 0, 0, .22);
  color: #fff;
  font-size: .78rem;
  line-height: 1.4;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-2px);
  transition: opacity 120ms ease, transform 120ms ease;
}

.integration-tooltip.is-visible { opacity: 1; transform: translateY(0); }

.integration-access button.is-busy,
.integration-access a.is-busy { cursor: wait; }

.integration-access button.is-busy::before {
  content: "";
  display: inline-block;
  width: .8em;
  height: .8em;
  margin-right: .45em;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  vertical-align: -.1em;
  animation: integration-spin .7s linear infinite;
}

@keyframes integration-spin { to { transform: rotate(360deg); } }

.integration-access .form-message.is-success { color: #2e7d59; }

.sql-panel-heading { align-items: flex-start; }
.sql-connect-guide {
  margin-top: 14px;
  padding: 14px;
  border: 1px solid var(--line);
  background: var(--surface);
}

.sql-connect-guide-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.sql-connect-guide-head h3 {
  margin: 0;
  font-size: 1rem;
}

.sql-connect-modes {
  display: grid;
  grid-template-columns: repeat(3, minmax(180px, 1fr));
  gap: 10px;
}

.sql-connect-modes article {
  display: grid;
  gap: 7px;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface) 92%, var(--accent, #2e7d59) 8%);
}

.sql-connect-modes strong { font-size: .94rem; }
.sql-connect-modes small { color: var(--muted); line-height: 1.45; }
.sql-connect-modes code {
  display: block;
  max-width: 100%;
  padding: 7px 8px;
  overflow-wrap: anywhere;
  border: 1px solid var(--line);
  background: var(--surface-raised, rgba(0, 0, 0, .03));
  font-size: .78rem;
}

.sql-connect-steps {
  margin: 12px 0 0;
  padding-left: 22px;
  color: var(--muted);
  line-height: 1.55;
}

.sql-connect-steps li + li { margin-top: 4px; }
.sql-connection-string-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 12px;
  margin-top: 14px;
}

.sql-connection-string-field textarea {
  width: 100%;
  min-height: 68px;
  resize: vertical;
  overflow-wrap: anywhere;
  font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
}

.sql-settings-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(170px, 1fr));
  gap: 12px;
  margin-top: 14px;
}

.sql-settings-grid .field:first-child {
  grid-column: span 4;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  background: var(--surface-soft, rgba(80, 125, 170, 0.08));
}

.sql-settings-grid .field:first-child .field-note { margin-left: auto; }
.sql-settings-actions { justify-content: flex-start; margin-top: 14px; }
.sql-advanced-settings { margin-top: 14px; }
.sql-advanced-settings .form-grid { margin-top: 12px; }
.sql-master-guide {
  margin-top: 16px;
  padding: 16px 18px;
  border-left: 3px solid #2e7d59;
  background: color-mix(in srgb, var(--surface) 94%, rgba(46, 125, 89, .18));
}

.sql-master-guide h3 { margin: 0 0 8px; }
.sql-master-guide ol { margin: 0; padding-left: 22px; color: var(--muted); line-height: 1.6; }
.sql-master-guide li + li { margin-top: 4px; }
#sqlConnectionSettings input:disabled,
#sqlConnectionSettings select:disabled { cursor: not-allowed; opacity: .72; }

@media (max-width: 980px) {
  .sql-connect-modes { grid-template-columns: 1fr; }
  .sql-settings-grid { grid-template-columns: repeat(2, minmax(170px, 1fr)); }
  .sql-settings-grid .field:first-child { grid-column: span 2; }
}

@media (max-width: 900px) {
  .integration-primer { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
  .integration-primer { padding: 15px; }
  .integration-flow { grid-template-columns: 1fr; }
  .integration-flow-arrow { transform: rotate(90deg); }
  .integration-flow li:not(.integration-flow-arrow) { min-height: 68px; }
  .integration-panel-intro { padding: 14px; }
  .sql-connect-guide-head { display: grid; }
  .sql-connection-string-panel { grid-template-columns: 1fr; }
  .sql-settings-grid { grid-template-columns: 1fr; }
  .sql-settings-grid .field:first-child { grid-column: auto; align-items: flex-start; flex-wrap: wrap; }
  .sql-settings-grid .field:first-child .field-note { width: 100%; margin-left: 0; }
}

.hybrid-tab-panel {
  min-height: 180px;
}

.hybrid-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 12px;
}

.hybrid-migration-panel,
.hybrid-detail-panel,
.hybrid-settings-panel {
  margin-top: 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  padding: 18px;
}

.hybrid-filter-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  align-items: end;
  gap: 10px;
  margin: 14px 0;
}

.hybrid-filter-actions,
.hybrid-admin-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.hybrid-filter-actions {
  align-self: end;
  padding-bottom: 1px;
}

.hybrid-progress-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}

.sql-consolidation-progress {
  display: grid;
  gap: 10px;
  margin: 14px 0;
  padding: 14px;
  border: 1px solid var(--line);
  background: var(--surface);
}

.sql-consolidation-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.sql-consolidation-head h4 {
  margin: 0;
  font-size: 1rem;
}

#sqlConsolidationPercent {
  font-size: 1.35rem;
  line-height: 1;
}

.sql-consolidation-track {
  height: 11px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: color-mix(in srgb, var(--line) 76%, transparent);
}

.sql-consolidation-track > span {
  display: block;
  width: 0%;
  height: 100%;
  border-radius: inherit;
  background: #2e7d59;
  transition: width 260ms ease;
}

.sql-consolidation-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(100px, 1fr));
  gap: 10px;
}

.sql-consolidation-grid span {
  display: grid;
  gap: 3px;
  min-width: 0;
  color: var(--muted);
  font-size: .78rem;
}

.sql-consolidation-grid strong {
  color: var(--text);
  font-size: .92rem;
  overflow-wrap: anywhere;
}

.hybrid-progress-card {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px;
  background: color-mix(in srgb, var(--surface) 94%, var(--brand-soft, #d8eaff));
  cursor: pointer;
}

.hybrid-progress-card:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--brand-strong) 35%, transparent);
  outline-offset: 2px;
}

.hybrid-progress-heading,
.hybrid-progress-meta,
.hybrid-operational-strip,
.hybrid-field-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.hybrid-progress-heading strong {
  font-size: 0.9rem;
}

.hybrid-progress-heading span {
  font-size: 1.05rem;
  font-weight: 800;
}

.hybrid-progress-track {
  height: 10px;
  margin: 10px 0 7px;
  overflow: hidden;
  border-radius: 999px;
  background: color-mix(in srgb, var(--line) 76%, transparent);
}

.hybrid-progress-track > span {
  display: block;
  height: 100%;
  width: var(--progress, 0%);
  border-radius: inherit;
  background: var(--brand-strong, #2579d0);
  transition: width 260ms ease;
}

.hybrid-progress-card[data-tone="warning"] .hybrid-progress-track > span { background: #b47d19; }
.hybrid-progress-card[data-tone="danger"] .hybrid-progress-track > span { background: var(--danger, #b84c43); }
.hybrid-progress-card[data-tone="success"] .hybrid-progress-track > span { background: #2e7d59; }

.hybrid-progress-meta {
  color: var(--muted);
  font-size: 0.76rem;
}

.hybrid-field-progress {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 10px;
  margin-top: 14px;
}

.hybrid-field-row {
  border-bottom: 1px solid var(--line);
  padding: 8px 0;
}

.hybrid-operational-strip {
  flex-wrap: wrap;
  justify-content: flex-start;
  margin: 14px 0;
  padding: 12px;
  border-radius: 10px;
  background: var(--surface-soft, rgba(80, 125, 170, 0.08));
  color: var(--muted);
  font-size: 0.82rem;
}

.hybrid-operational-strip strong { color: var(--ink); }

.hybrid-live-state {
  border-radius: 999px;
  padding: 6px 10px;
  background: rgba(184, 76, 67, 0.12);
  color: var(--danger, #b84c43);
  font-size: 0.76rem;
  font-weight: 800;
}

.hybrid-live-state.is-live {
  background: rgba(46, 125, 89, 0.14);
  color: #2e7d59;
}

.hybrid-admin-controls { margin-top: 12px; }

.hybrid-settings-panel summary {
  cursor: pointer;
  font-weight: 750;
}

.hybrid-conflict-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.hybrid-conflict-actions button {
  padding: 6px 8px;
  font-size: 0.72rem;
}

.hybrid-status-card {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  padding: 16px;
  display: grid;
  gap: 7px;
}

.hybrid-status-card strong {
  font-size: 1.05rem;
}

.hybrid-status {
  width: fit-content;
  padding: 4px 9px;
  border-radius: 999px;
  font-size: 0.76rem;
  font-weight: 700;
  background: rgba(180, 125, 25, 0.14);
  color: #9a6817;
}

.hybrid-status.is-ok {
  background: rgba(46, 125, 89, 0.14);
  color: #2e7d59;
}

.hybrid-status.is-error {
  background: rgba(184, 76, 67, 0.14);
  color: #b84c43;
}

.hybrid-action-panel {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  padding: 18px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}

.hybrid-action-panel h3 {
  margin: 0 0 6px;
}

.hybrid-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.button-link {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

.hybrid-table {
  min-width: 850px;
}

.hybrid-table td {
  max-width: 260px;
  overflow-wrap: anywhere;
}

.hybrid-flag-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 9px;
}

.hybrid-flag {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 11px 13px;
  display: flex;
  justify-content: space-between;
  gap: 10px;
  background: var(--surface);
}

.hybrid-bridge-settings {
  display: flex;
  align-items: end;
  flex-wrap: wrap;
  gap: 12px;
  margin: 14px 0;
  padding: 14px;
  border: 1px solid var(--line);
  background: var(--surface-soft, rgba(80, 125, 170, 0.08));
}

.hybrid-bridge-flags {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 9px;
  margin: 14px 0;
}

.process-sync-indicators {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 10px;
}

.process-sync-indicators small {
  width: 100%;
  color: var(--muted);
}

.process-sync-flag {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 4px 9px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 0.74rem;
  font-weight: 750;
}

.process-sync-flag.tone-success { color: #2e7d59; background: rgba(46, 125, 89, 0.14); }
.process-sync-flag.tone-warning { color: #9a6817; background: rgba(180, 125, 25, 0.14); }
.process-sync-flag.tone-danger { color: var(--danger, #b84c43); background: rgba(184, 76, 67, 0.14); }
.process-sync-flag.tone-info { color: var(--brand-strong); background: var(--brand-soft, rgba(63, 139, 230, 0.12)); }

@keyframes hybrid-pulse {
  0%, 100% { opacity: 0.58; }
  50% { opacity: 1; }
}

@media (max-width: 720px) {
  .hybrid-action-panel {
    flex-direction: column;
  }

  .hybrid-actions {
    justify-content: flex-start;
  }

  .query-chart-state {
    min-height: 200px;
  }

  .hybrid-migration-panel,
  .hybrid-detail-panel { padding: 13px; }

  .sql-consolidation-head { display: grid; }
  .sql-consolidation-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .hybrid-progress-grid,
  .hybrid-field-progress { grid-template-columns: 1fr; }
}