@import "https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap";/* ============================================================
   Ingestion module styles — _ingestion_styles.css
   Scoped under .ing-* namespace to avoid collisions.
   ============================================================ */

/* ── Page layout ─────────────────────────────────────────── */
.ing-page {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 28px 32px;
  max-width: 1400px;
  margin: 0 auto;
  width: 100%;
  box-sizing: border-box;
}

.ing-page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.ing-page-title-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.ing-page-icon {
  color: var(--color-accent, #6366f1);
  flex-shrink: 0;
}

.ing-page-title {
  font-size: 1.375rem;
  font-weight: 700;
  color: var(--color-text-primary, #f1f5f9);
  margin: 0;
  line-height: 1.3;
}

.ing-page-subtitle {
  font-size: 0.8125rem;
  color: var(--color-text-muted, #94a3b8);
  margin: 2px 0 0;
}

/* ── Breadcrumb ──────────────────────────────────────────── */
.ing-breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8125rem;
  color: var(--color-text-muted, #94a3b8);
}

.ing-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-text-muted, #94a3b8);
  font-size: 0.8125rem;
  padding: 0;
  transition: color 0.15s;
}

.ing-back-btn:hover { color: var(--color-text-primary, #f1f5f9); }

.ing-breadcrumb-sep { opacity: 0.4; }
.ing-breadcrumb-current { color: var(--color-text-primary, #f1f5f9); font-weight: 500; }

/* ── Toolbar ──────────────────────────────────────────────── */
.ing-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.ing-search-wrap {
  position: relative;
  flex: 1;
  min-width: 220px;
  max-width: 400px;
}

.ing-search-icon {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-text-muted, #94a3b8);
  pointer-events: none;
}

.ing-search {
  width: 100%;
  padding: 7px 10px 7px 32px;
  border-radius: 8px;
  border: 1px solid var(--color-border, rgba(255,255,255,0.08));
  background: var(--color-surface-raised, rgba(255,255,255,0.04));
  color: var(--color-text-primary, #f1f5f9);
  font-size: 0.8125rem;
  outline: none;
  transition: border-color 0.15s;
  box-sizing: border-box;
}

.ing-search:focus { border-color: var(--color-accent, #6366f1); }

.ing-count {
  font-size: 0.75rem;
  color: var(--color-text-muted, #94a3b8);
  white-space: nowrap;
}

/* ── Buttons ──────────────────────────────────────────────── */
.ing-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 8px;
  border: none;
  background: var(--color-accent, #6366f1);
  color: #fff;
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.15s, transform 0.1s;
  white-space: nowrap;
}

.ing-btn-primary:hover:not(:disabled) { opacity: 0.88; transform: translateY(-1px); }
.ing-btn-primary:disabled { opacity: 0.45; cursor: not-allowed; }

.ing-btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 8px;
  border: 1px solid var(--color-border, rgba(255,255,255,0.1));
  background: transparent;
  color: var(--color-text-secondary, #cbd5e1);
  font-size: 0.8125rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  white-space: nowrap;
}

.ing-btn-ghost:hover:not(:disabled) { background: rgba(255,255,255,0.05); }
.ing-btn-ghost:disabled { opacity: 0.45; cursor: not-allowed; }

.ing-btn-danger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 8px;
  border: none;
  background: #ef4444;
  color: #fff;
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.15s;
}

.ing-btn-danger:hover:not(:disabled) { opacity: 0.85; }
.ing-btn-danger:disabled { opacity: 0.45; cursor: not-allowed; }

.ing-btn-danger-outline {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 8px;
  border: 1px solid rgba(239,68,68,0.4);
  background: transparent;
  color: #f87171;
  font-size: 0.8125rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}

.ing-btn-danger-outline:hover:not(:disabled) { background: rgba(239,68,68,0.1); border-color: #ef4444; }
.ing-btn-danger-outline:disabled { opacity: 0.45; cursor: not-allowed; }

.ing-btn-sm { padding: 5px 11px; font-size: 0.75rem; }

.ing-btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  border: 1px solid var(--color-border, rgba(255,255,255,0.1));
  background: transparent;
  color: var(--color-text-secondary, #cbd5e1);
  cursor: pointer;
  transition: background 0.15s;
}

.ing-btn-icon:hover:not(:disabled) { background: rgba(255,255,255,0.06); }
.ing-btn-icon:disabled { opacity: 0.4; cursor: not-allowed; }

/* ── Cards ───────────────────────────────────────────────── */
.ing-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}

.ing-card {
  background: var(--color-surface-raised, rgba(255,255,255,0.03));
  border: 1px solid var(--color-border, rgba(255,255,255,0.07));
  border-radius: 12px;
  padding: 20px;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: border-color 0.15s, background 0.15s, transform 0.15s;
}

.ing-card-hover {
  cursor: pointer;
}

.ing-card-hover:hover {
  border-color: var(--color-accent, #6366f1);
  background: rgba(99, 102, 241, 0.04);
  transform: translateY(-2px);
}

.ing-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.ing-card-icon-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 9px;
  background: rgba(99,102,241,0.12);
  color: var(--color-accent, #6366f1);
  flex-shrink: 0;
}

.ing-card-icon-wrap--lg {
  width: 44px;
  height: 44px;
  border-radius: 11px;
}

.ing-card-name {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--color-text-primary, #f1f5f9);
  margin: 0;
}

.ing-card-desc {
  font-size: 0.8rem;
  color: var(--color-text-muted, #94a3b8);
  margin: 0;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.ing-card-url {
  font-size: 0.75rem;
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  color: var(--color-text-muted, #64748b);
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ing-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}

.ing-card-arrow {
  position: absolute;
  bottom: 18px;
  right: 18px;
  color: var(--color-text-muted, #64748b);
  transition: color 0.15s;
}

.ing-card-hover:hover .ing-card-arrow { color: var(--color-accent, #6366f1); }

/* ── Meta chips ──────────────────────────────────────────── */
.ing-meta-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 20px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.06);
  font-size: 0.7rem;
  color: var(--color-text-muted, #94a3b8);
}

/* ── Badges ──────────────────────────────────────────────── */
.ing-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 9px;
  border-radius: 20px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.ing-badge-success { background: rgba(34,197,94,0.12); color: #4ade80; border: 1px solid rgba(34,197,94,0.2); }
.ing-badge-danger  { background: rgba(239,68,68,0.12);  color: #f87171; border: 1px solid rgba(239,68,68,0.2); }
.ing-badge-warning { background: rgba(245,158,11,0.12); color: #fbbf24; border: 1px solid rgba(245,158,11,0.2); }
.ing-badge-info    { background: rgba(99,102,241,0.12); color: #818cf8; border: 1px solid rgba(99,102,241,0.2); }
.ing-badge-neutral { background: rgba(255,255,255,0.06); color: #94a3b8; border: 1px solid rgba(255,255,255,0.08); }

/* ── Tables ──────────────────────────────────────────────── */
.ing-table-wrap {
  overflow-x: auto;
  border-radius: 10px;
  border: 1px solid var(--color-border, rgba(255,255,255,0.07));
}

.ing-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8125rem;
}

.ing-table thead th {
  padding: 10px 14px;
  text-align: left;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-text-muted, #64748b);
  background: rgba(255,255,255,0.025);
  border-bottom: 1px solid rgba(255,255,255,0.07);
}

.ing-table tbody tr {
  border-bottom: 1px solid rgba(255,255,255,0.04);
  transition: background 0.12s;
}

.ing-table tbody tr:last-child { border-bottom: none; }

.ing-table-row-hover { cursor: pointer; }
.ing-table-row-hover:hover { background: rgba(99,102,241,0.05); }

.ing-table td { padding: 10px 14px; vertical-align: middle; }

.ing-td-bold { font-weight: 600; color: var(--color-text-primary, #f1f5f9); }
.ing-td-muted { color: var(--color-text-muted, #94a3b8); }
.ing-chevron { color: var(--color-text-muted, #64748b); }
.ing-fail-count { color: #f87171; }

/* ── Sections ────────────────────────────────────────────── */
.ing-section {
  background: var(--color-surface-raised, rgba(255,255,255,0.03));
  border: 1px solid var(--color-border, rgba(255,255,255,0.07));
  border-radius: 12px;
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.ing-section-full { width: 100%; }

.ing-section-title {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-text-primary, #f1f5f9);
  margin: 0;
}

.ing-section-desc {
  font-size: 0.8rem;
  color: var(--color-text-muted, #94a3b8);
  margin: 0;
  line-height: 1.5;
}

.ing-section-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

/* ── Detail header ───────────────────────────────────────── */
.ing-detail-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.ing-detail-title-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

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

.ing-detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

@media (max-width: 768px) {
  .ing-detail-grid { grid-template-columns: 1fr; }
}

/* ── Forms ───────────────────────────────────────────────── */
.ing-form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}

.ing-form-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.ing-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-text-muted, #94a3b8);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.ing-label-hint {
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
}

.ing-input, .ing-select {
  padding: 8px 11px;
  border-radius: 8px;
  border: 1px solid var(--color-border, rgba(255,255,255,0.1));
  background: rgba(255,255,255,0.04);
  color: var(--color-text-primary, #f1f5f9);
  font-size: 0.8125rem;
  outline: none;
  transition: border-color 0.15s;
  width: 100%;
  box-sizing: border-box;
}

.ing-input:focus, .ing-select:focus {
  border-color: var(--color-accent, #6366f1);
}

.ing-select { cursor: pointer; }

.ing-value {
  font-size: 0.8125rem;
  color: var(--color-text-primary, #f1f5f9);
  padding: 6px 0;
}

.ing-mono { font-family: 'JetBrains Mono', 'Fira Code', monospace; }
.ing-code-pill {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 5px;
  background: rgba(99,102,241,0.12);
  color: #818cf8;
  font-family: monospace;
  font-size: 0.72rem;
  font-weight: 700;
}

/* ── Secret status ───────────────────────────────────────── */
.ing-secret-status { display: flex; align-items: center; gap: 8px; }

.ing-rotate-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  border-radius: 8px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.07);
}

.ing-rotate-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

/* ── Modals ──────────────────────────────────────────────── */
.ing-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 20px;
}

.ing-modal {
  background: var(--color-surface, #1a1b2e);
  border: 1px solid var(--color-border, rgba(255,255,255,0.1));
  border-radius: 14px;
  width: 100%;
  max-width: 520px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 24px 64px rgba(0,0,0,0.5);
  animation: ing-modal-in 0.18s ease;
}

.ing-modal--wide { max-width: 680px; }
.ing-modal--sm   { max-width: 420px; }

@keyframes ing-modal-in {
  from { opacity: 0; transform: scale(0.95) translateY(8px); }
  to   { opacity: 1; transform: scale(1)    translateY(0); }
}

.ing-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 22px 14px;
  border-bottom: 1px solid rgba(255,255,255,0.07);
}

.ing-modal-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-text-primary, #f1f5f9);
  margin: 0;
}

.ing-modal-close {
  background: none;
  border: none;
  color: var(--color-text-muted, #94a3b8);
  font-size: 1.25rem;
  cursor: pointer;
  line-height: 1;
  padding: 0 4px;
  transition: color 0.15s;
}

.ing-modal-close:hover { color: var(--color-text-primary, #f1f5f9); }

.ing-modal-body {
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.ing-modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 14px 22px 20px;
  border-top: 1px solid rgba(255,255,255,0.07);
}

.ing-confirm-text {
  font-size: 0.875rem;
  color: var(--color-text-secondary, #cbd5e1);
  line-height: 1.55;
  margin: 0;
}

/* ── Stat cards ──────────────────────────────────────────── */
.ing-stats-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 12px;
}

.ing-stat-card {
  background: var(--color-surface-raised, rgba(255,255,255,0.03));
  border: 1px solid var(--color-border, rgba(255,255,255,0.07));
  border-radius: 10px;
  padding: 14px 16px;
  text-align: center;
}

.ing-stat-value {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-text-primary, #f1f5f9);
  line-height: 1.2;
}

.ing-stat-label {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted, #64748b);
  margin-top: 4px;
}

.ing-stat-sub {
  font-size: 0.8rem;
  color: var(--color-text-muted, #94a3b8);
  margin-top: 2px;
}

/* ── Run meta ────────────────────────────────────────────── */
.ing-run-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8rem;
  color: var(--color-text-muted, #94a3b8);
  flex-wrap: wrap;
}

/* ── Filter pills ────────────────────────────────────────── */
.ing-filter-pills {
  display: flex;
  gap: 6px;
}

.ing-filter-pill {
  padding: 4px 12px;
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,0.1);
  background: transparent;
  color: var(--color-text-muted, #94a3b8);
  font-size: 0.75rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.ing-filter-pill:hover { background: rgba(255,255,255,0.05); }

.ing-filter-pill.active {
  background: rgba(99,102,241,0.15);
  border-color: rgba(99,102,241,0.4);
  color: #818cf8;
}

/* ── Expandable item row ─────────────────────────────────── */
.ing-item-expand-row {
  background: rgba(255,255,255,0.015);
}

.ing-item-detail {
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ing-item-detail-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8rem;
}

.ing-item-error { color: #f87171; }
.ing-error-text { color: #fca5a5; font-size: 0.8rem; }

/* ── Error banner ────────────────────────────────────────── */
.ing-error-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 8px;
  background: rgba(239,68,68,0.08);
  border: 1px solid rgba(239,68,68,0.2);
  color: #fca5a5;
  font-size: 0.8125rem;
}

/* ── State indicators ────────────────────────────────────── */
.ing-loading {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--color-text-muted, #94a3b8);
  font-size: 0.875rem;
  padding: 24px 0;
}

.ing-error {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #f87171;
  font-size: 0.875rem;
  padding: 16px 0;
}

.ing-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 56px 20px;
  text-align: center;
}

.ing-empty-icon { color: var(--color-text-muted, #475569); opacity: 0.5; }
.ing-empty-title { font-size: 1rem; font-weight: 600; color: var(--color-text-secondary, #cbd5e1); margin: 0; }
.ing-empty-sub { font-size: 0.8125rem; color: var(--color-text-muted, #64748b); margin: 0; max-width: 380px; }
.ing-empty-inline { font-size: 0.8125rem; color: var(--color-text-muted, #64748b); }

/* ── Spin animation ──────────────────────────────────────── */
.ing-spin {
  animation: ing-spin 0.8s linear infinite;
}

@keyframes ing-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
.nova-panel {
  width: 100%;
  height: 100%;
  max-height: 100%;
  flex-shrink: 0;
  background: #ffffff;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.nova-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 16px 12px;
  border-bottom: 1px solid #e5e7eb;
}

.nova-panel-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  font-size: 14px;
  font-weight: 700;
  color: #111827;
}

.nova-panel-title-copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.nova-panel-subtitle {
  font-size: 11px;
  font-weight: 500;
  color: #6b7280;
}

.nova-panel-session-title {
  font-size: 11px;
  color: #9ca3af;
}

.nova-panel-header-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.nova-panel-status {
  font-size: 11px;
  color: #4b5563;
}

.nova-panel-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 12px 4px;
  min-height: 0;
  flex: 1;
  overflow: hidden;
}

.nova-panel-thread {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 0;
  flex: 1;
  overflow-y: auto;
  padding: 2px 2px 2px;
}

.nova-panel-history {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 200px;
  overflow-y: auto;
  padding: 2px 2px 6px;
}

.nova-panel-history-item {
  text-align: left;
  width: 100%;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  background: #ffffff;
  padding: 10px 12px;
  cursor: pointer;
}

.nova-panel-history-item:hover,
.nova-panel-history-item.is-active {
  background: #f9fafb;
  border-color: #d1d5db;
}

.nova-panel-history-title {
  font-size: 12px;
  font-weight: 600;
  color: #111827;
}

.nova-panel-history-meta {
  margin-top: 4px;
  font-size: 11px;
  color: #6b7280;
}

.nova-panel-empty {
  padding: 10px 12px;
  border: 1px dashed #d1d5db;
  border-radius: 12px;
  background: #f9fafb;
  color: #6b7280;
  font-size: 12px;
}

.nova-panel-row {
  display: flex;
}

.nova-panel-row-user {
  justify-content: flex-end;
}

.nova-panel-row-assistant {
  justify-content: flex-start;
}

.nova-panel-bubble {
  padding: 12px 14px;
  border-radius: 16px;
  font-size: 12px;
  line-height: 1.6;
  max-width: 92%;
}

.nova-panel-bubble-user {
  background: #111827;
  color: #f9fafb;
  white-space: pre-wrap;
}

.nova-panel-bubble-assistant {
  background: #f9fafb;
  color: #1f2937;
  border: 1px solid #e5e7eb;
}

.nova-panel-bubble-assistant > *:first-child {
  margin-top: 0;
}

.nova-panel-bubble-assistant > *:last-child {
  margin-bottom: 0;
}

.nova-panel-bubble-assistant p,
.nova-panel-bubble-assistant ul,
.nova-panel-bubble-assistant ol,
.nova-panel-bubble-assistant pre,
.nova-panel-bubble-assistant blockquote {
  margin: 0 0 0.75rem;
}

.nova-panel-bubble-assistant li + li {
  margin-top: 0.25rem;
}

.nova-panel-bubble-assistant code {
  font-family: Consolas, 'Courier New', monospace;
  font-size: 11px;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  padding: 0.08rem 0.35rem;
}

.nova-panel-bubble-assistant pre {
  overflow-x: auto;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 10px 12px;
}

.nova-panel-bubble-assistant pre code {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
}

.nova-panel-input {
  min-height: 44px;
  max-height: 25dvh;
  padding: 8px 10px 2px;
  border: none;
  border-radius: 0;
  background: transparent;
  color: #1f2937;
  font-size: 13px;
  line-height: 1.5;
  resize: none;
  overflow-y: hidden;
  outline: none;
}

.nova-panel-input:focus,
.nova-panel-select-trigger:focus-visible {
  box-shadow: none;
}

.nova-panel-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: #9ca3af;
  cursor: pointer;
  flex-shrink: 0;
}

.nova-panel-submit:not(:disabled):hover {
  color: #111827;
  background: #f3f4f6;
}

.nova-panel-submit.is-stopping {
  color: #dc2626;
  background: #fef2f2;
}

.nova-panel-submit.is-stopping:not(:disabled):hover {
  color: #991b1b;
  background: #fee2e2;
}

.nova-panel-submit:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.nova-panel-icon-btn {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  border: 1px solid transparent;
  background: transparent;
  color: #6b7280;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.nova-panel-icon-btn:hover {
  background: #f9fafb;
  border-color: #e5e7eb;
  color: #111827;
}

.nova-panel-icon-btn.is-active {
  background: #fff7ed;
  border-color: #fdba74;
  color: #c2410c;
}

.nova-panel-explanation,
.nova-panel-warning {
  padding: 10px 12px;
  border-radius: 12px;
  font-size: 12px;
  line-height: 1.5;
}

.nova-panel-explanation {
  background: #fff7ed;
  color: #9a3412;
  border: 1px solid #fdba74;
}

.nova-panel-warning {
  background: #f9fafb;
  color: #4b5563;
  border: 1px solid #e5e7eb;
}

.nova-panel-composer-shell {
  border-top: 1px solid #e5e7eb;
  background: #fbfbfb;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex-shrink: 0;
}

.nova-panel-status-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.nova-panel-composer {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 5px 6px;
  border: 1px solid #d1d5db;
  border-radius: 9px;
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
}

.nova-panel-composer-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 28px;
  padding-top: 4px;
}

.nova-panel-composer-left {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.nova-panel-composer-right {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
}

.nova-panel-surface-pill {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  color: #4b5563;
  font-size: 11px;
  font-weight: 600;
}

.nova-panel-model-row {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  margin-left: auto;
}

.nova-panel-selector {
  position: relative;
  min-width: 0;
}

.nova-panel-select-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  max-width: 120px;
  height: 26px;
  padding: 0 7px 0 9px;
  border: none;
  border-radius: 5px;
  background: #f7f7f7;
  color: #4b5563;
  font-size: 12px;
  font-weight: 500;
  outline: none;
  cursor: pointer;
  box-shadow: none;
  transition: background 0.12s ease, color 0.12s ease;
}

.nova-panel-select-trigger:hover {
  background: #f1f1f1;
  color: #111827;
}

.nova-panel-select-trigger:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.nova-panel-select-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nova-panel-select-menu {
  position: absolute;
  left: auto;
  right: 0;
  bottom: calc(100% + 10px);
  width: 236px;
  max-height: 260px;
  overflow: auto;
  padding: 8px;
  border: 1px solid #e5e7eb;
  border-radius: 4px;
  background: #ffffff;
  box-shadow: 0 18px 42px rgba(15, 23, 42, 0.14);
  z-index: 20;
}

.nova-panel-select-menu.is-right {
  left: auto;
  right: 0;
}

.nova-panel-select-option {
  width: 100%;
  display: grid;
  grid-template-columns: 20px 1fr;
  align-items: start;
  gap: 8px;
  padding: 9px 8px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: #202124;
  text-align: left;
  cursor: pointer;
}

.nova-panel-select-option:hover {
  background: #f9fafb;
  color: #111827;
}

.nova-panel-select-option.is-selected {
  background: transparent;
  color: #202124;
}

.nova-panel-select-check {
  width: 18px;
  height: 18px;
  margin-top: 1px;
  color: #5f6368;
}

.nova-panel-select-option-title {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
}

.nova-panel-select-option-label {
  font-size: 14px;
  font-weight: 500;
  color: #202124;
}

.nova-panel-select-badge {
  display: inline-flex;
  align-items: center;
  height: 18px;
  padding: 0 5px;
  border-radius: 3px;
  background: #f1f3f4;
  color: #3c4043;
  font-size: 12px;
  font-weight: 400;
}

.nova-panel-select-option-meta {
  display: block;
  margin-top: 5px;
  font-size: 13px;
  color: #6f6f6f;
}

.nova-panel-select-empty {
  padding: 10px;
  color: #6b7280;
  font-size: 12px;
}

.nova-spin {
  animation: nova-spin 1s linear infinite;
}

@keyframes nova-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@media (max-width: 1100px) {
  .nova-panel {
    min-height: 420px;
  }
}

/* Nova File Attachments UI */
.nova-attachments-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 4px 6px 6px;
}

.nova-attachment-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px;
  border-radius: 6px;
  background: #f3f4f6;
  border: 1px solid #e5e7eb;
  font-size: 11px;
  color: #374151;
  cursor: pointer;
  transition: all 0.12s ease;
}

.nova-attachment-chip:hover {
  background: #e5e7eb;
  border-color: #d1d5db;
}

.nova-attachment-chip.is-failed {
  background: #fef2f2;
  border-color: #fca5a5;
  color: #991b1b;
}

.nova-attachment-chip-name {
  font-weight: 500;
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nova-attachment-chip-size {
  color: #6b7280;
  font-size: 10px;
}

.nova-attachment-chip-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: #9ca3af;
  cursor: pointer;
  padding: 0;
}

.nova-attachment-chip-remove:hover {
  background: #d1d5db;
  color: #111827;
}

/* Attachment Preview Modal */
.nova-attachment-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(15, 23, 42, 0.4);
  backdrop-filter: blur(2px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 20px;
}

.nova-attachment-modal {
  width: 100%;
  max-width: 640px;
  max-height: 80vh;
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.nova-attachment-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid #e5e7eb;
}

.nova-attachment-modal-title {
  font-size: 14px;
  font-weight: 600;
  color: #111827;
  display: flex;
  align-items: center;
  gap: 8px;
}

.nova-attachment-modal-badge {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 4px;
  background: #eff6ff;
  color: #2563eb;
  border: 1px solid #bfdbfe;
}

.nova-attachment-modal-body {
  padding: 16px;
  overflow-y: auto;
  flex: 1;
  font-size: 12px;
  color: #374151;
}

.nova-attachment-modal-body pre {
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 12px;
  font-family: Consolas, monospace;
  font-size: 11px;
  white-space: pre-wrap;
  word-break: break-all;
  max-height: 380px;
  overflow-y: auto;
}

.nova-attachment-modal-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 18px;
  border-top: 1px solid #e5e7eb;
  background: #fbfbfb;
}

.nova-attachment-promote-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 6px;
  background: #2563eb;
  color: #ffffff;
  font-size: 12px;
  font-weight: 500;
  border: none;
  cursor: pointer;
}

.nova-attachment-promote-btn:hover {
  background: #1d4ed8;
}

/* ═══════════════════════════════════════════════════════════════════════════
   CompassX Landing Page — Clean, Minimalist Enterprise Workspace
   ═══════════════════════════════════════════════════════════════════════════ */

.landing-page-root {
  width: 100%;
  max-width: 980px;
  margin: 0 auto;
  padding: 2.25rem 1.5rem 6rem;
  color: var(--color-text, #111827);
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  box-sizing: border-box;
  min-height: min-content;
}

/* ── Centered Header ───────────────────────────────────────────────────────── */

.landing-hero-header {
  text-align: center;
  margin-bottom: 0.25rem;
}

.landing-hero-title {
  font-size: 1.75rem;
  font-weight: 600;
  letter-spacing: -0.025em;
  color: var(--color-text, #111827);
  margin: 0;
  line-height: 1.25;
}

/* ── Omnibar Box ──────────────────────────────────────────────────────────── */

.landing-omnibar-card {
  background: var(--color-surface, #ffffff);
  border: 1px solid var(--color-border, #e5e7eb);
  border-radius: 14px;
  padding: 1rem 1.25rem 0.95rem;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.landing-omnibar-card:focus-within {
  border-color: var(--color-primary, #1b6ef3);
  box-shadow: 0 4px 16px rgba(27, 110, 243, 0.12), 0 0 0 1px var(--color-primary, #1b6ef3);
}

.landing-omnibar-textarea {
  width: 100%;
  border: none;
  outline: none;
  background: transparent;
  color: var(--color-text, #111827);
  font-family: inherit;
  font-size: 0.95rem;
  line-height: 1.5;
  resize: none;
  min-height: 52px;
}

.landing-omnibar-textarea::placeholder {
  color: var(--color-text-subtle, #9ca3af);
}

.landing-omnibar-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding-top: 0.65rem;
  margin-top: 0.25rem;
  border-top: 1px solid var(--color-border, #f3f4f6);
}

.landing-omnibar-hint {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.78rem;
  color: var(--color-text-muted, #6b7280);
}

.landing-hint-icon {
  color: var(--color-primary, #1b6ef3);
  flex-shrink: 0;
}

.landing-omnibar-hint kbd {
  padding: 0.12rem 0.4rem;
  border-radius: 4px;
  background: var(--color-surface-hover, #f3f4f6);
  border: 1px solid var(--color-border, #e5e7eb);
  font-size: 0.7rem;
  font-family: inherit;
}

.landing-omnibar-right-actions {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-left: auto;
}

.landing-omnibar-submit-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 38px;
  padding: 0.5rem 1.25rem;
  border-radius: 8px;
  background: var(--color-primary, #1b6ef3);
  color: #ffffff;
  font-size: 0.85rem;
  font-weight: 600;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  box-shadow: 0 1px 3px rgba(27, 110, 243, 0.2);
  transition: background 0.15s ease, opacity 0.15s ease, transform 0.1s ease;
}

.landing-omnibar-submit-btn:hover:not(:disabled) {
  background: var(--color-primary-hover, #1558c7);
  transform: translateY(-1px);
}

.landing-omnibar-submit-btn:active:not(:disabled) {
  transform: translateY(0);
}

.landing-omnibar-submit-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* ── Filter / Navigation Tabs ─────────────────────────────────────────────── */

.landing-tabs-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 4px 2px 8px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.landing-tabs-row::-webkit-scrollbar {
  display: none;
}

.landing-tab-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 34px;
  padding: 0.4rem 0.95rem;
  border-radius: 9999px;
  background: var(--color-surface, #ffffff);
  border: 1px solid var(--color-border, #e5e7eb);
  color: var(--color-text-muted, #4b5563);
  font-size: 0.82rem;
  font-weight: 550;
  cursor: pointer;
  transition: all 0.12s ease;
  white-space: nowrap;
  flex-shrink: 0;
}

.landing-tab-btn:hover {
  background: var(--color-surface-hover, #f9fafb);
  color: var(--color-text, #111827);
  border-color: var(--color-border-strong, #d1d5db);
}

.landing-tab-btn.active {
  background: var(--color-primary-bg, #ebf2ff);
  color: var(--color-primary, #1b6ef3);
  border-color: rgba(27, 110, 243, 0.35);
  font-weight: 600;
  box-shadow: 0 1px 3px rgba(27, 110, 243, 0.08);
}

/* ── Workspace Items Feed ─────────────────────────────────────────────────── */

.landing-items-card {
  background: var(--color-surface, #ffffff);
  border: 1px solid var(--color-border, #e5e7eb);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
  height: auto;
  width: 100%;
}

.landing-items-list {
  display: flex;
  flex-direction: column;
}

.landing-item-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.9rem 1.25rem;
  border-bottom: 1px solid var(--color-border, #f3f4f6);
  cursor: pointer;
  transition: background 0.12s ease;
  text-decoration: none;
  color: var(--color-text, #111827);
  min-width: 0;
  gap: 1rem;
}

.landing-item-row:last-child {
  border-bottom: none;
}

.landing-item-row:hover {
  background: var(--color-surface-hover, #fafafa);
}

.landing-item-row-left {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  min-width: 0;
  flex: 1;
}

.landing-item-icon-box {
  width: 34px;
  height: 34px;
  border-radius: 7px;
  background: var(--color-surface-hover, #f3f4f6);
  border: 1px solid var(--color-border, #e5e7eb);
  color: var(--color-text-muted, #4b5563);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.landing-item-meta {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}

.landing-item-name-row {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  min-width: 0;
}

.landing-item-name {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--color-text, #111827);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.landing-item-path {
  font-size: 0.75rem;
  color: var(--color-text-muted, #6b7280);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.landing-item-row-right {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  flex-shrink: 0;
}

.landing-item-time {
  font-size: 0.76rem;
  color: var(--color-text-muted, #6b7280);
  white-space: nowrap;
}

.landing-item-type-badge {
  font-size: 0.72rem;
  font-weight: 550;
  color: var(--color-text-muted, #4b5563);
  padding: 0.18rem 0.6rem;
  border-radius: 5px;
  background: var(--color-surface-hover, #f3f4f6);
  border: 1px solid var(--color-border, #e5e7eb);
  text-align: center;
  white-space: nowrap;
}

.landing-item-star-btn {
  background: transparent;
  border: none;
  color: var(--color-text-muted, #9ca3af);
  cursor: pointer;
  padding: 0.35rem;
  border-radius: 5px;
  display: grid;
  place-items: center;
  transition: color 0.12s ease, background 0.12s ease;
}

.landing-item-star-btn:hover {
  color: #f59e0b;
  background: var(--color-surface-hover, rgba(0, 0, 0, 0.04));
}

.landing-item-star-btn.starred {
  color: #f59e0b;
}

.landing-empty-state {
  padding: 3rem 1.5rem;
  text-align: center;
  color: var(--color-text-muted, #6b7280);
  font-size: 0.86rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
}

/* ── Show More Action ─────────────────────────────────────────────────────── */

.landing-show-more-row {
  display: flex;
  justify-content: center;
  margin: 1.25rem 0 3.5rem;
}

.landing-show-more-btn {
  min-height: 38px;
  padding: 0.5rem 1.4rem;
  border-radius: 8px;
  background: var(--color-surface, #ffffff);
  border: 1px solid var(--color-border, #e5e7eb);
  color: var(--color-text, #111827);
  font-size: 0.84rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  transition: all 0.12s ease;
}

.landing-show-more-btn:hover {
  background: var(--color-surface-hover, #f3f4f6);
  border-color: var(--color-border-strong, #d1d5db);
}

/* ── Fullscreen Assistant ─────────────────────────────────────────────────── */

.landing-assistant-fullscreen {
  min-height: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.landing-assistant-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1.25rem;
  border-bottom: 1px solid var(--color-border, #e5e7eb);
  background: var(--color-surface, #ffffff);
}

.landing-assistant-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.7rem;
  border-radius: 6px;
  border: 1px solid var(--color-border, #e5e7eb);
  background: var(--color-surface-hover, #f3f4f6);
  color: var(--color-text, #111827);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
}

.landing-assistant-back-btn:hover {
  border-color: var(--color-primary, #1b6ef3);
  color: var(--color-primary, #1b6ef3);
}

/* ── Responsive Scaling for Smaller Screens ──────────────────────────────── */

@media (max-width: 768px) {
  .landing-page-root {
    padding: 1.5rem 1rem 5rem;
    gap: 1.25rem;
  }

  .landing-hero-title {
    font-size: 1.5rem;
  }

  .landing-omnibar-card {
    padding: 0.85rem 1rem 0.75rem;
  }

  .landing-item-row {
    padding: 0.75rem 0.95rem;
    gap: 0.75rem;
  }

  .landing-item-row-right {
    gap: 0.6rem;
  }
}

@media (max-width: 580px) {
  .landing-page-root {
    padding: 1.25rem 0.75rem 5rem;
    gap: 1rem;
  }

  .landing-omnibar-bottom {
    flex-direction: column;
    align-items: stretch;
    gap: 0.65rem;
  }

  .landing-omnibar-right-actions {
    margin-left: 0;
    width: 100%;
  }

  .landing-omnibar-submit-btn {
    width: 100%;
    min-height: 40px;
  }

  .landing-item-time {
    display: none;
  }

  .landing-item-row-right {
    gap: 0.4rem;
  }
}
/* ═══════════════════════════════════════════════════════════════════════════
   Icons Showcase & Evaluation Gallery
   ═══════════════════════════════════════════════════════════════════════════ */

.icons-showcase-root {
  min-height: calc(100vh - 64px);
  padding: 2.5rem 2rem 5rem;
  max-width: 1200px;
  margin: 0 auto;
  color: var(--color-text, #111827);
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

/* ── Header ────────────────────────────────────────────────────────────────── */

.icons-showcase-header {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.icons-showcase-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.icons-showcase-title {
  font-size: 1.65rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.icons-count-badge {
  font-size: 0.78rem;
  font-weight: 600;
  padding: 0.2rem 0.55rem;
  border-radius: 9999px;
  background: var(--color-primary-bg, #ebf2ff);
  color: var(--color-primary, #1b6ef3);
  border: 1px solid rgba(27, 110, 243, 0.2);
}

.icons-showcase-subtitle {
  font-size: 0.9rem;
  color: var(--color-text-muted, #6b7280);
  margin: 0;
  max-width: 780px;
  line-height: 1.5;
}

/* ── Toolbar & Control Panel ──────────────────────────────────────────────── */

.icons-controls-panel {
  background: var(--color-surface, #ffffff);
  border: 1px solid var(--color-border, #e5e7eb);
  border-radius: 12px;
  padding: 1.15rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
}

.icons-controls-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  flex-wrap: wrap;
}

.icons-search-input-wrapper {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0.85rem;
  border-radius: 8px;
  background: var(--color-surface-hover, #f9fafb);
  border: 1px solid var(--color-border, #e5e7eb);
  min-width: 280px;
  flex: 1;
}

.icons-search-input-wrapper input {
  border: none;
  background: transparent;
  outline: none;
  font-family: inherit;
  font-size: 0.86rem;
  color: var(--color-text, #111827);
  width: 100%;
}

.icons-search-input-wrapper input::placeholder {
  color: var(--color-text-subtle, #9ca3af);
}

.icons-toggles-group {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  flex-wrap: wrap;
}

.icons-control-group {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.82rem;
  color: var(--color-text-muted, #4b5563);
  font-weight: 550;
}

.icons-segmented-btn-group {
  display: inline-flex;
  border-radius: 6px;
  border: 1px solid var(--color-border, #e5e7eb);
  background: var(--color-surface-hover, #f3f4f6);
  padding: 2px;
  gap: 2px;
}

.icons-segment-btn {
  padding: 0.25rem 0.6rem;
  border-radius: 4px;
  border: none;
  background: transparent;
  color: var(--color-text-muted, #6b7280);
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.12s ease;
}

.icons-segment-btn.active {
  background: var(--color-surface, #ffffff);
  color: var(--color-text, #111827);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}

/* Category Filter Pills */
.icons-category-tabs {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  flex-wrap: wrap;
  padding-top: 0.35rem;
  border-top: 1px solid var(--color-border, #f3f4f6);
}

.icons-cat-tab {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.75rem;
  border-radius: 9999px;
  font-size: 0.8rem;
  font-weight: 550;
  background: var(--color-surface, #ffffff);
  border: 1px solid var(--color-border, #e5e7eb);
  color: var(--color-text-muted, #4b5563);
  cursor: pointer;
  transition: all 0.12s ease;
}

.icons-cat-tab:hover {
  background: var(--color-surface-hover, #f9fafb);
  color: var(--color-text, #111827);
}

.icons-cat-tab.active {
  background: var(--color-primary-bg, #ebf2ff);
  border-color: rgba(27, 110, 243, 0.3);
  color: var(--color-primary, #1b6ef3);
  font-weight: 600;
}

/* ── Icon Grid Showcase ───────────────────────────────────────────────────── */

.icons-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1rem;
}

.icon-preview-card {
  background: var(--color-surface, #ffffff);
  border: 1px solid var(--color-border, #e5e7eb);
  border-radius: 10px;
  padding: 1.25rem 1rem 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.75rem;
  cursor: pointer;
  transition: all 0.15s ease;
  position: relative;
}

.icon-preview-card:hover {
  border-color: var(--color-primary, #1b6ef3);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.05);
  transform: translateY(-2px);
}

.icon-display-frame {
  width: 64px;
  height: 64px;
  border-radius: 10px;
  background: var(--color-surface-hover, #f9fafb);
  border: 1px solid var(--color-border, #f3f4f6);
  display: grid;
  place-items: center;
  transition: all 0.15s ease;
}

.icon-preview-card:hover .icon-display-frame {
  background: var(--color-primary-bg, #ebf2ff);
  border-color: rgba(27, 110, 243, 0.15);
}

.icon-info-group {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  width: 100%;
}

.icon-component-name {
  font-size: 0.82rem;
  font-weight: 650;
  color: var(--color-text, #111827);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

.icon-description {
  font-size: 0.72rem;
  color: var(--color-text-muted, #6b7280);
  line-height: 1.4;
  height: 32px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.icon-card-actions {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  width: 100%;
  padding-top: 0.5rem;
  border-top: 1px solid var(--color-border, #f3f4f6);
}

.icon-action-btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  padding: 0.3rem 0.5rem;
  border-radius: 5px;
  border: 1px solid var(--color-border, #e5e7eb);
  background: var(--color-surface, #ffffff);
  color: var(--color-text-muted, #4b5563);
  font-size: 0.74rem;
  font-weight: 550;
  cursor: pointer;
  transition: all 0.12s ease;
}

.icon-action-btn:hover {
  background: var(--color-surface-hover, #f3f4f6);
  color: var(--color-text, #111827);
  border-color: var(--color-border-strong, #d1d5db);
}

/* ── Evaluation Comparison Drawer / Banner ────────────────────────────────── */

.icons-evaluation-box {
  background: var(--color-surface, #ffffff);
  border: 1px solid var(--color-border, #e5e7eb);
  border-radius: 12px;
  padding: 1.25rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.icons-eval-title {
  font-size: 0.95rem;
  font-weight: 700;
  margin: 0;
}

.icons-eval-desc {
  font-size: 0.84rem;
  color: var(--color-text-muted, #6b7280);
  margin: 0;
  line-height: 1.5;
}

.icons-eval-code-snippet {
  background: #1e1e1e;
  color: #d4d4d4;
  padding: 0.85rem 1rem;
  border-radius: 8px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.82rem;
  overflow-x: auto;
}
@font-face{font-display:block;font-family:KaTeX_AMS;font-style:normal;font-weight:400;src:url(/assets/KaTeX_AMS-Regular-BQhdFMY1.woff2) format("woff2"),url(/assets/KaTeX_AMS-Regular-DMm9YOAa.woff) format("woff"),url(/assets/KaTeX_AMS-Regular-DRggAlZN.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Caligraphic;font-style:normal;font-weight:700;src:url(/assets/KaTeX_Caligraphic-Bold-Dq_IR9rO.woff2) format("woff2"),url(/assets/KaTeX_Caligraphic-Bold-BEiXGLvX.woff) format("woff"),url(/assets/KaTeX_Caligraphic-Bold-ATXxdsX0.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Caligraphic;font-style:normal;font-weight:400;src:url(/assets/KaTeX_Caligraphic-Regular-Di6jR-x-.woff2) format("woff2"),url(/assets/KaTeX_Caligraphic-Regular-CTRA-rTL.woff) format("woff"),url(/assets/KaTeX_Caligraphic-Regular-wX97UBjC.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Fraktur;font-style:normal;font-weight:700;src:url(/assets/KaTeX_Fraktur-Bold-CL6g_b3V.woff2) format("woff2"),url(/assets/KaTeX_Fraktur-Bold-BsDP51OF.woff) format("woff"),url(/assets/KaTeX_Fraktur-Bold-BdnERNNW.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Fraktur;font-style:normal;font-weight:400;src:url(/assets/KaTeX_Fraktur-Regular-CTYiF6lA.woff2) format("woff2"),url(/assets/KaTeX_Fraktur-Regular-Dxdc4cR9.woff) format("woff"),url(/assets/KaTeX_Fraktur-Regular-CB_wures.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Main;font-style:normal;font-weight:700;src:url(/assets/KaTeX_Main-Bold-Cx986IdX.woff2) format("woff2"),url(/assets/KaTeX_Main-Bold-Jm3AIy58.woff) format("woff"),url(/assets/KaTeX_Main-Bold-waoOVXN0.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Main;font-style:italic;font-weight:700;src:url(/assets/KaTeX_Main-BoldItalic-DxDJ3AOS.woff2) format("woff2"),url(/assets/KaTeX_Main-BoldItalic-SpSLRI95.woff) format("woff"),url(/assets/KaTeX_Main-BoldItalic-DzxPMmG6.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Main;font-style:italic;font-weight:400;src:url(/assets/KaTeX_Main-Italic-NWA7e6Wa.woff2) format("woff2"),url(/assets/KaTeX_Main-Italic-BMLOBm91.woff) format("woff"),url(/assets/KaTeX_Main-Italic-3WenGoN9.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Main;font-style:normal;font-weight:400;src:url(/assets/KaTeX_Main-Regular-B22Nviop.woff2) format("woff2"),url(/assets/KaTeX_Main-Regular-Dr94JaBh.woff) format("woff"),url(/assets/KaTeX_Main-Regular-ypZvNtVU.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Math;font-style:italic;font-weight:700;src:url(/assets/KaTeX_Math-BoldItalic-CZnvNsCZ.woff2) format("woff2"),url(/assets/KaTeX_Math-BoldItalic-iY-2wyZ7.woff) format("woff"),url(/assets/KaTeX_Math-BoldItalic-B3XSjfu4.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Math;font-style:italic;font-weight:400;src:url(/assets/KaTeX_Math-Italic-t53AETM-.woff2) format("woff2"),url(/assets/KaTeX_Math-Italic-DA0__PXp.woff) format("woff"),url(/assets/KaTeX_Math-Italic-flOr_0UB.ttf) format("truetype")}@font-face{font-display:block;font-family:"KaTeX_SansSerif";font-style:normal;font-weight:700;src:url(/assets/KaTeX_SansSerif-Bold-D1sUS0GD.woff2) format("woff2"),url(/assets/KaTeX_SansSerif-Bold-DbIhKOiC.woff) format("woff"),url(/assets/KaTeX_SansSerif-Bold-CFMepnvq.ttf) format("truetype")}@font-face{font-display:block;font-family:"KaTeX_SansSerif";font-style:italic;font-weight:400;src:url(/assets/KaTeX_SansSerif-Italic-C3H0VqGB.woff2) format("woff2"),url(/assets/KaTeX_SansSerif-Italic-DN2j7dab.woff) format("woff"),url(/assets/KaTeX_SansSerif-Italic-YYjJ1zSn.ttf) format("truetype")}@font-face{font-display:block;font-family:"KaTeX_SansSerif";font-style:normal;font-weight:400;src:url(/assets/KaTeX_SansSerif-Regular-DDBCnlJ7.woff2) format("woff2"),url(/assets/KaTeX_SansSerif-Regular-CS6fqUqJ.woff) format("woff"),url(/assets/KaTeX_SansSerif-Regular-BNo7hRIc.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Script;font-style:normal;font-weight:400;src:url(/assets/KaTeX_Script-Regular-D3wIWfF6.woff2) format("woff2"),url(/assets/KaTeX_Script-Regular-D5yQViql.woff) format("woff"),url(/assets/KaTeX_Script-Regular-C5JkGWo-.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Size1;font-style:normal;font-weight:400;src:url(/assets/KaTeX_Size1-Regular-mCD8mA8B.woff2) format("woff2"),url(/assets/KaTeX_Size1-Regular-C195tn64.woff) format("woff"),url(/assets/KaTeX_Size1-Regular-Dbsnue_I.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Size2;font-style:normal;font-weight:400;src:url(/assets/KaTeX_Size2-Regular-Dy4dx90m.woff2) format("woff2"),url(/assets/KaTeX_Size2-Regular-oD1tc_U0.woff) format("woff"),url(/assets/KaTeX_Size2-Regular-B7gKUWhC.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Size3;font-style:normal;font-weight:400;src:url(data:font/woff2;base64,d09GMgABAAAAAA4oAA4AAAAAHbQAAA3TAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAABmAAgRQIDgmcDBEICo1oijYBNgIkA14LMgAEIAWJAAeBHAyBHBvbGiMRdnO0IkRRkiYDgr9KsJ1NUAf2kILNxgUmgqIgq1P89vcbIcmsQbRps3vCcXdYOKSWEPEKgZgQkprQQsxIXUgq0DqpGKmIvrgkeVGtEQD9DzAO29fM9jYhxZEsL2FeURH2JN4MIcTdO049NCVdxQ/w9NrSYFEBKTDKpLKfNkCGDc1RwjZLQcm3vqJ2UW9Xfa3tgAHz6ivp6vgC2yD4/6352ndnN0X0TL7seypkjZlMsjmZnf0Mm5Q+JykRWQBKCVCVPbARPXWyQtb5VgLB6Biq7/Uixcj2WGqdI8tGSgkuRG+t910GKP2D7AQH0DB9FMDW/obJZ8giFI3Wg8Cvevz0M+5m0rTh7XDBlvo9Y4vm13EXmfttwI4mBo1EG15fxJhUiCLbiiyCf/ZA6MFAhg3pGIZGdGIVjtPn6UcMk9A/UUr9PhoNsCENw1APAq0gpH73e+M+0ueyHbabc3vkbcdtzcf/fiy+NxQEjf9ud/ELBHAXJ0nk4z+MXH2Ev/kWyV4k7SkvpPc9Qr38F6RPWnM9cN6DJ0AdD1BhtgABtmoRoFCvPsBAumNm6soZG2Gk5GyVTo2sJncSyp0jQTYoR6WDvTwaaEcHsxHfvuWhHA3a6bN7twRKtcGok6NsCi7jYRrM2jExsUFMxMQYuJbMhuWNOumEJy9hi29Dmg5zMp/A5+hhPG19j1vBrq8JTLr8ki5VLPmG/PynJHVul440bxg5xuymHUFPBshC+nA9I1FmwbRBTNHAcik3Oae0cxKoI3MOriM42UrPe51nsaGxJ+WfXubAsP84aabUlQSJ1IiE0iPETLUU4CATgfXSCSpuRFRmCGbO+wSpAnzaeaCYW1VNEysRtuXCEL1kUFUbbtMv3Tilt/1c11jt3Q5bbMa84cpWipp8Elw3MZhOHsOlwwVUQM3lAR35JiFQbaYCRnMF2lxAWoOg2gyoIV4PouX8HytNIfLhqpJtXB4vjiViUI8IJ7bkC4ikkQvKksnOTKICwnqWSZ9YS5f0WCxmpgjbIq7EJcM4aI2nmhLNY2JIUgOjXZFWBHb+x5oh6cwb0Tv1ackHdKi0I9OO2wE9aogIOn540CCCziyhN+IaejtgAONKznHlHyutPrHGwCx9S6B8kfS4Mfi4Eyv7OU730bT1SCBjt834cXsf43zVjPUqqJjgrjeGnBxSG4aYAKFuVbeCfkDIjAqMb6yLNIbCuvXhMH2/+k2vkNpkORhR59N1CkzoOENvneIosjYmuTxlhUzaGEJQ/iWqx4dmwpmKjrwTiTGTCVozNAYqk/zXOndWxuWSmJkQpJw3pK5KX6QrLt5LATMqpmPAQhkhK6PUjzHUn7E0gHE0kPE0iKkolgkUx9SZmVAdDgpffdyJKg3k7VmzYGCwVXGz/tXmkOIp+vcWs+EMuhhvN0h9uhfzWJziBQmCREGSIFmQIkgVpAnSBRmC//6hkLZwaVhwxlrJSOdqlFtOYxlau9F2QN5Y98xmIAsiM1HVp2VFX+DHHGg6Ecjh3vmqtidX3qHI2qycTk/iwxSt5UzTmEP92ZBnEWTk4Mx8Mpl78ZDokxg/KWb+Q0QkvdKVmq3TMW+RXEgrsziSAfNXFMhDc60N5N9jQzjfO0kBKpUZl0ZmwJ41j/B9Hz6wmRaJB84niNmQrzp9eSlQCDDzazGDdVi3P36VZQ+Jy4f9UBNp+3zTjqI4abaFAm+GShVaXlsGdF3FYzZcDI6cori4kMxUECl9IjJZpzkvitAoxKue+90pDMvcKRxLl53TmOKCmV/xRolNKSqqUxc6LStOETmFOiLZZptlZepcKiAzteG8PEdpnQpbOMNcMsR4RR2Bs0cKFEvSmIjAFcnarqwUL4lDhHmnVkwu1IwshbiCcgvOheZuYyOteufZZwlcTlLgnZ3o/WcYdzZHW/WGaqaVfmTZ1aWCceJjkbZqsfbkOtcFlUZM/jy+hXHDbaUobWqqXaeWobbLO99yG5N3U4wxco0rQGGcOLASFMXeJoham8M+/x6O2WywK2l4HGbq1CoUyC/IZikQhdq3SiuNrvAEj0AVu9x2x3lp/xWzahaxidezFVtdcb5uEnzyl0ZmYiuKI0exvCd4Xc9CV1KB0db00z92wDPde0kukbvZIWN6jUWFTmPIC/Y4UPCm8UfDTFZpZNon1qLFTkBhxzB+FjQRA2Q/YRJT8pQigslMaUpFyAG8TMlXigiqmAZX4xgijKjRlGpLE0GdplRfCaJo0JQaSxNBk6ZmMzcya0FmrcisDdn0Q3HI2sWSppYigmlM1XT/kLQZSNpMJG0WkjYbSZuDpM1F0uYhFc1HxU4m1QJjDK6iL0S5uSj5rgXc3RejEigtcRBtqYPQsiTskmO5vosV+q4VGIKbOkDg0jtRrq+Em1YloaTFar3EGr1EUC8R0kus1Uus00usL97ABr2BjXoDm/QGNhuWtMVBKOwg/i78lT7hBsAvDmwHc/ao3vmUbBmhjeYySZNWvGkfZAgISDSaDo1SVpzGDsAEkF8B+gEapViUoZgUWXcRIGFZNm6gWbAKk0bp0k1MHG9fLYtV4iS2SmLEQFARzRcnf9PUS0LVn05/J9MiRRBU3v2IrvW974v4N00L7ZMk0wXP1409CHo/an8zTRHD3eSJ6m8D4YMkZNl3M79sqeuAsr/m3f+8/yl7A50aiAEJgeBeMWzu7ui9UfUBCe2TIqZIoOd/3/udRBOQidQZUERzb2/VwZN1H/Sju82ew2H2Wfr6qvfVf3hqwDvAIpkQVFy4B9Pe9e4/XvPeceu7h3dvO56iJPf0+A6cqA2ip18ER+iFgggiuOkvj24bby0N9j2UHIkgqIt+sVgfodC4YghLSMjSZbH0VR/6dMDrYJeKHilKTemt6v6kvzvn3/RrdWtr0GoN/xL+Sex/cPYLUpepx9cz/D46UPU5KXgAQa+NDps1v6J3xP1i2HtaDB0M9aX2deA7SYff//+gUCovMmIK/qfsFcOk+4Y5ZN97XlG6zebqtMbKgeRFi51vnxTQYBUik2rS/Cn6PC8ADR8FGxsRPB82dzfND90gIcshOcYUkfjherBz53odpm6TP8txlwOZ71xmfHHOvq053qFF/MRlS3jP0ELudrf2OeN8DHvp6ZceLe8qKYvWz/7yp0u4dKPfli3CYq0O13Ih71mylJ80tOi10On8wi+F4+LWgDPeJ30msSQt9/vkmHq9/Lvo2b461mP801v3W4xTcs6CbvF9UDdrSt+A8OUbpSh55qAUFXWznBBfdeJ8a4d7ugT5tvxUza3h9m4H7ptTqiG4z0g5dc0X29OcGlhpGFMpQo9ytTS+NViZpNdvU4kWx+LKxNY10kQ1yqGXrhe4/1nvP7E+nd5A92TtaRplbHSqoIdOqtRWti+fkB5/n1+/VvCmz12pG1kpQWsfi1ftlBobm0bpngs16CHkbIwdLnParxtTV3QYRlfJ0KFskH7pdN/YDn+yRuSd7sNH3aO0DYPggk6uWuXrfOc+fa3VTxFVvKaNxHsiHmsXyCLIE5yuOeN3/Jdf8HBL/5M6shjyhxHx9BjB1O0+4NLOnjLLSxwO7ukN4jMbOIcD879KLSi6Pk61Oqm2377n8079PXEEQ7cy7OKEC9nbpet118fxweTafpt69x/Bt8UqGzNQt7aelpc44dn5cqhwf71+qKp/Zf/+a0zcizOUWpl/iBcSXip0pplkatCchoH5c5aUM8I7/dWxAej8WicPL1URFZ9BDJelUwEwTkGqUhgSlydVes95YdXvhh9Gfz/aeFWvgVb4tuLbcv4+wLdutVZv/cUonwBD/6eDlE0aSiKK/uoH3+J1wDE/jMVqY2ysGufN84oIXB0sPzy8ollX/LegY74DgJXJR57sn+VGza0x3DnuIgABFM15LmajjjsNlYj+JEZGbuRYcAMOWxFkPN2w6Wd46xo4gVWQR/X4lyI/R6K/YK0110GzudPRW7Y+UOBGTfNNzHeYT0fiH0taunBpq9HEW8OKSaBGj21L0MqenEmNRWBAWDWAk4CpNoEZJ2tTaPFgbQYj8HxtFilErs3BTRwT8uO1NXQaWfIotchmPkAF5mMBAliEmZiOGVgCG9LgRzpscMAOOwowlT3JhusdazXGSC/hxR3UlmWVwWHpOIKheqONvjyhSiTHIkVUco5bnji8m//zL7PKaT1Vl5I6UE609f+gkr6MZKVyKc7zJRmCahLsdlyA5fdQkRSan9LgnnLEyGSkaKJCJog0wAgvepWBt80+1yKln1bMVtCljfNWDueKLsWwaEbBSfSPTEmVRsUcYYMnEjcjeyCZzBXK9E9BYBXLKjOSpUDR+nEV3TFSUdQaz+ot98QxgXwx0GQ+EEUAKB2qZPkQQ0GqFD8UPFMqyaCHM24BZmSGic9EYMagKizOw9Hz50DMrDLrqqLkTAhplMictiCAx5S3BIUQdeJeLnBy2CNtMfz6cV4u8XKoFZQesbf9YZiIERiHjaNodDW6LgcirX/mPnJIkBGDUpTBhSa0EIr38D5hCIszhCM8URGBqImoWjpvpt1ebu/v3Gl3qJfMnNM+9V+kiRFyROTPHQWOcs1dNW94/ukKMPZBvDi55i5CttdeJz84DLngLqjcdwEZ87bFFR8CIG35OAkDVN6VRDZ7aq67NteYqZ2lpT8oYB2CytoBd6VuAx4WgiAsnuj3WohG+LugzXiQRDeM3XYXlULv4dp5VFYC) format("woff2"),url(/assets/KaTeX_Size3-Regular-CTq5MqoE.woff) format("woff"),url(/assets/KaTeX_Size3-Regular-DgpXs0kz.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Size4;font-style:normal;font-weight:400;src:url(/assets/KaTeX_Size4-Regular-Dl5lxZxV.woff2) format("woff2"),url(/assets/KaTeX_Size4-Regular-BF-4gkZK.woff) format("woff"),url(/assets/KaTeX_Size4-Regular-DWFBv043.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Typewriter;font-style:normal;font-weight:400;src:url(/assets/KaTeX_Typewriter-Regular-CO6r4hn1.woff2) format("woff2"),url(/assets/KaTeX_Typewriter-Regular-C0xS9mPB.woff) format("woff"),url(/assets/KaTeX_Typewriter-Regular-D3Ib7_Hf.ttf) format("truetype")}.katex{font:normal 1.21em KaTeX_Main,Times New Roman,serif;line-height:1.2;position:relative;text-indent:0;text-rendering:auto}.katex *{-ms-high-contrast-adjust:none!important;border-color:currentColor}.katex .katex-version:after{content:"0.16.45"}.katex .katex-mathml{clip:rect(1px,1px,1px,1px);border:0;height:1px;overflow:hidden;padding:0;position:absolute;width:1px}.katex .katex-html>.newline{display:block}.katex .base{position:relative;white-space:nowrap;width:-webkit-min-content;width:-moz-min-content;width:min-content}.katex .base,.katex .strut{display:inline-block}.katex .textbf{font-weight:700}.katex .textit{font-style:italic}.katex .textrm{font-family:KaTeX_Main}.katex .textsf{font-family:KaTeX_SansSerif}.katex .texttt{font-family:KaTeX_Typewriter}.katex .mathnormal{font-family:KaTeX_Math;font-style:italic}.katex .mathit{font-family:KaTeX_Main;font-style:italic}.katex .mathrm{font-style:normal}.katex .mathbf{font-family:KaTeX_Main;font-weight:700}.katex .boldsymbol{font-family:KaTeX_Math;font-style:italic;font-weight:700}.katex .amsrm,.katex .mathbb,.katex .textbb{font-family:KaTeX_AMS}.katex .mathcal{font-family:KaTeX_Caligraphic}.katex .mathfrak,.katex .textfrak{font-family:KaTeX_Fraktur}.katex .mathboldfrak,.katex .textboldfrak{font-family:KaTeX_Fraktur;font-weight:700}.katex .mathtt{font-family:KaTeX_Typewriter}.katex .mathscr,.katex .textscr{font-family:KaTeX_Script}.katex .mathsf,.katex .textsf{font-family:KaTeX_SansSerif}.katex .mathboldsf,.katex .textboldsf{font-family:KaTeX_SansSerif;font-weight:700}.katex .mathitsf,.katex .mathsfit,.katex .textitsf{font-family:KaTeX_SansSerif;font-style:italic}.katex .mainrm{font-family:KaTeX_Main;font-style:normal}.katex .vlist-t{border-collapse:collapse;display:inline-table;table-layout:fixed}.katex .vlist-r{display:table-row}.katex .vlist{display:table-cell;position:relative;vertical-align:bottom}.katex .vlist>span{display:block;height:0;position:relative}.katex .vlist>span>span{display:inline-block}.katex .vlist>span>.pstrut{overflow:hidden;width:0}.katex .vlist-t2{margin-right:-2px}.katex .vlist-s{display:table-cell;font-size:1px;min-width:2px;vertical-align:bottom;width:2px}.katex .vbox{align-items:baseline;display:inline-flex;flex-direction:column}.katex .hbox{width:100%}.katex .hbox,.katex .thinbox{display:inline-flex;flex-direction:row}.katex .thinbox{max-width:0;width:0}.katex .msupsub{text-align:left}.katex .mfrac>span>span{text-align:center}.katex .mfrac .frac-line{border-bottom-style:solid;display:inline-block;width:100%}.katex .hdashline,.katex .hline,.katex .mfrac .frac-line,.katex .overline .overline-line,.katex .rule,.katex .underline .underline-line{min-height:1px}.katex .mspace{display:inline-block}.katex .smash{display:inline;line-height:0}.katex .clap,.katex .llap,.katex .rlap{position:relative;width:0}.katex .clap>.inner,.katex .llap>.inner,.katex .rlap>.inner{position:absolute}.katex .clap>.fix,.katex .llap>.fix,.katex .rlap>.fix{display:inline-block}.katex .llap>.inner{right:0}.katex .clap>.inner,.katex .rlap>.inner{left:0}.katex .clap>.inner>span{margin-left:-50%;margin-right:50%}.katex .rule{border:0 solid;display:inline-block;position:relative}.katex .hline,.katex .overline .overline-line,.katex .underline .underline-line{border-bottom-style:solid;display:inline-block;width:100%}.katex .hdashline{border-bottom-style:dashed;display:inline-block;width:100%}.katex .sqrt>.root{margin-left:.2777777778em;margin-right:-.5555555556em}.katex .fontsize-ensurer.reset-size1.size1,.katex .sizing.reset-size1.size1{font-size:1em}.katex .fontsize-ensurer.reset-size1.size2,.katex .sizing.reset-size1.size2{font-size:1.2em}.katex .fontsize-ensurer.reset-size1.size3,.katex .sizing.reset-size1.size3{font-size:1.4em}.katex .fontsize-ensurer.reset-size1.size4,.katex .sizing.reset-size1.size4{font-size:1.6em}.katex .fontsize-ensurer.reset-size1.size5,.katex .sizing.reset-size1.size5{font-size:1.8em}.katex .fontsize-ensurer.reset-size1.size6,.katex .sizing.reset-size1.size6{font-size:2em}.katex .fontsize-ensurer.reset-size1.size7,.katex .sizing.reset-size1.size7{font-size:2.4em}.katex .fontsize-ensurer.reset-size1.size8,.katex .sizing.reset-size1.size8{font-size:2.88em}.katex .fontsize-ensurer.reset-size1.size9,.katex .sizing.reset-size1.size9{font-size:3.456em}.katex .fontsize-ensurer.reset-size1.size10,.katex .sizing.reset-size1.size10{font-size:4.148em}.katex .fontsize-ensurer.reset-size1.size11,.katex .sizing.reset-size1.size11{font-size:4.976em}.katex .fontsize-ensurer.reset-size2.size1,.katex .sizing.reset-size2.size1{font-size:.8333333333em}.katex .fontsize-ensurer.reset-size2.size2,.katex .sizing.reset-size2.size2{font-size:1em}.katex .fontsize-ensurer.reset-size2.size3,.katex .sizing.reset-size2.size3{font-size:1.1666666667em}.katex .fontsize-ensurer.reset-size2.size4,.katex .sizing.reset-size2.size4{font-size:1.3333333333em}.katex .fontsize-ensurer.reset-size2.size5,.katex .sizing.reset-size2.size5{font-size:1.5em}.katex .fontsize-ensurer.reset-size2.size6,.katex .sizing.reset-size2.size6{font-size:1.6666666667em}.katex .fontsize-ensurer.reset-size2.size7,.katex .sizing.reset-size2.size7{font-size:2em}.katex .fontsize-ensurer.reset-size2.size8,.katex .sizing.reset-size2.size8{font-size:2.4em}.katex .fontsize-ensurer.reset-size2.size9,.katex .sizing.reset-size2.size9{font-size:2.88em}.katex .fontsize-ensurer.reset-size2.size10,.katex .sizing.reset-size2.size10{font-size:3.4566666667em}.katex .fontsize-ensurer.reset-size2.size11,.katex .sizing.reset-size2.size11{font-size:4.1466666667em}.katex .fontsize-ensurer.reset-size3.size1,.katex .sizing.reset-size3.size1{font-size:.7142857143em}.katex .fontsize-ensurer.reset-size3.size2,.katex .sizing.reset-size3.size2{font-size:.8571428571em}.katex .fontsize-ensurer.reset-size3.size3,.katex .sizing.reset-size3.size3{font-size:1em}.katex .fontsize-ensurer.reset-size3.size4,.katex .sizing.reset-size3.size4{font-size:1.1428571429em}.katex .fontsize-ensurer.reset-size3.size5,.katex .sizing.reset-size3.size5{font-size:1.2857142857em}.katex .fontsize-ensurer.reset-size3.size6,.katex .sizing.reset-size3.size6{font-size:1.4285714286em}.katex .fontsize-ensurer.reset-size3.size7,.katex .sizing.reset-size3.size7{font-size:1.7142857143em}.katex .fontsize-ensurer.reset-size3.size8,.katex .sizing.reset-size3.size8{font-size:2.0571428571em}.katex .fontsize-ensurer.reset-size3.size9,.katex .sizing.reset-size3.size9{font-size:2.4685714286em}.katex .fontsize-ensurer.reset-size3.size10,.katex .sizing.reset-size3.size10{font-size:2.9628571429em}.katex .fontsize-ensurer.reset-size3.size11,.katex .sizing.reset-size3.size11{font-size:3.5542857143em}.katex .fontsize-ensurer.reset-size4.size1,.katex .sizing.reset-size4.size1{font-size:.625em}.katex .fontsize-ensurer.reset-size4.size2,.katex .sizing.reset-size4.size2{font-size:.75em}.katex .fontsize-ensurer.reset-size4.size3,.katex .sizing.reset-size4.size3{font-size:.875em}.katex .fontsize-ensurer.reset-size4.size4,.katex .sizing.reset-size4.size4{font-size:1em}.katex .fontsize-ensurer.reset-size4.size5,.katex .sizing.reset-size4.size5{font-size:1.125em}.katex .fontsize-ensurer.reset-size4.size6,.katex .sizing.reset-size4.size6{font-size:1.25em}.katex .fontsize-ensurer.reset-size4.size7,.katex .sizing.reset-size4.size7{font-size:1.5em}.katex .fontsize-ensurer.reset-size4.size8,.katex .sizing.reset-size4.size8{font-size:1.8em}.katex .fontsize-ensurer.reset-size4.size9,.katex .sizing.reset-size4.size9{font-size:2.16em}.katex .fontsize-ensurer.reset-size4.size10,.katex .sizing.reset-size4.size10{font-size:2.5925em}.katex .fontsize-ensurer.reset-size4.size11,.katex .sizing.reset-size4.size11{font-size:3.11em}.katex .fontsize-ensurer.reset-size5.size1,.katex .sizing.reset-size5.size1{font-size:.5555555556em}.katex .fontsize-ensurer.reset-size5.size2,.katex .sizing.reset-size5.size2{font-size:.6666666667em}.katex .fontsize-ensurer.reset-size5.size3,.katex .sizing.reset-size5.size3{font-size:.7777777778em}.katex .fontsize-ensurer.reset-size5.size4,.katex .sizing.reset-size5.size4{font-size:.8888888889em}.katex .fontsize-ensurer.reset-size5.size5,.katex .sizing.reset-size5.size5{font-size:1em}.katex .fontsize-ensurer.reset-size5.size6,.katex .sizing.reset-size5.size6{font-size:1.1111111111em}.katex .fontsize-ensurer.reset-size5.size7,.katex .sizing.reset-size5.size7{font-size:1.3333333333em}.katex .fontsize-ensurer.reset-size5.size8,.katex .sizing.reset-size5.size8{font-size:1.6em}.katex .fontsize-ensurer.reset-size5.size9,.katex .sizing.reset-size5.size9{font-size:1.92em}.katex .fontsize-ensurer.reset-size5.size10,.katex .sizing.reset-size5.size10{font-size:2.3044444444em}.katex .fontsize-ensurer.reset-size5.size11,.katex .sizing.reset-size5.size11{font-size:2.7644444444em}.katex .fontsize-ensurer.reset-size6.size1,.katex .sizing.reset-size6.size1{font-size:.5em}.katex .fontsize-ensurer.reset-size6.size2,.katex .sizing.reset-size6.size2{font-size:.6em}.katex .fontsize-ensurer.reset-size6.size3,.katex .sizing.reset-size6.size3{font-size:.7em}.katex .fontsize-ensurer.reset-size6.size4,.katex .sizing.reset-size6.size4{font-size:.8em}.katex .fontsize-ensurer.reset-size6.size5,.katex .sizing.reset-size6.size5{font-size:.9em}.katex .fontsize-ensurer.reset-size6.size6,.katex .sizing.reset-size6.size6{font-size:1em}.katex .fontsize-ensurer.reset-size6.size7,.katex .sizing.reset-size6.size7{font-size:1.2em}.katex .fontsize-ensurer.reset-size6.size8,.katex .sizing.reset-size6.size8{font-size:1.44em}.katex .fontsize-ensurer.reset-size6.size9,.katex .sizing.reset-size6.size9{font-size:1.728em}.katex .fontsize-ensurer.reset-size6.size10,.katex .sizing.reset-size6.size10{font-size:2.074em}.katex .fontsize-ensurer.reset-size6.size11,.katex .sizing.reset-size6.size11{font-size:2.488em}.katex .fontsize-ensurer.reset-size7.size1,.katex .sizing.reset-size7.size1{font-size:.4166666667em}.katex .fontsize-ensurer.reset-size7.size2,.katex .sizing.reset-size7.size2{font-size:.5em}.katex .fontsize-ensurer.reset-size7.size3,.katex .sizing.reset-size7.size3{font-size:.5833333333em}.katex .fontsize-ensurer.reset-size7.size4,.katex .sizing.reset-size7.size4{font-size:.6666666667em}.katex .fontsize-ensurer.reset-size7.size5,.katex .sizing.reset-size7.size5{font-size:.75em}.katex .fontsize-ensurer.reset-size7.size6,.katex .sizing.reset-size7.size6{font-size:.8333333333em}.katex .fontsize-ensurer.reset-size7.size7,.katex .sizing.reset-size7.size7{font-size:1em}.katex .fontsize-ensurer.reset-size7.size8,.katex .sizing.reset-size7.size8{font-size:1.2em}.katex .fontsize-ensurer.reset-size7.size9,.katex .sizing.reset-size7.size9{font-size:1.44em}.katex .fontsize-ensurer.reset-size7.size10,.katex .sizing.reset-size7.size10{font-size:1.7283333333em}.katex .fontsize-ensurer.reset-size7.size11,.katex .sizing.reset-size7.size11{font-size:2.0733333333em}.katex .fontsize-ensurer.reset-size8.size1,.katex .sizing.reset-size8.size1{font-size:.3472222222em}.katex .fontsize-ensurer.reset-size8.size2,.katex .sizing.reset-size8.size2{font-size:.4166666667em}.katex .fontsize-ensurer.reset-size8.size3,.katex .sizing.reset-size8.size3{font-size:.4861111111em}.katex .fontsize-ensurer.reset-size8.size4,.katex .sizing.reset-size8.size4{font-size:.5555555556em}.katex .fontsize-ensurer.reset-size8.size5,.katex .sizing.reset-size8.size5{font-size:.625em}.katex .fontsize-ensurer.reset-size8.size6,.katex .sizing.reset-size8.size6{font-size:.6944444444em}.katex .fontsize-ensurer.reset-size8.size7,.katex .sizing.reset-size8.size7{font-size:.8333333333em}.katex .fontsize-ensurer.reset-size8.size8,.katex .sizing.reset-size8.size8{font-size:1em}.katex .fontsize-ensurer.reset-size8.size9,.katex .sizing.reset-size8.size9{font-size:1.2em}.katex .fontsize-ensurer.reset-size8.size10,.katex .sizing.reset-size8.size10{font-size:1.4402777778em}.katex .fontsize-ensurer.reset-size8.size11,.katex .sizing.reset-size8.size11{font-size:1.7277777778em}.katex .fontsize-ensurer.reset-size9.size1,.katex .sizing.reset-size9.size1{font-size:.2893518519em}.katex .fontsize-ensurer.reset-size9.size2,.katex .sizing.reset-size9.size2{font-size:.3472222222em}.katex .fontsize-ensurer.reset-size9.size3,.katex .sizing.reset-size9.size3{font-size:.4050925926em}.katex .fontsize-ensurer.reset-size9.size4,.katex .sizing.reset-size9.size4{font-size:.462962963em}.katex .fontsize-ensurer.reset-size9.size5,.katex .sizing.reset-size9.size5{font-size:.5208333333em}.katex .fontsize-ensurer.reset-size9.size6,.katex .sizing.reset-size9.size6{font-size:.5787037037em}.katex .fontsize-ensurer.reset-size9.size7,.katex .sizing.reset-size9.size7{font-size:.6944444444em}.katex .fontsize-ensurer.reset-size9.size8,.katex .sizing.reset-size9.size8{font-size:.8333333333em}.katex .fontsize-ensurer.reset-size9.size9,.katex .sizing.reset-size9.size9{font-size:1em}.katex .fontsize-ensurer.reset-size9.size10,.katex .sizing.reset-size9.size10{font-size:1.2002314815em}.katex .fontsize-ensurer.reset-size9.size11,.katex .sizing.reset-size9.size11{font-size:1.4398148148em}.katex .fontsize-ensurer.reset-size10.size1,.katex .sizing.reset-size10.size1{font-size:.2410800386em}.katex .fontsize-ensurer.reset-size10.size2,.katex .sizing.reset-size10.size2{font-size:.2892960463em}.katex .fontsize-ensurer.reset-size10.size3,.katex .sizing.reset-size10.size3{font-size:.337512054em}.katex .fontsize-ensurer.reset-size10.size4,.katex .sizing.reset-size10.size4{font-size:.3857280617em}.katex .fontsize-ensurer.reset-size10.size5,.katex .sizing.reset-size10.size5{font-size:.4339440694em}.katex .fontsize-ensurer.reset-size10.size6,.katex .sizing.reset-size10.size6{font-size:.4821600771em}.katex .fontsize-ensurer.reset-size10.size7,.katex .sizing.reset-size10.size7{font-size:.5785920926em}.katex .fontsize-ensurer.reset-size10.size8,.katex .sizing.reset-size10.size8{font-size:.6943105111em}.katex .fontsize-ensurer.reset-size10.size9,.katex .sizing.reset-size10.size9{font-size:.8331726133em}.katex .fontsize-ensurer.reset-size10.size10,.katex .sizing.reset-size10.size10{font-size:1em}.katex .fontsize-ensurer.reset-size10.size11,.katex .sizing.reset-size10.size11{font-size:1.1996142719em}.katex .fontsize-ensurer.reset-size11.size1,.katex .sizing.reset-size11.size1{font-size:.2009646302em}.katex .fontsize-ensurer.reset-size11.size2,.katex .sizing.reset-size11.size2{font-size:.2411575563em}.katex .fontsize-ensurer.reset-size11.size3,.katex .sizing.reset-size11.size3{font-size:.2813504823em}.katex .fontsize-ensurer.reset-size11.size4,.katex .sizing.reset-size11.size4{font-size:.3215434084em}.katex .fontsize-ensurer.reset-size11.size5,.katex .sizing.reset-size11.size5{font-size:.3617363344em}.katex .fontsize-ensurer.reset-size11.size6,.katex .sizing.reset-size11.size6{font-size:.4019292605em}.katex .fontsize-ensurer.reset-size11.size7,.katex .sizing.reset-size11.size7{font-size:.4823151125em}.katex .fontsize-ensurer.reset-size11.size8,.katex .sizing.reset-size11.size8{font-size:.578778135em}.katex .fontsize-ensurer.reset-size11.size9,.katex .sizing.reset-size11.size9{font-size:.6945337621em}.katex .fontsize-ensurer.reset-size11.size10,.katex .sizing.reset-size11.size10{font-size:.8336012862em}.katex .fontsize-ensurer.reset-size11.size11,.katex .sizing.reset-size11.size11{font-size:1em}.katex .delimsizing.size1{font-family:KaTeX_Size1}.katex .delimsizing.size2{font-family:KaTeX_Size2}.katex .delimsizing.size3{font-family:KaTeX_Size3}.katex .delimsizing.size4{font-family:KaTeX_Size4}.katex .delimsizing.mult .delim-size1>span{font-family:KaTeX_Size1}.katex .delimsizing.mult .delim-size4>span{font-family:KaTeX_Size4}.katex .nulldelimiter{display:inline-block;width:.12em}.katex .delimcenter,.katex .op-symbol{position:relative}.katex .op-symbol.small-op{font-family:KaTeX_Size1}.katex .op-symbol.large-op{font-family:KaTeX_Size2}.katex .accent>.vlist-t,.katex .op-limits>.vlist-t{text-align:center}.katex .accent .accent-body{position:relative}.katex .accent .accent-body:not(.accent-full){width:0}.katex .overlay{display:block}.katex .mtable .vertical-separator{display:inline-block;min-width:1px}.katex .mtable .arraycolsep{display:inline-block}.katex .mtable .col-align-c>.vlist-t{text-align:center}.katex .mtable .col-align-l>.vlist-t{text-align:left}.katex .mtable .col-align-r>.vlist-t{text-align:right}.katex .svg-align{text-align:left}.katex svg{fill:currentColor;stroke:currentColor;display:block;height:inherit;position:absolute;width:100%}.katex svg path{stroke:none}.katex svg{fill-rule:nonzero;fill-opacity:1;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1}.katex img{border-style:none;max-height:none;max-width:none;min-height:0;min-width:0}.katex .stretchy{display:block;overflow:hidden;position:relative;width:100%}.katex .stretchy:after,.katex .stretchy:before{content:""}.katex .hide-tail{overflow:hidden;position:relative;width:100%}.katex .halfarrow-left{left:0;overflow:hidden;position:absolute;width:50.2%}.katex .halfarrow-right{overflow:hidden;position:absolute;right:0;width:50.2%}.katex .brace-left{left:0;overflow:hidden;position:absolute;width:25.1%}.katex .brace-center{left:25%;overflow:hidden;position:absolute;width:50%}.katex .brace-right{overflow:hidden;position:absolute;right:0;width:25.1%}.katex .x-arrow-pad{padding:0 .5em}.katex .cd-arrow-pad{padding:0 .55556em 0 .27778em}.katex .mover,.katex .munder,.katex .x-arrow{text-align:center}.katex .boxpad{padding:0 .3em}.katex .fbox,.katex .fcolorbox{border:.04em solid;box-sizing:border-box}.katex .cancel-pad{padding:0 .2em}.katex .cancel-lap{margin-left:-.2em;margin-right:-.2em}.katex .sout{border-bottom-style:solid;border-bottom-width:.08em}.katex .angl{border-right:.049em solid;border-top:.049em solid;box-sizing:border-box;margin-right:.03889em}.katex .anglpad{padding:0 .03889em}.katex .eqn-num:before{content:"(" counter(katexEqnNo) ")";counter-increment:katexEqnNo}.katex .mml-eqn-num:before{content:"(" counter(mmlEqnNo) ")";counter-increment:mmlEqnNo}.katex .mtr-glue{width:50%}.katex .cd-vert-arrow{display:inline-block;position:relative}.katex .cd-label-left{display:inline-block;position:absolute;right:calc(50% + .3em);text-align:left}.katex .cd-label-right{display:inline-block;left:calc(50% + .3em);position:absolute;text-align:right}.katex-display{display:block;margin:1em 0;text-align:center}.katex-display>.katex{display:block;text-align:center;white-space:nowrap}.katex-display>.katex>.katex-html{display:block;position:relative}.katex-display>.katex>.katex-html>.tag{position:absolute;right:0}.katex-display.leqno>.katex>.katex-html>.tag{left:0;right:auto}.katex-display.fleqn>.katex{padding-left:2em;text-align:left}body{counter-reset:katexEqnNo mmlEqnNo}
.react-grid-layout {
  position: relative;
  transition: height 200ms ease;
}
.react-grid-item {
  transition: all 200ms ease;
  transition-property: left, top, width, height;
}
.react-grid-item img {
  pointer-events: none;
  user-select: none;
}
.react-grid-item.cssTransforms {
  transition-property: transform, width, height;
}
.react-grid-item.resizing {
  transition: none;
  z-index: 1;
  will-change: width, height;
}

.react-grid-item.react-draggable-dragging {
  transition: none;
  z-index: 3;
  will-change: transform;
}

.react-grid-item.dropping {
  visibility: hidden;
}

.react-grid-item.react-grid-placeholder {
  background: red;
  opacity: 0.2;
  transition-duration: 100ms;
  z-index: 2;
  user-select: none;
}

.react-grid-item.react-grid-placeholder.placeholder-resizing {
  transition: none;
}

.react-grid-item > .react-resizable-handle {
  position: absolute;
  width: 20px;
  height: 20px;
  opacity: 0;
}

.react-grid-item:hover > .react-resizable-handle {
  opacity: 1;
}

.react-grid-item > .react-resizable-handle::after {
  content: "";
  position: absolute;
  right: 3px;
  bottom: 3px;
  width: 5px;
  height: 5px;
  border-right: 2px solid rgba(0, 0, 0, 0.4);
  border-bottom: 2px solid rgba(0, 0, 0, 0.4);
}

.react-resizable-hide > .react-resizable-handle {
  display: none;
}

.react-grid-item > .react-resizable-handle.react-resizable-handle-sw {
  bottom: 0;
  left: 0;
  cursor: sw-resize;
  transform: rotate(90deg);
}
.react-grid-item > .react-resizable-handle.react-resizable-handle-se {
  bottom: 0;
  right: 0;
  cursor: se-resize;
}
.react-grid-item > .react-resizable-handle.react-resizable-handle-nw {
  top: 0;
  left: 0;
  cursor: nw-resize;
  transform: rotate(180deg);
}
.react-grid-item > .react-resizable-handle.react-resizable-handle-ne {
  top: 0;
  right: 0;
  cursor: ne-resize;
  transform: rotate(270deg);
}
.react-grid-item > .react-resizable-handle.react-resizable-handle-w,
.react-grid-item > .react-resizable-handle.react-resizable-handle-e {
  top: 50%;
  margin-top: -10px;
  cursor: ew-resize;
}
.react-grid-item > .react-resizable-handle.react-resizable-handle-w {
  left: 0;
  transform: rotate(135deg);
}
.react-grid-item > .react-resizable-handle.react-resizable-handle-e {
  right: 0;
  transform: rotate(315deg);
}
.react-grid-item > .react-resizable-handle.react-resizable-handle-n,
.react-grid-item > .react-resizable-handle.react-resizable-handle-s {
  left: 50%;
  margin-left: -10px;
  cursor: ns-resize;
}
.react-grid-item > .react-resizable-handle.react-resizable-handle-n {
  top: 0;
  transform: rotate(225deg);
}
.react-grid-item > .react-resizable-handle.react-resizable-handle-s {
  bottom: 0;
  transform: rotate(45deg);
}
.react-resizable {
  position: relative;
}
.react-resizable-handle {
  position: absolute;
  width: 20px;
  height: 20px;
  background-repeat: no-repeat;
  background-origin: content-box;
  box-sizing: border-box;
  background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2IDYiIHN0eWxlPSJiYWNrZ3JvdW5kLWNvbG9yOiNmZmZmZmYwMCIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSI2cHgiIGhlaWdodD0iNnB4Ij48ZyBvcGFjaXR5PSIwLjMwMiI+PHBhdGggZD0iTSA2IDYgTCAwIDYgTCAwIDQuMiBMIDQgNC4yIEwgNC4yIDQuMiBMIDQuMiAwIEwgNiAwIEwgNiA2IEwgNiA2IFoiIGZpbGw9IiMwMDAwMDAiLz48L2c+PC9zdmc+');
  background-position: bottom right;
  padding: 0 3px 3px 0;
}
.react-resizable-handle-sw {
  bottom: 0;
  left: 0;
  cursor: sw-resize;
  transform: rotate(90deg);
}
.react-resizable-handle-se {
  bottom: 0;
  right: 0;
  cursor: se-resize;
}
.react-resizable-handle-nw {
  top: 0;
  left: 0;
  cursor: nw-resize;
  transform: rotate(180deg);
}
.react-resizable-handle-ne {
  top: 0;
  right: 0;
  cursor: ne-resize;
  transform: rotate(270deg);
}
.react-resizable-handle-w,
.react-resizable-handle-e {
  top: 50%;
  margin-top: -10px;
  cursor: ew-resize;
}
.react-resizable-handle-w {
  left: 0;
  transform: rotate(135deg);
}
.react-resizable-handle-e {
  right: 0;
  transform: rotate(315deg);
}
.react-resizable-handle-n,
.react-resizable-handle-s {
  left: 50%;
  margin-left: -10px;
  cursor: ns-resize;
}
.react-resizable-handle-n {
  top: 0;
  transform: rotate(225deg);
}
.react-resizable-handle-s {
  bottom: 0;
  transform: rotate(45deg);
}/**
 * Governance UI styles.
 *
 * Everything here is scoped under `gov-` and built from the existing theme
 * variables, so the panel inherits the app's look and follows a theme switch
 * without carrying its own colour values.
 */

.gov-panel {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ── Shared bits ──────────────────────────────────────────────────────────── */

.gov-field-help {
  margin: 4px 0 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--color-text-muted);
}

.gov-warning {
  color: var(--color-warning);
}

.gov-section-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
}

.gov-inline-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 12px;
}

.gov-link-btn {
  background: none;
  border: none;
  padding: 0;
  font-size: 12px;
  color: var(--color-primary);
  cursor: pointer;
}

.gov-link-btn:hover {
  text-decoration: underline;
}

.gov-chip-muted {
  color: var(--color-text-muted);
  background: var(--color-bg-subtle);
}

/* Visually hidden, but still announced — used for icon-only column headers. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ── Owner ────────────────────────────────────────────────────────────────── */

.gov-owner-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.gov-owner-icon {
  display: inline-flex;
  color: var(--color-primary);
}

.gov-owner-name {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--color-text);
}

.gov-owner-none {
  font-weight: 400;
  color: var(--color-text-muted);
}

.gov-transfer-panel {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--color-border);
}

.gov-owner-callout {
  margin-bottom: 12px;
  padding: 8px 12px;
  font-size: 12.5px;
  border-radius: 6px;
  color: var(--color-primary);
  background: var(--color-primary-bg);
}

/* ── Principal picker ─────────────────────────────────────────────────────── */

.gov-principal-picker {
  border: 1px solid var(--color-border);
  border-radius: 6px;
  overflow: hidden;
}

.gov-search-field {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 10px;
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text-muted);
}

.gov-search-field input {
  flex: 1;
  padding: 8px 0;
  font-size: 13px;
  color: var(--color-text);
  background: none;
  border: none;
  outline: none;
}

.gov-principal-list {
  max-height: 200px;
  overflow-y: auto;
}

.gov-principal-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  text-align: left;
  background: none;
  border: none;
  border-bottom: 1px solid var(--color-border-light);
  cursor: pointer;
}

.gov-principal-row:last-child {
  border-bottom: none;
}

.gov-principal-row:hover {
  background: var(--color-bg-subtle);
}

.gov-principal-row.is-selected {
  background: var(--color-primary-bg);
}

.gov-principal-icon {
  display: inline-flex;
  color: var(--color-text-muted);
}

.gov-principal-text {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}

.gov-principal-name {
  display: block;
  font-size: 13px;
  color: var(--color-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gov-principal-detail {
  display: block;
  font-size: 11.5px;
  color: var(--color-text-muted);
}

/* ── Grant dialog ─────────────────────────────────────────────────────────── */

.gov-grant-modal {
  width: min(560px, 92vw);
}

.gov-modal-subtitle {
  margin: 0 0 16px;
  font-size: 12.5px;
  color: var(--color-text-muted);
}

.gov-bundle-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.gov-bundle-chip {
  padding: 4px 12px;
  font-size: 12px;
  text-transform: capitalize;
  color: var(--color-text);
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  cursor: pointer;
}

.gov-bundle-chip:hover {
  border-color: var(--color-primary);
}

.gov-bundle-chip.is-active {
  color: var(--color-primary);
  background: var(--color-primary-bg);
  border-color: var(--color-primary);
}

.gov-privilege-grid {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.gov-privilege-option {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 7px 8px;
  border-radius: 6px;
  cursor: pointer;
}

.gov-privilege-option:hover {
  background: var(--color-bg-subtle);
}

.gov-privilege-option input {
  margin-top: 2px;
}

.gov-privilege-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.gov-privilege-name {
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--color-text);
}

.gov-privilege-help {
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--color-text-muted);
}

/* ── Effective access ─────────────────────────────────────────────────────── */

.gov-effective-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
}

.gov-effective-picker {
  display: flex;
  align-items: center;
  gap: 8px;
}

.gov-select-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.gov-select-wrap select {
  padding: 5px 26px 5px 10px;
  font-size: 12.5px;
  color: var(--color-text);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  appearance: none;
  cursor: pointer;
}

.gov-select-wrap svg {
  position: absolute;
  right: 8px;
  pointer-events: none;
  color: var(--color-text-muted);
}

.gov-effective-table .gov-privilege-cell {
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.gov-effective-table .gov-reason-cell {
  font-size: 12.5px;
  color: var(--color-text-muted);
}

.gov-row-denied .gov-privilege-cell {
  color: var(--color-text-muted);
}

.gov-allow-icon {
  display: inline-flex;
  color: var(--color-success);
}

.gov-deny-icon {
  display: inline-flex;
  color: var(--color-text-subtle);
}
/* Premium Databricks-inspired SQL Warehouse UI */
.swh-layout {
  display: flex;
  height: 100%;
  background: var(--color-background, var(--color-background));
  color: var(--color-text, var(--color-text));
  overflow: hidden;
  font-family: 'Inter', system-ui, sans-serif;
}

/* Thin Sidebar Navigation */
.swh-sidebar {
  width: 64px;
  background: var(--color-surface, var(--color-surface));
  border-right: 1px solid var(--color-border, var(--color-border));
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16px 0;
  gap: 24px;
  z-index: 10;
}

.swh-sidebar-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: linear-gradient(135deg, #0f766e, #042f2e);
  color: var(--color-text);
  box-shadow: 0 4px 12px rgba(15, 118, 110, 0.4);
}

.swh-sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  align-items: center;
}

.swh-nav-btn {
  background: transparent;
  border: none;
  color: var(--color-text-muted, var(--color-text-muted));
  width: 44px;
  height: 44px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
}

.swh-nav-btn:hover {
  background: var(--color-surface-hover);
  color: var(--color-text);
}

.swh-nav-btn.is-active {
  background: rgba(15, 118, 110, 0.15);
  color: #14b8a6;
}

.swh-nav-btn.is-active::before {
  content: '';
  position: absolute;
  left: -10px;
  top: 12px;
  bottom: 12px;
  width: 4px;
  border-radius: 0 4px 4px 0;
  background: #14b8a6;
}

/* Main Content Area */
.swh-main-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--color-background, var(--color-background));
}

/* Common Header */
.swh-view-header {
  height: 64px;
  padding: 0 24px;
  border-bottom: 1px solid var(--color-border, var(--color-surface));
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--color-surface, var(--color-surface));
}

.swh-view-title {
  display: flex;
  align-items: center;
  gap: 12px;
}

.swh-view-title h1 {
  font-size: 18px;
  font-weight: 600;
  margin: 0;
  color: var(--color-text, var(--color-text));
}

/* Buttons */
.swh-btn-primary {
  background: #14b8a6;
  color: #042f2e;
  border: none;
  border-radius: 6px;
  height: 36px;
  padding: 0 16px;
  font-size: 13px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  transition: all 0.2s;
  box-shadow: 0 2px 8px rgba(20, 184, 166, 0.25);
}

.swh-btn-primary:hover {
  background: #0d9488;
  transform: translateY(-1px);
}

.swh-btn-secondary {
  background: var(--color-surface-hover);
  border: 1px solid var(--color-border, var(--color-border));
  color: var(--color-text, var(--color-text));
  border-radius: 6px;
  height: 36px;
  padding: 0 16px;
  font-size: 13px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  transition: all 0.2s;
}

.swh-btn-secondary:hover {
  background: var(--color-surface-active);
}

/* Editor View Layout */
.swh-editor-layout {
  display: flex;
  height: 100%;
  flex: 1;
  min-height: 0;
}

.swh-catalog-sidebar {
  width: 280px;
  border-right: 1px solid var(--color-border, var(--color-surface));
  display: flex;
  flex-direction: column;
  background: var(--color-surface, var(--color-surface));
}

.swh-catalog-header {
  padding: 16px;
  border-bottom: 1px solid var(--color-border, var(--color-surface));
  font-weight: 600;
  font-size: 14px;
}

.swh-catalog-selectors {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  border-bottom: 1px solid var(--color-border, var(--color-surface));
}

.swh-select-wrap {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.swh-select-wrap label {
  font-size: 12px;
  color: var(--color-text-muted, var(--color-text-muted));
}

.swh-select {
  width: 100%;
  height: 32px;
  background: var(--color-background-muted);
  border: 1px solid var(--color-border, var(--color-border));
  color: var(--color-text, var(--color-text));
  border-radius: 4px;
  padding: 0 8px;
  font-size: 13px;
}

.swh-catalog-tables {
  flex: 1;
  overflow-y: auto;
  padding: 12px 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.swh-table-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 6px;
  background: transparent;
  border: none;
  color: var(--color-text, var(--color-text));
  font-size: 13px;
  cursor: pointer;
  text-align: left;
}

.swh-table-item:hover {
  background: var(--color-surface-hover);
}

.swh-workspace {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.swh-editor-pane {
  flex: 1;
  display: flex;
  flex-direction: column;
  border-bottom: 1px solid var(--color-border, var(--color-surface));
}

.swh-editor-toolbar {
  height: 40px;
  padding: 0 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--color-background-subtle);
  border-bottom: 1px solid var(--color-border, var(--color-surface));
}

.swh-editor-toolbar-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.swh-wh-selector {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  background: var(--color-surface-hover);
  padding: 4px 8px;
  border-radius: 4px;
  border: 1px solid var(--color-border, var(--color-border));
}

.swh-wh-selector select {
  background: transparent;
  border: none;
  color: inherit;
  font-weight: 500;
  outline: none;
}

.swh-editor-area {
  flex: 1;
  padding: 16px;
  background: var(--color-background);
  color: var(--color-text);
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: 14px;
  line-height: 1.5;
  border: none;
  resize: none;
  outline: none;
}

.swh-results-pane {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: var(--color-surface, var(--color-surface));
}

.swh-results-header {
  height: 36px;
  padding: 0 16px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--color-border, var(--color-border));
  font-size: 13px;
  font-weight: 600;
}

.swh-results-table-wrap {
  flex: 1;
  overflow: auto;
}

.swh-results-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.swh-results-table th, .swh-results-table td {
  padding: 8px 12px;
  border-bottom: 1px solid var(--color-border, var(--color-border));
  border-right: 1px solid var(--color-border, var(--color-border));
  white-space: nowrap;
}

.swh-results-table th {
  background: var(--color-background-muted);
  position: sticky;
  top: 0;
  font-weight: 600;
  color: var(--color-text-muted, var(--color-text-muted));
  text-align: left;
}

/* Warehouses View */
.swh-wh-list-wrap {
  padding: 24px;
  overflow: auto;
  flex: 1;
}

.swh-wh-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 20px;
}

.swh-wh-card {
  background: var(--color-surface, var(--color-surface));
  border: 1px solid var(--color-border, var(--color-border));
  border-radius: 8px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  transition: transform 0.2s, box-shadow 0.2s;
}

.swh-wh-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px var(--color-background-muted);
  border-color: var(--color-border-hover);
}

.swh-wh-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.swh-wh-card-title {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.swh-wh-card-title h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
}

.swh-wh-card-title span {
  font-size: 12px;
  color: var(--color-text-muted, var(--color-text-muted));
  text-transform: capitalize;
}

.swh-status-badge {
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
}

.swh-status-badge.running { background: rgba(16, 185, 129, 0.15); color: #10b981; }
.swh-status-badge.stopped { background: rgba(148, 163, 184, 0.15); color: var(--color-text-muted); }
.swh-status-badge.error { background: rgba(239, 68, 68, 0.15); color: #ef4444; }

.swh-wh-card-actions {
  display: flex;
  gap: 8px;
  margin-top: auto;
}

/* History View */
.swh-history-list {
  padding: 24px;
}

.swh-history-table {
  width: 100%;
  border-collapse: collapse;
}

.swh-history-table th, .swh-history-table td {
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1px solid var(--color-border, var(--color-border));
}

.swh-history-table th {
  color: var(--color-text-muted, var(--color-text-muted));
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
}

.swh-history-sql {
  font-family: monospace;
  background: var(--color-background-muted);
  padding: 4px 8px;
  border-radius: 4px;
  display: inline-block;
  max-width: 400px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Empty States & Utilities */
.swh-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  gap: 12px;
  color: var(--color-text-muted, var(--color-text-muted));
}

.swh-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
}

.swh-modal {
  width: 480px;
  background: var(--color-surface, var(--color-surface));
  border: 1px solid var(--color-border, var(--color-border));
  border-radius: 12px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  box-shadow: 0 24px 48px rgba(0,0,0,0.4);
}

.swh-modal h2 { margin: 0; font-size: 20px; }

.swh-modal-field { display: flex; flex-direction: column; gap: 8px; }
.swh-modal-field label { font-size: 13px; font-weight: 500; color: var(--color-text-muted, var(--color-text)); }
.swh-modal-field input, .swh-modal-field select {
  height: 40px;
  background: var(--color-background-muted);
  border: 1px solid var(--color-border, var(--color-border));
  border-radius: 6px;
  padding: 0 12px;
  color: var(--color-text);
  font-size: 14px;
}

.spin { animation: spin 1s linear infinite; }
@keyframes spin { 100% { transform: rotate(360deg); } }

/* Details & Monitoring View */
.swh-details-content {
  flex: 1;
  overflow: auto;
  padding: 0;
}

.swh-monitoring-view {
  padding: 16px 24px 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  box-sizing: border-box;
}

.swh-metrics-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 4px 0;
  background: transparent;
  border: none;
  gap: 16px;
}

.swh-metric-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-width: 0;
  text-align: center;
}

.swh-metric-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--color-text-muted, #64748b);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.swh-metric-value {
  font-size: 18px;
  font-weight: 700;
  color: var(--color-text, #0f172a);
  line-height: 1.2;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.swh-metric-divider {
  width: 1px;
  height: 28px;
  background: var(--color-border, #e2e8f0);
  flex-shrink: 0;
}

.swh-monitoring-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0;
  margin: 0;
}

.swh-time-range-group {
  display: flex;
  background: #f1f5f9;
  padding: 2px;
  border-radius: 6px;
  gap: 2px;
}

.swh-time-range-btn {
  padding: 4px 10px;
  border: none;
  border-radius: 4px;
  background: transparent;
  font-size: 12px;
  font-weight: 500;
  color: #64748b;
  cursor: pointer;
  transition: all 0.15s ease;
}

.swh-time-range-btn.active {
  background: #ffffff;
  color: #2563eb;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
  font-weight: 600;
}

.swh-monitoring-charts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  width: 100%;
}

@media (max-width: 1200px) {
  .swh-monitoring-charts {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .swh-monitoring-charts {
    grid-template-columns: 1fr;
  }
}

.swh-chart-card {
  display: flex;
  flex-direction: column;
  background: transparent;
  border: none;
  padding: 4px 0;
}

.swh-chart-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}

.swh-chart-card-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text, #0f172a);
  margin: 0;
}

/* Query Profiling Drawer Styles */
@keyframes slideIn {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.swh-profile-backdrop {
  animation: fadeIn 0.2s ease-out;
}

.swh-profile-drawer {
  animation: slideIn 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.swh-operator-card {
  transition: all 0.2s ease;
}

.swh-operator-card:hover {
  border-color: #14b8a6 !important;
  box-shadow: 0 4px 12px rgba(20, 184, 166, 0.08) !important;
  transform: translateY(-1px);
}

/* Databricks SQL Editor Custom UI styles */
.swh-editor-layout {
  display: flex;
  height: 100%;
  flex: 1;
  min-height: 0;
  background: var(--color-background);
}

.swh-editor-sidebar {
  width: 250px;
  background: var(--color-surface);
  border-right: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  min-width: 200px;
}

.swh-sidebar-header {
  padding: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--color-border);
}

.swh-sidebar-header h2 {
  font-size: 14px;
  font-weight: 600;
  margin: 0;
  color: var(--color-text);
}

.swh-sidebar-header-actions {
  display: flex;
  gap: 8px;
  color: var(--color-text-muted);
}

.swh-sidebar-tree-control {
  padding: 8px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
  color: var(--color-text-muted);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-background-subtle);
}

/* Sidebar Mode Switcher (Single Border, Two Boxes, Filled Active State) */
.swh-sidebar-mode-switch {
  display: flex;
  margin: 10px 12px 6px 12px;
  padding: 0;
  background: var(--color-background);
  border: 1px solid var(--color-border);
  border-radius: 5px;
  overflow: hidden;
}

.swh-sidebar-mode-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 6px 10px;
  font-size: 11px;
  font-weight: 500;
  color: var(--color-text-muted);
  background: transparent;
  border: none;
  border-radius: 0;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
  user-select: none;
}

.swh-sidebar-mode-btn:not(:last-child) {
  border-right: 1px solid var(--color-border);
}

.swh-sidebar-mode-btn:hover:not(.is-active) {
  color: var(--color-text);
  background: rgba(255, 255, 255, 0.05);
}

.swh-sidebar-mode-btn.is-active {
  color: #ffffff;
  background: var(--color-primary);
  font-weight: 600;
}

.swh-sidebar-mode-btn.is-active .swh-mode-icon {
  color: #ffffff;
}

.swh-sidebar-mode-btn .swh-mode-icon {
  color: var(--color-text-muted);
  transition: color 0.15s ease;
}

.swh-sidebar-search {
  padding: 8px 12px;
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--color-background);
  margin: 8px 12px;
  border-radius: 4px;
  border: 1px solid var(--color-border);
}

.swh-sidebar-search input {
  background: transparent;
  border: none;
  font-size: 12px;
  color: var(--color-text);
  outline: none;
  width: 100%;
}

.swh-sidebar-tree-list {
  flex: 1;
  overflow-y: auto;
  padding: 0 12px;
}

.swh-sidebar-folder {
  font-size: 12px;
  font-weight: 500;
  color: var(--color-text-muted);
  padding: 6px 4px;
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}

.swh-sidebar-file-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px 6px 16px;
  font-size: 12px;
  color: var(--color-text);
  border-radius: 4px;
  cursor: pointer;
}

.swh-sidebar-file-item:hover {
  background: var(--color-surface-hover);
}

.swh-sidebar-file-item.is-active {
  background: var(--color-surface-active);
  font-weight: 500;
  color: var(--color-primary);
}

.swh-editor-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* Flat Tab Strip with #FAFAFA Background */
.swh-editor-tabs-bar {
  display: flex;
  align-items: center;
  background: #FAFAFA;
  border-bottom: 1px solid var(--color-border, #E5E5E5);
  padding: 0;
  height: 36px;
  overflow-x: auto;
  overflow-y: hidden;
  gap: 0;
}

.swh-editor-tabs-bar::-webkit-scrollbar {
  height: 3px;
}

.swh-editor-tabs-bar::-webkit-scrollbar-thumb {
  background: var(--color-border, #E5E5E5);
}

.swh-editor-tab-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 14px;
  height: 36px;
  font-size: 13px;
  font-weight: 400;
  color: #4B5563;
  background: #FAFAFA;
  border-right: 1px solid var(--color-border, #E5E5E5);
  border-left: none;
  border-top: none;
  border-bottom: none;
  border-radius: 0;
  cursor: pointer;
  position: relative;
  transition: background 0.12s ease, color 0.12s ease;
  user-select: none;
  max-width: 260px;
  flex-shrink: 0;
}

.swh-editor-tab-item:hover:not(.is-active) {
  background: #F3F4F6;
  color: #111827;
}

.swh-editor-tab-item.is-active {
  background: #FFFFFF;
  color: #111827;
  font-weight: 600;
  border-right: 1px solid var(--color-border, #E5E5E5);
  border-bottom: 2px solid var(--color-primary, #2272B4);
  margin-bottom: -1px;
  z-index: 2;
}

.swh-editor-tab-item .swh-tab-icon {
  color: #6B7280;
  flex-shrink: 0;
  transition: color 0.12s ease;
}

.swh-editor-tab-item.is-active .swh-tab-icon {
  color: #374151;
}

.swh-editor-tab-item .swh-tab-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  letter-spacing: 0.01em;
}

.swh-tab-rename-btn {
  background: none;
  border: none;
  padding: 2px 4px;
  border-radius: 3px;
  cursor: pointer;
  color: var(--color-text-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.12s ease, color 0.12s ease;
}

.swh-tab-rename-btn:hover {
  background: var(--color-surface-hover);
  color: var(--color-text);
}

.swh-tab-close-btn {
  background: transparent;
  border: none;
  color: var(--color-text-muted);
  width: 18px;
  height: 18px;
  padding: 0;
  border-radius: 3px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 4px;
  transition: background 0.12s ease, color 0.12s ease;
}

.swh-tab-close-btn:hover {
  background: rgba(239, 68, 68, 0.15);
  color: #ef4444;
}

.swh-add-tab-btn {
  background: transparent;
  border: none;
  border-right: 1px solid var(--color-border);
  border-radius: 0;
  width: 36px;
  height: 36px;
  margin: 0;
  color: var(--color-text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.12s ease, color 0.12s ease;
}

.swh-add-tab-btn:hover {
  background: var(--color-surface-hover);
  color: var(--color-text);
}

.swh-editor-toolbar-db {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 16px;
  background: var(--color-background);
  border-bottom: none;
  gap: 12px;
  flex-wrap: wrap;
}

.swh-toolbar-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Split Run Button with Run 1000 and Run All dropdown */
.swh-run-split-btn-container {
  position: relative;
  display: inline-flex;
  align-items: stretch;
  border-radius: 6px;
  background: var(--color-primary);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
  height: 30px;
  box-sizing: border-box;
}

.swh-btn-run-main {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 12px;
  height: 30px;
  font-size: 12px;
  font-weight: 600;
  color: #ffffff !important;
  background: transparent;
  border: none;
  border-top-left-radius: 6px;
  border-bottom-left-radius: 6px;
  cursor: pointer;
  transition: background 0.12s ease;
  white-space: nowrap;
}

.swh-btn-run-main:hover:not(:disabled) {
  background: rgba(0, 0, 0, 0.12);
}

.swh-btn-run-main:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.swh-btn-run-divider {
  width: 1px;
  background: rgba(255, 255, 255, 0.3);
  margin: 4px 0;
}

.swh-btn-run-menu-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 8px;
  height: 30px;
  color: #ffffff !important;
  background: transparent;
  border: none;
  border-top-right-radius: 6px;
  border-bottom-right-radius: 6px;
  cursor: pointer;
  transition: background 0.12s ease;
}

.swh-btn-run-menu-trigger:hover:not(:disabled) {
  background: rgba(0, 0, 0, 0.15);
}

.swh-btn-run-menu-trigger:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.swh-run-dropdown-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 1000;
  min-width: 200px;
  background: var(--color-surface, #1e293b);
  border: 1px solid var(--color-border, #334155);
  border-radius: 6px;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -2px rgba(0, 0, 0, 0.15);
  padding: 4px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.swh-run-dropdown-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 7px 10px;
  border-radius: 4px;
  border: none;
  background: transparent;
  color: var(--color-text, #f8fafc);
  font-size: 12px;
  text-align: left;
  cursor: pointer;
  transition: background 0.12s ease;
}

.swh-run-dropdown-item:hover {
  background: var(--color-surface-hover, rgba(255, 255, 255, 0.08));
}

.swh-run-dropdown-item.is-selected {
  background: var(--color-surface-active, rgba(59, 130, 246, 0.15));
  color: var(--color-primary, #3b82f6);
  font-weight: 600;
}

.swh-toolbar-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--color-text-muted);
}

.swh-catalog-schema-selector-db {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  padding: 0 8px;
  height: 30px;
  box-sizing: border-box;
  border-radius: 6px;
}

.swh-catalog-schema-selector-db select {
  background: transparent;
  border: none;
  color: var(--color-text);
  font-size: 12px;
  outline: none;
  cursor: pointer;
  font-weight: 500;
  padding: 2px 4px;
  border-radius: 4px;
}

.swh-catalog-schema-selector-db select:hover {
  background: rgba(255, 255, 255, 0.05);
}

.swh-catalog-schema-selector-db .swh-separator {
  color: var(--color-text-muted);
  font-size: 12px;
  opacity: 0.6;
}

.swh-toolbar-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.swh-wh-selector-db {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  padding: 0 10px;
  height: 30px;
  box-sizing: border-box;
  border-radius: 6px;
  font-size: 12px;
}

.swh-wh-selector-db select {
  background: transparent;
  border: none;
  color: var(--color-text);
  font-weight: 500;
  outline: none;
  cursor: pointer;
}

.swh-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-text-muted);
}

.swh-dot.is-running {
  background: var(--color-success);
}

.swh-wh-size-badge {
  background: var(--color-background-muted);
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 10px;
  font-weight: bold;
}

.swh-ide-editor-container {
  display: flex;
  flex: 1;
  min-height: 200px;
  background: var(--color-background);
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: 13px;
  line-height: 1.6;
  position: relative;
  overflow: auto;
  border-bottom: 1px solid var(--color-border);
}

.swh-line-numbers {
  width: 45px;
  padding: 16px 8px;
  text-align: right;
  color: var(--color-text-muted);
  border-right: 1px solid var(--color-border);
  background: var(--color-background-subtle);
  user-select: none;
}

.swh-editor-textarea {
  flex: 1;
  padding: 16px;
  background: transparent;
  color: var(--color-text);
  border: none;
  resize: none;
  outline: none;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  tab-size: 4;
}

.swh-editor-bottom-bar {
  padding: 8px 16px;
  background: var(--color-background);
  border-bottom: 1px solid var(--color-border);
}

.swh-results-pane-db {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  min-height: 150px;
}

.swh-results-header-db {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  height: 36px;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-background-subtle);
}

.swh-results-tabs {
  display: flex;
  align-items: center;
  height: 36px;
  gap: 16px;
}

.swh-results-tab {
  font-size: 12px;
  font-weight: 500;
  color: var(--color-text-muted);
  border-bottom: 2px solid transparent;
  height: 36px;
  display: flex;
  align-items: center;
  cursor: pointer;
}

.swh-results-tab.is-active {
  color: var(--color-text);
  border-bottom-color: var(--color-primary);
}

.swh-results-header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--color-text-muted);
}

.swh-results-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 16px;
  border-top: 1px solid var(--color-border);
  background: var(--color-background-subtle);
  font-size: 11px;
  color: var(--color-text-muted);
}

.swh-results-footer-left {
  display: flex;
  align-items: center;
  gap: 16px;
}

.swh-performance-link {
  color: var(--color-primary);
  text-decoration: none;
}

.swh-performance-link:hover {
  text-decoration: underline;
}

.swh-results-footer-right {
  display: flex;
  align-items: center;
  gap: 16px;
}
/* ==========================================================================
   Ontology Configuration Subsystem - Design System Aligned Styles
   
   Isolated strictly from core ontology graph canvas rendering.
   Uses standard CompassX design system tokens, variables, and typography.
   ========================================================================== */

/* Top Right Trigger Container & Button */
.cx-ontology-config-trigger {
  position: absolute;
  top: 6px;
  right: 10px;
  z-index: 30;
  display: flex;
  align-items: center;
  padding: 0;
  border-radius: 9999px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
  color: var(--color-text-muted);
  pointer-events: auto;
  transition: all 0.15s ease;
}

.cx-ontology-config-trigger:hover {
  border-color: var(--color-border-strong);
  color: var(--color-text);
}

.cx-ontology-config-trigger.is-active {
  background: var(--color-primary-bg);
  border-color: var(--color-primary);
  color: var(--color-primary);
  box-shadow: 0 0 0 2px var(--color-primary-bg);
}

.cx-ontology-config-trigger-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 3.5px 10px;
  border-radius: 9999px;
  font-size: 11px;
  font-weight: 500;
  font-family: var(--font-family);
  color: inherit;
  background: transparent;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s ease;
}

/* Side Configuration Panel */
.cx-ontology-config-panel {
  position: absolute;
  right: 10px;
  top: 40px;
  bottom: 10px;
  z-index: 35;
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-lg, 8px);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-md, 0 4px 16px rgba(0, 0, 0, 0.12));
  overflow: hidden;
  color: var(--color-text);
  font-family: var(--font-family);
  animation: cxPanelSlideIn 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes cxPanelSlideIn {
  from {
    opacity: 0;
    transform: translateX(16px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Resize Handle (Left edge) */
.cx-ontology-config-resize-handle {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 6px;
  cursor: ew-resize;
  z-index: 10;
  background: transparent;
  transition: background-color 0.15s ease;
}

.cx-ontology-config-resize-handle:hover,
.cx-ontology-config-resize-handle.is-dragging {
  background-color: var(--color-primary);
}

/* Header & Standard PageTabs */
.cx-ontology-config-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 8px 0 14px;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface);
  min-height: 44px;
  flex-shrink: 0;
  user-select: none;
}

.cx-ontology-config-header .page-tabs {
  margin: 0;
  border-bottom: none;
  gap: 16px;
  align-items: center;
  height: 100%;
}

.cx-ontology-config-header .page-tabs button {
  padding: 10px 2px 11px;
  font-size: 13px;
  font-weight: 500;
  border-bottom-width: 2.5px;
  white-space: nowrap;
}

.cx-ontology-config-header .page-tabs button:hover {
  color: var(--color-text);
}

.cx-ontology-config-header .page-tabs button.is-active {
  color: var(--color-primary);
  font-weight: 600;
  border-bottom-color: var(--color-primary);
}

.cx-ontology-config-close-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--radius);
  border: none;
  background: transparent;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: background-color 0.12s ease, color 0.12s ease;
}

.cx-ontology-config-close-btn:hover {
  background: var(--color-surface-hover);
  color: var(--color-text);
}

/* Panel Content Body */
.cx-ontology-config-body {
  flex: 1;
  width: 100%;
  padding: 16px;
  overflow-y: auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Kinds Section Header */
.cx-ontology-config-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--color-border);
}

.cx-ontology-config-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text);
}

.cx-ontology-config-subtitle {
  font-size: 11px;
  color: var(--color-text-muted);
  margin-top: 2px;
}

/* Form Container (Add / Edit) */
.cx-ontology-config-form {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg, 8px);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.cx-ontology-config-form-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text);
}

.cx-ontology-config-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

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

.cx-ontology-config-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.cx-ontology-config-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
}

/* Cards (Types & Relations) */
.cx-ontology-config-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border-radius: var(--radius, 6px);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}

.cx-ontology-config-card:hover {
  border-color: var(--color-border-strong);
  background: var(--color-surface-hover);
}

/* Sticky Action Container at the bottom of the list */
.cx-ontology-config-sticky-footer {
  position: sticky;
  bottom: -16px;
  margin-top: 4px;
  padding: 8px 0 16px;
  background: var(--color-surface);
  z-index: 5;
}

/* Dotted Add Type Box at end of list */
.cx-ontology-config-add-box {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: var(--radius-lg, 8px);
  border: 1px dashed var(--color-border);
  background: var(--color-surface);
  color: var(--color-text-muted);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  width: 100%;
  transition: all 0.15s ease;
}

.cx-ontology-config-add-box:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
  background: var(--color-primary-bg, rgba(34, 114, 180, 0.05));
}

.cx-ontology-config-card-icon-box {
  width: 32px;
  height: 32px;
  border-radius: var(--radius, 6px);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--color-primary);
}

.cx-ontology-config-slug-badge {
  font-family: var(--cx-font-mono, monospace);
  font-size: 10px;
  font-weight: 500;
  padding: 1px 6px;
  border-radius: 4px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
}

.cx-ontology-config-meta-item {
  font-size: 11px;
  color: var(--color-text-muted);
}

.cx-ontology-config-meta-val {
  color: var(--color-text);
  font-weight: 500;
  text-transform: capitalize;
}

/* Type Relationship Flow Visualizer */
.cx-ontology-relation-flow {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.cx-ontology-type-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  background: transparent;
  border: none;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text);
}

.cx-ontology-rel-arrow {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: var(--color-text-muted);
}

.cx-ontology-rel-badge {
  font-family: var(--cx-font-mono, monospace);
  font-size: 11px;
  font-weight: 600;
  color: var(--color-primary);
  background: transparent;
  border: none;
  padding: 0;
}

.cx-ontology-hier-badge {
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  padding: 1px 5px;
  border-radius: 3px;
  background: var(--color-success-bg);
  color: var(--color-success);
}

/* Grouped Type Pair Card */
.cx-ontology-pair-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 12px;
  border-radius: var(--radius, 6px);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}

.cx-ontology-pair-card:hover {
  border-color: var(--color-border-strong);
}

.cx-ontology-pair-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.cx-ontology-pair-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text);
}

.cx-ontology-pair-arrow {
  color: var(--color-text-muted);
  display: inline-flex;
  align-items: center;
}

/* Relation Pills in Grouped Card */
.cx-ontology-pair-relations {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.cx-ontology-relation-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 8px;
  border-radius: 4px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  font-family: var(--cx-font-mono, monospace);
  font-size: 11px;
  font-weight: 500;
  color: var(--color-text);
  transition: all 0.12s ease;
}

.cx-ontology-relation-pill:hover {
  border-color: var(--color-border-strong);
}

.cx-ontology-relation-pill.is-hierarchical {
  border-color: rgba(16, 185, 129, 0.35);
  background: rgba(16, 185, 129, 0.06);
}

.cx-ontology-relation-pill-del {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  border-radius: 3px;
  border: none;
  background: transparent;
  color: var(--color-text-muted);
  cursor: pointer;
  padding: 0;
  margin-left: 2px;
  transition: all 0.12s ease;
}

.cx-ontology-relation-pill-del:hover {
  background: var(--color-danger-bg, #fee2e2);
  color: var(--color-danger, #ef4444);
}

/* Inline Add Relation Button & Input */
.cx-ontology-add-rel-inline-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 7px;
  border-radius: 4px;
  border: 1px dashed var(--color-border);
  background: transparent;
  color: var(--color-text-muted);
  font-size: 10px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.12s ease;
}

.cx-ontology-add-rel-inline-btn:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
  background: var(--color-primary-bg, rgba(34, 114, 180, 0.05));
}

.cx-ontology-add-rel-inline-form {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.cx-ontology-add-rel-inline-input {
  height: 22px;
  padding: 1px 6px;
  font-size: 11px;
  border-radius: 3px;
  border: 1px solid var(--color-primary);
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--cx-font-mono, monospace);
  outline: none;
  width: 110px;
}

/* Action Icon Buttons inside cards */
.cx-ontology-config-icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: var(--radius, 4px);
  border: none;
  background: transparent;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: all 0.12s ease;
}

.cx-ontology-config-icon-btn:hover {
  background: var(--color-surface-hover);
  color: var(--color-text);
}

.cx-ontology-config-icon-btn.is-danger:hover {
  background: var(--color-danger-bg, #fee2e2);
  color: var(--color-danger, #ef4444);
}
/* ==========================================================================
   CompassX Knowledge Graph - Entity UI & Side Inspector Drawer Styling
   
   Dedicated, isolated stylesheet for:
   1. Add Knowledge Graph Entity Modal (.cx-kg-modal-*)
   2. Side Inspector Drawer (.cx-kg-drawer-*)
   
   Uses standard CompassX design tokens, variables, and typography.
   Maintains zero dependencies on or modifications to ontology.css.
   ========================================================================== */

/* ==========================================================================
   1. Shared Tokens & Utilities
   ========================================================================== */

.cx-kg-scrollbar::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

.cx-kg-scrollbar::-webkit-scrollbar-track {
  background: transparent;
}

.cx-kg-scrollbar::-webkit-scrollbar-thumb {
  background: var(--color-border-strong, var(--cx-color-border-strong, rgba(150, 150, 150, 0.3)));
  border-radius: var(--radius-full, 9999px);
}

.cx-kg-scrollbar::-webkit-scrollbar-thumb:hover {
  background: var(--color-text-subtle, var(--cx-color-text-subtle, rgba(150, 150, 150, 0.5)));
}

/* ==========================================================================
   2. Add Knowledge Graph Entity Modal (.cx-kg-modal-*)
   ========================================================================== */

.cx-kg-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: var(--color-overlay, var(--cx-color-overlay, rgba(0, 0, 0, 0.6)));
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  animation: cxKgFadeIn 0.15s ease-out;
}

@keyframes cxKgFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.cx-kg-modal-content {
  width: 100%;
  max-width: 520px;
  background: var(--color-surface, var(--cx-color-surface, #ffffff));
  border: 1px solid var(--color-border, var(--cx-color-border, #e5e5e5));
  border-radius: var(--radius-xl, var(--cx-radius-xl, 16px));
  box-shadow: var(--shadow-xl, var(--cx-shadow-4, 0 20px 40px rgba(0, 0, 0, 0.18)));
  overflow: hidden;
  color: var(--color-text, var(--cx-color-text, #1e293b));
  font-family: var(--font-family, var(--cx-font-sans, "Inter", sans-serif));
  animation: cxKgModalSlideUp 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes cxKgModalSlideUp {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.cx-kg-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--color-border, var(--cx-color-border, #e5e5e5));
  background: var(--color-surface, var(--cx-color-surface, #ffffff));
}

.cx-kg-modal-header-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.cx-kg-modal-icon-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-md, var(--cx-radius-md, 8px));
  background: var(--color-primary-bg, var(--cx-color-primary-bg, #eaf6ff));
  color: var(--color-primary, var(--cx-color-primary, #2272b4));
  border: 1px solid var(--color-border-subtle, var(--cx-color-border-subtle, rgba(35, 116, 187, 0.15)));
  flex-shrink: 0;
}

.cx-kg-modal-title {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--color-text, var(--cx-color-text, #0f172a));
  line-height: 1.3;
}

.cx-kg-modal-subtitle {
  margin: 2px 0 0 0;
  font-size: 12px;
  color: var(--color-text-muted, var(--cx-color-text-muted, #64748b));
}

.cx-kg-modal-close-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: var(--radius-md, var(--cx-radius-md, 8px));
  background: transparent;
  border: none;
  color: var(--color-text-muted, var(--cx-color-text-muted, #64748b));
  cursor: pointer;
  transition: all 0.15s ease;
}

.cx-kg-modal-close-btn:hover {
  background: var(--color-surface-hover, var(--cx-color-surface-hover, #f5f5f5));
  color: var(--color-text, var(--cx-color-text, #0f172a));
}

.cx-kg-modal-form {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.cx-kg-modal-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.cx-kg-modal-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.cx-kg-modal-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text, var(--cx-color-text, #334155));
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.cx-kg-modal-label-required {
  color: var(--color-error-text, var(--cx-color-error-text, #c82d4c));
  margin-left: 2px;
}

.cx-kg-modal-label-badge {
  font-size: 10px;
  font-weight: 500;
  color: var(--color-text-subtle, var(--cx-color-text-subtle, #94a3b8));
}

.cx-kg-modal-label-action {
  font-size: 11px;
  font-weight: 500;
  color: var(--color-primary, var(--cx-color-primary, #2272b4));
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
}

.cx-kg-modal-label-action:hover {
  text-decoration: underline;
}

.cx-kg-input,
.cx-kg-select,
.cx-kg-textarea {
  width: 100%;
  padding: 8px 12px;
  font-size: 13px;
  font-family: var(--font-family, var(--cx-font-sans, "Inter", sans-serif));
  color: var(--color-text, var(--cx-color-text, #0f172a));
  background: var(--color-bg, var(--cx-color-bg, #ffffff));
  border: 1px solid var(--color-border, var(--cx-color-border, #d1d5db));
  border-radius: var(--radius-md, var(--cx-radius-md, 8px));
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
  box-sizing: border-box;
}

.cx-kg-input::placeholder,
.cx-kg-textarea::placeholder {
  color: var(--color-text-subtle, var(--cx-color-text-subtle, #94a3b8));
}

.cx-kg-input:focus,
.cx-kg-select:focus,
.cx-kg-textarea:focus {
  border-color: var(--color-primary, var(--cx-color-primary, #2272b4));
  box-shadow: 0 0 0 3px var(--color-primary-bg, var(--cx-color-primary-bg, rgba(34, 114, 180, 0.15)));
}

.cx-kg-input:disabled,
.cx-kg-select:disabled,
.cx-kg-select.is-disabled {
  background: var(--color-surface-subtle, var(--cx-color-surface-subtle, #f1f5f9));
  color: var(--color-text-muted, var(--cx-color-text-muted, #64748b));
  cursor: not-allowed;
  opacity: 0.85;
  border-color: var(--color-border, var(--cx-color-border, #d1d5db));
}

.cx-kg-input-mono {
  font-family: var(--font-mono, var(--cx-font-mono, monospace));
  font-size: 12px;
}

.cx-kg-textarea {
  resize: vertical;
  min-height: 72px;
}

.cx-kg-alert-error {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 14px;
  border-radius: var(--radius-md, var(--cx-radius-md, 8px));
  background: var(--color-error-bg, var(--cx-color-error-bg, #fff5f7));
  border: 1px solid var(--color-error-border, var(--cx-color-error-border, #fbd0d8));
  color: var(--color-error-text, var(--cx-color-error-text, #c82d4c));
  font-size: 12px;
  line-height: 1.4;
  animation: cxKgFadeIn 0.15s ease-out;
}

.cx-kg-modal-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding-top: 14px;
  border-top: 1px solid var(--color-border, var(--cx-color-border, #e5e5e5));
  margin-top: 4px;
}

.cx-kg-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 16px;
  font-size: 12px;
  font-weight: 600;
  font-family: var(--font-family, var(--cx-font-sans, "Inter", sans-serif));
  border-radius: var(--radius-md, var(--cx-radius-md, 8px));
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.cx-kg-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.cx-kg-btn-primary {
  background: var(--color-primary, var(--cx-color-primary, #2272b4));
  color: #ffffff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.cx-kg-btn-primary:hover:not(:disabled) {
  background: var(--color-primary-hover, var(--cx-color-primary-hover, #0e538b));
}

.cx-kg-btn-secondary {
  background: var(--color-surface, var(--cx-color-surface, #ffffff));
  border-color: var(--color-border, var(--cx-color-border, #e5e5e5));
  color: var(--color-text, var(--cx-color-text, #334155));
}

.cx-kg-btn-secondary:hover:not(:disabled) {
  background: var(--color-surface-hover, var(--cx-color-surface-hover, #f5f5f5));
  border-color: var(--color-border-strong, var(--cx-color-border-strong, #cfcfcf));
}

.cx-kg-btn-ghost {
  background: transparent;
  color: var(--color-text-muted, var(--cx-color-text-muted, #64748b));
}

.cx-kg-btn-ghost:hover:not(:disabled) {
  background: var(--color-surface-hover, var(--cx-color-surface-hover, #f5f5f5));
  color: var(--color-text, var(--cx-color-text, #0f172a));
}

.cx-kg-btn-danger {
  background: var(--color-error-text, var(--cx-color-error-text, #c82d4c));
  color: #ffffff;
}

.cx-kg-btn-danger:hover:not(:disabled) {
  opacity: 0.9;
}


/* ==========================================================================
   3. Side Inspector Drawer (.cx-kg-drawer-*)
   ========================================================================== */

.cx-kg-drawer-standard {
  /* Inherits position, surface, borders, resize handle from .cx-ontology-config-panel */
}

.cx-kg-drawer-header-standard {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
}

.cx-kg-drawer-body-standard {
  padding: 14px;
  overflow-y: auto;
  flex: 1;
}

.cx-kg-drawer {
  position: absolute;
  right: 12px;
  top: 44px;
  bottom: 12px;
  width: 400px;
  max-width: calc(100vw - 24px);
  z-index: 35;
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-xl, var(--cx-radius-xl, 16px));
  background: var(--color-surface, var(--cx-color-surface, #ffffff));
  border: 1px solid var(--color-border, var(--cx-color-border, #e5e5e5));
  box-shadow: var(--shadow-xl, var(--cx-shadow-4, 0 16px 36px rgba(0, 0, 0, 0.16)));
  overflow: hidden;
  color: var(--color-text, var(--cx-color-text, #0f172a));
  font-family: var(--font-family, var(--cx-font-sans, "Inter", sans-serif));
  animation: cxKgDrawerSlideIn 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

@keyframes cxKgDrawerSlideIn {
  from {
    opacity: 0;
    transform: translateX(20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.cx-kg-drawer-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--color-border, var(--cx-color-border, #e5e5e5));
  background: var(--color-surface, var(--cx-color-surface, #ffffff));
  flex-shrink: 0;
}

.cx-kg-drawer-header-left {
  flex: 1;
  min-width: 0;
}

.cx-kg-drawer-badges-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}

.cx-kg-kind-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: var(--radius-full, 9999px);
  font-size: 11px;
  font-weight: 600;
  text-transform: capitalize;
  border: 1px solid transparent;
}

.cx-kg-kind-org,
.cx-kg-kind-project {
  background: var(--color-warning-bg, var(--cx-color-warning-bg, #fff9eb));
  color: var(--color-warning-text, var(--cx-color-warning-text, #be501e));
  border-color: var(--color-warning-border, var(--cx-color-warning-border, #f8d4a5));
}

.cx-kg-kind-domain {
  background: var(--color-primary-bg, var(--cx-color-primary-bg, #eaf6ff));
  color: var(--color-primary, var(--cx-color-primary, #2272b4));
  border-color: var(--color-info-border, var(--cx-color-info-border, #64c3ff));
}

.cx-kg-kind-subdomain,
.cx-kg-kind-capability {
  background: var(--color-success-bg, var(--cx-color-success-bg, #f3fcf6));
  color: var(--color-success-text, var(--cx-color-success-text, #277c43));
  border-color: var(--color-success-border, var(--cx-color-success-border, #97c459));
}

.cx-kg-kind-element {
  background: var(--color-surface-subtle, var(--cx-color-surface-subtle, #f5f5f5));
  color: var(--color-text-muted, var(--cx-color-text-muted, #64748b));
  border-color: var(--color-border, var(--cx-color-border, #e5e5e5));
}

.cx-kg-kind-custom {
  background: var(--color-primary-bg, var(--cx-color-primary-bg, #eaf6ff));
  color: var(--color-primary, var(--cx-color-primary, #2272b4));
  border-color: var(--color-border, var(--cx-color-border, #e5e5e5));
}

.cx-kg-status-badge {
  font-family: var(--font-mono, var(--cx-font-mono, monospace));
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: var(--radius-sm, 6px);
  background: var(--color-surface-hover, var(--cx-color-surface-hover, #f1f3f5));
  color: var(--color-text-muted, var(--cx-color-text-muted, #64748b));
  border: 1px solid var(--color-border, var(--cx-color-border, #e5e5e5));
}

.cx-kg-drawer-title {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: var(--color-text, var(--cx-color-text, #0f172a));
  line-height: 1.35;
  word-break: break-word;
}

.cx-kg-drawer-id {
  margin: 3px 0 0 0;
  font-family: var(--font-mono, var(--cx-font-mono, monospace));
  font-size: 11px;
  color: var(--color-text-muted, var(--cx-color-text-muted, #64748b));
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cx-kg-drawer-header-actions {
  display: flex;
  align-items: center;
  gap: 4px;
}

.cx-kg-drawer-icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: var(--radius-md, var(--cx-radius-md, 8px));
  background: transparent;
  border: none;
  color: var(--color-text-muted, var(--cx-color-text-muted, #64748b));
  cursor: pointer;
  transition: all 0.15s ease;
}

.cx-kg-drawer-icon-btn:hover {
  background: var(--color-surface-hover, var(--cx-color-surface-hover, #f5f5f5));
  color: var(--color-text, var(--cx-color-text, #0f172a));
}

.cx-kg-drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: 0;
}

.cx-kg-drawer-section-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted, var(--cx-color-text-muted, #64748b));
  margin: 0 0 6px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.cx-kg-drawer-card {
  padding: 12px 14px;
  border-radius: var(--radius-lg, var(--cx-radius-lg, 12px));
  background: var(--color-surface-subtle, var(--cx-color-surface-subtle, #f8fafc));
  border: 1px solid var(--color-border, var(--cx-color-border, #e2e8f0));
}

.cx-kg-drawer-description {
  font-size: 13px;
  line-height: 1.5;
  color: var(--color-text, var(--cx-color-text, #334155));
  margin: 0;
  white-space: pre-wrap;
}

.cx-kg-drawer-metrics-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.cx-kg-drawer-metric-card {
  padding: 12px 14px;
  border-radius: var(--radius-lg, var(--cx-radius-lg, 12px));
  background: var(--color-surface-subtle, var(--cx-color-surface-subtle, #f8fafc));
  border: 1px solid var(--color-border, var(--cx-color-border, #e2e8f0));
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.cx-kg-drawer-metric-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11px;
  font-weight: 600;
  color: var(--color-text-muted, var(--cx-color-text-muted, #64748b));
}

.cx-kg-drawer-metric-hint {
  font-size: 10px;
  color: var(--color-text-subtle, var(--cx-color-text-subtle, #94a3b8));
}

.cx-kg-drawer-add-child-action {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 7px;
  font-size: 10px;
  font-weight: 600;
  border-radius: var(--radius-sm, var(--cx-radius-sm, 4px));
  background: var(--color-primary-subtle, var(--cx-color-primary-subtle, rgba(34, 114, 180, 0.1)));
  color: var(--color-primary, var(--cx-color-primary, #2272b4));
  border: 1px solid var(--color-primary-border, var(--cx-color-primary-border, rgba(34, 114, 180, 0.25)));
  cursor: pointer;
  transition: all var(--transition-fast, 0.15s ease);
}

.cx-kg-drawer-add-child-action:hover {
  background: var(--color-primary, var(--cx-color-primary, #2272b4));
  color: #ffffff;
  border-color: var(--color-primary, var(--cx-color-primary, #2272b4));
}

.cx-kg-drawer-metric-val {
  font-size: 20px;
  font-weight: 700;
  color: var(--color-primary, var(--cx-color-primary, #2272b4));
  line-height: 1.2;
}

.cx-kg-drawer-metric-val.is-amber {
  color: var(--color-warning-text, var(--cx-color-warning-text, #be501e));
}

.cx-kg-drawer-conn-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cx-kg-drawer-conn-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-muted, var(--cx-color-text-muted, #64748b));
}

.cx-kg-drawer-conn-count {
  font-family: var(--font-mono, var(--cx-font-mono, monospace));
  font-size: 11px;
  color: var(--color-text-subtle, var(--cx-color-text-subtle, #94a3b8));
}

.cx-kg-drawer-conn-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.cx-kg-drawer-conn-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 500;
  border-radius: var(--radius-md, var(--cx-radius-md, 8px));
  background: var(--color-bg, var(--cx-color-bg, #ffffff));
  border: 1px solid var(--color-border, var(--cx-color-border, #d1d5db));
  color: var(--color-text, var(--cx-color-text, #334155));
  cursor: pointer;
  transition: all 0.12s ease;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cx-kg-drawer-conn-chip:hover {
  border-color: var(--color-primary, var(--cx-color-primary, #2272b4));
  color: var(--color-primary, var(--cx-color-primary, #2272b4));
  background: var(--color-primary-bg, var(--cx-color-primary-bg, #eaf6ff));
}

.cx-kg-drawer-empty-text {
  font-size: 12px;
  font-style: italic;
  color: var(--color-text-subtle, var(--cx-color-text-subtle, #94a3b8));
  margin: 0;
}

.cx-kg-drawer-tags-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.cx-kg-drawer-tag {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 500;
  border-radius: var(--radius-sm, 6px);
  background: var(--color-surface-hover, var(--cx-color-surface-hover, #f1f5f9));
  color: var(--color-text-muted, var(--cx-color-text-muted, #64748b));
  border: 1px solid var(--color-border-subtle, var(--cx-color-border-subtle, #e2e8f0));
}

.cx-kg-drawer-rel-box {
  padding: 14px;
  border-radius: var(--radius-lg, var(--cx-radius-lg, 12px));
  background: var(--color-surface-subtle, var(--cx-color-surface-subtle, #f8fafc));
  border: 1px solid var(--color-border-strong, var(--cx-color-border-strong, #cbd5e1));
  display: flex;
  flex-direction: column;
  gap: 12px;
  animation: cxKgFadeIn 0.15s ease-out;
}

.cx-kg-drawer-rel-box-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text, var(--cx-color-text, #0f172a));
}

.cx-kg-drawer-delete-confirm {
  padding: 14px 18px;
  border-top: 1px solid var(--color-error-border, var(--cx-color-error-border, #fbd0d8));
  background: var(--color-error-bg, var(--cx-color-error-bg, #fff5f7));
  display: flex;
  flex-direction: column;
  gap: 8px;
  animation: cxKgFadeIn 0.15s ease-out;
}

.cx-kg-drawer-delete-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--color-error-text, var(--cx-color-error-text, #c82d4c));
}

.cx-kg-drawer-delete-desc {
  font-size: 11px;
  color: var(--color-error-text, var(--cx-color-error-text, #c82d4c));
  opacity: 0.9;
  line-height: 1.4;
  margin: 0;
}

.cx-kg-drawer-footer {
  padding: 14px 18px;
  border-top: 1px solid var(--color-border, var(--cx-color-border, #e5e5e5));
  background: var(--color-surface, var(--cx-color-surface, #ffffff));
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
/* ==========================================================================
   Ontology Atlas UI Styles
   Comprehensive styling for toolbar, side drawer, modals, legend, and pills
   ========================================================================== */

/* ==========================================================================
   Ontology Configuration Subsystem - Design System Aligned Styles
   
   Isolated strictly from core ontology graph canvas rendering.
   Uses standard CompassX design system tokens, variables, and typography.
   ========================================================================== */

/* Top Right Trigger Container & Button */

.cx-ontology-config-trigger {
  position: absolute;
  top: 6px;
  right: 10px;
  z-index: 30;
  display: flex;
  align-items: center;
  padding: 0;
  border-radius: 9999px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
  color: var(--color-text-muted);
  pointer-events: auto;
  transition: all 0.15s ease;
}

.cx-ontology-config-trigger:hover {
  border-color: var(--color-border-strong);
  color: var(--color-text);
}

.cx-ontology-config-trigger.is-active {
  background: var(--color-primary-bg);
  border-color: var(--color-primary);
  color: var(--color-primary);
  box-shadow: 0 0 0 2px var(--color-primary-bg);
}

.cx-ontology-config-trigger-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 3.5px 10px;
  border-radius: 9999px;
  font-size: 11px;
  font-weight: 500;
  font-family: var(--font-family);
  color: inherit;
  background: transparent;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s ease;
}

/* Side Configuration Panel */

.cx-ontology-config-panel {
  position: absolute;
  right: 10px;
  top: 40px;
  bottom: 10px;
  z-index: 35;
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-lg, 8px);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-md, 0 4px 16px rgba(0, 0, 0, 0.12));
  overflow: hidden;
  color: var(--color-text);
  font-family: var(--font-family);
  animation: cxPanelSlideIn 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes cxPanelSlideIn {
  from {
    opacity: 0;
    transform: translateX(16px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Resize Handle (Left edge) */

.cx-ontology-config-resize-handle {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 6px;
  cursor: ew-resize;
  z-index: 10;
  background: transparent;
  transition: background-color 0.15s ease;
}

.cx-ontology-config-resize-handle:hover,
.cx-ontology-config-resize-handle.is-dragging {
  background-color: var(--color-primary);
}

/* Header & Standard PageTabs */

.cx-ontology-config-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 8px 0 14px;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface);
  min-height: 44px;
  flex-shrink: 0;
  user-select: none;
}

.cx-ontology-config-header .page-tabs {
  margin: 0;
  border-bottom: none;
  gap: 16px;
  align-items: center;
  height: 100%;
}

.cx-ontology-config-header .page-tabs button {
  padding: 10px 2px 11px;
  font-size: 13px;
  font-weight: 500;
  border-bottom-width: 2.5px;
  white-space: nowrap;
}

.cx-ontology-config-header .page-tabs button:hover {
  color: var(--color-text);
}

.cx-ontology-config-header .page-tabs button.is-active {
  color: var(--color-primary);
  font-weight: 600;
  border-bottom-color: var(--color-primary);
}

.cx-ontology-config-close-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--radius);
  border: none;
  background: transparent;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: background-color 0.12s ease, color 0.12s ease;
}

.cx-ontology-config-close-btn:hover {
  background: var(--color-surface-hover);
  color: var(--color-text);
}

/* Panel Content Body */

.cx-ontology-config-body {
  flex: 1;
  width: 100%;
  padding: 16px;
  overflow-y: auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Kinds Section Header */

.cx-ontology-config-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--color-border);
}

.cx-ontology-config-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text);
}

.cx-ontology-config-subtitle {
  font-size: 11px;
  color: var(--color-text-muted);
  margin-top: 2px;
}

/* Form Container (Add / Edit) */

.cx-ontology-config-form {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg, 8px);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.cx-ontology-config-form-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text);
}

.cx-ontology-config-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

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

.cx-ontology-config-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.cx-ontology-config-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
}

/* Cards (Types & Relations) */

.cx-ontology-config-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border-radius: var(--radius, 6px);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}

.cx-ontology-config-card:hover {
  border-color: var(--color-border-strong);
  background: var(--color-surface-hover);
}

/* Sticky Action Container at the bottom of the list */

.cx-ontology-config-sticky-footer {
  position: sticky;
  bottom: -16px;
  margin-top: 4px;
  padding: 8px 0 16px;
  background: var(--color-surface);
  z-index: 5;
}

/* Dotted Add Type Box at end of list */

.cx-ontology-config-add-box {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: var(--radius-lg, 8px);
  border: 1px dashed var(--color-border);
  background: var(--color-surface);
  color: var(--color-text-muted);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  width: 100%;
  transition: all 0.15s ease;
}

.cx-ontology-config-add-box:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
  background: var(--color-primary-bg, rgba(34, 114, 180, 0.05));
}

.cx-ontology-config-card-icon-box {
  width: 32px;
  height: 32px;
  border-radius: var(--radius, 6px);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--color-primary);
}

.cx-ontology-config-slug-badge {
  font-family: var(--cx-font-mono, monospace);
  font-size: 10px;
  font-weight: 500;
  padding: 1px 6px;
  border-radius: 4px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
}

.cx-ontology-config-meta-item {
  font-size: 11px;
  color: var(--color-text-muted);
}

.cx-ontology-config-meta-val {
  color: var(--color-text);
  font-weight: 500;
  text-transform: capitalize;
}

/* Type Relationship Flow Visualizer */

.cx-ontology-relation-flow {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.cx-ontology-type-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  background: transparent;
  border: none;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text);
}

.cx-ontology-rel-arrow {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: var(--color-text-muted);
}

.cx-ontology-rel-badge {
  font-family: var(--cx-font-mono, monospace);
  font-size: 11px;
  font-weight: 600;
  color: var(--color-primary);
  background: transparent;
  border: none;
  padding: 0;
}

.cx-ontology-hier-badge {
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  padding: 1px 5px;
  border-radius: 3px;
  background: var(--color-success-bg);
  color: var(--color-success);
}

/* Grouped Type Pair Card */

.cx-ontology-pair-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 12px;
  border-radius: var(--radius, 6px);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}

.cx-ontology-pair-card:hover {
  border-color: var(--color-border-strong);
}

.cx-ontology-pair-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.cx-ontology-pair-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text);
}

.cx-ontology-pair-arrow {
  color: var(--color-text-muted);
  display: inline-flex;
  align-items: center;
}

/* Relation Pills in Grouped Card */

.cx-ontology-pair-relations {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.cx-ontology-relation-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 8px;
  border-radius: 4px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  font-family: var(--cx-font-mono, monospace);
  font-size: 11px;
  font-weight: 500;
  color: var(--color-text);
  transition: all 0.12s ease;
}

.cx-ontology-relation-pill:hover {
  border-color: var(--color-border-strong);
}

.cx-ontology-relation-pill.is-hierarchical {
  border-color: rgba(16, 185, 129, 0.35);
  background: rgba(16, 185, 129, 0.06);
}

.cx-ontology-relation-pill-del {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  border-radius: 3px;
  border: none;
  background: transparent;
  color: var(--color-text-muted);
  cursor: pointer;
  padding: 0;
  margin-left: 2px;
  transition: all 0.12s ease;
}

.cx-ontology-relation-pill-del:hover {
  background: var(--color-danger-bg, #fee2e2);
  color: var(--color-danger, #ef4444);
}

/* Inline Add Relation Button & Input */

.cx-ontology-add-rel-inline-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 7px;
  border-radius: 4px;
  border: 1px dashed var(--color-border);
  background: transparent;
  color: var(--color-text-muted);
  font-size: 10px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.12s ease;
}

.cx-ontology-add-rel-inline-btn:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
  background: var(--color-primary-bg, rgba(34, 114, 180, 0.05));
}

.cx-ontology-add-rel-inline-form {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.cx-ontology-add-rel-inline-input {
  height: 22px;
  padding: 1px 6px;
  font-size: 11px;
  border-radius: 3px;
  border: 1px solid var(--color-primary);
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--cx-font-mono, monospace);
  outline: none;
  width: 110px;
}

/* Action Icon Buttons inside cards */

.cx-ontology-config-icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: var(--radius, 4px);
  border: none;
  background: transparent;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: all 0.12s ease;
}

.cx-ontology-config-icon-btn:hover {
  background: var(--color-surface-hover);
  color: var(--color-text);
}

.cx-ontology-config-icon-btn.is-danger:hover {
  background: var(--color-danger-bg, #fee2e2);
  color: var(--color-danger, #ef4444);
}

.ontology-page-root {
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 100vh;
  background-color: #090a10;
  overflow: hidden;
  user-select: none;
  transition: background-color 0.25s ease;
}

.page-content:has(.ontology-page-root) {
  padding: 0;
  overflow: hidden;
  height: 100%;
}

.page-content .ontology-page-root {
  height: 100%;
  min-height: 100%;
}

/* ==========================================================================
   Light / Dark Mode Token Definitions for Canvas 2D Engine
   ========================================================================== */

.ontology-page-root[data-theme="light"] {
  background-color: #f8fafc;
  color: #1e293b;

  /* 2.1 Node surface tokens - Light Mode */
  --topology-v2-node-fill-project: #ffffff;
  --topology-v2-node-fill-domain: #ffffff;
  --topology-v2-node-fill-capability: #f8fafc;
  --topology-v2-node-fill-element: #f1f5f9;
  --topology-v2-ink-depth-leaf: #64748b;
  --topology-v2-ink-depth-mid: #475569;
  --topology-v2-ink-depth-top: #1e293b;
  --topology-v2-node-stroke-project: #d97706;
  --topology-v2-node-stroke-domain: #475569;
  --topology-v2-node-stroke-capability: #64748b;
  --topology-v2-node-stroke-element: #94a3b8;
  --topology-v2-node-fill-dim: #f1f5f9;
  --topology-v2-node-stroke-dim: #cbd5e1;
  --topology-v2-spotlight-rest-alpha: 0.65;
  --topology-v2-spotlight-ring-speed: 0.012;
  --topology-v2-node-fill-stale: #f8fafc;
  --topology-v2-node-stroke-stale: #94a3b8;
  --topology-v2-node-hole-fill: #ffffff;
  --topology-v2-indigo: #475569;
  --topology-v2-indigo-bright: #334155;
  --topology-v2-amber-hub: #b45309;
  --topology-v2-recent-change: #0d9488;
  --topology-v2-numeral-shadow: #ffffff;
  --topology-v2-numeral-face: #334155;
  --topology-v2-cluster-chip-border-rest: #94a3b8;
  --topology-v2-cluster-chip-ink-rest: #475569;
  --topology-v2-node-sheen-tint: #ffffff;
  --topology-v2-node-sheen-blend: 0.8;
  --topology-v2-project-hairline-inner: rgba(217, 119, 6, 0.4);
  --topology-v2-project-pin-tick: rgba(217, 119, 6, 0.65);
  --topology-v2-selection-ring-indigo: #475569;
  --topology-v2-selection-ring-hairline: rgba(71, 85, 105, 0.45);
  --topology-v2-hover-ring: rgba(100, 116, 139, 0.55);
  --topology-v2-hover-shimmer-seg: 0.16;
  --topology-v2-hover-shimmer-period-ms: 2400;

  /* 2.2 Edge, Label, Background tokens - Light Mode */
  --topology-v2-edge-contains: #94a3b8;
  --topology-v2-edge-contains-l0: #475569;
  --topology-v2-edge-contains-l2: #cbd5e1;
  --topology-v2-edge-passthrough-alpha: 0.35;
  --topology-v2-node-min-separation-ratio: 1.35;
  --topology-v2-radius-magnitude-k: 0.45;
  --topology-v2-edge-selected: rgba(71, 85, 105, 0.8);
  --topology-v2-expanded-cohort: rgba(100, 116, 139, 0.65);
  --topology-v2-dust-parallax-min: 0.15;
  --topology-v2-dust-parallax-max: 0.45;
  --topology-v2-canvas-bg-parallax: 0.82;
  --topology-v2-edge-depends: #64748b;
  --topology-v2-edge-dim: #e2e8f0;
  --topology-v2-hull-stroke: #cbd5e1;
  --topology-v2-label-project: #92400e;
  --topology-v2-label-domain: #1e293b;
  --topology-v2-label-capability: #334155;
  --topology-v2-label-element: #475569;
  --topology-v2-label-max-width: 168;
  --topology-v2-canvas-bg-near: #f8fafc;
  --topology-v2-canvas-bg-far: #f1f5f9;
  --topology-v2-grid-minor: rgba(148, 163, 184, 0.2);
  --topology-v2-grid-major: rgba(148, 163, 184, 0.4);
  --topology-v2-vignette-base-alpha: 0.05;
  --topology-v2-vignette-far-alpha: 0.02;
  --topology-v2-dome-ring: #cbd5e1;
  --canvas-bg-ink-max: 0.08;
  --canvas-bg-particle-rgb: 100, 116, 139;

  /* Panel Tokens */
  --topology-v2-panel-surface: #ffffff;
  --topology-v2-panel-border: rgba(203, 213, 225, 0.8);
  --topology-v2-panel-divider: rgba(226, 232, 240, 0.8);
  --topology-v2-panel-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
  --topology-v2-panel-row-hover: rgba(241, 245, 249, 0.8);
  --topology-v2-panel-text-primary: #0f172a;
  --topology-v2-panel-text-secondary: #475569;
  --topology-v2-panel-text-tertiary: #64748b;
  --topology-v2-panel-text-quaternary: #94a3b8;
}

.ontology-page-root[data-theme="dark"] {
  background-color: #090a10;
  color: #e2e8f0;

  /* 2.1 Node surface tokens - Dark Mode */
  --topology-v2-node-fill-project: #1c1c22;
  --topology-v2-node-fill-domain: #191920;
  --topology-v2-node-fill-capability: #17171d;
  --topology-v2-node-fill-element: #15151a;
  --topology-v2-ink-depth-leaf: #7a7a86;
  --topology-v2-ink-depth-mid: #80808c;
  --topology-v2-ink-depth-top: #8a8a96;
  --topology-v2-node-stroke-project: #9898a3;
  --topology-v2-node-stroke-domain: #8a8a96;
  --topology-v2-node-stroke-capability: #80808c;
  --topology-v2-node-stroke-element: #7a7a86;
  --topology-v2-node-fill-dim: #1e1e24;
  --topology-v2-node-stroke-dim: #6a6a74;
  --topology-v2-spotlight-rest-alpha: 0.65;
  --topology-v2-spotlight-ring-speed: 0.012;
  --topology-v2-node-fill-stale: #141418;
  --topology-v2-node-stroke-stale: #454549;
  --topology-v2-node-hole-fill: #0c0c10;
  --topology-v2-indigo: #6366f1;
  --topology-v2-indigo-bright: #8890e0;
  --topology-v2-amber-hub: #d4b478;
  --topology-v2-recent-change: #3fbfae;
  --topology-v2-numeral-shadow: #08080a;
  --topology-v2-numeral-face: #8c8c94;
  --topology-v2-cluster-chip-border-rest: #5c5c65;
  --topology-v2-cluster-chip-ink-rest: #5f5f65;
  --topology-v2-node-sheen-tint: #232329;
  --topology-v2-node-sheen-blend: 0.6;
  --topology-v2-project-hairline-inner: rgba(212, 180, 120, 0.35);
  --topology-v2-project-pin-tick: rgba(212, 180, 120, 0.5);
  --topology-v2-selection-ring-indigo: #8890e0;
  --topology-v2-selection-ring-hairline: rgba(94, 106, 210, 0.45);
  --topology-v2-hover-ring: rgba(99, 102, 241, 0.55);
  --topology-v2-hover-shimmer-seg: 0.16;
  --topology-v2-hover-shimmer-period-ms: 2400;

  /* 2.2 Edge, Label, Background tokens - Dark Mode */
  --topology-v2-edge-contains: #80808c;
  --topology-v2-edge-contains-l0: #8a8a96;
  --topology-v2-edge-contains-l2: #7a7a86;
  --topology-v2-edge-passthrough-alpha: 0.3;
  --topology-v2-node-min-separation-ratio: 1.35;
  --topology-v2-radius-magnitude-k: 0.45;
  --topology-v2-edge-selected: rgba(200, 210, 255, 0.66);
  --topology-v2-expanded-cohort: rgba(146, 156, 194, 0.72);
  --topology-v2-dust-parallax-min: 0.15;
  --topology-v2-dust-parallax-max: 0.45;
  --topology-v2-canvas-bg-parallax: 0.82;
  --topology-v2-edge-depends: #666685;
  --topology-v2-edge-dim: #1e1e22;
  --topology-v2-hull-stroke: #3a3a42;
  --topology-v2-label-project: #d4b478;
  --topology-v2-label-domain: #b8b8c1;
  --topology-v2-label-capability: #84848c;
  --topology-v2-label-element: #6a6a73;
  --topology-v2-label-max-width: 168;
  --topology-v2-canvas-bg-near: #0a0a0d;
  --topology-v2-canvas-bg-far: #050507;
  --topology-v2-grid-minor: #0e0e13;
  --topology-v2-grid-major: #121218;
  --topology-v2-vignette-base-alpha: 0.32;
  --topology-v2-vignette-far-alpha: 0.18;
  --topology-v2-dome-ring: #43434f;
  --canvas-bg-ink-max: 0.08;
  --canvas-bg-particle-rgb: 150, 165, 220;

  /* Panel Tokens */
  --topology-v2-panel-surface: #17171c;
  --topology-v2-panel-border: rgba(255, 255, 255, 0.08);
  --topology-v2-panel-divider: rgba(255, 255, 255, 0.06);
  --topology-v2-panel-shadow: 0 8px 32px rgba(0, 0, 0, 0.45);
  --topology-v2-panel-row-hover: rgba(255, 255, 255, 0.06);
  --topology-v2-panel-text-primary: #ececf0;
  --topology-v2-panel-text-secondary: #a3a3ac;
  --topology-v2-panel-text-tertiary: #868690;
  --topology-v2-panel-text-quaternary: #82828a;
}

/* Floating Title & Breadcrumbs Trail */

.ontology-header-pills {
  position: absolute;
  top: 6px;
  left: 10px;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 8px;
  pointer-events: auto;
}

.ontology-pill {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px;
  border-radius: 9999px;
  background: rgba(19, 23, 34, 0.88);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(43, 51, 74, 0.85);
  box-shadow: 0 8px 20px -4px rgba(0, 0, 0, 0.45);
  color: #ffffff;
  font-size: 11px;
  font-weight: 600;
  transition: all 0.2s ease;
}

.ontology-pill-trail {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px;
  border-radius: 9999px;
  background: rgba(30, 35, 56, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(59, 71, 110, 0.9);
  box-shadow: 0 8px 20px -4px rgba(0, 0, 0, 0.45);
  color: #c7d2fe;
  font-size: 11px;
  font-weight: 500;
  transition: all 0.2s ease;
}

@media (max-width: 1280px) {
  .ontology-pill .ontology-pill-count {
    display: none;
  }
}

/* Floating Top Center Toolbar */

.ontology-toolbar-container {
  position: absolute;
  top: 6px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 2.5px 5px;
  border-radius: 9999px;
  background: rgba(19, 23, 34, 0.90);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(43, 51, 74, 0.85);
  box-shadow: 0 14px 24px -8px rgba(0, 0, 0, 0.5), 0 0 10px rgba(0, 0, 0, 0.2);
  color: #cbd5e1;
  pointer-events: auto;
  white-space: nowrap;
  max-width: calc(100% - 32px);
  overflow-x: auto;
  scrollbar-width: none;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.ontology-toolbar-container::-webkit-scrollbar {
  display: none;
}

.ontology-toolbar-btn {
  display: flex;
  align-items: center;
  gap: 4.5px;
  padding: 3px 8px;
  border-radius: 9999px;
  font-size: 11px;
  font-weight: 500;
  color: #cbd5e1;
  background: transparent;
  border: none;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.ontology-toolbar-btn:hover {
  background: #20273c;
  color: #ffffff;
}

.ontology-toolbar-btn.active {
  background: rgba(59, 130, 246, 0.2);
  color: #93c5fd;
  border: 1px solid rgba(59, 130, 246, 0.4);
}

.ontology-toolbar-divider {
  width: 1px;
  height: 12px;
  background: #2e374f;
  margin: 0 1px;
}

.ontology-kbd-badge {
  padding: 1px 4px;
  font-size: 9px;
  font-family: ui-monospace, monospace;
  letter-spacing: 0.05em;
  border-radius: 3px;
  background: #1e2538;
  color: #94a3b8;
  border: 1px solid rgba(51, 65, 85, 0.6);
}

/* Side Inspector Drawer */

.ontology-side-drawer {
  position: absolute;
  right: 10px;
  top: 40px;
  bottom: 10px;
  width: 384px;
  max-width: calc(100vw - 32px);
  z-index: 30;
  display: flex;
  flex-direction: column;
  border-radius: 16px;
  background: rgba(15, 18, 29, 0.92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid #23293d;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.7);
  overflow: hidden;
  color: #e2e8f0;
  animation: ontologySlideIn 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

@keyframes ontologySlideIn {
  from {
    opacity: 0;
    transform: translateX(20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Modals Overlay */

.ontology-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  animation: ontologyFadeIn 0.15s ease;
}

@keyframes ontologyFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.ontology-modal-content {
  width: 100%;
  max-width: 600px;
  border-radius: 16px;
  background: #0f121d;
  border: 1px solid #23293d;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.8);
  overflow: hidden;
  color: #e2e8f0;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.ontology-modal-content-lg {
  width: 100%;
  max-width: 850px;
  border-radius: 16px;
  background: #0f121d;
  border: 1px solid #23293d;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.8);
  overflow: hidden;
  color: #e2e8f0;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

/* Bottom Right Legend */

.ontology-legend-container {
  position: absolute;
  bottom: 16px;
  right: 16px;
  z-index: 30;
  border-radius: 12px;
  background: rgba(15, 18, 29, 0.9);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid #23293d;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.5);
  color: #cbd5e1;
  overflow: hidden;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

/* ==========================================================================
   Light Theme UI Overrides
   ========================================================================== */

.ontology-page-root[data-theme="light"] .ontology-pill {
  background: rgba(255, 255, 255, 0.94);
  border-color: rgba(203, 213, 225, 0.85);
  color: #0f172a;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.04);
}

.ontology-page-root[data-theme="light"] .ontology-pill span.font-mono {
  background: #f1f5f9;
  color: #475569;
}

.ontology-page-root[data-theme="light"] .ontology-pill-trail {
  background: rgba(240, 244, 255, 0.95);
  border-color: rgba(199, 210, 254, 0.9);
  color: #3730a3;
  box-shadow: 0 10px 25px -5px rgba(79, 70, 229, 0.1);
}

.ontology-page-root[data-theme="light"] .ontology-toolbar-container {
  background: rgba(255, 255, 255, 0.94);
  border-color: rgba(203, 213, 225, 0.85);
  box-shadow: 0 20px 30px -10px rgba(0, 0, 0, 0.08), 0 4px 6px -2px rgba(0, 0, 0, 0.04);
  color: #475569;
}

.ontology-page-root[data-theme="light"] .ontology-toolbar-btn {
  color: #475569;
}

.ontology-page-root[data-theme="light"] .ontology-toolbar-btn:hover {
  background: #f1f5f9;
  color: #0f172a;
}

.ontology-page-root[data-theme="light"] .ontology-toolbar-btn.active {
  background: #e0e7ff;
  color: #3730a3;
  border-color: #c7d2fe;
}

.ontology-page-root[data-theme="light"] .ontology-toolbar-divider {
  background: #e2e8f0;
}

.ontology-page-root[data-theme="light"] .ontology-kbd-badge {
  background: #f1f5f9;
  color: #64748b;
  border-color: #cbd5e1;
}

.ontology-page-root[data-theme="light"] .ontology-side-drawer {
  background: rgba(255, 255, 255, 0.95);
  border-color: #e2e8f0;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15);
  color: #334155;
}

.ontology-page-root[data-theme="light"] .ontology-side-drawer .bg-\[\#141827\]\/60 {
  background-color: rgba(248, 250, 252, 0.85) !important;
}

.ontology-page-root[data-theme="light"] .ontology-side-drawer .border-\[\#23293d\] {
  border-color: #e2e8f0 !important;
}

.ontology-page-root[data-theme="light"] .ontology-side-drawer .text-white {
  color: #0f172a !important;
}

.ontology-page-root[data-theme="light"] .ontology-side-drawer .text-\[\#e2e8f0\] {
  color: #334155 !important;
}

.ontology-page-root[data-theme="light"] .ontology-side-drawer .text-\[\#cbd5e1\] {
  color: #475569 !important;
}

.ontology-page-root[data-theme="light"] .ontology-side-drawer .text-\[\#94a3b8\] {
  color: #64748b !important;
}

.ontology-page-root[data-theme="light"] .ontology-side-drawer .bg-\[\#141828\] {
  background-color: #f1f5f9 !important;
}

.ontology-page-root[data-theme="light"] .ontology-side-drawer .bg-\[\#161b2e\] {
  background-color: #f8fafc !important;
}

.ontology-page-root[data-theme="light"] .ontology-side-drawer .bg-\[\#1e2438\] {
  background-color: #e2e8f0 !important;
}

.ontology-page-root[data-theme="light"] .ontology-side-drawer .border-\[\#2b3553\] {
  border-color: #cbd5e1 !important;
}

.ontology-page-root[data-theme="light"] .ontology-legend-container {
  background: rgba(255, 255, 255, 0.95);
  border-color: #e2e8f0;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.08);
  color: #475569;
}

.ontology-page-root[data-theme="light"] .ontology-legend-container .text-white {
  color: #0f172a !important;
}

.ontology-page-root[data-theme="light"] .ontology-legend-container .text-\[\#94a3b8\] {
  color: #64748b !important;
}

.ontology-page-root[data-theme="light"] .ontology-legend-container .border-\[\#20273c\] {
  border-color: #e2e8f0 !important;
}

.ontology-page-root[data-theme="light"] .ontology-legend-container button:hover {
  background-color: #f1f5f9 !important;
}

.ontology-page-root[data-theme="light"] .ontology-modal-overlay {
  background: rgba(15, 23, 42, 0.4);
}

.ontology-page-root[data-theme="light"] .ontology-modal-content,
.ontology-page-root[data-theme="light"] .ontology-modal-content-lg {
  background: #ffffff;
  border-color: #e2e8f0;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.2);
  color: #1e293b;
}

.ontology-page-root[data-theme="light"] .ontology-modal-content .bg-\[\#141827\],
.ontology-page-root[data-theme="light"] .ontology-modal-content-lg .bg-\[\#141827\] {
  background-color: #f8fafc !important;
}

.ontology-page-root[data-theme="light"] .ontology-modal-content .border-\[\#23293d\],
.ontology-page-root[data-theme="light"] .ontology-modal-content-lg .border-\[\#23293d\] {
  border-color: #e2e8f0 !important;
}

.ontology-page-root[data-theme="light"] .ontology-modal-content .text-white,
.ontology-page-root[data-theme="light"] .ontology-modal-content-lg .text-white {
  color: #0f172a !important;
}

.ontology-page-root[data-theme="light"] .ontology-modal-content input,
.ontology-page-root[data-theme="light"] .ontology-modal-content textarea,
.ontology-page-root[data-theme="light"] .ontology-modal-content-lg textarea {
  color: #0f172a !important;
}

.ontology-page-root[data-theme="light"] .ontology-modal-content input::placeholder,
.ontology-page-root[data-theme="light"] .ontology-modal-content textarea::placeholder,
.ontology-page-root[data-theme="light"] .ontology-modal-content-lg textarea::placeholder {
  color: #94a3b8 !important;
}

.ontology-page-root[data-theme="light"] .ontology-modal-content-lg .bg-\[\#121624\] {
  background-color: #f1f5f9 !important;
}

.ontology-page-root[data-theme="light"] .ontology-modal-content-lg .bg-\[\#090b12\] {
  background-color: #f8fafc !important;
}

.ontology-page-root[data-theme="light"] .ontology-modal-content-lg .bg-\[\#0b0e17\] {
  background-color: #ffffff !important;
}

.ontology-page-root[data-theme="light"] .ontology-modal-content-lg .border-\[\#20263c\],
.ontology-page-root[data-theme="light"] .ontology-modal-content-lg .border-\[\#20263a\] {
  border-color: #e2e8f0 !important;
}

.ontology-page-root[data-theme="light"] .ontology-modal-content-lg .bg-\[\#1a2033\] {
  background-color: #f1f5f9 !important;
  border-color: #cbd5e1 !important;
  color: #334155 !important;
}

.ontology-page-root[data-theme="light"] .ontology-modal-content .hover\:bg-\[\#171d2f\]:hover {
  background-color: #f1f5f9 !important;
}

.ontology-page-root[data-theme="light"] .ontology-modal-content .bg-\[\#1a2238\] {
  background-color: #e0e7ff !important;
}

.ontology-page-root[data-theme="light"] .ontology-edge-tooltip {
  background-color: rgba(255, 255, 255, 0.95) !important;
  border-color: #cbd5e1 !important;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.15) !important;
  color: #1e293b !important;
}

.ontology-page-root[data-theme="light"] .ontology-edge-tooltip .text-white {
  color: #0f172a !important;
}

.ontology-page-root[data-theme="light"] .ontology-edge-tooltip .text-\[\#94a3b8\] {
  color: #64748b !important;
}

.ontology-page-root[data-theme="light"] .ontology-edge-tooltip .text-\[\#818cf8\] {
  color: #4f46e5 !important;
}


.compute-page {
  height: 100%;
  min-height: 0;
  width: 100%;
  padding: 12px 16px 16px;
  background: var(--color-surface);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.compute-title {
  margin: 0 0 4px;
  color: var(--color-text);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.25;
}

.compute-tabs {
  margin: 0;
}

.compute-tabs.page-tabs {
  gap: 18px;
}

.compute-tabs.page-tabs button {
  padding: 8px 0 9px;
  font-size: 12px;
  font-weight: 600;
}

.compute-warning {
  padding: 8px 12px;
  border: 1px solid #f59e0b;
  border-radius: 4px;
  background: rgba(245, 158, 11, 0.1);
  color: #92400e;
  font-size: 13px;
}

.compute-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 28px;
}

.compute-search {
  width: 260px;
  height: 28px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 10px;
  border: 1px solid var(--color-border);
  border-radius: 3px;
  background: var(--color-surface);
  color: var(--color-text-muted);
}

.compute-search input {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--color-text);
  font: inherit;
  font-size: 12px;
}

.compute-search input::placeholder {
  color: var(--color-text-muted);
}

.compute-toolbar select {
  height: 28px;
  padding: 0 28px 0 10px;
  border: 1px solid var(--color-border);
  border-radius: 3px;
  background: var(--color-surface);
  color: var(--color-text);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}

.compute-toolbar-spacer {
  flex: 1;
}

.compute-primary-btn {
  height: 28px;
  padding: 0 12px;
  border: 0;
  border-radius: 3px;
  background: var(--color-primary);
  color: #fff;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

.compute-primary-btn:hover {
  background: var(--color-primary-hover);
}

.compute-secondary-btn {
  height: 28px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 10px;
  border: 1px solid var(--color-border);
  border-radius: 3px;
  background: var(--color-surface);
  color: var(--color-text);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

.compute-secondary-btn:hover:not(:disabled) {
  background: var(--color-surface-secondary);
}

.compute-secondary-btn:disabled {
  cursor: not-allowed;
  opacity: 0.65;
}

.compute-content {
  flex: 1;
  min-height: 0;
  overflow: auto;
}

.port-forward-panel {
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
  padding: 8px 10px;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  background: var(--color-surface);
}

.port-forward-summary {
  min-width: 150px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.port-forward-dot {
  width: 9px;
  height: 9px;
  flex: 0 0 9px;
  border-radius: 50%;
  background: #6b7280;
}

.port-forward-dot-healthy {
  background: #10b981;
}

.port-forward-dot-partial {
  background: #f59e0b;
}

.port-forward-dot-down {
  background: #ef4444;
}

.port-forward-title {
  color: var(--color-text);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
}

.port-forward-subtitle {
  color: var(--color-text-muted);
  font-size: 11px;
  line-height: 1.2;
}

.port-forward-chips {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  overflow-x: auto;
}

.port-forward-chip {
  height: 24px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  padding: 0 8px;
  border: 1px solid var(--color-border);
  border-radius: 3px;
  color: var(--color-text-muted);
  font-size: 11px;
  white-space: nowrap;
}

.port-forward-chip strong {
  color: var(--color-text);
  font-weight: 700;
}

.port-forward-chip-healthy,
.port-forward-chip-running {
  border-color: rgba(16, 185, 129, 0.35);
  background: rgba(16, 185, 129, 0.08);
}

.port-forward-chip-waiting {
  border-color: rgba(245, 158, 11, 0.35);
  background: rgba(245, 158, 11, 0.08);
}

.port-forward-chip-broken,
.port-forward-chip-stopped {
  border-color: rgba(239, 68, 68, 0.35);
  background: rgba(239, 68, 68, 0.08);
}

.port-forward-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.compute-default-pill {
  margin-left: 8px;
  padding: 2px 6px;
  border-radius: 999px;
  background: var(--color-surface-secondary);
  color: var(--color-text-muted);
  font-size: 11px;
  font-weight: 600;
}
/* this gets exported as style.css and can be used for the default theming */
/* these are the necessary styles for React/Svelte Flow, they get used by base.css and style.css */
.react-flow {
  direction: ltr;

  --xy-edge-stroke-default: #b1b1b7;
  --xy-edge-stroke-width-default: 1;
  --xy-edge-stroke-selected-default: #555;

  --xy-connectionline-stroke-default: #b1b1b7;
  --xy-connectionline-stroke-width-default: 1;

  --xy-attribution-background-color-default: rgba(255, 255, 255, 0.5);

  --xy-minimap-background-color-default: #fff;
  --xy-minimap-mask-background-color-default: rgba(240, 240, 240, 0.6);
  --xy-minimap-mask-stroke-color-default: transparent;
  --xy-minimap-mask-stroke-width-default: 1;
  --xy-minimap-node-background-color-default: #e2e2e2;
  --xy-minimap-node-stroke-color-default: transparent;
  --xy-minimap-node-stroke-width-default: 2;

  --xy-background-color-default: transparent;
  --xy-background-pattern-dots-color-default: #91919a;
  --xy-background-pattern-lines-color-default: #eee;
  --xy-background-pattern-cross-color-default: #e2e2e2;
  background-color: var(--xy-background-color, var(--xy-background-color-default));
  --xy-node-color-default: inherit;
  --xy-node-border-default: 1px solid #1a192b;
  --xy-node-background-color-default: #fff;
  --xy-node-group-background-color-default: rgba(240, 240, 240, 0.25);
  --xy-node-boxshadow-hover-default: 0 1px 4px 1px rgba(0, 0, 0, 0.08);
  --xy-node-boxshadow-selected-default: 0 0 0 0.5px #1a192b;
  --xy-node-border-radius-default: 3px;

  --xy-handle-background-color-default: #1a192b;
  --xy-handle-border-color-default: #fff;

  --xy-selection-background-color-default: rgba(0, 89, 220, 0.08);
  --xy-selection-border-default: 1px dotted rgba(0, 89, 220, 0.8);

  --xy-controls-button-background-color-default: #fefefe;
  --xy-controls-button-background-color-hover-default: #f4f4f4;
  --xy-controls-button-color-default: inherit;
  --xy-controls-button-color-hover-default: inherit;
  --xy-controls-button-border-color-default: #eee;
  --xy-controls-box-shadow-default: 0 0 2px 1px rgba(0, 0, 0, 0.08);

  --xy-edge-label-background-color-default: #ffffff;
  --xy-edge-label-color-default: inherit;
  --xy-resize-background-color-default: #3367d9;
}
.react-flow.dark {
  --xy-edge-stroke-default: #3e3e3e;
  --xy-edge-stroke-width-default: 1;
  --xy-edge-stroke-selected-default: #727272;

  --xy-connectionline-stroke-default: #b1b1b7;
  --xy-connectionline-stroke-width-default: 1;

  --xy-attribution-background-color-default: rgba(150, 150, 150, 0.25);

  --xy-minimap-background-color-default: #141414;
  --xy-minimap-mask-background-color-default: rgba(60, 60, 60, 0.6);
  --xy-minimap-mask-stroke-color-default: transparent;
  --xy-minimap-mask-stroke-width-default: 1;
  --xy-minimap-node-background-color-default: #2b2b2b;
  --xy-minimap-node-stroke-color-default: transparent;
  --xy-minimap-node-stroke-width-default: 2;

  --xy-background-color-default: #141414;
  --xy-background-pattern-dots-color-default: #777;
  --xy-background-pattern-lines-color-default: #777;
  --xy-background-pattern-cross-color-default: #777;
  --xy-node-color-default: #f8f8f8;
  --xy-node-border-default: 1px solid #3c3c3c;
  --xy-node-background-color-default: #1e1e1e;
  --xy-node-group-background-color-default: rgba(240, 240, 240, 0.25);
  --xy-node-boxshadow-hover-default: 0 1px 4px 1px rgba(255, 255, 255, 0.08);
  --xy-node-boxshadow-selected-default: 0 0 0 0.5px #999;

  --xy-handle-background-color-default: #bebebe;
  --xy-handle-border-color-default: #1e1e1e;

  --xy-selection-background-color-default: rgba(200, 200, 220, 0.08);
  --xy-selection-border-default: 1px dotted rgba(200, 200, 220, 0.8);

  --xy-controls-button-background-color-default: #2b2b2b;
  --xy-controls-button-background-color-hover-default: #3e3e3e;
  --xy-controls-button-color-default: #f8f8f8;
  --xy-controls-button-color-hover-default: #fff;
  --xy-controls-button-border-color-default: #5b5b5b;
  --xy-controls-box-shadow-default: 0 0 2px 1px rgba(0, 0, 0, 0.08);

  --xy-edge-label-background-color-default: #141414;
  --xy-edge-label-color-default: #f8f8f8;
}
.react-flow__background {
  background-color: var(--xy-background-color-props, var(--xy-background-color, var(--xy-background-color-default)));
  pointer-events: none;
  z-index: -1;
}
.react-flow__container {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}
.react-flow__pane {
  z-index: 1;
}
.react-flow__pane.draggable {
    cursor: grab;
  }
.react-flow__pane.dragging {
    cursor: grabbing;
  }
.react-flow__pane.selection {
    cursor: pointer;
  }
.react-flow__viewport {
  transform-origin: 0 0;
  z-index: 2;
  pointer-events: none;
}
.react-flow__renderer {
  z-index: 4;
}
.react-flow__selection {
  z-index: 6;
}
.react-flow__nodesselection-rect:focus,
.react-flow__nodesselection-rect:focus-visible {
  outline: none;
}
.react-flow__edge-path {
  stroke: var(--xy-edge-stroke, var(--xy-edge-stroke-default));
  stroke-width: var(--xy-edge-stroke-width, var(--xy-edge-stroke-width-default));
  fill: none;
}
.react-flow__connection-path {
  stroke: var(--xy-connectionline-stroke, var(--xy-connectionline-stroke-default));
  stroke-width: var(--xy-connectionline-stroke-width, var(--xy-connectionline-stroke-width-default));
  fill: none;
}
.react-flow .react-flow__edges {
  position: absolute;
}
.react-flow .react-flow__edges svg {
    overflow: visible;
    position: absolute;
    pointer-events: none;
  }
.react-flow__edge {
  pointer-events: visibleStroke;
}
.react-flow__edge.selectable {
    cursor: pointer;
  }
.react-flow__edge.animated path {
    stroke-dasharray: 5;
    animation: dashdraw 0.5s linear infinite;
  }
.react-flow__edge.animated path.react-flow__edge-interaction {
    stroke-dasharray: none;
    animation: none;
  }
.react-flow__edge.inactive {
    pointer-events: none;
  }
.react-flow__edge.selected,
  .react-flow__edge:focus,
  .react-flow__edge:focus-visible {
    outline: none;
  }
.react-flow__edge.selected .react-flow__edge-path,
  .react-flow__edge.selectable:focus .react-flow__edge-path,
  .react-flow__edge.selectable:focus-visible .react-flow__edge-path {
    stroke: var(--xy-edge-stroke-selected, var(--xy-edge-stroke-selected-default));
  }
.react-flow__edge-textwrapper {
    pointer-events: all;
  }
.react-flow__edge .react-flow__edge-text {
    pointer-events: none;
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
  }
/* Arrowhead marker styles - use CSS custom properties as default */
.react-flow__arrowhead polyline {
  stroke: var(--xy-edge-stroke, var(--xy-edge-stroke-default));
}
.react-flow__arrowhead polyline.arrowclosed {
  fill: var(--xy-edge-stroke, var(--xy-edge-stroke-default));
}
.react-flow__connection {
  pointer-events: none;
}
.react-flow__connection .animated {
    stroke-dasharray: 5;
    animation: dashdraw 0.5s linear infinite;
  }
svg.react-flow__connectionline {
  z-index: 1001;
  overflow: visible;
  position: absolute;
}
.react-flow__nodes {
  pointer-events: none;
  transform-origin: 0 0;
}
.react-flow__node {
  position: absolute;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  pointer-events: all;
  transform-origin: 0 0;
  box-sizing: border-box;
  cursor: default;
}
.react-flow__node.selectable {
    cursor: pointer;
  }
.react-flow__node.draggable {
    cursor: grab;
    pointer-events: all;
  }
.react-flow__node.draggable.dragging {
      cursor: grabbing;
    }
.react-flow__nodesselection {
  z-index: 3;
  transform-origin: left top;
  pointer-events: none;
}
.react-flow__nodesselection-rect {
    position: absolute;
    pointer-events: all;
    cursor: grab;
  }
.react-flow__handle {
  position: absolute;
  pointer-events: none;
  min-width: 5px;
  min-height: 5px;
  width: 6px;
  height: 6px;
  background-color: var(--xy-handle-background-color, var(--xy-handle-background-color-default));
  border: 1px solid var(--xy-handle-border-color, var(--xy-handle-border-color-default));
  border-radius: 100%;
}
.react-flow__handle.connectingfrom {
    pointer-events: all;
  }
.react-flow__handle.connectionindicator {
    pointer-events: all;
    cursor: crosshair;
  }
.react-flow__handle-bottom {
    top: auto;
    left: 50%;
    bottom: 0;
    transform: translate(-50%, 50%);
  }
.react-flow__handle-top {
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
  }
.react-flow__handle-left {
    top: 50%;
    left: 0;
    transform: translate(-50%, -50%);
  }
.react-flow__handle-right {
    top: 50%;
    right: 0;
    transform: translate(50%, -50%);
  }
.react-flow__edgeupdater {
  cursor: move;
  pointer-events: all;
}
.react-flow__pane.selection .react-flow__panel {
  pointer-events: none;
}
.react-flow__panel {
  position: absolute;
  z-index: 5;
  margin: 15px;
}
.react-flow__panel.top {
    top: 0;
  }
.react-flow__panel.bottom {
    bottom: 0;
  }
.react-flow__panel.top.center, .react-flow__panel.bottom.center {
      left: 50%;
      transform: translateX(-15px) translateX(-50%);
    }
.react-flow__panel.left {
    left: 0;
  }
.react-flow__panel.right {
    right: 0;
  }
.react-flow__panel.left.center, .react-flow__panel.right.center {
      top: 50%;
      transform: translateY(-15px) translateY(-50%);
    }
.react-flow__attribution {
  font-size: 10px;
  background: var(--xy-attribution-background-color, var(--xy-attribution-background-color-default));
  padding: 2px 3px;
  margin: 0;
}
.react-flow__attribution a {
    text-decoration: none;
    color: #999;
  }
@keyframes dashdraw {
  from {
    stroke-dashoffset: 10;
  }
}
.react-flow__edgelabel-renderer {
  position: absolute;
  width: 100%;
  height: 100%;
  pointer-events: none;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  left: 0;
  top: 0;
}
.react-flow__viewport-portal {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.react-flow__minimap {
  background: var(
    --xy-minimap-background-color-props,
    var(--xy-minimap-background-color, var(--xy-minimap-background-color-default))
  );
}
.react-flow__minimap-svg {
    display: block;
  }
.react-flow__minimap-mask {
    fill: var(
      --xy-minimap-mask-background-color-props,
      var(--xy-minimap-mask-background-color, var(--xy-minimap-mask-background-color-default))
    );
    stroke: var(
      --xy-minimap-mask-stroke-color-props,
      var(--xy-minimap-mask-stroke-color, var(--xy-minimap-mask-stroke-color-default))
    );
    stroke-width: var(
      --xy-minimap-mask-stroke-width-props,
      var(--xy-minimap-mask-stroke-width, var(--xy-minimap-mask-stroke-width-default))
    );
  }
.react-flow__minimap-node {
    fill: var(
      --xy-minimap-node-background-color-props,
      var(--xy-minimap-node-background-color, var(--xy-minimap-node-background-color-default))
    );
    stroke: var(
      --xy-minimap-node-stroke-color-props,
      var(--xy-minimap-node-stroke-color, var(--xy-minimap-node-stroke-color-default))
    );
    stroke-width: var(
      --xy-minimap-node-stroke-width-props,
      var(--xy-minimap-node-stroke-width, var(--xy-minimap-node-stroke-width-default))
    );
  }
.react-flow__background-pattern.dots {
    fill: var(
      --xy-background-pattern-color-props,
      var(--xy-background-pattern-color, var(--xy-background-pattern-dots-color-default))
    );
  }
.react-flow__background-pattern.lines {
    stroke: var(
      --xy-background-pattern-color-props,
      var(--xy-background-pattern-color, var(--xy-background-pattern-lines-color-default))
    );
  }
.react-flow__background-pattern.cross {
    stroke: var(
      --xy-background-pattern-color-props,
      var(--xy-background-pattern-color, var(--xy-background-pattern-cross-color-default))
    );
  }
.react-flow__controls {
  display: flex;
  flex-direction: column;
  box-shadow: var(--xy-controls-box-shadow, var(--xy-controls-box-shadow-default));
}
.react-flow__controls.horizontal {
    flex-direction: row;
  }
.react-flow__controls-button {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 26px;
    width: 26px;
    padding: 4px;
    border: none;
    background: var(--xy-controls-button-background-color, var(--xy-controls-button-background-color-default));
    border-bottom: 1px solid
      var(
        --xy-controls-button-border-color-props,
        var(--xy-controls-button-border-color, var(--xy-controls-button-border-color-default))
      );
    color: var(
      --xy-controls-button-color-props,
      var(--xy-controls-button-color, var(--xy-controls-button-color-default))
    );
    cursor: pointer;
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
  }
.react-flow__controls-button svg {
      width: 100%;
      max-width: 12px;
      max-height: 12px;
      fill: currentColor;
    }
.react-flow__edge.updating .react-flow__edge-path {
      stroke: #777;
    }
.react-flow__edge-text {
    font-size: 10px;
  }
.react-flow__node.selectable:focus,
  .react-flow__node.selectable:focus-visible {
    outline: none;
  }
.react-flow__node-input,
.react-flow__node-default,
.react-flow__node-output,
.react-flow__node-group {
  padding: 10px;
  border-radius: var(--xy-node-border-radius, var(--xy-node-border-radius-default));
  width: 150px;
  font-size: 12px;
  color: var(--xy-node-color, var(--xy-node-color-default));
  text-align: center;
  border: var(--xy-node-border, var(--xy-node-border-default));
  background-color: var(--xy-node-background-color, var(--xy-node-background-color-default));
}
.react-flow__node-input.selectable:hover, .react-flow__node-default.selectable:hover, .react-flow__node-output.selectable:hover, .react-flow__node-group.selectable:hover {
      box-shadow: var(--xy-node-boxshadow-hover, var(--xy-node-boxshadow-hover-default));
    }
.react-flow__node-input.selectable.selected,
    .react-flow__node-input.selectable:focus,
    .react-flow__node-input.selectable:focus-visible,
    .react-flow__node-default.selectable.selected,
    .react-flow__node-default.selectable:focus,
    .react-flow__node-default.selectable:focus-visible,
    .react-flow__node-output.selectable.selected,
    .react-flow__node-output.selectable:focus,
    .react-flow__node-output.selectable:focus-visible,
    .react-flow__node-group.selectable.selected,
    .react-flow__node-group.selectable:focus,
    .react-flow__node-group.selectable:focus-visible {
      box-shadow: var(--xy-node-boxshadow-selected, var(--xy-node-boxshadow-selected-default));
    }
.react-flow__node-group {
  background-color: var(--xy-node-group-background-color, var(--xy-node-group-background-color-default));
}
.react-flow__nodesselection-rect,
.react-flow__selection {
  background: var(--xy-selection-background-color, var(--xy-selection-background-color-default));
  border: var(--xy-selection-border, var(--xy-selection-border-default));
}
.react-flow__nodesselection-rect:focus,
  .react-flow__nodesselection-rect:focus-visible,
  .react-flow__selection:focus,
  .react-flow__selection:focus-visible {
    outline: none;
  }
.react-flow__controls-button:hover {
      background: var(
        --xy-controls-button-background-color-hover-props,
        var(--xy-controls-button-background-color-hover, var(--xy-controls-button-background-color-hover-default))
      );
      color: var(
        --xy-controls-button-color-hover-props,
        var(--xy-controls-button-color-hover, var(--xy-controls-button-color-hover-default))
      );
    }
.react-flow__controls-button:disabled {
      pointer-events: none;
    }
.react-flow__controls-button:disabled svg {
        fill-opacity: 0.4;
      }
.react-flow__controls-button:last-child {
    border-bottom: none;
  }
.react-flow__controls.horizontal .react-flow__controls-button {
    border-bottom: none;
    border-right: 1px solid
      var(
        --xy-controls-button-border-color-props,
        var(--xy-controls-button-border-color, var(--xy-controls-button-border-color-default))
      );
  }
.react-flow__controls.horizontal .react-flow__controls-button:last-child {
    border-right: none;
  }
.react-flow__resize-control {
  position: absolute;
}
.react-flow__resize-control.left,
.react-flow__resize-control.right {
  cursor: ew-resize;
}
.react-flow__resize-control.top,
.react-flow__resize-control.bottom {
  cursor: ns-resize;
}
.react-flow__resize-control.top.left,
.react-flow__resize-control.bottom.right {
  cursor: nwse-resize;
}
.react-flow__resize-control.bottom.left,
.react-flow__resize-control.top.right {
  cursor: nesw-resize;
}
/* handle styles */
.react-flow__resize-control.handle {
  width: 5px;
  height: 5px;
  border: 1px solid #fff;
  border-radius: 1px;
  background-color: var(--xy-resize-background-color, var(--xy-resize-background-color-default));
  translate: -50% -50%;
}
.react-flow__resize-control.handle.left {
  left: 0;
  top: 50%;
}
.react-flow__resize-control.handle.right {
  left: 100%;
  top: 50%;
}
.react-flow__resize-control.handle.top {
  left: 50%;
  top: 0;
}
.react-flow__resize-control.handle.bottom {
  left: 50%;
  top: 100%;
}
.react-flow__resize-control.handle.top.left {
  left: 0;
}
.react-flow__resize-control.handle.bottom.left {
  left: 0;
}
.react-flow__resize-control.handle.top.right {
  left: 100%;
}
.react-flow__resize-control.handle.bottom.right {
  left: 100%;
}
/* line styles */
.react-flow__resize-control.line {
  border-color: var(--xy-resize-background-color, var(--xy-resize-background-color-default));
  border-width: 0;
  border-style: solid;
}
.react-flow__resize-control.line.left,
.react-flow__resize-control.line.right {
  width: 1px;
  transform: translate(-50%, 0);
  top: 0;
  height: 100%;
}
.react-flow__resize-control.line.left {
  left: 0;
  border-left-width: 1px;
}
.react-flow__resize-control.line.right {
  left: 100%;
  border-right-width: 1px;
}
.react-flow__resize-control.line.top,
.react-flow__resize-control.line.bottom {
  height: 1px;
  transform: translate(0, -50%);
  left: 0;
  width: 100%;
}
.react-flow__resize-control.line.top {
  top: 0;
  border-top-width: 1px;
}
.react-flow__resize-control.line.bottom {
  border-bottom-width: 1px;
  top: 100%;
}
.react-flow__edge-textbg {
  fill: var(--xy-edge-label-background-color, var(--xy-edge-label-background-color-default));
}
.react-flow__edge-text {
  fill: var(--xy-edge-label-color, var(--xy-edge-label-color-default));
}
/* ==========================================================================
   CompassX Infrastructure Monitoring - Full Width Redesign
   ========================================================================== */

.monitoring-root {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: 20px 28px 32px;
  background: var(--color-surface, #ffffff);
  color: var(--cx-color-text, #1e293b);
  box-sizing: border-box;
  gap: 16px;
  overflow-y: auto;
  overflow-x: hidden;
}

/* ── Top Header ─────────────────────────────────────────────────────────── */
.monitoring-top-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding-bottom: 0;
}

.monitoring-title-area {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.monitoring-title-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.monitoring-title-row h1 {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--cx-color-text, #0f172a);
}

.monitoring-runtime-tag {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: #f1f5f9;
  color: #475569;
  border: 1px solid #cbd5e1;
}

.monitoring-subtitle {
  margin: 0;
  font-size: 13px;
  color: var(--cx-color-text-muted, #64748b);
}

/* ── Header Controls ─────────────────────────────────────────────────────── */
.monitoring-header-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.prometheus-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 10px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 500;
}

.prometheus-status-pill.connected {
  background: #ecfdf5;
  color: #065f46;
  border: 1px solid #a7f3d0;
}

.prometheus-status-pill.disconnected {
  background: #fef2f2;
  color: #991b1b;
  border: 1px solid #fecaca;
}

.status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
}

.status-dot.connected {
  background: #10b981;
  box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.2);
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.status-dot.disconnected {
  background: #ef4444;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .4; }
}

.refresh-control-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

.auto-refresh-select {
  height: 32px;
  padding: 0 10px;
  border-radius: 6px;
  border: 1px solid var(--cx-color-border, #cbd5e1);
  background: #ffffff;
  color: var(--cx-color-text, #334155);
  font-size: 12px;
  outline: none;
  cursor: pointer;
}

.monitoring-btn-refresh {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 12px;
  border-radius: 6px;
  border: 1px solid var(--cx-color-border, #cbd5e1);
  background: #ffffff;
  color: var(--cx-color-text, #334155);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
}

.monitoring-btn-refresh:hover {
  background: #f8fafc;
  border-color: #94a3b8;
}

.monitoring-btn-refresh:active {
  background: #f1f5f9;
}

.spin-icon {
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  100% { transform: rotate(360deg); }
}

.monitoring-root .page-tabs {
  margin: 2px 0 8px;
}

/* ── Realtime Metrics Summary Strip (Stacked Title & Number with Vertical Dividers) ── */
.metrics-summary-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0;
  margin: 0;
  background: transparent;
  border: none;
  box-shadow: none;
  box-sizing: border-box;
  gap: 16px;
}

.summary-strip-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-width: 0;
  text-align: center;
}

.strip-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--cx-color-text-muted, #64748b);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.strip-value-row {
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  gap: 5px;
  white-space: nowrap;
}

.strip-value-main {
  font-size: 18px;
  font-weight: 700;
  color: var(--cx-color-text, #0f172a);
  line-height: 1.2;
}

.strip-unit {
  font-size: 12px;
  font-weight: 600;
  color: var(--cx-color-text-muted, #64748b);
}

.strip-sub {
  font-size: 11px;
  color: var(--cx-color-text-subtle, #94a3b8);
  white-space: nowrap;
}

.summary-strip-divider {
  width: 1px;
  height: 28px;
  background: var(--cx-color-border, #e2e8f0);
  flex-shrink: 0;
}

.metrics-horizontal-divider {
  width: 100%;
  height: 1px;
  background: var(--cx-color-border, #e2e8f0);
  border: none;
  margin: 4px 0 6px;
}

.status-indicator-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
  align-self: center;
}

.status-indicator-dot.healthy {
  background: #10b981;
  box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.2);
}

.status-indicator-dot.degraded {
  background: #ef4444;
  box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.2);
}

/* ── Content Sections ────────────────────────────────────────────────────── */
.monitoring-content-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}

/* ── Filter / Search Toolbar ─────────────────────────────────────────────── */
.monitoring-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 10px 14px;
  background: #ffffff;
  border: 1px solid var(--cx-color-border, #e2e8f0);
  border-radius: 8px;
}

.monitoring-search-box {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 320px;
  height: 32px;
  padding: 0 10px;
  background: #f8fafc;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  color: #64748b;
}

.monitoring-search-box input {
  width: 100%;
  border: none;
  background: transparent;
  outline: none;
  font-size: 13px;
  color: var(--cx-color-text, #0f172a);
}

.monitoring-search-box input::placeholder {
  color: #94a3b8;
}

.monitoring-filters-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

.monitoring-select {
  height: 32px;
  padding: 0 10px;
  border-radius: 6px;
  border: 1px solid #cbd5e1;
  background: #ffffff;
  color: var(--cx-color-text, #334155);
  font-size: 12px;
  outline: none;
  cursor: pointer;
}

/* ── Services Table ──────────────────────────────────────────────────────── */
.monitoring-table-container {
  width: 100%;
  background: #ffffff;
  border: 1px solid var(--cx-color-border, #e2e8f0);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.monitoring-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  text-align: left;
}

.monitoring-table th {
  padding: 12px 16px;
  background: #f8fafc;
  color: #64748b;
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom: 1px solid #e2e8f0;
  white-space: nowrap;
}

.monitoring-table td {
  padding: 12px 16px;
  border-bottom: 1px solid #f1f5f9;
  color: #334155;
  vertical-align: middle;
}

.monitoring-table tbody tr {
  transition: background-color 0.15s ease;
  cursor: pointer;
}

.monitoring-table tbody tr:hover {
  background-color: #f8fafc;
}

.monitoring-table tbody tr.selected {
  background-color: #eff6ff;
}

.service-name-cell {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.service-primary-name {
  font-weight: 600;
  color: var(--cx-color-text, #0f172a);
}

.service-container-name {
  font-size: 11px;
  color: #94a3b8;
  font-family: var(--cx-font-mono, monospace);
}

.service-health-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
}

.service-health-badge.healthy {
  background: #ecfdf5;
  color: #059669;
}

.service-health-badge.stopped,
.service-health-badge.degraded {
  background: #fef2f2;
  color: #dc2626;
}

.service-health-badge.warning {
  background: #fffbeb;
  color: #d97706;
}

.usage-bar-cell {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 120px;
}

.usage-bar-bg {
  width: 100%;
  height: 6px;
  border-radius: 3px;
  background: #e2e8f0;
  overflow: hidden;
}

.usage-bar-fill {
  height: 100%;
  border-radius: 3px;
  background: #3b82f6;
  transition: width 0.3s ease;
}

.usage-bar-fill.high {
  background: #ef4444;
}

.usage-bar-fill.medium {
  background: #f59e0b;
}

.usage-text {
  font-size: 11px;
  color: #64748b;
  display: flex;
  justify-content: space-between;
}

/* ── Charts Dashboard Layout ─────────────────────────────────────────────── */
.charts-top-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 0;
  margin: 0;
  background: transparent;
  border: none;
}

.time-range-group {
  display: flex;
  background: #f1f5f9;
  padding: 2px;
  border-radius: 6px;
  gap: 2px;
}

.time-range-btn {
  padding: 4px 10px;
  border: none;
  border-radius: 4px;
  background: transparent;
  font-size: 12px;
  font-weight: 500;
  color: #64748b;
  cursor: pointer;
  transition: all 0.15s ease;
}

.time-range-btn.active {
  background: #ffffff;
  color: #2563eb;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
  font-weight: 600;
}

.charts-grid-2x2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px 20px;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.monitoring-chart-card {
  display: flex;
  flex-direction: column;
  background: transparent;
  border: none;
  border-radius: 8px;
  padding: 4px 0;
  box-shadow: none;
  min-height: 380px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  box-sizing: border-box;
}

.chart-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 2px;
}

.chart-card-title {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--cx-color-text, #1e293b);
  letter-spacing: -0.01em;
}

/* ── Selected Service Detail Drawer / Panel ──────────────────────────────── */
.service-drawer-overlay {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 440px;
  background: #ffffff;
  box-shadow: -4px 0 20px rgba(0, 0, 0, 0.1);
  z-index: 100;
  display: flex;
  flex-direction: column;
  border-left: 1px solid var(--cx-color-border, #e2e8f0);
  animation: slideInRight 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes slideInRight {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}

.drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid #e2e8f0;
}

.drawer-header h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
}

.drawer-close-btn {
  border: none;
  background: transparent;
  color: #64748b;
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
}

.drawer-close-btn:hover {
  background: #f1f5f9;
  color: #0f172a;
}

.drawer-body {
  padding: 20px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.drawer-info-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.drawer-info-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.drawer-info-item span {
  font-size: 11px;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.drawer-info-item strong {
  font-size: 13px;
  color: #1e293b;
}

/* ── Responsive Queries ──────────────────────────────────────────────────── */
@media (max-width: 1200px) {
  .monitoring-kpi-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .charts-grid-2x2 {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .monitoring-root {
    padding: 16px;
  }
  .monitoring-kpi-grid {
    grid-template-columns: 1fr;
  }
  .monitoring-search-box {
    width: 100%;
  }
}

/* ── Collapsible 1-Line Chart Legend ─────────────────────────────────────── */
.chart-legend-container {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  margin-top: 4px;
  padding: 4px 4px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  box-sizing: border-box;
}

.chart-legend-items {
  display: flex;
  gap: 4px 10px;
  flex: 1;
  min-width: 0;
  max-width: 100%;
  font-size: 11px;
  line-height: 18px;
  box-sizing: border-box;
}

.chart-legend-items.collapsed {
  flex-wrap: nowrap;
  overflow: hidden;
  max-height: 22px;
  mask-image: linear-gradient(to right, black 85%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, black 85%, transparent 100%);
}

.chart-legend-items.expanded {
  flex-wrap: wrap;
  max-height: none;
}

.chart-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
  color: var(--cx-color-text-secondary, #475569);
  font-weight: 500;
  cursor: pointer;
  padding: 1px 5px;
  border-radius: 4px;
  transition: background 0.15s ease, opacity 0.15s ease;
  user-select: none;
}

.chart-legend-item:hover {
  background: var(--cx-color-surface-hover, #f1f5f9);
}

.chart-legend-item.hidden {
  opacity: 0.35;
  text-decoration: line-through;
}

.chart-legend-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  display: inline-block;
}

.chart-legend-dot.is-line {
  width: 14px;
  height: 0;
  border-top: 2px dashed #ef4444;
  border-radius: 0;
}

.chart-legend-toggle-btn {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  background: transparent;
  border: none;
  padding: 2px 4px;
  font-size: 11px;
  font-weight: 600;
  color: #2563eb;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: opacity 0.15s ease, color 0.15s ease;
  line-height: 18px;
}

.chart-legend-toggle-btn:hover {
  background: transparent;
  color: #1d4ed8;
  text-decoration: underline;
}

.chart-legend-toggle-btn.inline-end {
  margin-left: 4px;
}/* ═══════════════════════════════════════════════════════════════════════════
   CompassX Design System Showcase Styles
   ═══════════════════════════════════════════════════════════════════════════ */

.ds-showcase-root {
  min-height: 100vh;
  background-color: var(--color-bg, #f5f5f5);
  color: var(--color-text, #111827);
  font-family: var(--font-family, "Inter", system-ui, sans-serif);
  padding-bottom: 5rem;
}

.ds-showcase-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 1.5rem 1.5rem;
}

/* ── Hero Header ───────────────────────────────────────────────────────────── */

.ds-hero-header {
  background: var(--color-surface, #ffffff);
  border: 1px solid var(--color-border, #e5e7eb);
  border-radius: var(--radius-lg, 12px);
  padding: 2rem 2rem;
  margin-bottom: 1.5rem;
  box-shadow: var(--shadow-sm, 0 1px 3px rgba(0, 0, 0, 0.08));
}

.ds-hero-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.ds-hero-title {
  font-size: 1.65rem;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--color-text, #111827);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.ds-hero-subtitle {
  font-size: 0.875rem;
  color: var(--color-text-muted, #6b7280);
  margin-top: 0.5rem;
  line-height: 1.5;
  max-width: 720px;
}

/* ── Sticky Subnav Bar ─────────────────────────────────────────────────────── */

.ds-sticky-nav {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--color-surface, #ffffff);
  border-bottom: 1px solid var(--color-border, #e5e7eb);
  margin-bottom: 1.75rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.ds-nav-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0.5rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  overflow-x: auto;
}

.ds-nav-links {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  overflow-x: auto;
  white-space: nowrap;
}

.ds-nav-link-btn {
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.4rem 0.75rem;
  border-radius: var(--radius, 6px);
  color: var(--color-text-muted, #6b7280);
  text-decoration: none;
  transition: all 0.15s ease;
  cursor: pointer;
  background: transparent;
  border: none;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.ds-nav-link-btn:hover {
  color: var(--color-primary, #1B6EF3);
  background: var(--color-surface-hover, #f3f4f6);
}

/* ── Section Cards ─────────────────────────────────────────────────────────── */

.ds-section {
  background: var(--color-surface, #ffffff);
  border: 1px solid var(--color-border, #e5e7eb);
  border-radius: var(--radius-lg, 12px);
  padding: 1.75rem 2rem;
  margin-bottom: 2rem;
  box-shadow: var(--shadow-sm, 0 1px 3px rgba(0, 0, 0, 0.08));
}

.ds-section-header {
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--color-border, #e5e7eb);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.ds-section-title {
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--color-text, #111827);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.ds-section-desc {
  font-size: 0.8125rem;
  color: var(--color-text-muted, #6b7280);
  margin-top: 0.35rem;
  margin-bottom: 0;
}

.ds-sub-title {
  font-size: 0.8125rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-muted, #6b7280);
  margin: 1.5rem 0 0.85rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.ds-sub-title:first-of-type {
  margin-top: 0;
}

/* ── Swatch Grid ───────────────────────────────────────────────────────────── */

.ds-swatch-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 0.85rem;
}

.ds-swatch-card {
  border-radius: var(--radius, 6px);
  border: 1px solid var(--color-border, #e5e7eb);
  overflow: hidden;
  background: var(--color-surface, #ffffff);
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.ds-swatch-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md, 0 4px 12px rgba(0, 0, 0, 0.08));
}

.ds-swatch-color {
  height: 52px;
  width: 100%;
}

.ds-swatch-info {
  padding: 0.5rem 0.6rem;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.ds-swatch-name {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--color-text, #111827);
}

.ds-swatch-hex {
  font-size: 0.68rem;
  font-family: monospace;
  color: var(--color-text-subtle, #9ca3af);
}

/* ── Component Demo Box ────────────────────────────────────────────────────── */

.ds-demo-box {
  background: var(--color-bg, #f9fafb);
  border: 1px solid var(--color-border, #e5e7eb);
  border-radius: var(--radius, 6px);
  padding: 1.25rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.875rem;
}

.ds-grid-2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 1.25rem;
}


/*! tailwindcss v4.2.1 | MIT License | https://tailwindcss.com */
@layer properties {
  @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
    *, :before, :after, ::backdrop {
      --tw-translate-x: 0;
      --tw-translate-y: 0;
      --tw-translate-z: 0;
      --tw-rotate-x: initial;
      --tw-rotate-y: initial;
      --tw-rotate-z: initial;
      --tw-skew-x: initial;
      --tw-skew-y: initial;
      --tw-space-y-reverse: 0;
      --tw-border-style: solid;
      --tw-leading: initial;
      --tw-font-weight: initial;
      --tw-tracking: initial;
      --tw-ordinal: initial;
      --tw-slashed-zero: initial;
      --tw-numeric-figure: initial;
      --tw-numeric-spacing: initial;
      --tw-numeric-fraction: initial;
      --tw-shadow: 0 0 #0000;
      --tw-shadow-color: initial;
      --tw-shadow-alpha: 100%;
      --tw-inset-shadow: 0 0 #0000;
      --tw-inset-shadow-color: initial;
      --tw-inset-shadow-alpha: 100%;
      --tw-ring-color: initial;
      --tw-ring-shadow: 0 0 #0000;
      --tw-inset-ring-color: initial;
      --tw-inset-ring-shadow: 0 0 #0000;
      --tw-ring-inset: initial;
      --tw-ring-offset-width: 0px;
      --tw-ring-offset-color: #fff;
      --tw-ring-offset-shadow: 0 0 #0000;
      --tw-outline-style: solid;
      --tw-blur: initial;
      --tw-brightness: initial;
      --tw-contrast: initial;
      --tw-grayscale: initial;
      --tw-hue-rotate: initial;
      --tw-invert: initial;
      --tw-opacity: initial;
      --tw-saturate: initial;
      --tw-sepia: initial;
      --tw-drop-shadow: initial;
      --tw-drop-shadow-color: initial;
      --tw-drop-shadow-alpha: 100%;
      --tw-drop-shadow-size: initial;
      --tw-backdrop-blur: initial;
      --tw-backdrop-brightness: initial;
      --tw-backdrop-contrast: initial;
      --tw-backdrop-grayscale: initial;
      --tw-backdrop-hue-rotate: initial;
      --tw-backdrop-invert: initial;
      --tw-backdrop-opacity: initial;
      --tw-backdrop-saturate: initial;
      --tw-backdrop-sepia: initial;
      --tw-duration: initial;
      --tw-ease: initial;
    }
  }
}
@layer theme {
  :root, :host {
    --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
      "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
      "Courier New", monospace;
    --color-blue-500: oklch(62.3% .214 259.815);
    --color-blue-600: oklch(54.6% .245 262.881);
    --color-slate-800: oklch(27.9% .041 260.031);
    --color-gray-50: oklch(98.5% .002 247.839);
    --color-gray-900: oklch(21% .034 264.665);
    --color-black: #000;
    --color-white: #fff;
    --spacing: .25rem;
    --container-xl: 36rem;
    --text-xs: .75rem;
    --text-xs--line-height: calc(1 / .75);
    --text-sm: .875rem;
    --text-sm--line-height: calc(1.25 / .875);
    --text-lg: 1.125rem;
    --text-lg--line-height: calc(1.75 / 1.125);
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --tracking-tight: -.025em;
    --tracking-wider: .05em;
    --leading-tight: 1.25;
    --radius-sm: .25rem;
    --radius-md: .375rem;
    --radius-lg: .5rem;
    --radius-xl: .75rem;
    --radius-2xl: 1rem;
    --shadow-sm: 0 1px 3px 0 #0000001a, 0 1px 2px -1px #0000001a;
    --shadow-md: 0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a;
    --shadow-lg: 0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a;
    --shadow-xl: 0 20px 25px -5px #0000001a, 0 8px 10px -6px #0000001a;
    --ease-in: cubic-bezier(.4, 0, 1, 1);
    --ease-out: cubic-bezier(0, 0, .2, 1);
    --ease-in-out: cubic-bezier(.4, 0, .2, 1);
    --animate-spin: spin 1s linear infinite;
    --blur-sm: 8px;
    --blur-md: 12px;
    --default-transition-duration: .15s;
    --default-transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    --default-font-family: var(--font-sans);
    --default-mono-font-family: var(--font-mono);
  }
}
@layer base {
  *, :after, :before, ::backdrop {
    box-sizing: border-box;
    border: 0 solid;
    margin: 0;
    padding: 0;
  }

  ::file-selector-button {
    box-sizing: border-box;
    border: 0 solid;
    margin: 0;
    padding: 0;
  }

  html, :host {
    -webkit-text-size-adjust: 100%;
    tab-size: 4;
    line-height: 1.5;
    font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
    font-feature-settings: var(--default-font-feature-settings, normal);
    font-variation-settings: var(--default-font-variation-settings, normal);
    -webkit-tap-highlight-color: transparent;
  }

  hr {
    height: 0;
    color: inherit;
    border-top-width: 1px;
  }

  abbr:where([title]) {
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted;
  }

  h1, h2, h3, h4, h5, h6 {
    font-size: inherit;
    font-weight: inherit;
  }

  a {
    color: inherit;
    -webkit-text-decoration: inherit;
    -webkit-text-decoration: inherit;
    -webkit-text-decoration: inherit;
    text-decoration: inherit;
  }

  b, strong {
    font-weight: bolder;
  }

  code, kbd, samp, pre {
    font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
    font-feature-settings: var(--default-mono-font-feature-settings, normal);
    font-variation-settings: var(--default-mono-font-variation-settings, normal);
    font-size: 1em;
  }

  small {
    font-size: 80%;
  }

  sub, sup {
    vertical-align: baseline;
    font-size: 75%;
    line-height: 0;
    position: relative;
  }

  sub {
    bottom: -.25em;
  }

  sup {
    top: -.5em;
  }

  table {
    text-indent: 0;
    border-color: inherit;
    border-collapse: collapse;
  }

  :-moz-focusring {
    outline: auto;
  }

  progress {
    vertical-align: baseline;
  }

  summary {
    display: list-item;
  }

  ol, ul, menu {
    list-style: none;
  }

  img, svg, video, canvas, audio, iframe, embed, object {
    vertical-align: middle;
    display: block;
  }

  img, video {
    max-width: 100%;
    height: auto;
  }

  button, input, select, optgroup, textarea {
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
    opacity: 1;
    background-color: #0000;
    border-radius: 0;
  }

  ::file-selector-button {
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
    opacity: 1;
    background-color: #0000;
    border-radius: 0;
  }

  :where(select:is([multiple], [size])) optgroup {
    font-weight: bolder;
  }

  :where(select:is([multiple], [size])) optgroup option {
    padding-inline-start: 20px;
  }

  ::file-selector-button {
    margin-inline-end: 4px;
  }

  ::placeholder {
    opacity: 1;
  }

  @supports (not ((-webkit-appearance: -apple-pay-button))) or (contain-intrinsic-size: 1px) {
    ::placeholder {
      color: currentColor;
    }

    @supports (color: color-mix(in lab, red, red)) {
      ::placeholder {
        color: color-mix(in oklab, currentcolor 50%, transparent);
      }
    }
  }

  textarea {
    resize: vertical;
  }

  ::-webkit-search-decoration {
    -webkit-appearance: none;
  }

  ::-webkit-date-and-time-value {
    min-height: 1lh;
    text-align: inherit;
  }

  ::-webkit-datetime-edit {
    display: inline-flex;
  }

  ::-webkit-datetime-edit-fields-wrapper {
    padding: 0;
  }

  ::-webkit-datetime-edit {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-year-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-month-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-day-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-hour-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-minute-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-second-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-millisecond-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-meridiem-field {
    padding-block: 0;
  }

  ::-webkit-calendar-picker-indicator {
    line-height: 1;
  }

  :-moz-ui-invalid {
    box-shadow: none;
  }

  button, input:where([type="button"], [type="reset"], [type="submit"]) {
    appearance: button;
  }

  ::file-selector-button {
    appearance: button;
  }

  ::-webkit-inner-spin-button {
    height: auto;
  }

  ::-webkit-outer-spin-button {
    height: auto;
  }

  [hidden]:where(:not([hidden="until-found"])) {
    display: none !important;
  }
}
@layer components;
@layer utilities {
  .pointer-events-auto {
    pointer-events: auto;
  }

  .pointer-events-none {
    pointer-events: none;
  }

  .collapse {
    visibility: collapse;
  }

  .invisible {
    visibility: hidden;
  }

  .visible {
    visibility: visible;
  }

  .sr-only {
    clip-path: inset(50%);
    white-space: nowrap;
    border-width: 0;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    position: absolute;
    overflow: hidden;
  }

  .absolute {
    position: absolute;
  }

  .fixed {
    position: fixed;
  }

  .relative {
    position: relative;
  }

  .static {
    position: static;
  }

  .sticky {
    position: sticky;
  }

  .inset-0 {
    inset: calc(var(--spacing) * 0);
  }

  .start {
    inset-inline-start: var(--spacing);
  }

  .end {
    inset-inline-end: var(--spacing);
  }

  .top-0 {
    top: calc(var(--spacing) * 0);
  }

  .top-1\.5 {
    top: calc(var(--spacing) * 1.5);
  }

  .top-full {
    top: 100%;
  }

  .right-4 {
    right: calc(var(--spacing) * 4);
  }

  .bottom-4 {
    bottom: calc(var(--spacing) * 4);
  }

  .left-0 {
    left: calc(var(--spacing) * 0);
  }

  .left-1\/2 {
    left: 50%;
  }

  .left-2\.5 {
    left: calc(var(--spacing) * 2.5);
  }

  .isolate {
    isolation: isolate;
  }

  .z-30 {
    z-index: 30;
  }

  .z-40 {
    z-index: 40;
  }

  .z-50 {
    z-index: 50;
  }

  .z-70 {
    z-index: 70;
  }

  .container {
    width: 100%;
  }

  @media (min-width: 40rem) {
    .container {
      max-width: 40rem;
    }
  }

  @media (min-width: 48rem) {
    .container {
      max-width: 48rem;
    }
  }

  @media (min-width: 64rem) {
    .container {
      max-width: 64rem;
    }
  }

  @media (min-width: 80rem) {
    .container {
      max-width: 80rem;
    }
  }

  @media (min-width: 96rem) {
    .container {
      max-width: 96rem;
    }
  }

  .mx-1 {
    margin-inline: calc(var(--spacing) * 1);
  }

  .mt-0\.5 {
    margin-top: calc(var(--spacing) * .5);
  }

  .mt-2 {
    margin-top: calc(var(--spacing) * 2);
  }

  .mt-4 {
    margin-top: calc(var(--spacing) * 4);
  }

  .mt-6 {
    margin-top: calc(var(--spacing) * 6);
  }

  .mr-1 {
    margin-right: calc(var(--spacing) * 1);
  }

  .mr-1\.5 {
    margin-right: calc(var(--spacing) * 1.5);
  }

  .mb-1\.5 {
    margin-bottom: calc(var(--spacing) * 1.5);
  }

  .mb-3 {
    margin-bottom: calc(var(--spacing) * 3);
  }

  .ml-2 {
    margin-left: calc(var(--spacing) * 2);
  }

  .block {
    display: block;
  }

  .contents {
    display: contents;
  }

  .flex {
    display: flex;
  }

  .grid {
    display: grid;
  }

  .hidden {
    display: none;
  }

  .inline {
    display: inline;
  }

  .inline-block {
    display: inline-block;
  }

  .inline-flex {
    display: inline-flex;
  }

  .table {
    display: table;
  }

  .h-4 {
    height: calc(var(--spacing) * 4);
  }

  .h-6 {
    height: calc(var(--spacing) * 6);
  }

  .h-7 {
    height: calc(var(--spacing) * 7);
  }

  .h-8 {
    height: calc(var(--spacing) * 8);
  }

  .h-9 {
    height: calc(var(--spacing) * 9);
  }

  .h-10 {
    height: calc(var(--spacing) * 10);
  }

  .h-\[1px\] {
    height: 1px;
  }

  .h-\[2px\] {
    height: 2px;
  }

  .h-full {
    height: 100%;
  }

  .max-h-80 {
    max-height: calc(var(--spacing) * 80);
  }

  .min-h-0 {
    min-height: calc(var(--spacing) * 0);
  }

  .min-h-6 {
    min-height: calc(var(--spacing) * 6);
  }

  .min-h-7 {
    min-height: calc(var(--spacing) * 7);
  }

  .min-h-8 {
    min-height: calc(var(--spacing) * 8);
  }

  .min-h-9 {
    min-height: calc(var(--spacing) * 9);
  }

  .min-h-10 {
    min-height: calc(var(--spacing) * 10);
  }

  .min-h-11 {
    min-height: calc(var(--spacing) * 11);
  }

  .w-4 {
    width: calc(var(--spacing) * 4);
  }

  .w-6 {
    width: calc(var(--spacing) * 6);
  }

  .w-7 {
    width: calc(var(--spacing) * 7);
  }

  .w-8 {
    width: calc(var(--spacing) * 8);
  }

  .w-64 {
    width: calc(var(--spacing) * 64);
  }

  .w-\[1px\] {
    width: 1px;
  }

  .w-full {
    width: 100%;
  }

  .max-w-\[240px\] {
    max-width: 240px;
  }

  .max-w-\[260px\] {
    max-width: 260px;
  }

  .max-w-\[280px\] {
    max-width: 280px;
  }

  .max-w-xl {
    max-width: var(--container-xl);
  }

  .min-w-0 {
    min-width: calc(var(--spacing) * 0);
  }

  .flex-1 {
    flex: 1;
  }

  .flex-shrink, .shrink {
    flex-shrink: 1;
  }

  .shrink-0 {
    flex-shrink: 0;
  }

  .grow {
    flex-grow: 1;
  }

  .-translate-x-1\/2 {
    --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .-translate-y-full {
    --tw-translate-y: -100%;
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .transform {
    transform: var(--tw-rotate-x,  ) var(--tw-rotate-y,  ) var(--tw-rotate-z,  ) var(--tw-skew-x,  ) var(--tw-skew-y,  );
  }

  .animate-spin {
    animation: var(--animate-spin);
  }

  .cursor-grab {
    cursor: grab;
  }

  .cursor-pointer {
    cursor: pointer;
  }

  .resize {
    resize: both;
  }

  .resize-none {
    resize: none;
  }

  .flex-col {
    flex-direction: column;
  }

  .flex-wrap {
    flex-wrap: wrap;
  }

  .items-center {
    align-items: center;
  }

  .items-start {
    align-items: flex-start;
  }

  .justify-between {
    justify-content: space-between;
  }

  .justify-center {
    justify-content: center;
  }

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

  .gap-1 {
    gap: calc(var(--spacing) * 1);
  }

  .gap-1\.5 {
    gap: calc(var(--spacing) * 1.5);
  }

  .gap-2 {
    gap: calc(var(--spacing) * 2);
  }

  .gap-2\.5 {
    gap: calc(var(--spacing) * 2.5);
  }

  .gap-3 {
    gap: calc(var(--spacing) * 3);
  }

  .gap-px {
    gap: 1px;
  }

  :where(.space-y-1 > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(calc(var(--spacing) * 1) * var(--tw-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing) * 1) * calc(1 - var(--tw-space-y-reverse)));
  }

  :where(.space-y-1\.5 > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(calc(var(--spacing) * 1.5) * var(--tw-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing) * 1.5) * calc(1 - var(--tw-space-y-reverse)));
  }

  :where(.space-y-3 > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(calc(var(--spacing) * 3) * var(--tw-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-y-reverse)));
  }

  .truncate {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
  }

  .overflow-hidden {
    overflow: hidden;
  }

  .overflow-y-auto {
    overflow-y: auto;
  }

  .rounded {
    border-radius: .25rem;
  }

  .rounded-2xl {
    border-radius: var(--radius-2xl);
  }

  .rounded-\[var\(--chrome-radius-inner\)\] {
    border-radius: var(--chrome-radius-inner);
  }

  .rounded-\[var\(--topology-v2-panel-radius\)\] {
    border-radius: var(--topology-v2-panel-radius);
  }

  .rounded-full {
    border-radius: 3.40282e38px;
  }

  .rounded-lg {
    border-radius: var(--radius-lg);
  }

  .rounded-xl {
    border-radius: var(--radius-xl);
  }

  .border {
    border-style: var(--tw-border-style);
    border-width: 1px;
  }

  .border-t {
    border-top-style: var(--tw-border-style);
    border-top-width: 1px;
  }

  .border-b {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
  }

  .border-b-2 {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 2px;
  }

  .border-dashed {
    --tw-border-style: dashed;
    border-style: dashed;
  }

  .border-\[\#1e2438\] {
    border-color: #1e2438;
  }

  .border-\[\#2b334a\]\/80 {
    border-color: oklab(32.4352% -.000586525 -.0425597 / .8);
  }

  .border-\[\#3b82f6\]\/40 {
    border-color: oklab(62.3083% -.0332476 -.185052 / .4);
  }

  .border-\[\#3b476b\] {
    border-color: #3b476b;
  }

  .border-\[\#3b476e\] {
    border-color: #3b476e;
  }

  .border-\[\#262e45\] {
    border-color: #262e45;
  }

  .border-\[\#262e45\]\/80 {
    border-color: oklab(30.4734% -.000713408 -.0432263 / .8);
  }

  .border-\[\#818cf8\] {
    border-color: #818cf8;
  }

  .border-\[\#6366f1\]\/40 {
    border-color: oklab(58.5404% .0252827 -.202483 / .4);
  }

  .border-\[\#20263c\] {
    border-color: #20263c;
  }

  .border-\[\#20273c\] {
    border-color: #20273c;
  }

  .border-\[\#23293d\] {
    border-color: #23293d;
  }

  .border-\[\#64748b\] {
    border-color: #64748b;
  }

  .border-\[\#334155\]\/60 {
    border-color: oklab(37.1696% -.00861713 -.0381965 / .6);
  }

  .border-\[color\:var\(--color-border-soft\)\] {
    border-color: var(--color-border-soft);
  }

  .border-\[color\:var\(--color-indigo-pale-a28\)\] {
    border-color: var(--color-indigo-pale-a28);
  }

  .border-\[color\:var\(--topology-v2-panel-border\)\] {
    border-color: var(--topology-v2-panel-border);
  }

  .border-\[…divider\] {
    border-color: …divider;
  }

  .border-transparent {
    border-color: #0000;
  }

  .bg-\[\#0f121d\] {
    background-color: #0f121d;
  }

  .bg-\[\#1e2338\]\/90 {
    background-color: oklab(26.1858% .00218178 -.0400934 / .9);
  }

  .bg-\[\#1e2438\] {
    background-color: #1e2438;
  }

  .bg-\[\#1e2538\] {
    background-color: #1e2538;
  }

  .bg-\[\#2e374f\] {
    background-color: #2e374f;
  }

  .bg-\[\#3b82f6\]\/20 {
    background-color: oklab(62.3083% -.0332476 -.185052 / .2);
  }

  .bg-\[\#090a10\] {
    background-color: #090a10;
  }

  .bg-\[\#090b12\] {
    background-color: #090b12;
  }

  .bg-\[\#6366f1\]\/15 {
    background-color: oklab(58.5404% .0252827 -.202483 / .15);
  }

  .bg-\[\#64748b\] {
    background-color: #64748b;
  }

  .bg-\[\#121624\]\/90 {
    background-color: oklab(20.3421% .000725605 -.0287514 / .9);
  }

  .bg-\[\#131722\]\/85 {
    background-color: oklab(20.5962% -.000443362 -.0228648 / .85);
  }

  .bg-\[\#141724\] {
    background-color: #141724;
  }

  .bg-\[\#141824\]\/95 {
    background-color: oklab(21.0917% -.00000997633 -.0246493 / .95);
  }

  .bg-\[\#141827\] {
    background-color: #141827;
  }

  .bg-\[color\:var\(--color-indigo-a16\)\] {
    background-color: var(--color-indigo-a16);
  }

  .bg-\[color\:var\(--color-indigo-brand\)\] {
    background-color: var(--color-indigo-brand);
  }

  .bg-\[color\:var\(--color-overlay-1\)\] {
    background-color: var(--color-overlay-1);
  }

  .bg-\[color\:var\(--color-overlay-2\)\] {
    background-color: var(--color-overlay-2);
  }

  .bg-\[color\:var\(--topology-v2-panel-surface\)\] {
    background-color: var(--topology-v2-panel-surface);
  }

  .bg-black\/60 {
    background-color: #0009;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-black\/60 {
      background-color: color-mix(in oklab, var(--color-black) 60%, transparent);
    }
  }

  .bg-gray-50 {
    background-color: var(--color-gray-50);
  }

  .bg-transparent {
    background-color: #0000;
  }

  .p-0\.5 {
    padding: calc(var(--spacing) * .5);
  }

  .p-1 {
    padding: calc(var(--spacing) * 1);
  }

  .p-1\.5 {
    padding: calc(var(--spacing) * 1.5);
  }

  .p-2 {
    padding: calc(var(--spacing) * 2);
  }

  .p-3\.5 {
    padding: calc(var(--spacing) * 3.5);
  }

  .p-8 {
    padding: calc(var(--spacing) * 8);
  }

  .px-1 {
    padding-inline: calc(var(--spacing) * 1);
  }

  .px-1\.5 {
    padding-inline: calc(var(--spacing) * 1.5);
  }

  .px-2 {
    padding-inline: calc(var(--spacing) * 2);
  }

  .px-2\.5 {
    padding-inline: calc(var(--spacing) * 2.5);
  }

  .px-3 {
    padding-inline: calc(var(--spacing) * 3);
  }

  .px-3\.5 {
    padding-inline: calc(var(--spacing) * 3.5);
  }

  .px-4 {
    padding-inline: calc(var(--spacing) * 4);
  }

  .py-0\.5 {
    padding-block: calc(var(--spacing) * .5);
  }

  .py-1 {
    padding-block: calc(var(--spacing) * 1);
  }

  .py-1\.5 {
    padding-block: calc(var(--spacing) * 1.5);
  }

  .py-2 {
    padding-block: calc(var(--spacing) * 2);
  }

  .py-2\.5 {
    padding-block: calc(var(--spacing) * 2.5);
  }

  .py-3 {
    padding-block: calc(var(--spacing) * 3);
  }

  .py-3\.5 {
    padding-block: calc(var(--spacing) * 3.5);
  }

  .py-4 {
    padding-block: calc(var(--spacing) * 4);
  }

  .py-8 {
    padding-block: calc(var(--spacing) * 8);
  }

  .pt-1 {
    padding-top: calc(var(--spacing) * 1);
  }

  .pt-4 {
    padding-top: calc(var(--spacing) * 4);
  }

  .pt-24 {
    padding-top: calc(var(--spacing) * 24);
  }

  .text-center {
    text-align: center;
  }

  .text-left {
    text-align: left;
  }

  .font-mono {
    font-family: var(--font-mono);
  }

  .text-lg {
    font-size: var(--text-lg);
    line-height: var(--tw-leading, var(--text-lg--line-height));
  }

  .text-sm {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
  }

  .text-xs {
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
  }

  .text-\[10px\] {
    font-size: 10px;
  }

  .text-\[11px\] {
    font-size: 11px;
  }

  .leading-tight {
    --tw-leading: var(--leading-tight);
    line-height: var(--leading-tight);
  }

  .font-\[var\(--font-weight-emphasis\)\] {
    --tw-font-weight: var(--font-weight-emphasis);
    font-weight: var(--font-weight-emphasis);
  }

  .font-\[var\(--font-weight-signature\)\] {
    --tw-font-weight: var(--font-weight-signature);
    font-weight: var(--font-weight-signature);
  }

  .font-bold {
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
  }

  .font-medium {
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
  }

  .font-semibold {
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
  }

  .tracking-\[var\(--tracking-caps-12\)\] {
    --tw-tracking: var(--tracking-caps-12);
    letter-spacing: var(--tracking-caps-12);
  }

  .tracking-tight {
    --tw-tracking: var(--tracking-tight);
    letter-spacing: var(--tracking-tight);
  }

  .tracking-wider {
    --tw-tracking: var(--tracking-wider);
    letter-spacing: var(--tracking-wider);
  }

  .break-all {
    word-break: break-all;
  }

  .whitespace-nowrap {
    white-space: nowrap;
  }

  .text-\[\#7dd3fc\] {
    color: #7dd3fc;
  }

  .text-\[\#93c5fd\] {
    color: #93c5fd;
  }

  .text-\[\#94a3b8\] {
    color: #94a3b8;
  }

  .text-\[\#818cf8\] {
    color: #818cf8;
  }

  .text-\[\#6366f1\] {
    color: #6366f1;
  }

  .text-\[\#64748b\] {
    color: #64748b;
  }

  .text-\[\#a5b4fc\] {
    color: #a5b4fc;
  }

  .text-\[\#c7d2fe\] {
    color: #c7d2fe;
  }

  .text-\[\#cbd5e1\] {
    color: #cbd5e1;
  }

  .text-\[\#e2e8f0\] {
    color: #e2e8f0;
  }

  .text-\[\#fbbf24\] {
    color: #fbbf24;
  }

  .text-\[color\:var\(--color-danger-text\)\] {
    color: var(--color-danger-text);
  }

  .text-\[color\:var\(--color-indigo-accent\)\] {
    color: var(--color-indigo-accent);
  }

  .text-\[color\:var\(--color-indigo-text-soft\)\] {
    color: var(--color-indigo-text-soft);
  }

  .text-\[color\:var\(--color-status-warning\)\] {
    color: var(--color-status-warning);
  }

  .text-\[color\:var\(--color-success-text-a94\)\] {
    color: var(--color-success-text-a94);
  }

  .text-\[color\:var\(--color-text-on-accent\)\] {
    color: var(--color-text-on-accent);
  }

  .text-\[color\:var\(--color-text-primary\)\] {
    color: var(--color-text-primary);
  }

  .text-\[color\:var\(--color-text-quaternary\)\] {
    color: var(--color-text-quaternary);
  }

  .text-\[color\:var\(--color-text-secondary\)\] {
    color: var(--color-text-secondary);
  }

  .text-\[color\:var\(--color-text-tertiary\)\] {
    color: var(--color-text-tertiary);
  }

  .text-\[color\:var\(--topology-v2-indigo-bright\)\] {
    color: var(--topology-v2-indigo-bright);
  }

  .text-\[color\:var\(--topology-v2-panel-text-primary\)\] {
    color: var(--topology-v2-panel-text-primary);
  }

  .text-\[color\:var\(--topology-v2-panel-text-quaternary\)\] {
    color: var(--topology-v2-panel-text-quaternary);
  }

  .text-\[color\:var\(--topology-v2-panel-text-secondary\)\] {
    color: var(--topology-v2-panel-text-secondary);
  }

  .text-\[color\:var\(--topology-v2-panel-text-tertiary\)\] {
    color: var(--topology-v2-panel-text-tertiary);
  }

  .text-blue-500 {
    color: var(--color-blue-500);
  }

  .text-blue-600 {
    color: var(--color-blue-600);
  }

  .text-gray-900 {
    color: var(--color-gray-900);
  }

  .text-white {
    color: var(--color-white);
  }

  .capitalize {
    text-transform: capitalize;
  }

  .lowercase {
    text-transform: lowercase;
  }

  .uppercase {
    text-transform: uppercase;
  }

  .italic {
    font-style: italic;
  }

  .ordinal {
    --tw-ordinal: ordinal;
    font-variant-numeric: var(--tw-ordinal,  ) var(--tw-slashed-zero,  ) var(--tw-numeric-figure,  ) var(--tw-numeric-spacing,  ) var(--tw-numeric-fraction,  );
  }

  .no-underline {
    text-decoration-line: none;
  }

  .underline {
    text-decoration-line: underline;
  }

  .placeholder-\[\#64748b\]::placeholder {
    color: #64748b;
  }

  .shadow {
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, #0000001a), 0 1px 2px -1px var(--tw-shadow-color, #0000001a);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-2xl {
    --tw-shadow: 0 25px 50px -12px var(--tw-shadow-color, #00000040);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-\[var\(--topology-v2-panel-shadow\)\] {
    --tw-shadow: var(--topology-v2-panel-shadow);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-xl {
    --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, #0000001a), 0 8px 10px -6px var(--tw-shadow-color, #0000001a);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .ring {
    --tw-ring-shadow: var(--tw-ring-inset,  ) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .outline {
    outline-style: var(--tw-outline-style);
    outline-width: 1px;
  }

  .blur {
    --tw-blur: blur(8px);
    filter: var(--tw-blur,  ) var(--tw-brightness,  ) var(--tw-contrast,  ) var(--tw-grayscale,  ) var(--tw-hue-rotate,  ) var(--tw-invert,  ) var(--tw-saturate,  ) var(--tw-sepia,  ) var(--tw-drop-shadow,  );
  }

  .invert {
    --tw-invert: invert(100%);
    filter: var(--tw-blur,  ) var(--tw-brightness,  ) var(--tw-contrast,  ) var(--tw-grayscale,  ) var(--tw-hue-rotate,  ) var(--tw-invert,  ) var(--tw-saturate,  ) var(--tw-sepia,  ) var(--tw-drop-shadow,  );
  }

  .\!filter {
    filter: var(--tw-blur,  ) var(--tw-brightness,  ) var(--tw-contrast,  ) var(--tw-grayscale,  ) var(--tw-hue-rotate,  ) var(--tw-invert,  ) var(--tw-saturate,  ) var(--tw-sepia,  ) var(--tw-drop-shadow,  ) !important;
  }

  .filter {
    filter: var(--tw-blur,  ) var(--tw-brightness,  ) var(--tw-contrast,  ) var(--tw-grayscale,  ) var(--tw-hue-rotate,  ) var(--tw-invert,  ) var(--tw-saturate,  ) var(--tw-sepia,  ) var(--tw-drop-shadow,  );
  }

  .backdrop-blur-md {
    --tw-backdrop-blur: blur(var(--blur-md));
    -webkit-backdrop-filter: var(--tw-backdrop-blur,  ) var(--tw-backdrop-brightness,  ) var(--tw-backdrop-contrast,  ) var(--tw-backdrop-grayscale,  ) var(--tw-backdrop-hue-rotate,  ) var(--tw-backdrop-invert,  ) var(--tw-backdrop-opacity,  ) var(--tw-backdrop-saturate,  ) var(--tw-backdrop-sepia,  );
    backdrop-filter: var(--tw-backdrop-blur,  ) var(--tw-backdrop-brightness,  ) var(--tw-backdrop-contrast,  ) var(--tw-backdrop-grayscale,  ) var(--tw-backdrop-hue-rotate,  ) var(--tw-backdrop-invert,  ) var(--tw-backdrop-opacity,  ) var(--tw-backdrop-saturate,  ) var(--tw-backdrop-sepia,  );
  }

  .backdrop-blur-sm {
    --tw-backdrop-blur: blur(var(--blur-sm));
    -webkit-backdrop-filter: var(--tw-backdrop-blur,  ) var(--tw-backdrop-brightness,  ) var(--tw-backdrop-contrast,  ) var(--tw-backdrop-grayscale,  ) var(--tw-backdrop-hue-rotate,  ) var(--tw-backdrop-invert,  ) var(--tw-backdrop-opacity,  ) var(--tw-backdrop-saturate,  ) var(--tw-backdrop-sepia,  );
    backdrop-filter: var(--tw-backdrop-blur,  ) var(--tw-backdrop-brightness,  ) var(--tw-backdrop-contrast,  ) var(--tw-backdrop-grayscale,  ) var(--tw-backdrop-hue-rotate,  ) var(--tw-backdrop-invert,  ) var(--tw-backdrop-opacity,  ) var(--tw-backdrop-saturate,  ) var(--tw-backdrop-sepia,  );
  }

  .backdrop-filter {
    -webkit-backdrop-filter: var(--tw-backdrop-blur,  ) var(--tw-backdrop-brightness,  ) var(--tw-backdrop-contrast,  ) var(--tw-backdrop-grayscale,  ) var(--tw-backdrop-hue-rotate,  ) var(--tw-backdrop-invert,  ) var(--tw-backdrop-opacity,  ) var(--tw-backdrop-saturate,  ) var(--tw-backdrop-sepia,  );
    backdrop-filter: var(--tw-backdrop-blur,  ) var(--tw-backdrop-brightness,  ) var(--tw-backdrop-contrast,  ) var(--tw-backdrop-grayscale,  ) var(--tw-backdrop-hue-rotate,  ) var(--tw-backdrop-invert,  ) var(--tw-backdrop-opacity,  ) var(--tw-backdrop-saturate,  ) var(--tw-backdrop-sepia,  );
  }

  .transition {
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .transition-\[opacity\,background-color\] {
    transition-property: opacity, background-color;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .transition-all {
    transition-property: all;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .transition-colors {
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .transition-opacity {
    transition-property: opacity;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .duration-150 {
    --tw-duration: .15s;
    transition-duration: .15s;
  }

  .duration-200 {
    --tw-duration: .2s;
    transition-duration: .2s;
  }

  .duration-\[var\(--motion-fast\)\] {
    --tw-duration: var(--motion-fast);
    transition-duration: var(--motion-fast);
  }

  .ease-\[var\(--topology-motion-ease-out\)\] {
    --tw-ease: var(--topology-motion-ease-out);
    transition-timing-function: var(--topology-motion-ease-out);
  }

  .ease-in {
    --tw-ease: var(--ease-in);
    transition-timing-function: var(--ease-in);
  }

  .ease-in-out {
    --tw-ease: var(--ease-in-out);
    transition-timing-function: var(--ease-in-out);
  }

  .ease-out {
    --tw-ease: var(--ease-out);
    transition-timing-function: var(--ease-out);
  }

  .outline-none {
    --tw-outline-style: none;
    outline-style: none;
  }

  .select-none {
    -webkit-user-select: none;
    user-select: none;
  }

  .ring-inset {
    --tw-ring-inset: inset;
  }

  @media (hover: hover) {
    .group-hover\:block:is(:where(.group):hover *) {
      display: block;
    }

    .group-hover\:opacity-100:is(:where(.group):hover *) {
      opacity: 1;
    }
  }

  .placeholder\:text-\[color\:var\(--color-text-quaternary\)\]::placeholder {
    color: var(--color-text-quaternary);
  }

  @media (hover: hover) {
    .hover\:border-\[color\:var\(--color-border-strong\)\]:hover {
      border-color: var(--color-border-strong);
    }

    .hover\:bg-\[\#1a2033\]:hover {
      background-color: #1a2033;
    }

    .hover\:bg-\[\#2b3452\]:hover {
      background-color: #2b3452;
    }

    .hover\:bg-\[\#6366f1\]\/30:hover {
      background-color: oklab(58.5404% .0252827 -.202483 / .3);
    }

    .hover\:bg-\[\#20273c\]:hover {
      background-color: #20273c;
    }

    .hover\:bg-\[\#141827\]:hover {
      background-color: #141827;
    }

    .hover\:bg-\[color\:var\(--color-indigo-brand-hover\)\]:hover {
      background-color: var(--color-indigo-brand-hover);
    }

    .hover\:bg-\[color\:var\(--color-indigo-hover\)\]:hover {
      background-color: var(--color-indigo-hover);
    }

    .hover\:bg-\[color\:var\(--color-overlay-1\)\]:hover {
      background-color: var(--color-overlay-1);
    }

    .hover\:bg-\[color\:var\(--color-overlay-2\)\]:hover {
      background-color: var(--color-overlay-2);
    }

    .hover\:bg-\[color\:var\(--topology-v2-panel-row-hover\)\]:hover {
      background-color: var(--topology-v2-panel-row-hover);
    }

    .hover\:bg-slate-800\/30:hover {
      background-color: #1d293d4d;
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-slate-800\/30:hover {
        background-color: color-mix(in oklab, var(--color-slate-800) 30%, transparent);
      }
    }

    .hover\:bg-slate-800\/40:hover {
      background-color: #1d293d66;
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-slate-800\/40:hover {
        background-color: color-mix(in oklab, var(--color-slate-800) 40%, transparent);
      }
    }

    .hover\:text-\[color\:var\(--color-text-primary\)\]:hover {
      color: var(--color-text-primary);
    }

    .hover\:text-\[color\:var\(--color-text-secondary\)\]:hover {
      color: var(--color-text-secondary);
    }

    .hover\:text-\[color\:var\(--topology-v2-panel-text-primary\)\]:hover {
      color: var(--topology-v2-panel-text-primary);
    }

    .hover\:text-\[color\:var\(--topology-v2-panel-text-secondary\)\]:hover {
      color: var(--topology-v2-panel-text-secondary);
    }

    .hover\:text-white:hover {
      color: var(--color-white);
    }

    .hover\:underline:hover {
      text-decoration-line: underline;
    }
  }

  .focus\:outline-none:focus {
    --tw-outline-style: none;
    outline-style: none;
  }

  .focus-visible\:border-\[color\:var\(--color-indigo-a46\)\]:focus-visible {
    border-color: var(--color-indigo-a46);
  }

  .focus-visible\:ring-2:focus-visible {
    --tw-ring-shadow: var(--tw-ring-inset,  ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .focus-visible\:ring-\[color\:var\(--color-indigo-accent\)\]:focus-visible {
    --tw-ring-color: var(--color-indigo-accent);
  }

  .focus-visible\:ring-\[color\:var\(--color-indigo-focus-ring\)\]:focus-visible {
    --tw-ring-color: var(--color-indigo-focus-ring);
  }

  .focus-visible\:ring-offset-2:focus-visible {
    --tw-ring-offset-width: 2px;
    --tw-ring-offset-shadow: var(--tw-ring-inset,  ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  }

  .focus-visible\:ring-offset-\[color\:var\(--color-canvas\)\]:focus-visible {
    --tw-ring-offset-color: var(--color-canvas);
  }

  .focus-visible\:outline-none:focus-visible {
    --tw-outline-style: none;
    outline-style: none;
  }

  .focus-visible\:ring-inset:focus-visible {
    --tw-ring-inset: inset;
  }

  .active\:cursor-grabbing:active {
    cursor: grabbing;
  }

  .disabled\:cursor-not-allowed:disabled {
    cursor: not-allowed;
  }

  .disabled\:opacity-55:disabled {
    opacity: .55;
  }

  .disabled\:shadow-none:disabled {
    --tw-shadow: 0 0 #0000;
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  @media (hover: hover) {
    .disabled\:hover\:border-inherit:disabled:hover {
      border-color: inherit;
    }

    .disabled\:hover\:bg-inherit:disabled:hover {
      background-color: inherit;
    }

    .disabled\:hover\:text-inherit:disabled:hover {
      color: inherit;
    }
  }
}
:root, [data-theme="light"] {
  --cx-font-sans: "Inter", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --cx-font-mono: "JetBrains Mono", "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  --cx-space-1: 4px;
  --cx-space-2: 8px;
  --cx-space-3: 12px;
  --cx-space-4: 16px;
  --cx-space-5: 20px;
  --cx-space-6: 24px;
  --cx-space-8: 32px;
  --cx-space-12: 48px;
  --cx-space-16: 64px;
  --cx-control-height-compact: 28px;
  --cx-control-height-default: 32px;
  --cx-control-height-comfortable: 36px;
  --cx-radius-sm: 6px;
  --cx-radius-md: 8px;
  --cx-radius-lg: 12px;
  --cx-radius-xl: 16px;
  --cx-radius-full: 9999px;
  --cx-shadow-1: 0 1px 2px #1018280f;
  --cx-shadow-2: 0 4px 10px #10182814;
  --cx-shadow-3: 0 8px 24px #1018281a;
  --cx-shadow-4: 0 14px 36px #10182824;
  --cx-motion-fast: .12s;
  --cx-motion-base: .18s;
  --cx-motion-slow: .26s;
  --cx-ease-standard: cubic-bezier(.2, 0, 0, 1);
  --cx-color-brand-primary: #2272b4;
  --cx-color-brand-primary-hover: #0e538b;
  --cx-color-brand-primary-press: #04355d;
  --cx-color-brand-secondary: #464644;
  --cx-color-brand-accent: #2374bb;
  --cx-color-neutral-0: #fff;
  --cx-color-neutral-25: #fafafa;
  --cx-color-neutral-50: #f7f7f7;
  --cx-color-neutral-100: #f5f5f5;
  --cx-color-neutral-150: #eee;
  --cx-color-neutral-200: #ebebeb;
  --cx-color-neutral-300: #ccc;
  --cx-color-neutral-400: #a2a2a2;
  --cx-color-neutral-500: #6b7280;
  --cx-color-neutral-600: #6f6f6f;
  --cx-color-neutral-700: #555;
  --cx-color-neutral-800: #333;
  --cx-color-neutral-900: #161616;
  --cx-color-success-bg: #f3fcf6;
  --cx-color-success-text: #277c43;
  --cx-color-success-border: #97c459;
  --cx-color-warning-bg: #fff9eb;
  --cx-color-warning-text: #be501e;
  --cx-color-warning-border: #f8d4a5;
  --cx-color-error-bg: #fff5f7;
  --cx-color-error-text: #c82d4c;
  --cx-color-error-border: #fbd0d8;
  --cx-color-info-bg: #eaf6ff;
  --cx-color-info-text: #2374bb;
  --cx-color-info-border: #64c3ff;
  --cx-color-bg: #fff;
  --cx-color-surface: var(--cx-color-neutral-0);
  --cx-color-surface-subtle: #fafafa;
  --cx-color-surface-hover: #f5f5f5;
  --cx-color-border: #e5e5e5;
  --cx-color-border-subtle: #ececec;
  --cx-color-border-muted: #f1f1f1;
  --cx-color-border-strong: #cfcfcf;
  --cx-border-hairline: 1px solid var(--cx-color-border);
  --cx-border-hairline-subtle: 1px solid var(--cx-color-border-subtle);
  --cx-color-text: #000c;
  --cx-color-text-muted: #0009;
  --cx-color-text-subtle: #00000057;
  --cx-color-primary: var(--cx-color-brand-primary);
  --cx-color-primary-hover: var(--cx-color-brand-primary-hover);
  --cx-color-primary-bg: #eaf6ff;
  --cx-color-secondary-action: #2374bb;
  --cx-color-sidebar-bg: #fafafa;
  --cx-color-sidebar-hover: #f1f3f5;
  --cx-color-sidebar-active-bg: #e4e8ee;
  --cx-color-sidebar-active-text: #0f172a;
  --cx-color-sidebar-section-text: #6b7280;
  --cx-color-sidebar-button-bg: #f3f4f6;
  --cx-color-sidebar-button-hover: #e5e7eb;
  --cx-color-sidebar-button-text: #1f2937;
  --cx-color-topbar-bg: #fffffff0;
  --cx-color-icon: #64748b;
  --cx-color-icon-hover: #1b6ef3;
  --cx-color-button-secondary-bg: #f3f4f6;
  --cx-color-button-secondary-hover: #e5e7eb;
  --cx-color-button-secondary-active: #d1d5db;
  --cx-color-overlay: #00000042;
}
[data-theme="dark"] {
  --cx-color-bg: #111318;
  --cx-color-surface: #181b22;
  --cx-color-surface-subtle: #1f232c;
  --cx-color-surface-hover: #242936;
  --cx-color-border: #3a3f49;
  --cx-color-border-subtle: #303640;
  --cx-color-border-muted: #272d36;
  --cx-color-border-strong: #5a6270;
  --cx-border-hairline: 1px solid var(--cx-color-border);
  --cx-border-hairline-subtle: 1px solid var(--cx-color-border-subtle);
  --cx-color-text: #ffffffdb;
  --cx-color-text-muted: #ffffffad;
  --cx-color-text-subtle: #ffffff7a;
  --cx-color-primary: #64c3ff;
  --cx-color-primary-hover: #8ad2ff;
  --cx-color-primary-bg: #64c3ff24;
  --cx-color-secondary-action: #64c3ff;
  --cx-color-sidebar-bg: #0d1117;
  --cx-color-sidebar-hover: #161b22;
  --cx-color-sidebar-active-bg: #21262d;
  --cx-color-sidebar-active-text: #fff;
  --cx-color-sidebar-section-text: #8b949e;
  --cx-color-sidebar-button-bg: #ffffff14;
  --cx-color-sidebar-button-hover: #ffffff1f;
  --cx-color-sidebar-button-text: #ffffffeb;
  --cx-color-topbar-bg: #181b22f0;
  --cx-color-icon: #ffffffad;
  --cx-color-icon-hover: #64c3ff;
  --cx-color-button-secondary-bg: #2a2e33;
  --cx-color-button-secondary-hover: #343a40;
  --cx-color-button-secondary-active: #3e444c;
  --cx-color-overlay: #00000080;
}
body {
  font-family: var(--cx-font-sans);
  font-size: 14px;
  line-height: 1.5;
}
h1, h2, h3, h4, h5, h6 {
  color: var(--cx-color-text);
  letter-spacing: -.02em;
}
h1 {
  font-size: 28px;
  font-weight: 700;
  line-height: 1.2;
}
h2 {
  font-size: 22px;
  font-weight: 650;
  line-height: 1.25;
}
h3 {
  font-size: 18px;
  font-weight: 600;
  line-height: 1.3;
}
code, pre, .font-mono {
  font-family: var(--cx-font-mono);
}
* {
  box-sizing: border-box;
}
html, body, #root {
  min-height: 100vh;
}
body {
  background: var(--cx-color-bg);
  color: var(--cx-color-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  margin: 0;
}
button, input, select, textarea {
  font: inherit;
}
a {
  color: inherit;
}
.cx-border {
  border: var(--cx-border-hairline);
}
.cx-border-subtle {
  border: var(--cx-border-hairline-subtle);
}
.cx-border-bottom {
  border-bottom: var(--cx-border-hairline);
}
.cx-border-bottom-subtle {
  border-bottom: var(--cx-border-hairline-subtle);
}
.cx-panel {
  background: var(--cx-color-surface);
  border: var(--cx-border-hairline);
  border-radius: var(--cx-radius-md);
}
.cx-panel-subtle {
  background: var(--cx-color-surface);
  border: var(--cx-border-hairline-subtle);
  border-radius: var(--cx-radius-md);
}
.tiptap {
  color: var(--color-text);
  outline: none;
  min-height: 400px;
  font-size: .95rem;
  line-height: 1.75;
}
.tiptap p.is-empty:before, .tiptap h1.is-empty:before, .tiptap h2.is-empty:before, .tiptap h3.is-empty:before {
  content: attr(data-placeholder);
  color: var(--color-text-subtle, #9e9e9e);
  pointer-events: none;
  float: left;
  height: 0;
}
.tiptap h1 {
  margin: 1.5rem 0 .5rem;
  font-size: 1.875rem;
  font-weight: 700;
  line-height: 1.2;
}
.tiptap h2 {
  margin: 1.25rem 0 .4rem;
  font-size: 1.375rem;
  font-weight: 600;
  line-height: 1.3;
}
.tiptap h3 {
  margin: 1rem 0 .3rem;
  font-size: 1.1rem;
  font-weight: 600;
  line-height: 1.4;
}
.tiptap p {
  margin: .25rem 0;
}
.tiptap p + p {
  margin-top: .1rem;
}
.tiptap ul, .tiptap ol {
  margin: .4rem 0;
  padding-left: 1.6rem;
}
.tiptap li {
  margin: .1rem 0;
}
.tiptap li p {
  margin: 0;
}
.tiptap ul[data-type="taskList"] {
  padding-left: .25rem;
  list-style: none;
}
.tiptap ul[data-type="taskList"] li {
  align-items: flex-start;
  gap: .5rem;
  display: flex;
}
.tiptap ul[data-type="taskList"] li > label {
  flex-shrink: 0;
  margin-top: 2px;
}
.tiptap ul[data-type="taskList"] li > label input[type="checkbox"] {
  cursor: pointer;
  width: 15px;
  height: 15px;
  accent-color: var(--color-primary);
}
.tiptap ul[data-type="taskList"] li[data-checked="true"] > div {
  opacity: .55;
  text-decoration: line-through;
}
.tiptap blockquote {
  border-left: 3px solid var(--color-primary);
  background: var(--color-primary-bg, #ebf2ff);
  color: var(--color-text-muted);
  border-radius: 0 4px 4px 0;
  margin: .75rem 0;
  padding: .4rem 1rem;
  font-style: italic;
}
.tiptap code {
  background: var(--color-surface-hover, #f0f2f5);
  border: 1px solid var(--color-border);
  color: var(--color-danger, #d32f2f);
  border-radius: 3px;
  padding: .1em .35em;
  font-family: JetBrains Mono, Fira Code, monospace;
  font-size: .85em;
}
.tiptap pre {
  background: #1e1e2e;
  border-radius: 8px;
  margin: .75rem 0;
  padding: 1rem 1.25rem;
  overflow-x: auto;
}
.tiptap pre code {
  color: #cdd6f4;
  background: none;
  border: none;
  padding: 0;
  font-size: .875rem;
  line-height: 1.6;
}
.tiptap hr {
  border: none;
  border-top: 2px solid var(--color-border);
  margin: 1.5rem 0;
}
.tiptap table {
  border-collapse: collapse;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  width: 100%;
  margin: .75rem 0;
  overflow: hidden;
}
.tiptap table th {
  background: var(--color-surface-hover, #f0f2f5);
  text-align: left;
  border: 1px solid var(--color-border);
  padding: 8px 12px;
  font-size: .82rem;
  font-weight: 600;
}
.tiptap table td {
  border: 1px solid var(--color-border);
  vertical-align: top;
  padding: 7px 12px;
  font-size: .88rem;
}
.tiptap table tr:nth-child(2n) td {
  background: var(--color-bg, #f5f5f5);
}
.tiptap .selectedCell:after {
  content: "";
  pointer-events: none;
  z-index: 2;
  background: #1b6ef31a;
  position: absolute;
  inset: 0;
}
.tiptap .column-resize-handle {
  background: var(--color-primary);
  pointer-events: none;
  width: 4px;
  position: absolute;
  top: 0;
  bottom: -2px;
  right: -2px;
}
.tableWrapper {
  overflow-x: auto;
}
.resize-cursor {
  cursor: col-resize;
}
.tiptap a {
  color: var(--color-primary);
  cursor: pointer;
  text-decoration: underline;
}
.tiptap a:hover {
  opacity: .8;
}
.tiptap mark {
  background: #fff59d;
  border-radius: 2px;
  padding: 0 2px;
}
.tiptap img {
  border-radius: 6px;
  max-width: 100%;
  margin: .5rem 0;
  display: block;
}
.tiptap img.ProseMirror-selectednode {
  outline: 2px solid var(--color-primary);
}
.tiptap ::selection {
  background: #1b6ef326;
}
[data-theme="dark"] .tiptap code {
  color: #f38ba8;
  background: #2a2a3a;
}
[data-theme="dark"] .tiptap blockquote {
  background: #1b6ef314;
}
[data-theme="dark"] .tiptap mark {
  color: #fff;
  background: #7c6f00;
}
[data-theme="dark"] .tiptap table th {
  background: #2a2a3a;
}
[data-theme="dark"] .tiptap table tr:nth-child(2n) td {
  background: #1e1e2e;
}
.notebook-container {
  background: #fff;
  flex-direction: column;
  height: 100%;
  display: flex;
}
.notebook-toolbar {
  box-shadow: none;
  background: #fff;
  border-bottom: none;
  flex-shrink: 0;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  display: flex;
}
.notebook-toolbar-left, .notebook-toolbar-right {
  align-items: center;
  gap: 8px;
  display: flex;
}
.notebook-title-chip {
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  border-radius: 6px;
  flex-direction: column;
  gap: 2px;
  max-width: 320px;
  padding: 6px 10px;
  display: inline-flex;
}
.notebook-title-label {
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--color-text-muted);
  font-size: 10px;
}
.notebook-title-name {
  color: var(--color-text);
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 600;
  overflow: hidden;
}
.notebook-toolbar-btn {
  color: #374151;
  box-sizing: border-box;
  cursor: pointer;
  background: #fff;
  border: 1px solid #d1d5db;
  border-radius: 5px;
  align-items: center;
  gap: 4px;
  height: 28px;
  padding: 0 10px;
  font-size: 12px;
  font-weight: 500;
  transition: background .15s, border-color .15s;
  display: inline-flex;
}
.notebook-toolbar-btn:hover {
  background: #f3f4f6;
  border-color: #9ca3af;
}
.notebook-toolbar-btn:disabled {
  opacity: .5;
  cursor: not-allowed;
}
.notebook-toolbar-btn-danger:hover {
  color: #b91c1c;
  background: #fee2e2;
}
.notebook-actions-menu-wrapper {
  align-items: center;
  display: inline-flex;
  position: relative;
}
.notebook-actions-menu-btn {
  box-shadow: none !important;
  color: var(--color-text-muted, #6b7280) !important;
  background: none !important;
  border: none !important;
  padding: 0 6px !important;
}
.notebook-actions-menu-btn:hover {
  background: var(--color-surface-hover, #f3f4f6) !important;
  color: var(--color-text, #111827) !important;
}
.notebook-actions-popover-menu {
  z-index: 100;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  min-width: 160px;
  padding: 4px;
  animation: .15s ease-out notebook-pod-menu-in;
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  box-shadow: 0 10px 25px -5px #0000001a, 0 8px 10px -6px #0000001a;
}
.notebook-actions-menu-item {
  color: #374151;
  cursor: pointer;
  text-align: left;
  background: none;
  border: none;
  border-radius: 4px;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 500;
  transition: background .12s, color .12s;
  display: flex;
}
.notebook-actions-menu-item:hover {
  color: #111827;
  background: #f3f4f6;
}
.notebook-actions-menu-item-danger {
  color: #dc2626;
}
.notebook-actions-menu-item-danger:hover {
  color: #b91c1c;
  background: #fee2e2;
}
.notebook-pod-selector-wrapper {
  align-items: center;
  gap: 8px;
  display: inline-flex;
  position: relative;
}
.notebook-pod-btn-wrapper {
  color: #111827;
  box-sizing: border-box;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  background: #fff;
  border: 1px solid #d1d5db;
  border-radius: 5px;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 10px;
  font-size: 12px;
  font-weight: 500;
  transition: background .15s, border-color .15s;
  display: inline-flex;
}
.notebook-pod-btn-wrapper.is-disabled {
  cursor: not-allowed;
  opacity: .6;
}
.notebook-pod-status {
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  display: inline-flex;
}
.notebook-pod-spinner {
  color: #3b82f6;
  animation: 1s linear infinite notebook-pod-spin;
}
.notebook-pod-trigger-text {
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 160px;
  overflow: hidden;
}
.notebook-pod-chevron {
  color: #6b7280;
  flex-shrink: 0;
}
.notebook-pod-menu {
  z-index: 100;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  flex-direction: column;
  width: 240px;
  animation: .15s ease-out notebook-pod-menu-in;
  display: flex;
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  overflow: hidden;
  box-shadow: 0 10px 25px -5px #0000001a, 0 8px 10px -6px #0000001a;
}
@keyframes notebook-pod-menu-in {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.notebook-pod-menu-header {
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: .05em;
  background: #fafafa;
  border-bottom: 1px solid #f3f4f6;
  justify-content: space-between;
  align-items: center;
  padding: 8px 10px;
  font-size: 11px;
  font-weight: 600;
  display: flex;
}
.notebook-pod-refresh-btn {
  color: #6b7280;
  cursor: pointer;
  background: none;
  border: none;
  border-radius: 3px;
  align-items: center;
  padding: 2px;
  display: flex;
}
.notebook-pod-refresh-btn:hover {
  color: #111827;
  background: #e5e7eb;
}
.notebook-pod-refresh-btn .is-spinning {
  animation: 1s linear infinite notebook-pod-spin;
}
@keyframes notebook-pod-spin {
  from {
    transform: rotate(0);
  }

  to {
    transform: rotate(360deg);
  }
}
.notebook-pod-menu-list {
  max-height: 220px;
  padding: 4px;
  overflow-y: auto;
}
.notebook-pod-menu-item {
  color: #1f2937;
  cursor: pointer;
  text-align: left;
  background: none;
  border: none;
  border-radius: 4px;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 6px 8px;
  font-size: 12px;
  transition: background .12s;
  display: flex;
}
.notebook-pod-menu-item:hover {
  background: #f3f4f6;
}
.notebook-pod-menu-item.is-selected {
  color: #1d4ed8;
  background: #eff6ff;
  font-weight: 600;
}
.notebook-pod-menu-item-name {
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  overflow: hidden;
}
.notebook-pod-phase-badge {
  text-transform: capitalize;
  color: #6b7280;
  background: #f3f4f6;
  border-radius: 999px;
  padding: 1px 5px;
  font-size: 10px;
  font-weight: 500;
}
.notebook-pod-phase-badge--running {
  color: #15803d;
  background: #dcfce7;
}
.notebook-pod-phase-badge--pending, .notebook-pod-phase-badge--starting {
  color: #a16207;
  background: #fef9c3;
}
.notebook-pod-phase-badge--stopped, .notebook-pod-phase-badge--failed, .notebook-pod-phase-badge--terminated {
  color: #b91c1c;
  background: #fee2e2;
}
.notebook-pod-menu-empty {
  color: #9ca3af;
  text-align: center;
  padding: 16px 12px;
  font-size: 12px;
}
.notebook-pod-menu-footer {
  background: #fafafa;
  border-top: 1px solid #f3f4f6;
  padding: 4px;
}
.notebook-pod-create-btn {
  color: #374151;
  cursor: pointer;
  background: #fff;
  border: 1px dashed #d1d5db;
  border-radius: 4px;
  justify-content: center;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 6px 8px;
  font-size: 11px;
  font-weight: 500;
  transition: background .12s, border-color .12s;
  display: flex;
}
.notebook-pod-create-btn:hover {
  color: #111827;
  background: #f3f4f6;
  border-color: #9ca3af;
}
.notebook-kernel-status {
  color: var(--color-text-muted);
  align-items: center;
  gap: 6px;
  font-size: 12px;
  display: flex;
}
.notebook-kernel-text {
  white-space: nowrap;
  text-overflow: ellipsis;
  min-width: 135px;
  max-width: 160px;
  display: inline-block;
  overflow: hidden;
}
.notebook-kernel-dot {
  background: var(--color-border-strong);
  border-radius: 50%;
  width: 8px;
  height: 8px;
}
.notebook-kernel-status-idle .notebook-kernel-dot {
  background: #22c55e;
}
.notebook-kernel-status-busy .notebook-kernel-dot {
  background: #f59e0b;
}
.notebook-kernel-status-dead .notebook-kernel-dot {
  background: #ef4444;
}
.notebook-kernel-status-connecting .notebook-kernel-dot {
  background: #3b82f6;
}
.notebook-dirty-indicator {
  color: #f59e0b;
  font-size: 16px;
  line-height: 1;
}
.notebook-scroll-area {
  flex: 1;
  min-width: 0;
  overflow-y: auto;
}
.notebook-cells {
  box-sizing: border-box;
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding: 20px 32px;
}
@media (min-width: 1600px) {
  .notebook-cells {
    max-width: 1440px;
    padding: 20px 48px;
  }
}
@media (max-width: 1200px) {
  .notebook-cells {
    max-width: 100%;
    padding: 16px 20px;
  }
}
.notebook-cell {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  flex-direction: column;
  margin: 0 0 8px;
  transition: border-color .15s, box-shadow .15s;
  display: flex;
  overflow: hidden;
  box-shadow: 0 1px 3px #0000000a, 0 1px 2px #00000005;
}
.notebook-cell-main-content {
  width: 100%;
  display: flex;
}
.notebook-cell:hover {
  border-color: #cbd5e1;
  box-shadow: 0 3px 6px #0000000f;
}
.notebook-cell.is-running {
  border-color: #3b82f6;
  box-shadow: 0 0 0 2px #3b82f626;
}
.notebook-cell-exec-count-chip {
  font-family: var(--cx-font-mono, "Courier New", monospace);
  color: #6b7280;
  -webkit-user-select: none;
  user-select: none;
  margin-right: 2px;
  font-size: 11px;
  font-weight: 600;
}
.notebook-cell-body {
  flex-direction: column;
  flex: 1;
  min-width: 0;
  display: flex;
}
.notebook-cell-toolbar {
  z-index: 20;
  box-sizing: border-box;
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  height: 28px;
  padding: 4px 12px;
  display: flex;
  position: sticky;
  top: 0;
}
.notebook-cell-toolbar-left {
  align-items: center;
  gap: 4px;
  display: flex;
}
.notebook-cell-toolbar-right {
  opacity: 0;
  pointer-events: none;
  align-items: center;
  gap: 4px;
  transition: opacity .15s ease-in-out;
  display: flex;
}
.notebook-cell:hover .notebook-cell-toolbar-right, .notebook-cell.is-focused .notebook-cell-toolbar-right, .notebook-cell:focus-within .notebook-cell-toolbar-right, .notebook-cell.is-running .notebook-cell-toolbar-right {
  opacity: 1;
  pointer-events: auto;
}
.uc-main-tab-strip {
  border-bottom: 1px solid var(--color-border, #e5e5e5);
  scrollbar-width: thin;
  background: #fafafa;
  flex-shrink: 0;
  align-items: center;
  gap: 0;
  height: 36px;
  padding: 0;
  display: flex;
  overflow: auto hidden;
}
.uc-main-tab-strip::-webkit-scrollbar {
  height: 3px;
}
.uc-main-tab-strip::-webkit-scrollbar-thumb {
  background: var(--color-border, #e5e5e5);
}
.uc-main-tab {
  color: #4b5563;
  border-right: 1px solid var(--color-border, #e5e5e5);
  cursor: pointer;
  white-space: nowrap;
  -webkit-user-select: none;
  user-select: none;
  box-sizing: border-box;
  background: #fafafa;
  border-top: none;
  border-bottom: none;
  border-left: none;
  border-radius: 0;
  flex-shrink: 0;
  align-items: center;
  gap: 8px;
  max-width: 260px;
  height: 36px;
  padding: 0 14px;
  font-size: 13px;
  font-weight: 400;
  text-decoration: none;
  transition: background .12s, color .12s;
  display: inline-flex;
  position: relative;
}
.uc-main-tab:hover:not(.is-active) {
  color: #111827;
  background: #f3f4f6;
}
.uc-main-tab.is-active {
  color: #111827;
  border-right: 1px solid var(--color-border, #e5e5e5);
  border-bottom: 2px solid var(--color-primary, #2272b4);
  z-index: 2;
  box-shadow: none;
  background: #fff;
  margin-bottom: -1px;
  font-weight: 600;
}
.uc-main-tab-title {
  text-overflow: ellipsis;
  white-space: nowrap;
  letter-spacing: .01em;
  overflow: hidden;
}
.uc-main-tab-close {
  color: #9ca3af;
  cursor: pointer;
  background: none;
  border: none;
  border-radius: 3px;
  justify-content: center;
  align-items: center;
  width: 18px;
  height: 18px;
  margin-left: 4px;
  transition: background .12s, color .12s;
  display: inline-flex;
}
.uc-main-tab-close:hover {
  color: #ef4444;
  opacity: 1;
  background: #ef444426;
}
.notebook-cell-icon-btn {
  height: 20px;
  color: var(--color-text-muted);
  cursor: pointer;
  background: none;
  border: none;
  border-radius: 3px;
  justify-content: center;
  align-items: center;
  gap: 4px;
  padding: 0 4px;
  font-size: 11px;
  transition: background .15s, color .15s;
  display: inline-flex;
}
.notebook-cell-icon-btn:hover {
  color: var(--color-text);
  background: #0000000f;
}
.notebook-cell-icon-btn:disabled {
  opacity: .4;
  cursor: not-allowed;
}
.notebook-cell-icon-btn-danger:hover {
  color: #b91c1c;
  background: #fee2e2;
}
.notebook-cell-toolbar-middle {
  flex: 1;
  justify-content: center;
  align-items: center;
  gap: 6px;
  display: flex;
}
.notebook-cell-index-label {
  color: var(--color-text-muted);
  -webkit-user-select: none;
  user-select: none;
  font-size: 11px;
  font-weight: 600;
}
.notebook-cell-title-input {
  color: var(--color-text);
  text-align: left;
  background: none;
  border: 1px solid #0000;
  border-radius: 4px;
  outline: none;
  width: 200px;
  padding: 2px 6px;
  font-size: 11px;
  font-weight: 500;
  transition: border-color .15s, background-color .15s;
}
.notebook-cell-title-input::placeholder {
  color: var(--color-text-subtle);
  font-style: italic;
}
.notebook-cell-title-input:hover {
  border-color: var(--color-border-strong);
  background: var(--color-surface-hover);
}
.notebook-cell-title-input:focus {
  border-color: var(--color-primary);
  background: var(--color-surface);
}
.notebook-cell-type-select {
  color: #374151;
  cursor: pointer;
  appearance: none;
  background: #f3f4f6;
  border: none;
  border-radius: 3px;
  outline: none;
  padding: 2px 6px;
  font-size: 11px;
  font-weight: 500;
}
.notebook-cell-type-select:hover {
  color: #111827;
  background: #e5e7eb;
}
.notebook-cell-editor {
  flex: 1;
  padding: 12px;
}
.notebook-cell-editor .cm-editor, .notebook-cell-editor .cm-editor.cm-focused, .notebook-cell-editor .cm-scroller, .notebook-cell-editor .cm-content {
  border: none !important;
  outline: none !important;
}
.notebook-cell-editor .cm-activeLine, .notebook-cell-editor .cm-activeLineGutter {
  background-color: #0000 !important;
}
.cm-editor .tok-keyword, .cm-content .tok-keyword, .cm-line .tok-keyword {
  color: #d73a49 !important;
  font-weight: 600 !important;
}
.cm-editor .tok-operator, .cm-content .tok-operator, .cm-line .tok-operator {
  color: #d73a49 !important;
}
.cm-editor .tok-variableName.tok-definition, .cm-content .tok-variableName.tok-definition, .cm-line .tok-variableName.tok-definition, .cm-editor .tok-propertyName.tok-definition, .cm-content .tok-propertyName.tok-definition, .cm-line .tok-propertyName.tok-definition {
  color: #6f42c1 !important;
  font-weight: 600 !important;
}
.cm-editor .tok-className, .cm-content .tok-className, .cm-line .tok-className, .cm-editor .tok-typeName, .cm-content .tok-typeName, .cm-line .tok-typeName {
  color: #005cc5 !important;
  font-weight: 600 !important;
}
.cm-editor .tok-variableName2, .cm-content .tok-variableName2, .cm-line .tok-variableName2 {
  color: #e36209 !important;
  font-weight: 500 !important;
}
.cm-editor .tok-string, .cm-content .tok-string, .cm-line .tok-string {
  color: #032f62 !important;
}
.cm-editor .tok-string2, .cm-content .tok-string2, .cm-line .tok-string2 {
  color: #032f62 !important;
  font-style: italic !important;
}
.cm-editor .tok-number, .cm-content .tok-number, .cm-line .tok-number {
  color: #005cc5 !important;
}
.cm-editor .tok-bool, .cm-content .tok-bool, .cm-line .tok-bool, .cm-editor .tok-atom, .cm-content .tok-atom, .cm-line .tok-atom {
  color: #005cc5 !important;
  font-weight: 600 !important;
}
.cm-editor .tok-comment, .cm-content .tok-comment, .cm-line .tok-comment {
  color: #6a737d !important;
  font-style: italic !important;
}
.cm-editor .tok-propertyName, .cm-content .tok-propertyName, .cm-line .tok-propertyName {
  color: #005cc5 !important;
}
.cm-editor .tok-meta, .cm-content .tok-meta, .cm-line .tok-meta {
  color: #e36209 !important;
  font-weight: 500 !important;
}
.cm-editor .tok-punctuation, .cm-content .tok-punctuation, .cm-line .tok-punctuation {
  color: #24292e !important;
}
.cm-editor .tok-invalid, .cm-content .tok-invalid, .cm-line .tok-invalid {
  color: #cb2431 !important;
  text-decoration: underline !important;
}
.notebook-markdown-editor {
  resize: vertical;
  background: none;
  border: none;
  outline: none;
  width: 100%;
  padding: 12px;
  font-family: inherit;
  font-size: 13px;
}
.notebook-collapsed-cell-hint {
  color: #6b7280;
  cursor: pointer;
  border-top: 1px solid var(--color-border);
  background: #f9fafb;
  padding: 6px 12px;
  font-size: 11px;
  transition: background .15s, color .15s;
}
.notebook-collapsed-cell-hint:hover {
  color: #111827;
  background: #f3f4f6;
}
.notebook-cell-outputs {
  background: #fff;
  border-top: 1px solid #e2e8f0;
  border-bottom-right-radius: 7px;
  border-bottom-left-radius: 7px;
  margin: 0;
  padding: 4px 0;
}
.notebook-output-stream {
  font-family: var(--cx-font-mono, "Courier New", monospace);
  white-space: pre-wrap;
  word-break: break-all;
  color: #1e293b;
  background: none;
  border: none;
  margin: 0;
  padding: 10px 14px;
  font-size: 12.5px;
  line-height: 1.55;
}
.notebook-output-stderr {
  font-family: var(--cx-font-mono, "Courier New", monospace);
  white-space: pre-wrap;
  color: #92400e;
  background: #fffbeb;
  border-left: 3px solid #f59e0b;
  margin: 4px 0;
  padding: 10px 14px;
  font-size: 12.5px;
  line-height: 1.55;
}
.notebook-output-text {
  font-family: var(--cx-font-mono, "Courier New", monospace);
  white-space: pre-wrap;
  color: #1e293b;
  background: none;
  border: none;
  margin: 0;
  padding: 10px 14px;
  font-size: 12.5px;
  line-height: 1.55;
}
.notebook-output-img {
  border-radius: 4px;
  max-width: 100%;
  margin: 10px 14px;
  display: block;
}
.notebook-output-svg {
  margin: 10px 14px;
}
.notebook-output-html {
  border: none;
  width: 100%;
  min-height: 100px;
  max-height: 600px;
}
.notebook-output-error {
  font-family: var(--cx-font-mono, "Courier New", monospace);
  background: #fef2f2;
  border-left: 3px solid #ef4444;
  margin: 4px 0;
  padding: 10px 14px;
  font-size: 12px;
}
.notebook-output-error-title {
  color: #b91c1c;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 700;
}
.notebook-output-error-name {
  color: #b91c1c;
  font-family: Courier New, monospace;
  font-weight: 600;
}
.notebook-output-error-value {
  color: #1f2937;
  font-family: Courier New, monospace;
}
.notebook-output-traceback {
  white-space: pre-wrap;
  word-break: break-all;
  color: #1f2937;
  margin: 0;
  font-family: Courier New, monospace;
  font-size: 11px;
}
.notebook-add-cell-divider {
  z-index: 10;
  justify-content: center;
  align-items: center;
  height: 14px;
  margin: 0 0 4px;
  display: flex;
  position: relative;
}
.notebook-add-cell-divider:before {
  content: "";
  background: none;
  height: 1px;
  transition: background .15s;
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
}
.notebook-add-cell-divider:hover:before {
  background: #e5e7eb;
}
.notebook-add-cell-actions {
  opacity: 0;
  align-items: center;
  gap: 6px;
  transition: opacity .15s, transform .15s;
  display: inline-flex;
  transform: translateY(1px);
}
.notebook-add-cell-divider:hover .notebook-add-cell-actions, .notebook-add-cell-divider--empty .notebook-add-cell-actions {
  opacity: 1;
  transform: translateY(0);
}
.notebook-add-cell-pill {
  color: #374151;
  cursor: pointer;
  background: #fff;
  border: 1px solid #d1d5db;
  border-radius: 5px;
  align-items: center;
  gap: 4px;
  height: 28px;
  padding: 0 10px;
  font-size: 12px;
  font-weight: 500;
  transition: background .15s, border-color .15s;
  display: inline-flex;
  box-shadow: 0 1px 2px #0000000d;
}
.notebook-add-cell-pill:hover {
  color: var(--color-text);
  background: #f3f4f6;
  border-color: #9ca3af;
  box-shadow: 0 1px 3px #00000014;
}
[data-theme="dark"] .notebook-output-stderr {
  background: #422006;
  border-left-color: #d97706;
}
[data-theme="dark"] .notebook-output-error {
  background: #450a0a;
  border-left-color: #dc2626;
}
.notebook-cell.is-focused {
  border-color: #1976d2;
  box-shadow: 0 0 0 2px #1976d226;
}
.notebook-drag-handle {
  cursor: grab;
  color: #d1d5db;
  opacity: 0;
  z-index: 1;
  background: none;
  border: none;
  padding: 4px;
  transition: opacity .15s, color .15s;
  position: absolute;
  top: 50%;
  left: -32px;
  transform: translateY(-50%);
}
.notebook-cell:hover ~ .notebook-drag-handle, div:hover > .notebook-drag-handle {
  opacity: .6;
  color: #9ca3af;
}
div:hover > .notebook-drag-handle:hover {
  opacity: 1;
  color: #6b7280;
  cursor: grabbing;
}
.notebook-collapse-btn {
  color: #6b7280;
  cursor: pointer;
  background: none;
  border: none;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 6px 12px;
  font-size: 12px;
  transition: color .15s;
  display: flex;
}
.notebook-collapse-btn:hover {
  color: var(--color-text);
}
.notebook-cell-markdown {
  border-left-color: #9333ea;
}
.notebook-markdown-editor {
  width: 100%;
  min-height: 100px;
  font-family: var(--cx-font-mono, "Courier New", monospace);
  color: var(--color-text);
  resize: vertical;
  box-sizing: border-box;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 4px;
  padding: 12px;
  font-size: 13px;
}
.notebook-markdown-preview {
  cursor: default;
  color: #1f2937;
  padding: 12px;
  font-size: 14px;
  line-height: 1.6;
}
.notebook-markdown-placeholder {
  color: #9ca3af;
}
.notebook-output-json {
  font-family: var(--cx-font-mono, "Courier New", monospace);
  color: #1f2937;
  background: none;
  padding: 8px 12px;
  font-size: 12px;
}
.json-toggle {
  cursor: pointer;
  color: #6b7280;
  vertical-align: middle;
  background: none;
  border: none;
  padding: 0 2px;
}
.json-null {
  color: #6b7280;
}
.json-bool {
  color: #7c3aed;
}
.json-num {
  color: #0369a1;
}
.json-str {
  color: #166534;
}
.json-key {
  color: #9a3412;
}
.json-bracket {
  color: var(--color-text);
  font-weight: 600;
}
.json-colon {
  color: #6b7280;
}
.json-ellipsis {
  color: #9ca3af;
  margin: 0 4px;
  font-style: italic;
}
.notebook-output-latex {
  text-align: center;
  background: none;
  padding: 8px 12px;
}
.notebook-command-palette {
  background: #fff;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  width: 500px;
  max-width: 90vw;
  overflow: hidden;
  box-shadow: 0 10px 40px #0003;
}
.notebook-command-input {
  width: 100%;
  color: var(--color-text);
  box-sizing: border-box;
  background: #fff;
  border: none;
  border-bottom: 1px solid #e5e7eb;
  outline: none;
  padding: 14px 16px;
  font-size: 14px;
}
.notebook-command-list {
  max-height: 340px;
  overflow-y: auto;
}
.notebook-command-item {
  text-align: left;
  cursor: pointer;
  color: #1f2937;
  background: none;
  border: none;
  width: 100%;
  padding: 10px 16px;
  font-size: 13px;
  display: block;
}
.notebook-command-item.is-selected, .notebook-command-item:hover {
  background: #f0f4f8;
}
.notebook-command-empty {
  color: #9ca3af;
  text-align: center;
  padding: 20px 16px;
  font-size: 13px;
}
.notebook-body {
  flex: 1;
  display: flex;
  overflow: hidden;
}
.notebook-variable-explorer {
  border-left: 1px solid var(--color-border);
  background: var(--color-surface);
  flex-direction: column;
  flex-shrink: 0;
  width: 220px;
  display: flex;
}
.notebook-variable-header {
  border-bottom: 1px solid var(--color-border);
  justify-content: space-between;
  align-items: center;
  padding: 8px 10px;
  font-size: 12px;
  font-weight: 600;
  display: flex;
}
.notebook-variable-list {
  flex: 1;
  padding: 4px 0;
  overflow-y: auto;
}
.notebook-variable-item {
  padding: 4px 10px;
  font-size: 12px;
}
.notebook-variable-empty {
  color: var(--color-text-muted);
  padding: 12px 10px;
  font-size: 12px;
}
@media (max-width: 1100px) {
  .notebook-body {
    flex-direction: column;
  }
}
.notebook-footer {
  border-top: 1px solid var(--color-border);
  background: var(--color-surface);
  flex-shrink: 0;
  align-items: center;
  gap: 12px;
  padding: 4px 12px;
  font-size: 11px;
  display: flex;
}
.notebook-shortcut-hint {
  color: var(--color-text-muted);
  margin-left: auto;
}
.notebook-dialog-overlay {
  z-index: 1000;
  background: #0006;
  justify-content: center;
  align-items: center;
  display: flex;
  position: fixed;
  inset: 0;
}
.notebook-dialog {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  min-width: 320px;
  padding: 24px;
  box-shadow: 0 8px 32px #00000026;
}
.notebook-dialog-title {
  margin: 0 0 8px;
  font-size: 16px;
  font-weight: 600;
}
.notebook-dialog-body {
  color: var(--color-text-muted);
  margin: 0 0 16px;
  font-size: 13px;
}
.notebook-dialog-actions {
  justify-content: flex-end;
  gap: 8px;
  display: flex;
}
.notebook-kernel-selector {
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text);
  border-radius: 4px;
  padding: 3px 6px;
  font-size: 12px;
}
.notebook-pod-selector-wrapper {
  align-items: center;
  gap: 8px;
  min-width: 0;
  display: inline-flex;
}
.notebook-pod-btn-wrapper {
  color: #111827;
  box-sizing: border-box;
  background: #fff;
  border: 1px solid #d1d5db;
  border-radius: 5px;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 10px;
  font-size: 12px;
  transition: background .15s, border-color .15s;
  display: inline-flex;
}
.notebook-pod-btn-wrapper:hover {
  background: #f9fafb;
  border-color: #9ca3af;
}
.notebook-pod-btn-wrapper:focus-within {
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px #3b82f61a;
}
.notebook-pod-status {
  color: var(--color-text-muted);
  pointer-events: none;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  display: inline-flex;
}
.notebook-pod-icon {
  width: 14px;
  height: 14px;
  display: block;
}
.notebook-pod-dot {
  width: 8px;
  min-width: 8px;
  height: 8px;
  min-height: 8px;
  box-shadow: none;
  border: none;
  border-radius: 50%;
  outline: none;
  flex-shrink: 0;
  display: inline-block;
}
.notebook-pod-dot--running, .notebook-pod-dot--connected {
  background: #22c55e;
}
.notebook-pod-dot--pending, .notebook-pod-dot--connecting {
  background: #eab308;
}
.notebook-pod-dot--stopped, .notebook-pod-dot--failed {
  background: #ef4444;
}
.notebook-pod-dot--unknown {
  background: #9ca3af;
}
.notebook-pod-select {
  color: var(--color-text);
  cursor: pointer;
  background: none;
  border: none;
  outline: none;
  margin: 0;
  padding: 0 4px 0 0;
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
}
.notebook-pod-select option {
  color: #111827;
  background: #fff;
  padding: 6px 10px;
  font-size: 12px;
}
.notebook-pod-select:disabled {
  cursor: not-allowed;
  opacity: .5;
}
.notebook-pod-start-link {
  white-space: nowrap;
}
.notebook-pod-error {
  color: #b91c1c;
  background: #fee2e2;
  border-radius: 999px;
  flex: 0 0 18px;
  justify-content: center;
  align-items: center;
  width: 18px;
  height: 18px;
  font-size: 11px;
  font-weight: 700;
  display: inline-flex;
}
.notebook-toolbar-btn.is-active {
  background: var(--color-surface-hover);
  font-weight: 600;
}
.df-viewer {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  flex-direction: column;
  margin: 12px;
  display: flex;
  overflow: hidden;
}
.df-toolbar {
  border-bottom: 1px solid var(--color-border);
  background: #ffffff05;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  display: flex;
}
.df-toolbar-left, .df-toolbar-right {
  align-items: center;
  gap: 8px;
  display: flex;
}
.df-toolbar-btn {
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text);
  cursor: pointer;
  border-radius: 4px;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  font-size: 13px;
  font-weight: 500;
  transition: all .15s;
  display: inline-flex;
}
.df-toolbar-btn:hover {
  background: var(--color-surface-hover);
  border-color: var(--color-border-strong);
}
.df-table-selector {
  border-radius: 4px 0 0 4px;
  margin-right: -1px;
}
.df-plus-btn {
  border-radius: 0 4px 4px 0;
  padding: 5px 8px;
}
.df-search-wrapper {
  align-items: center;
  display: flex;
  position: relative;
}
.df-search-icon {
  color: var(--color-text-muted);
  position: absolute;
  left: 10px;
}
.df-search-input {
  border: 1px solid var(--color-border);
  background: var(--color-bg);
  color: var(--color-text);
  border-radius: 100px;
  outline: none;
  width: 180px;
  padding: 6px 12px 6px 32px;
  font-size: 13px;
  transition: all .15s;
}
.df-search-input:focus {
  border-color: var(--color-primary);
  width: 220px;
}
.df-toolbar-icon-btn {
  color: var(--color-text-muted);
  cursor: pointer;
  background: none;
  border: none;
  border-radius: 4px;
  justify-content: center;
  align-items: center;
  padding: 6px;
  transition: all .15s;
  display: flex;
}
.df-toolbar-icon-btn:hover {
  background: var(--color-surface-hover);
  color: var(--color-text);
}
.df-table-container {
  max-height: 500px;
  position: relative;
  overflow: auto;
}
.df-table {
  border-collapse: collapse;
  width: 100%;
  font-family: var(--font-family);
  table-layout: auto;
  font-size: 13px;
}
.df-table thead th {
  background: var(--color-bg);
  text-align: left;
  color: var(--color-text-muted);
  border-bottom: 1px solid var(--color-border);
  border-right: 1px solid var(--color-border);
  z-index: 10;
  white-space: nowrap;
  padding: 8px 12px;
  font-weight: 600;
  position: sticky;
  top: 0;
}
.df-index-header {
  width: 40px;
  min-width: 40px;
}
.df-header-content {
  align-items: center;
  gap: 6px;
  display: flex;
}
.df-header-icon {
  color: var(--color-primary);
  opacity: .7;
}
.df-row:nth-child(2n) {
  background: #00000003;
}
.df-row:hover {
  background: var(--color-surface-hover);
}
.df-index-cell {
  background: var(--color-bg);
  color: var(--color-text-subtle);
  text-align: center;
  border-right: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  z-index: 5;
  font-size: 11px;
  position: sticky;
  left: 0;
}
.df-cell {
  border-right: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text);
  white-space: nowrap;
  text-overflow: ellipsis;
  max-width: 300px;
  padding: 6px 12px;
  overflow: hidden;
}
.df-footer {
  background: var(--color-bg);
  border-top: 1px solid var(--color-border);
  color: var(--color-text-muted);
  justify-content: space-between;
  align-items: center;
  padding: 6px 12px;
  font-size: 12px;
  display: flex;
}
.df-footer-left, .df-footer-right {
  align-items: center;
  gap: 8px;
  display: flex;
}
.df-status-divider {
  opacity: .3;
}
.df-refresh-btn {
  color: var(--color-text-subtle);
  cursor: pointer;
  background: none;
  border: none;
  border-radius: 3px;
  padding: 2px 6px;
}
.df-refresh-btn:hover {
  color: var(--color-primary);
}
.notebook-rich-output-wrapper {
  flex-direction: column;
  display: flex;
}
.notebook-view-toggle {
  background: #fafafa;
  justify-content: flex-end;
  padding: 8px 12px 0;
  display: flex;
}
[data-theme="dark"] .notebook-view-toggle {
  background: #1a1d27;
}
.nb-schedule-overlay {
  z-index: 1000;
  background: #00000059;
  justify-content: flex-end;
  align-items: flex-start;
  display: flex;
  position: fixed;
  inset: 0;
}
.nb-schedule-dialog {
  background: #fff;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  flex-direction: column;
  width: 560px;
  max-width: 100vw;
  max-height: calc(100vh - 72px);
  margin: 48px 24px 0 0;
  display: flex;
  overflow: hidden;
  box-shadow: 0 8px 24px #0000002e;
}
.nb-schedule-header {
  color: #111827;
  border-bottom: 1px solid #e5e7eb;
  flex-shrink: 0;
  justify-content: space-between;
  align-items: center;
  padding: 14px 16px;
  font-size: 15px;
  font-weight: 600;
  display: flex;
}
.nb-schedule-close {
  cursor: pointer;
  color: #6b7280;
  background: none;
  border: none;
  border-radius: 3px;
  align-items: center;
  padding: 2px;
  display: flex;
}
.nb-schedule-close:hover {
  color: #111827;
  background: #f3f4f6;
}
.nb-schedule-body {
  flex-direction: column;
  flex: 1;
  gap: 14px;
  padding: 16px;
  display: flex;
  overflow-y: auto;
}
.nb-schedule-field {
  flex-direction: column;
  gap: 6px;
  display: flex;
}
.nb-schedule-label {
  color: #374151;
  font-size: 12px;
  font-weight: 500;
}
.nb-schedule-input {
  color: #111827;
  background: #fff;
  border: 1px solid #d1d5db;
  border-radius: 5px;
  outline: none;
  padding: 7px 10px;
  font-size: 13px;
}
.nb-schedule-input:focus {
  border-color: #6366f1;
  box-shadow: 0 0 0 2px #6366f126;
}
.nb-schedule-select {
  color: #111827;
  cursor: pointer;
  background: #fff;
  border: 1px solid #d1d5db;
  border-radius: 5px;
  outline: none;
  padding: 7px 10px;
  font-size: 13px;
}
.nb-schedule-select:focus {
  border-color: #6366f1;
}
.nb-schedule-tabs {
  border: 1px solid #d1d5db;
  border-radius: 5px;
  gap: 0;
  display: flex;
  overflow: hidden;
}
.nb-schedule-tab {
  color: #6b7280;
  cursor: pointer;
  background: #f9fafb;
  border: none;
  flex: 1;
  justify-content: center;
  align-items: center;
  gap: 5px;
  padding: 7px 12px;
  font-size: 12px;
  font-weight: 500;
  transition: background .12s;
  display: inline-flex;
}
.nb-schedule-tab + .nb-schedule-tab {
  border-left: 1px solid #d1d5db;
}
.nb-schedule-tab:hover {
  color: #374151;
  background: #f3f4f6;
}
.nb-schedule-tab.active {
  color: #2563eb;
  background: #eff6ff;
  font-weight: 600;
}
.nb-schedule-row {
  align-items: center;
  gap: 8px;
  display: flex;
}
.nb-schedule-badge {
  color: #1d4ed8;
  white-space: nowrap;
  background: #dbeafe;
  border-radius: 10px;
  padding: 2px 8px;
  font-size: 11px;
}
.nb-schedule-add-param {
  color: #374151;
  cursor: pointer;
  background: #f9fafb;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  align-items: center;
  gap: 3px;
  padding: 3px 8px;
  font-size: 11px;
  display: inline-flex;
}
.nb-schedule-add-param:hover {
  background: #e5e7eb;
}
.nb-schedule-remove-param {
  cursor: pointer;
  color: #9ca3af;
  background: none;
  border: none;
  border-radius: 3px;
  flex-shrink: 0;
  align-items: center;
  padding: 2px;
  display: flex;
}
.nb-schedule-remove-param:hover {
  color: #b91c1c;
  background: #fee2e2;
}
.nb-schedule-footer {
  border-top: 1px solid #e5e7eb;
  flex-shrink: 0;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  display: flex;
}
.nb-schedule-btn {
  color: #374151;
  cursor: pointer;
  background: #fff;
  border: 1px solid #d1d5db;
  border-radius: 5px;
  padding: 7px 16px;
  font-size: 13px;
  font-weight: 500;
}
.nb-schedule-btn:hover {
  background: #f3f4f6;
}
.nb-schedule-btn:disabled {
  opacity: .5;
  cursor: not-allowed;
}
.nb-schedule-btn-primary {
  color: #fff;
  background: #2563eb;
  border-color: #2563eb;
}
.nb-schedule-btn-primary:hover {
  background: #1d4ed8;
  border-color: #1d4ed8;
}
.nb-schedule-btn-danger {
  color: #b91c1c;
  border-color: #fca5a5;
}
.nb-schedule-btn-danger:hover {
  background: #fee2e2;
}
.nb-schedule-icon {
  color: #6366f1;
}
.notebook-agent-diff {
  background: #f8fbff;
  border: 1px solid #bfd7ff;
  border-radius: 6px;
  margin-top: 8px;
  overflow: hidden;
}
.notebook-agent-diff-header {
  color: #1f2937;
  background: #eff6ff;
  border-bottom: 1px solid #dbeafe;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 8px 10px;
  display: flex;
}
.notebook-agent-diff-header strong {
  font-size: 12px;
  font-weight: 700;
  display: block;
}
.notebook-agent-diff-header span {
  color: #4b5563;
  margin-top: 2px;
  font-size: 11px;
  display: block;
}
.notebook-agent-diff-actions {
  flex-shrink: 0;
  align-items: center;
  gap: 6px;
  display: flex;
}
.notebook-agent-diff-actions button {
  cursor: pointer;
  border-radius: 5px;
  align-items: center;
  gap: 4px;
  min-height: 28px;
  padding: 4px 8px;
  font-size: 12px;
  font-weight: 600;
  display: inline-flex;
}
.notebook-agent-accept {
  color: #166534;
  background: #dcfce7;
  border: 1px solid #86efac;
}
.notebook-agent-accept:hover {
  background: #bbf7d0;
}
.notebook-agent-reject {
  color: #991b1b;
  background: #fff;
  border: 1px solid #fecaca;
}
.notebook-agent-reject:hover {
  background: #fee2e2;
}
.notebook-agent-diff-body {
  background: #fff;
  max-height: 360px;
  margin: 0;
  padding: 6px 0;
  font-family: Courier New, monospace;
  font-size: 12px;
  line-height: 1.45;
  overflow: auto;
}
.notebook-agent-diff-line {
  white-space: pre-wrap;
  word-break: break-word;
  grid-template-columns: 24px minmax(0, 1fr);
  min-height: 18px;
  display: grid;
}
.notebook-agent-diff-line code {
  color: inherit;
  font-family: inherit;
}
.notebook-agent-diff-marker {
  text-align: center;
  -webkit-user-select: none;
  user-select: none;
  color: #6b7280;
}
.notebook-agent-diff-line.is-added {
  color: #065f46;
  background: #ecfdf5;
}
.notebook-agent-diff-line.is-removed {
  color: #991b1b;
  background: #fef2f2;
}
.notebook-agent-diff-line.is-context {
  color: #374151;
}
@media (max-width: 720px) {
  .notebook-agent-diff-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .notebook-agent-diff-actions {
    width: 100%;
  }

  .notebook-agent-diff-actions button {
    flex: 1;
    justify-content: center;
  }
}
.notebook-pending-output-badge {
  color: #d97706;
  background: #fef3c7;
  border: 1px solid #fde68a;
  border-radius: 4px;
  margin: 6px 12px;
  padding: 2px 6px;
  font-size: 10px;
  font-weight: 500;
  display: inline-block;
}
.cm-diff-added {
  background-color: #10b98126 !important;
}
.cm-diff-removed {
  color: #9ca3af !important;
  background-color: #ef444426 !important;
}
.cm-diff-removed-container {
  -webkit-user-select: none;
  user-select: none;
  pointer-events: none;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  background-color: #ef44441f;
}
.cm-diff-removed-line {
  color: #dc2626;
  white-space: pre-wrap;
  opacity: .85;
  padding: 0 4px;
  text-decoration: line-through;
}
.notebook-editor-container {
  position: relative;
}
.notebook-inline-diff-actions {
  z-index: 10;
  gap: 8px;
  display: flex;
  position: absolute;
  top: 8px;
  right: 8px;
}
.notebook-inline-reject, .notebook-inline-accept {
  cursor: pointer;
  border-radius: 4px;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  transition: all .2s;
  display: flex;
}
.notebook-inline-reject {
  background: var(--color-bg, #fff);
  border: 1px solid var(--color-border, #e5e7eb);
  color: var(--color-text-muted, #4b5563);
}
.notebook-inline-reject kbd {
  color: #4b5563;
  background: #f3f4f6;
  border: 1px solid #d1d5db;
  border-radius: 3px;
  padding: 0 4px;
  font-size: 10px;
}
.notebook-inline-accept {
  color: #fff;
  background: #2563eb;
  border: 1px solid #1d4ed8;
}
.notebook-inline-accept kbd {
  color: #fff;
  background: #fff3;
  border: 1px solid #fff6;
  border-radius: 3px;
  padding: 0 4px;
  font-size: 10px;
}
.notebook-inline-reject:hover {
  background: #f9fafb;
  border-color: #d1d5db;
}
.notebook-inline-accept:hover {
  background: #1d4ed8;
}
.notebook-toolbar-btn.is-suggested {
  align-items: center;
  gap: 6px;
  transition: background-color .2s;
  display: flex;
  color: #fff !important;
  background-color: #2563eb !important;
  border-radius: 4px !important;
  padding: 4px 10px !important;
}
.notebook-toolbar-btn.is-suggested:hover {
  background-color: #1d4ed8 !important;
}
.notebook-toolbar-btn.is-suggested svg {
  fill: #fff !important;
  color: #fff !important;
}
.notebook-skeleton-wrapper {
  flex-direction: column;
  gap: 14px;
  width: 100%;
  padding-top: 8px;
  display: flex;
}
.notebook-skeleton-card {
  border: 1px solid var(--color-border-subtle, #f0f2f5);
  background: var(--color-surface, #fff);
  border-radius: 6px;
  flex-direction: column;
  display: flex;
  overflow: hidden;
}
.notebook-skeleton-toolbar {
  border-bottom: 1px solid var(--color-border-subtle, #f3f4f6);
  background: var(--color-bg-subtle, #fafbfc);
  align-items: center;
  gap: 8px;
  height: 28px;
  padding: 4px 12px;
  display: flex;
}
.notebook-skeleton-chip {
  background: linear-gradient(90deg, #e2e8f0 15%, #cbd5e1 50%, #e2e8f0 85%) 0 0 / 200% 100%;
  border-radius: 4px;
  animation: 2.2s ease-in-out infinite notebook-skeleton-shimmer;
}
.notebook-skeleton-editor {
  flex-direction: column;
  gap: 10px;
  padding: 16px 14px;
  display: flex;
}
.notebook-skeleton-line {
  background: linear-gradient(90deg, #e5e7eb 15%, #cbd5e1 50%, #e5e7eb 85%) 0 0 / 200% 100%;
  border-radius: 4px;
  height: 12px;
  animation: 2.2s ease-in-out infinite notebook-skeleton-shimmer;
}
@keyframes notebook-skeleton-shimmer {
  0% {
    background-position: 200% 0;
  }

  100% {
    background-position: -200% 0;
  }
}
.dropdown-menu {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  z-index: 400;
  min-width: 140px;
  padding: 4px 0;
  position: absolute;
}
.dropdown-item {
  width: 100%;
  color: var(--color-text);
  cursor: pointer;
  text-align: left;
  background: none;
  border: none;
  align-items: center;
  padding: 6px 14px;
  font-size: .78rem;
  transition: background .1s;
  display: flex;
}
.dropdown-item:hover {
  background: var(--color-surface-hover);
}
.dropdown-item:disabled {
  opacity: .4;
  cursor: not-allowed;
}
.dropdown-item-danger {
  color: var(--color-danger);
}
.dropdown-item-danger:hover {
  background: var(--color-danger-bg);
}
.dropdown-divider {
  background: var(--color-border);
  height: 1px;
  margin: 4px 0;
}
.react-grid-placeholder {
  border-radius: var(--radius-lg);
  opacity: .6;
  background: var(--color-primary-bg) !important;
  border: 2px dashed var(--color-primary) !important;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
.widget-drag-handle:active {
  cursor: grabbing !important;
}
.react-resizable-handle {
  opacity: 0;
  transition: opacity .15s;
}
.react-resizable-handle:hover, .react-grid-item:hover .react-resizable-handle {
  opacity: 1;
}
.react-grid-item.selected-widget {
  box-shadow: 0 0 0 2px var(--color-primary);
}
.counter-value {
  font-variant-numeric: tabular-nums;
}
.assistant-response-content p {
  margin-top: 0;
  margin-bottom: .75rem;
}
.assistant-response-content p:last-child {
  margin-bottom: 0;
}
.assistant-response-content ul {
  margin-top: .35rem;
  margin-bottom: .75rem;
  padding-left: 1.5rem;
  list-style-type: disc;
}
.assistant-response-content ul ul {
  margin-top: .25rem;
  margin-bottom: .25rem;
  padding-left: 1.5rem;
  list-style-type: circle;
}
.assistant-response-content ul ul ul {
  list-style-type: square;
}
.assistant-response-content ol {
  margin-top: .35rem;
  margin-bottom: .75rem;
  padding-left: 1.5rem;
}
.assistant-response-content li {
  margin-bottom: .35rem;
}
.assistant-response-content li:last-child {
  margin-bottom: 0;
}
.assistant-response-content h1, .assistant-response-content h2, .assistant-response-content h3, .assistant-response-content h4 {
  color: var(--color-text, #111827);
  margin-top: 1rem;
  margin-bottom: .5rem;
  font-weight: 600;
}
.assistant-response-content pre {
  background: var(--color-surface-hover, #0000000a);
  border-radius: 6px;
  margin: .5rem 0 .75rem;
  padding: 10px 12px;
  overflow-x: auto;
}
.assistant-response-content code:not(pre code) {
  background: var(--color-surface-hover, #0000000d);
  border-radius: 4px;
  padding: 2px 5px;
  font-size: .85em;
}
.sidebar-hover-scrollbar {
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
  transition: scrollbar-color .2s;
  overflow-y: auto;
}
.sidebar-hover-scrollbar::-webkit-scrollbar {
  width: 4px;
}
.sidebar-hover-scrollbar::-webkit-scrollbar-track {
  background: none;
}
.sidebar-hover-scrollbar::-webkit-scrollbar-thumb {
  background: none;
  border-radius: 4px;
  transition: background .2s;
}
.sidebar-hover-scrollbar:hover {
  scrollbar-color: #cbd5e1 transparent;
}
.sidebar-hover-scrollbar:hover::-webkit-scrollbar-thumb {
  background: #cbd5e1;
}
.sidebar-hover-scrollbar::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}
:root, [data-theme="light"] {
  --color-bg: #f5f5f5;
  --color-surface: #fff;
  --color-surface-hover: #f0f2f5;
  --color-border: #e0e0e0;
  --color-border-strong: #c8c8c8;
  --color-text: #1a1a1a;
  --color-text-muted: #6b6b6b;
  --color-text-subtle: #9e9e9e;
  --color-primary: #1b6ef3;
  --color-primary-hover: #1558c7;
  --color-primary-bg: #ebf2ff;
  --color-danger: #d32f2f;
  --color-danger-bg: #ffebee;
  --color-success: #2e7d32;
  --color-success-bg: #e8f5e9;
  --color-warning: #e65100;
  --color-warning-bg: #fff3e0;
  --color-severity-low: #2e7d32;
  --color-severity-medium: #e65100;
  --color-severity-high: #d32f2f;
  --color-severity-critical: #b71c1c;
  --font-family: "Inter", system-ui, -apple-system, sans-serif;
  --radius: .375rem;
  --radius-lg: .5rem;
  --sidebar-width: 220px;
  --shadow-sm: 0 1px 3px #00000014;
  --shadow-md: 0 2px 8px #0000001a;
  --syntax-keyword: #1b6ef3;
  --syntax-comment: #2e7d32;
  --syntax-string: #b83232;
  --syntax-number: #098658;
  --syntax-bool: #1b6ef3;
  --syntax-operator: #333;
  --syntax-function: #b45309;
  --syntax-definition: #b45309;
  --syntax-class: #2e7d32;
  --syntax-builtin: #b45309;
  --syntax-property: #333;
}
[data-theme="dark"] {
  --color-bg: #0f1117;
  --color-surface: #1a1d27;
  --color-surface-hover: #242836;
  --color-border: #2a2e3e;
  --color-border-strong: #3a3e52;
  --color-text: #e8eaf0;
  --color-text-muted: #8b8fa3;
  --color-text-subtle: #5a5e72;
  --color-primary: #4f7ef8;
  --color-primary-hover: #6b94ff;
  --color-primary-bg: #4f7ef81f;
  --color-danger: #ef4444;
  --color-danger-bg: #ef44441f;
  --color-success: #22c55e;
  --color-success-bg: #22c55e1f;
  --color-warning: #f59e0b;
  --color-warning-bg: #f59e0b1f;
  --color-severity-low: #22c55e;
  --color-severity-medium: #f59e0b;
  --color-severity-high: #ef4444;
  --color-severity-critical: #dc2626;
  --shadow-sm: 0 1px 3px #0000004d;
  --shadow-md: 0 2px 8px #0006;
  --syntax-keyword: #4f7ef8;
  --syntax-comment: #66bb6a;
  --syntax-string: #ff8f8f;
  --syntax-number: #81c784;
  --syntax-bool: #4f7ef8;
  --syntax-operator: #e8eaf0;
  --syntax-function: #ffb74d;
  --syntax-definition: #ffb74d;
  --syntax-class: #66bb6a;
  --syntax-builtin: #ffb74d;
  --syntax-property: #e8eaf0;
}
:root, [data-theme="light"] {
  --sb-bg: #fafafa;
  --sb-border: #e5e7eb;
  --sb-text: #374151;
  --sb-muted: #64748b;
  --sb-hover: #f1f3f5;
  --sb-active-bg: #e4e8ee;
  --sb-active-text: #0f172a;
  --sb-divider: #e5e7eb;
  --sb-logo-bg: linear-gradient(135deg, #1b6ef3, #5b9bff);
}
[data-theme="dark"] {
  --sb-bg: #0d1117;
  --sb-border: #21262d;
  --sb-text: #c9d1d9;
  --sb-muted: #8b949e;
  --sb-hover: #161b22;
  --sb-active-bg: #21262d;
  --sb-active-text: #fff;
  --sb-divider: #21262d;
  --sb-logo-bg: linear-gradient(135deg, #1b6ef3, #5b9bff);
}
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
body {
  font-family: var(--font-family);
  background: var(--color-bg);
  color: var(--color-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
  font-size: 14px;
  line-height: 1.5;
}
#root {
  min-height: 100vh;
}
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: none;
}
::-webkit-scrollbar-thumb {
  background: var(--color-border);
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--color-text-subtle);
}
.glass {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
}
.btn-primary {
  background: var(--color-primary);
  color: #fff;
  border-radius: var(--radius);
  font-size: .8125rem;
  font-weight: 500;
  font-family: var(--font-family);
  cursor: pointer;
  white-space: nowrap;
  border: none;
  align-items: center;
  gap: .375rem;
  padding: .4rem 1rem;
  transition: background .15s, box-shadow .15s;
  display: inline-flex;
}
.btn-primary:hover:not(:disabled) {
  background: var(--color-primary-hover);
  box-shadow: 0 2px 6px #1b6ef34d;
}
.btn-primary:disabled {
  opacity: .5;
  cursor: not-allowed;
}
.btn-outline {
  background: var(--color-surface);
  color: var(--color-text);
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
  font-size: .8125rem;
  font-weight: 500;
  font-family: var(--font-family);
  cursor: pointer;
  white-space: nowrap;
  align-items: center;
  gap: .375rem;
  padding: .4rem 1rem;
  transition: border-color .15s, background .15s;
  display: inline-flex;
}
.btn-outline:disabled {
  opacity: .5;
  cursor: not-allowed;
}
.btn-danger {
  background: var(--color-danger);
  color: #fff;
  border-radius: var(--radius);
  font-size: .8125rem;
  font-weight: 500;
  font-family: var(--font-family);
  cursor: pointer;
  border: none;
  padding: .4rem 1rem;
  transition: opacity .15s;
}
.btn-danger:hover:not(:disabled) {
  opacity: .88;
}
.btn-danger:disabled {
  opacity: .5;
  cursor: not-allowed;
}
.input-field {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  width: 100%;
  color: var(--color-text);
  font-size: .8125rem;
  font-family: var(--font-family);
  outline: none;
  padding: .4375rem .75rem;
  transition: border-color .15s, box-shadow .15s;
}
.input-field:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px #1b6ef326;
}
.input-field::placeholder {
  color: var(--color-text-subtle);
}
.input-field:disabled {
  background: var(--color-bg);
  opacity: .6;
  cursor: not-allowed;
}
select.input-field {
  cursor: pointer;
}
select.input-field option {
  background: var(--color-surface);
  color: var(--color-text);
}
textarea.input-field {
  resize: vertical;
  min-height: 80px;
}
.form-input {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  width: 100%;
  color: var(--color-text);
  font-size: .8125rem;
  font-family: var(--font-family);
  outline: none;
  padding: .4375rem .75rem;
  transition: border-color .15s, box-shadow .15s;
}
.form-input:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px #1b6ef326;
}
.form-input::placeholder {
  color: var(--color-text-subtle);
}
.form-input:disabled {
  background: var(--color-bg);
  opacity: .6;
  cursor: not-allowed;
}
select.form-input {
  cursor: pointer;
}
select.form-input option {
  background: var(--color-surface);
  color: var(--color-text);
}
textarea.form-input {
  resize: vertical;
  min-height: 80px;
}
.label {
  color: var(--color-text-muted);
  letter-spacing: .01em;
  margin-bottom: .3rem;
  font-size: .75rem;
  font-weight: 600;
  display: block;
}
.badge {
  text-transform: uppercase;
  letter-spacing: .04em;
  border-radius: 3px;
  align-items: center;
  padding: .125rem .5rem;
  font-size: .7rem;
  font-weight: 600;
  display: inline-flex;
}
.badge-low {
  background: var(--color-success-bg);
  color: var(--color-severity-low);
}
.badge-medium {
  background: var(--color-warning-bg);
  color: var(--color-severity-medium);
}
.badge-high {
  background: var(--color-danger-bg);
  color: var(--color-severity-high);
}
.badge-critical {
  background: var(--color-danger-bg);
  color: var(--color-severity-critical);
}
.badge-open {
  background: var(--color-primary-bg);
  color: var(--color-primary);
}
.badge-closed {
  background: var(--color-bg);
  color: var(--color-text-muted);
  border: 1px solid var(--color-border);
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}
.animate-fade-in {
  animation: .2s ease-out fadeIn;
}
@keyframes slideIn {
  from {
    transform: translateX(100%);
  }

  to {
    transform: translateX(0);
  }
}
.animate-slide-in {
  animation: .25s ease-out slideIn;
}
.spin {
  animation: .8s linear infinite spin;
}
@keyframes thinkingDotWave {
  0%, 60%, 100% {
    opacity: .35;
    transform: translateY(0);
  }

  30% {
    opacity: 1;
    transform: translateY(-3.5px);
  }
}
.thinking-wave-dots {
  vertical-align: middle;
  align-items: center;
  gap: 3px;
  margin-left: 4px;
  display: inline-flex;
}
.thinking-wave-dots .thinking-dot {
  background-color: currentColor;
  border-radius: 50%;
  width: 4px;
  height: 4px;
  animation: 1.4s ease-in-out infinite both thinkingDotWave;
  display: inline-block;
}
.thinking-wave-dots .thinking-dot:first-child {
  animation-delay: -.32s;
}
.thinking-wave-dots .thinking-dot:nth-child(2) {
  animation-delay: -.16s;
}
.thinking-wave-dots .thinking-dot:nth-child(3) {
  animation-delay: 0s;
}
.toggle-group {
  flex-wrap: wrap;
  gap: .375rem;
  display: flex;
}
.toggle-btn {
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text-muted);
  cursor: pointer;
  font-size: .8rem;
  font-weight: 500;
  font-family: var(--font-family);
  white-space: nowrap;
  padding: .3rem .7rem;
  transition: all .15s;
}
.toggle-btn:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
  background: var(--color-primary-bg);
}
.toggle-btn.active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}
.toggle-btn.active:hover {
  background: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
}
.app-shell {
  min-height: 100vh;
  display: flex;
}
.app-sidebar {
  width: var(--sidebar-width);
  z-index: 1050;
  background: var(--sb-bg);
  border-right: 1px solid var(--sb-border);
  height: 100vh;
  box-shadow: none;
  flex-direction: column;
  flex-shrink: 0;
  gap: 0;
  padding: 0;
  display: flex;
  position: sticky;
  top: 0;
  overflow: visible;
}
.app-sidebar-logo {
  align-items: center;
  gap: .625rem;
  margin-bottom: .25rem;
  padding: .125rem .5rem .5rem;
  display: flex;
}
.app-sidebar-logo-icon {
  background: var(--sb-logo-bg);
  color: #fff;
  border-radius: 4px;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  width: 22px;
  height: 22px;
  display: flex;
}
.app-sidebar-logo-text {
  white-space: nowrap;
  color: var(--sb-text);
  letter-spacing: -.01em;
  font-size: .88rem;
  font-weight: 700;
}
.app-sidebar-section {
  flex-direction: column;
  gap: 1px;
  display: flex;
}
.app-sidebar-link {
  min-height: 34px;
  color: var(--sb-text);
  letter-spacing: -.01em;
  border-radius: 6px;
  align-items: center;
  gap: .65rem;
  padding: .35rem .65rem;
  font-size: .85rem;
  font-weight: 400;
  text-decoration: none;
  transition: color .12s, background .12s;
  display: flex;
  position: relative;
}
.app-sidebar-link:hover {
  color: var(--color-text, #111827);
  background: var(--sb-hover);
}
.app-sidebar-link.is-active {
  color: var(--sb-active-text);
  background: var(--sb-active-bg);
  font-weight: 550;
}
.app-sidebar-link-icon {
  color: var(--sb-muted);
  flex-shrink: 0;
  transition: color .12s;
}
.app-sidebar-link-container {
  align-items: center;
  width: 100%;
  display: flex;
  position: relative;
}
.app-sidebar-link-container:hover .custom-link-actions {
  opacity: 1 !important;
}
.custom-link-actions {
  opacity: 0;
  pointer-events: auto;
  gap: 4px;
  transition: opacity .12s;
  display: flex;
  position: absolute;
  right: 8px;
}
.app-sidebar-link:hover .app-sidebar-link-icon, .app-sidebar-link.is-active .app-sidebar-link-icon {
  color: currentColor;
}
.app-sidebar-link-arrow {
  opacity: 0;
  color: var(--sb-muted);
  margin-left: auto;
  transition: opacity .12s;
}
.app-sidebar-link:hover .app-sidebar-link-arrow, .app-sidebar-link.is-active .app-sidebar-link-arrow {
  opacity: .5;
}
.app-sidebar-divider-label {
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--cx-color-sidebar-section-text);
  opacity: .85;
  padding: .75rem .6rem .25rem;
  font-size: .72rem;
  font-weight: 500;
}
.app-sidebar-footer {
  border-top: 1px solid var(--sb-divider);
  margin-top: .5rem;
  padding-top: .625rem;
}
.app-theme-toggle {
  width: 100%;
  min-height: var(--cx-control-height-compact);
  color: var(--sb-muted);
  font-size: .84rem;
  font-family: var(--font-family);
  cursor: pointer;
  background: none;
  border: none;
  border-radius: 8px;
  align-items: center;
  gap: .55rem;
  padding: .25rem .3rem;
  transition: color .12s, background .12s;
  display: flex;
}
.app-theme-toggle:hover {
  background: var(--sb-hover);
  color: var(--sb-text);
}
.app-main {
  background: var(--color-surface);
  flex-direction: column;
  flex: 1;
  min-width: 0;
  height: 100vh;
  min-height: 100vh;
  display: flex;
  overflow: hidden;
}
.app-content {
  flex-direction: column;
  flex: 1;
  max-width: 100%;
  min-height: 0;
  padding: 0;
  display: flex;
  overflow: auto;
}
.page-content {
  flex-direction: column;
  flex: 1;
  width: 100%;
  min-height: 0;
  padding: 1.75rem 2rem;
  display: flex;
}
.page-content:has( > [style*="height: 100%"]), .page-content:has( > [style*="calc(100vh"]), .page-content:has(.monitoring-root), .page-content:has(.landing-page-root), .page-content:has(.ontology-page-root) {
  height: 100%;
  padding: 0;
  overflow: hidden;
}
.app-workspace {
  flex: 1;
  min-width: 0;
  height: calc(100vh - 48px);
  min-height: calc(100vh - 48px);
  display: flex;
  overflow: hidden;
}
.app-topbar {
  z-index: 10;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface);
  flex-shrink: 0;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  height: 48px;
  padding: 0 1rem 0 1.5rem;
  display: flex;
  position: relative;
}
.app-topbar-title {
  color: var(--color-text);
  font-size: .9375rem;
  font-weight: 600;
}
.app-topbar-actions {
  align-items: center;
  gap: .375rem;
  display: inline-flex;
}
.app-switcher-btn, .app-topbar-icon-btn, .app-topbar-avatar {
  width: 32px;
  height: 32px;
  color: var(--color-text-muted);
  cursor: pointer;
  background: none;
  border: none;
  border-radius: 8px;
  justify-content: center;
  align-items: center;
  padding: 0;
  transition: background .12s, color .12s;
  display: inline-flex;
}
.app-switcher-btn:hover, .app-topbar-icon-btn:hover, .app-topbar-avatar:hover {
  background: var(--color-surface-hover);
  color: var(--color-text);
}
.app-switcher-dots {
  opacity: .86;
  background-image: radial-gradient(currentColor 1.45px, #0000 1.55px);
  background-position: 0 0;
  background-size: 5.33px 5.33px;
  width: 16px;
  height: 16px;
  display: block;
}
.app-switcher-menu {
  background: var(--color-surface);
  z-index: 99999;
  border-radius: 14px;
  min-width: 220px;
  padding: 8px;
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  box-shadow: 0 18px 48px #0f172a2e;
}
.app-switcher-menu-header {
  padding: 10px 12px 8px;
}
.app-switcher-menu-title {
  color: var(--color-text);
  font-size: .85rem;
  font-weight: 600;
}
.app-switcher-option {
  width: 100%;
  color: var(--color-text);
  cursor: pointer;
  text-align: left;
  text-transform: capitalize;
  background: none;
  border: none;
  border-radius: 10px;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  display: flex;
}
.app-switcher-option:hover {
  background: var(--color-surface-hover);
}
.app-switcher-option.is-active {
  background: var(--color-primary-bg);
  color: var(--color-primary);
}
.app-switcher-option-badge {
  color: inherit;
  font-size: .72rem;
  font-weight: 600;
}
.app-topbar-icon-btn.is-active {
  color: var(--color-primary);
  background: var(--color-primary-bg);
}
.app-nova-btn, .app-nova-btn:hover, .app-nova-btn.is-active {
  background: none;
}
.app-nova-sidebar {
  border-left: 1px solid var(--color-border);
  background: var(--color-surface);
  flex-shrink: 0;
  width: 420px;
  height: 100%;
  min-height: 100%;
  max-height: 100%;
  overflow: hidden;
}
@media (max-width: 768px) {
  .page-content {
    padding: 1rem;
  }

  .app-topbar {
    padding: 0 .75rem 0 1rem;
  }

  .app-workspace.has-nova-sidebar {
    flex-direction: column;
  }

  .app-nova-sidebar {
    border-left: none;
    border-top: 1px solid var(--color-border);
    width: 100%;
    height: min(50vh, 520px);
    min-height: 420px;
    max-height: min(50vh, 520px);
  }
}
.dynamic-form-layout {
  flex-direction: column;
  gap: 1.25rem;
  display: flex;
}
.dynamic-form-grid {
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-auto-rows: minmax(.9rem, auto);
  align-items: start;
  gap: 1rem;
  display: grid;
}
.dynamic-form-grid-item {
  min-width: 0;
}
.dynamic-form-field {
  flex-direction: column;
  justify-content: flex-start;
  gap: .4rem;
  height: 100%;
  display: flex;
}
.dynamic-form-textarea {
  min-height: 7rem;
}
.dynamic-form-actions {
  gap: .75rem;
  padding-top: .5rem;
  display: flex;
}
.multi-select {
  position: relative;
}
.multi-select-trigger {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  width: 100%;
  min-height: 2.2rem;
  color: var(--color-text);
  font-size: .8125rem;
  font-family: var(--font-family);
  cursor: pointer;
  text-align: left;
  justify-content: space-between;
  align-items: center;
  gap: .75rem;
  padding: .4375rem .75rem;
  transition: border-color .15s, box-shadow .15s;
  display: flex;
}
.multi-select-trigger:hover:not(:disabled) {
  border-color: var(--color-primary);
}
.multi-select.is-open .multi-select-trigger, .multi-select-trigger:focus-visible {
  border-color: var(--color-primary);
  outline: none;
  box-shadow: 0 0 0 2px #1b6ef326;
}
.multi-select-trigger:disabled {
  background: var(--color-bg);
  color: var(--color-text-subtle);
  cursor: not-allowed;
}
.multi-select-trigger-text {
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  min-width: 0;
  overflow: hidden;
}
.multi-select-trigger-text.is-placeholder {
  color: var(--color-text-subtle);
}
.multi-select-trigger-icon {
  color: var(--color-text-muted);
  flex-shrink: 0;
  transition: transform .15s;
}
.multi-select.is-open .multi-select-trigger-icon {
  transform: rotate(180deg);
}
.multi-select-menu {
  z-index: 40;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  max-height: 16rem;
  box-shadow: var(--shadow-md);
  padding: .35rem;
  position: absolute;
  top: calc(100% + .35rem);
  left: 0;
  right: 0;
  overflow: auto;
}
.multi-select-option {
  border-radius: calc(var(--radius) - 1px);
  width: 100%;
  color: var(--color-text);
  cursor: pointer;
  text-align: left;
  background: none;
  border: none;
  align-items: center;
  gap: .65rem;
  padding: .5rem .55rem;
  display: flex;
}
.multi-select-option:hover {
  background: var(--color-surface-hover);
}
.multi-select-option.is-selected {
  background: var(--color-primary-bg);
}
.multi-select-check {
  border: 1px solid var(--color-border-strong);
  color: #fff;
  background: var(--color-surface);
  border-radius: .2rem;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  width: 1rem;
  height: 1rem;
  display: inline-flex;
}
.multi-select-check.is-selected {
  border-color: var(--color-primary);
  background: var(--color-primary);
}
.multi-select-option-label {
  flex: 1;
  min-width: 0;
}
.multi-select-empty {
  color: var(--color-text-muted);
  padding: .55rem;
  font-size: .8rem;
}
@media (max-width: 840px) {
  .dynamic-form-grid {
    grid-template-columns: 1fr;
  }

  .dynamic-form-grid-item {
    grid-area: auto !important;
    min-height: 0 !important;
  }
}
.form-designer-shell {
  flex-direction: column;
  gap: 1.25rem;
  height: calc(100vh - 4.5rem);
  display: flex;
  overflow: hidden;
}
.form-designer-hero {
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.5rem;
  display: flex;
}
[data-theme="dark"] .form-designer-hero {
  background: radial-gradient(circle at 100% 0, #4f7ef81f, #0000 28%), linear-gradient(#1a1d27f5, #1a1d27d1);
}
.form-designer-eyebrow {
  background: var(--color-primary-bg);
  color: var(--color-primary);
  letter-spacing: .05em;
  text-transform: uppercase;
  border-radius: 3px;
  align-items: center;
  margin-bottom: .75rem;
  padding: .2rem .55rem;
  font-size: .7rem;
  font-weight: 700;
  display: inline-flex;
}
.form-designer-title {
  color: var(--color-text);
  margin-bottom: .4rem;
  font-size: 1.75rem;
  font-weight: 600;
}
.form-designer-subtitle, .form-designer-help {
  color: var(--color-text-muted);
  font-size: .875rem;
  line-height: 1.55;
}
.form-designer-actions {
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: flex-start;
  gap: .75rem;
  display: flex;
}
.form-designer-layout {
  flex: 1;
  grid-template-columns: minmax(0, 1fr) 340px;
  align-items: stretch;
  gap: 1.5rem;
  min-height: 0;
  display: grid;
}
.form-designer-main {
  flex-direction: column;
  gap: 1rem;
  min-width: 0;
  padding-right: .5rem;
  display: flex;
  overflow-y: auto;
}
.form-designer-meta {
  border-radius: var(--radius-lg);
  flex-shrink: 0;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  padding: 1rem;
  display: grid;
}
.form-designer-meta-card {
  border-radius: var(--radius);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  padding: 1rem;
}
.form-designer-canvas {
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  flex-shrink: 0;
  min-height: 640px;
  padding: 1rem;
}
.form-designer-canvas-header {
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  display: flex;
}
.form-designer-section-title {
  color: var(--color-text);
  margin-bottom: .2rem;
  font-size: .9rem;
  font-weight: 600;
}
.form-designer-toolbar {
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  display: flex;
}
.form-designer-toggle {
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text-muted);
  cursor: pointer;
  border-radius: 3px;
  align-items: center;
  padding: .35rem .75rem;
  font-size: .8rem;
  transition: all .15s;
  display: inline-flex;
}
.form-designer-toggle.is-active {
  color: var(--color-primary);
  background: var(--color-primary-bg);
  border-color: var(--color-primary);
}
.form-designer-count {
  color: var(--color-text-muted);
  margin-left: .4rem;
  font-size: .8rem;
}
.form-designer-grid-shell {
  min-height: 500px;
}
.form-designer-schema {
  flex: 1;
  min-height: 520px;
  font-family: Consolas, Courier New, monospace;
}
.form-designer-empty {
  border-radius: var(--radius);
  border: 1px dashed var(--color-border);
  background: var(--color-bg);
  min-height: 300px;
  color: var(--color-text-muted);
  text-align: center;
  flex-direction: column;
  flex: 1;
  justify-content: center;
  align-items: center;
  gap: .75rem;
  padding: 2rem;
  display: flex;
}
.form-designer-empty.is-active {
  border-color: var(--color-primary);
  background: var(--color-primary-bg);
}
.form-designer-empty-title {
  color: var(--color-text);
  font-size: .9rem;
  font-weight: 600;
}
.form-designer-field-list {
  flex-direction: column;
  display: flex;
}
.form-designer-dropzone {
  color: #0000;
  border: 1px dashed #0000;
  border-radius: 3px;
  justify-content: center;
  align-items: center;
  height: 1.25rem;
  font-size: .72rem;
  transition: all .15s;
  display: flex;
}
.form-designer-dropzone.is-active {
  border-color: var(--color-primary);
  color: var(--color-primary);
  background: var(--color-primary-bg);
  margin: .2rem 0;
}
.form-designer-field-card {
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  cursor: pointer;
  flex-direction: column;
  gap: .75rem;
  padding: .875rem;
  transition: border-color .15s, box-shadow .15s;
  display: flex;
}
.form-designer-field-card:hover {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-sm);
}
.form-designer-field-card.is-selected {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px var(--color-primary-bg);
}
.form-designer-field-header, .form-designer-property-row, .form-designer-library-card-header {
  justify-content: space-between;
  align-items: flex-start;
  gap: .75rem;
  display: flex;
}
.form-designer-field-meta {
  flex-wrap: wrap;
  align-items: center;
  gap: .35rem;
  display: flex;
}
.form-designer-grab-icon {
  color: var(--color-text-muted);
}
.form-designer-chip {
  background: var(--color-bg);
  color: var(--color-text-muted);
  border: 1px solid var(--color-border);
  border-radius: 3px;
  align-items: center;
  padding: .15rem .5rem;
  font-size: .72rem;
  font-weight: 600;
  display: inline-flex;
}
.form-designer-chip.is-primary {
  background: var(--color-primary-bg);
  color: var(--color-primary);
  border-color: #0000;
}
.form-designer-chip.is-muted {
  background: var(--color-warning-bg);
  color: var(--color-warning);
  border-color: #0000;
}
.form-designer-field-title {
  color: var(--color-text);
  font-size: .9rem;
  font-weight: 600;
}
.form-designer-field-id, .form-designer-library-category {
  color: var(--color-text-muted);
  font-family: Consolas, Courier New, monospace;
  font-size: .76rem;
}
.form-designer-preview-control {
  flex-direction: column;
  gap: .4rem;
  display: flex;
}
.form-designer-preview-control label, .form-designer-property-label {
  color: var(--color-text-muted);
  font-size: .78rem;
  font-weight: 500;
}
.form-designer-preview-input {
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
  background: var(--color-bg);
  color: var(--color-text-muted);
  padding: .6rem .75rem;
  font-size: .85rem;
}
.form-designer-preview-input.textarea {
  min-height: 4rem;
}
.form-designer-field-summary, .form-designer-library-description {
  color: var(--color-text-muted);
  font-size: .82rem;
  line-height: 1.5;
}
.form-designer-sidebar {
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  flex-direction: column;
  gap: 1rem;
  height: 100%;
  min-height: 0;
  max-height: 100%;
  padding: 1rem;
  display: flex;
  overflow: hidden;
}
.form-designer-sidebar-section, .form-designer-inspector, .form-designer-library {
  flex-direction: column;
  gap: .75rem;
  display: flex;
}
.form-designer-inspector, .form-designer-library {
  flex: 1;
  min-height: 0;
  padding-right: .125rem;
  overflow: hidden auto;
}
.form-designer-library-card, .form-designer-inspector-empty, .form-designer-advanced-panel {
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
  background: var(--color-bg);
  padding: .875rem;
}
.form-designer-library-card {
  cursor: grab;
  transition: border-color .15s, box-shadow .15s;
}
.form-designer-library-card:hover {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-sm);
}
.form-designer-library-card.is-dragging {
  opacity: .55;
  border-color: var(--color-primary);
}
.form-designer-library-icon {
  border-radius: var(--radius);
  width: 1.75rem;
  height: 1.75rem;
  color: var(--color-primary);
  background: var(--color-primary-bg);
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  display: inline-flex;
}
.form-designer-library-title {
  color: var(--color-text);
  margin-bottom: .15rem;
  font-size: .875rem;
  font-weight: 600;
}
.form-designer-secondary-button, .form-designer-advanced-toggle, .form-designer-icon-button {
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text);
  border-radius: var(--radius);
  cursor: pointer;
  font-family: var(--font-family);
  transition: all .15s;
}
.form-designer-secondary-button {
  align-self: flex-start;
  padding: .4rem .7rem;
  font-size: .8rem;
}
.form-designer-secondary-button:hover, .form-designer-advanced-toggle:hover, .form-designer-icon-button:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
  background: var(--color-primary-bg);
}
.form-designer-icon-button {
  justify-content: center;
  align-items: center;
  width: 2rem;
  height: 2rem;
  display: inline-flex;
}
.form-designer-sidebar-divider {
  background: var(--color-border);
  height: 1px;
}
.form-designer-tab-bar {
  z-index: 2;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  flex-shrink: 0;
  margin: -1rem -1rem 0;
  display: flex;
  position: sticky;
  top: 0;
  overflow: hidden;
}
.form-designer-tab {
  color: var(--color-text-muted);
  cursor: pointer;
  font-size: .8rem;
  font-weight: 500;
  font-family: var(--font-family);
  background: none;
  border: none;
  border-bottom: 2px solid #0000;
  flex: 1;
  justify-content: center;
  align-items: center;
  padding: .6rem .5rem;
  transition: color .15s, border-color .15s, background .15s;
  display: flex;
}
.form-designer-tab:hover {
  color: var(--color-text);
  background: var(--color-surface-hover);
}
.form-designer-tab.is-active {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
  background: var(--color-primary-bg);
}
.form-designer-tab-badge {
  background: var(--color-primary);
  border-radius: 50%;
  flex-shrink: 0;
  width: 6px;
  height: 6px;
  margin-left: 5px;
}
.form-designer-switch {
  color: var(--color-text);
  align-items: center;
  gap: .5rem;
  font-size: .875rem;
  display: inline-flex;
}
.form-designer-switch input {
  accent-color: var(--color-primary);
}
.form-designer-advanced-toggle {
  width: 100%;
  padding: .6rem .75rem;
  font-size: .85rem;
  font-weight: 500;
}
.form-designer-sidebar-header {
  justify-content: space-between;
  align-items: center;
  gap: .75rem;
  display: flex;
}
.form-designer-sidebar-icon {
  color: var(--color-text-muted);
  flex-shrink: 0;
}
.form-designer-library-group {
  flex-direction: column;
  gap: .625rem;
  display: flex;
}
.form-designer-library-group-title {
  color: var(--color-text-muted);
  letter-spacing: .07em;
  text-transform: uppercase;
  font-size: .72rem;
  font-weight: 700;
}
.form-designer-inline-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .75rem;
  display: grid;
}
.form-designer-grid-shell {
  border-radius: var(--radius);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  min-height: 520px;
  position: relative;
  overflow: hidden;
}
.form-designer-grid-shell.is-dropping {
  border-color: var(--color-primary);
  box-shadow: inset 0 0 0 1px var(--color-primary-bg);
}
.form-designer-grid {
  min-height: 520px;
  padding: 1.25rem;
}
.form-designer-grid .react-grid-placeholder {
  background: var(--color-primary-bg);
  border: 1px dashed var(--color-primary);
  border-radius: var(--radius);
  opacity: 1;
}
.form-designer-grid .react-grid-item > .react-resizable-handle:after {
  border-right-color: var(--color-primary);
  border-bottom-color: var(--color-primary);
}
.form-designer-grid .react-grid-item {
  z-index: 1;
}
.form-designer-widget {
  border-radius: var(--radius);
  cursor: pointer;
  background: none;
  border: 1.5px solid #0000;
  flex-direction: column;
  height: 100%;
  padding: .625rem .75rem .75rem;
  transition: border-color .15s;
  display: flex;
  position: relative;
}
.form-designer-widget:hover {
  border-color: var(--color-primary);
  background: var(--color-primary-bg);
}
.form-designer-widget.is-selected {
  border-color: var(--color-primary);
  background: var(--color-primary-bg);
  box-shadow: 0 0 0 2px #1b6ef31f;
}
.form-designer-widget-overlay {
  z-index: 10;
  align-items: center;
  gap: 4px;
  display: none;
  position: absolute;
  top: 4px;
  right: 4px;
}
.form-designer-widget:hover .form-designer-widget-overlay, .form-designer-widget.is-selected .form-designer-widget-overlay {
  display: flex;
}
.form-designer-widget-handle, .form-designer-widget-del {
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  width: 1.5rem;
  height: 1.5rem;
  color: var(--color-text-muted);
  justify-content: center;
  align-items: center;
  display: inline-flex;
}
.form-designer-widget-handle {
  cursor: grab;
}
.form-designer-widget-handle:active {
  cursor: grabbing;
}
.form-designer-widget-del:hover {
  border-color: var(--color-danger);
  color: var(--color-danger);
  background: var(--color-danger-bg);
}
.form-designer-wysiwyg-field {
  flex-direction: column;
  gap: .35rem;
  height: 100%;
  display: flex;
}
.form-designer-wysiwyg-label {
  color: var(--color-text-muted);
  font-size: .8rem;
  font-weight: 500;
  display: block;
}
@media (max-width: 1180px) {
  .form-designer-layout {
    grid-template-columns: 1fr;
  }

  .form-designer-sidebar {
    max-height: none;
    position: static;
  }
}
@media (max-width: 840px) {
  .form-designer-hero, .form-designer-canvas-header {
    flex-direction: column;
    align-items: stretch;
  }

  .form-designer-meta {
    grid-template-columns: 1fr;
  }

  .form-designer-actions {
    justify-content: flex-start;
  }

  .form-designer-inline-grid {
    grid-template-columns: 1fr;
  }
}
.page-content:has(.catalog-shell), .page-content:has(.sqled-shell) {
  flex-direction: column;
  flex: 1;
  max-width: 100%;
  padding: 0;
  display: flex;
}
.catalog-shell {
  border: none;
  border-top: 1px solid var(--color-border);
  background: var(--color-surface);
  border-radius: 0;
  height: 100vh;
  display: flex;
  overflow: hidden;
}
.catalog-sidebar {
  border-right: 1px solid var(--color-border);
  background: var(--color-bg);
  flex-direction: column;
  flex-shrink: 0;
  width: 280px;
  display: flex;
  overflow: hidden;
}
.catalog-sidebar-header {
  border-bottom: 1px solid var(--color-border);
  background: var(--color-bg);
  flex-shrink: 0;
  justify-content: space-between;
  align-items: center;
  padding: .75rem 1rem;
  display: flex;
}
.catalog-sidebar-title {
  color: var(--color-text);
  align-items: center;
  gap: .5rem;
  font-size: .8125rem;
  font-weight: 600;
  display: flex;
}
.catalog-icon-btn {
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  width: 24px;
  height: 24px;
  color: var(--color-text-muted);
  cursor: pointer;
  justify-content: center;
  align-items: center;
  transition: all .15s;
  display: inline-flex;
}
.catalog-icon-btn:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
  background: var(--color-primary-bg);
}
.catalog-add-btn {
  border-style: dashed;
}
.catalog-tree {
  flex: 1;
  padding: .375rem 0;
  overflow-y: auto;
}
.catalog-tree-loading, .catalog-tree-empty {
  color: var(--color-text-muted);
  text-align: center;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: .5rem;
  padding: 2rem 1rem;
  font-size: .8125rem;
  display: flex;
}
.catalog-tree-group {
  margin-bottom: 1px;
}
.catalog-tree-indent {
  padding-left: 14px;
}
.catalog-tree-row {
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  border-radius: 3px;
  align-items: center;
  gap: .3rem;
  margin: 1px 4px;
  padding: .275rem .75rem .275rem .5rem;
  transition: background .1s;
  display: flex;
}
.catalog-tree-row:hover {
  background: var(--color-surface-hover);
}
.catalog-tree-row.is-selected {
  background: var(--color-primary-bg);
}
.catalog-tree-chevron {
  width: 14px;
  color: var(--color-text-muted);
  flex-shrink: 0;
  align-items: center;
  display: flex;
}
.catalog-tree-icon {
  color: var(--color-text-muted);
  flex-shrink: 0;
}
.catalog-tree-label {
  color: var(--color-text);
  white-space: nowrap;
  text-overflow: ellipsis;
  flex: 1;
  font-size: .8125rem;
  overflow: hidden;
}
.catalog-tree-conn .catalog-tree-label {
  font-weight: 500;
}
.catalog-tree-count {
  color: var(--color-text-muted);
  background: var(--color-border);
  border-radius: 9999px;
  flex-shrink: 0;
  padding: 0 .3rem;
  font-size: .68rem;
}
.catalog-tree-delete, .catalog-tree-action {
  width: 18px;
  height: 18px;
  color: var(--color-text-muted);
  cursor: pointer;
  background: none;
  border: none;
  border-radius: 3px;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  display: none;
}
.catalog-tree-row:hover .catalog-tree-delete, .catalog-tree-row:hover .catalog-tree-action {
  display: flex;
}
.catalog-tree-delete:hover {
  color: var(--color-danger);
  background: var(--color-danger-bg);
}
.catalog-tree-action:hover {
  color: var(--color-primary);
  background: var(--color-primary-bg);
}
.catalog-main {
  background: var(--color-surface);
  flex: 1;
  min-width: 0;
  min-height: 0;
  display: flex;
  overflow: hidden;
}
.catalog-empty-state {
  height: 100%;
  color: var(--color-text-muted);
  text-align: center;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  padding: 2rem;
  display: flex;
}
.catalog-empty-icon {
  border-radius: var(--radius-lg);
  background: var(--color-primary-bg);
  border: 1px solid var(--color-border);
  width: 64px;
  height: 64px;
  color: var(--color-primary);
  justify-content: center;
  align-items: center;
  display: flex;
}
.catalog-empty-state h2 {
  color: var(--color-text);
  font-size: 1.0625rem;
  font-weight: 600;
}
.catalog-empty-state p {
  max-width: 300px;
  font-size: .875rem;
}
.catalog-empty-state .btn-primary {
  align-items: center;
  gap: .4rem;
  margin-top: .5rem;
  display: flex;
}
.catalog-preview-loading, .catalog-preview-error {
  color: var(--color-text-muted);
  align-items: center;
  gap: .75rem;
  padding: 2rem;
  font-size: .875rem;
  display: flex;
}
.catalog-preview-error {
  color: var(--color-danger);
}
.catalog-preview {
  padding: 1.25rem;
}
.catalog-preview-header {
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: .5rem;
  margin-bottom: 1rem;
  display: flex;
}
.catalog-preview-title {
  color: var(--color-text);
  align-items: center;
  gap: .5rem;
  font-size: .9375rem;
  font-weight: 600;
  display: flex;
}
.catalog-preview-meta {
  align-items: center;
  gap: .5rem;
  display: flex;
}
.catalog-meta-chip {
  background: var(--color-primary-bg);
  color: var(--color-primary);
  border: 1px solid #0000;
  border-radius: 3px;
  padding: .15rem .5rem;
  font-size: .72rem;
  font-weight: 500;
}
.catalog-section-label {
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: .5rem;
  font-size: .72rem;
  font-weight: 700;
}
.catalog-columns-table {
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  flex: 1;
  min-height: 0;
  margin-bottom: .5rem;
  font-size: .8125rem;
  overflow: auto;
}
.catalog-col-header {
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  grid-template-columns: 2fr 1.5fr .8fr 1.5fr;
  gap: .5rem;
  padding: .45rem .75rem;
  font-size: .7rem;
  font-weight: 700;
  display: grid;
}
.catalog-col-row {
  border-bottom: 1px solid var(--color-border);
  grid-template-columns: 2fr 1.5fr .8fr 1.5fr;
  gap: .5rem;
  padding: .4rem .75rem;
  transition: background .1s;
  display: grid;
}
.catalog-col-row:last-child {
  border-bottom: none;
}
.catalog-col-row:hover {
  background: var(--color-surface-hover);
}
.catalog-col-row-5 {
  grid-template-columns: .5fr 2fr 1.5fr .8fr 1.5fr;
}
.catalog-col-pos {
  color: var(--color-text-muted);
  text-align: right;
  font-size: .75rem;
}
.catalog-col-name {
  color: var(--color-text);
  font-family: Consolas, monospace;
  font-weight: 500;
}
.catalog-col-type {
  color: var(--color-primary);
  font-family: Consolas, monospace;
  font-size: .78rem;
}
.catalog-col-nullable.yes {
  color: var(--color-text-muted);
}
.catalog-col-nullable.no {
  color: var(--color-success);
  font-weight: 600;
}
.catalog-col-default {
  color: var(--color-text-muted);
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: .78rem;
  overflow: hidden;
}
.catalog-data-table-wrap {
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  flex: 1;
  min-height: 0;
  overflow: auto;
}
.catalog-data-table {
  border-collapse: collapse;
  table-layout: auto;
  width: 100%;
  font-size: .8125rem;
}
.catalog-data-table thead tr {
  background: var(--color-bg);
}
.catalog-data-table th {
  background: var(--color-bg);
  text-align: left;
  color: var(--color-text-muted);
  border-bottom: 1px solid var(--color-border);
  border-right: 1px solid var(--color-border);
  white-space: nowrap;
  z-index: 1;
  letter-spacing: .03em;
  text-transform: uppercase;
  min-width: 90px;
  max-width: 320px;
  padding: .4rem .75rem;
  font-size: .72rem;
  font-weight: 700;
  position: sticky;
  top: 0;
}
.catalog-data-table th:last-child {
  border-right: none;
}
.catalog-data-table th .col-type-icon {
  color: var(--color-text-subtle);
  align-items: center;
  margin-right: .3rem;
  font-family: Consolas, monospace;
  font-size: .68rem;
  font-weight: 500;
  display: inline-flex;
}
.catalog-data-table td {
  border-bottom: 1px solid var(--color-border);
  border-right: 1px solid var(--color-border);
  color: var(--color-text);
  white-space: nowrap;
  text-overflow: ellipsis;
  min-width: 90px;
  max-width: 320px;
  padding: .3rem .75rem;
  font-size: .8125rem;
  overflow: hidden;
}
.catalog-data-table td:last-child {
  border-right: none;
}
.catalog-data-table tr:hover td {
  background: var(--color-surface-hover);
}
.catalog-data-table td.row-num, .catalog-data-table th.row-num {
  color: var(--color-text-subtle);
  text-align: right;
  -webkit-user-select: none;
  user-select: none;
  background: var(--color-bg);
  border-right: 1px solid var(--color-border);
  opacity: .7;
  width: 36px;
  min-width: 36px;
  max-width: 36px;
  padding-right: .625rem;
  font-size: .7rem;
  font-weight: 400;
}
.catalog-null {
  color: var(--color-text-subtle);
  font-size: .75rem;
  font-style: italic;
}
.catalog-modal-overlay {
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  z-index: 100;
  background: #0006;
  justify-content: center;
  align-items: center;
  padding: 1rem;
  display: flex;
  position: fixed;
  inset: 0;
}
.catalog-modal {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  width: 100%;
  max-width: 520px;
  box-shadow: var(--shadow-md);
  flex-direction: column;
  gap: 1.25rem;
  padding: 1.5rem;
  display: flex;
}
.catalog-modal-header {
  justify-content: space-between;
  align-items: center;
  display: flex;
}
.catalog-modal-header h3 {
  font-size: .9375rem;
  font-weight: 600;
}
.catalog-form-grid {
  grid-template-columns: 1fr 1fr;
  gap: .875rem;
  display: grid;
}
.catalog-form-field {
  flex-direction: column;
  display: flex;
}
.catalog-form-full {
  grid-column: 1 / -1;
}
.catalog-form-small {
  max-width: 120px;
}
.catalog-test-result {
  border-radius: var(--radius);
  align-items: flex-start;
  gap: .5rem;
  padding: .5rem .75rem;
  font-size: .8125rem;
  line-height: 1.4;
  display: flex;
}
.catalog-test-result.is-success {
  background: var(--color-success-bg);
  color: var(--color-success);
  border: 1px solid #2e7d3233;
}
.catalog-test-result.is-error {
  background: var(--color-danger-bg);
  color: var(--color-danger);
  border: 1px solid #d32f2f33;
}
.catalog-modal-footer {
  align-items: center;
  gap: .75rem;
  display: flex;
}
.catalog-tabs {
  border-bottom: 1px solid var(--color-border);
  flex-shrink: 0;
  margin: .75rem -1.25rem 0;
  padding: 0 1.25rem;
  display: flex;
}
.catalog-tab {
  color: var(--color-text-muted);
  cursor: pointer;
  font-size: .8125rem;
  font-weight: 500;
  font-family: var(--font-family);
  background: none;
  border: none;
  border-bottom: 2px solid #0000;
  margin-bottom: -1px;
  padding: .45rem .875rem;
  transition: color .15s, border-color .15s;
}
.catalog-tab:hover {
  color: var(--color-text);
}
.catalog-tab.is-active {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
  font-weight: 600;
}
.catalog-panel {
  flex-direction: column;
  flex: 1;
  height: 100%;
  min-height: 0;
  padding: 1.25rem;
  display: flex;
  overflow: auto;
}
.catalog-panel-table {
  overflow: hidden;
}
.catalog-panel-header {
  border-bottom: 1px solid var(--color-border);
  flex-shrink: 0;
  align-items: center;
  gap: .5rem;
  padding-bottom: .75rem;
  display: flex;
}
.catalog-panel-title {
  color: var(--color-text);
  font-size: .9375rem;
  font-weight: 600;
}
.catalog-panel-badge {
  letter-spacing: .05em;
  text-transform: uppercase;
  background: var(--color-primary-bg);
  color: var(--color-primary);
  border-radius: 3px;
  padding: .15rem .5rem;
  font-size: .68rem;
  font-weight: 700;
}
.catalog-info-table {
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  flex-direction: column;
  display: flex;
  overflow: hidden;
}
.catalog-info-row {
  border-bottom: 1px solid var(--color-border);
  align-items: center;
  gap: 1rem;
  padding: .45rem .75rem;
  font-size: .8125rem;
  display: flex;
}
.catalog-info-row:last-child {
  border-bottom: none;
}
.catalog-info-row:hover {
  background: var(--color-surface-hover);
}
.catalog-info-label {
  width: 140px;
  color: var(--color-text-muted);
  flex-shrink: 0;
  font-weight: 500;
}
.catalog-info-value {
  color: var(--color-text);
  flex: 1;
}
.catalog-info-value code {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 3px;
  padding: .1rem .35rem;
  font-family: Consolas, monospace;
  font-size: .78rem;
}
.catalog-schema-list {
  flex-direction: column;
  gap: 2px;
  display: flex;
}
.catalog-schema-item {
  border-radius: var(--radius);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  background: var(--color-bg);
  align-items: center;
  gap: .5rem;
  padding: .4rem .75rem;
  font-size: .8125rem;
  display: flex;
}
.catalog-schema-owner {
  color: var(--color-text-muted);
  margin-left: auto;
  font-size: .72rem;
}
.catalog-table-list {
  flex-direction: column;
  gap: 2px;
  display: flex;
}
.catalog-table-item {
  color: var(--color-text);
  cursor: default;
  border-radius: 3px;
  align-items: center;
  gap: .5rem;
  padding: .375rem .75rem;
  font-size: .8125rem;
  transition: background .1s;
  display: flex;
}
.catalog-table-item:hover {
  background: var(--color-surface-hover);
}
.catalog-table-name {
  flex: 1;
}
.catalog-empty-msg {
  color: var(--color-text-muted);
  text-align: center;
  padding: 1rem 0;
  font-size: .8125rem;
}
.catalog-json-cell {
  align-items: flex-start;
  gap: .35rem;
  min-width: 0;
  display: flex;
}
.catalog-json-toggle {
  width: 16px;
  height: 16px;
  color: var(--color-text-muted);
  cursor: pointer;
  background: none;
  border: none;
  border-radius: 0;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  margin-top: 1px;
  padding: 0;
  transition: color .15s;
  display: inline-flex;
}
.catalog-json-toggle:hover {
  color: var(--color-primary);
}
.catalog-json-preview {
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--color-text);
  flex: 1;
  min-width: 0;
  font-family: Consolas, monospace;
  font-size: .78rem;
  overflow: hidden;
}
.catalog-json-expanded {
  white-space: pre-wrap;
  word-break: break-all;
  color: var(--color-text);
  flex: 1;
  min-width: 0;
  max-height: 260px;
  margin: 0;
  font-family: Consolas, monospace;
  font-size: .78rem;
  line-height: 1.5;
  overflow-y: auto;
}
.catalog-data-table td:has(.catalog-json-cell.is-expanded) {
  white-space: normal;
  vertical-align: top;
  max-width: 500px;
  overflow: visible;
}
.sqled-shell {
  border: none;
  border-top: 1px solid var(--color-border);
  background: var(--color-surface);
  border-radius: 0;
  flex-direction: column;
  height: 100vh;
  display: flex;
  position: relative;
  overflow: hidden;
}
.sqled-toolbar {
  border-bottom: 1px solid var(--color-border);
  background: var(--color-bg);
  flex-wrap: wrap;
  flex-shrink: 0;
  align-items: center;
  gap: 1rem;
  padding: .625rem 1rem;
  display: flex;
}
.sqled-toolbar-left {
  align-items: center;
  gap: .5rem;
  display: flex;
}
.sqled-toolbar-icon {
  color: var(--color-primary);
}
.sqled-toolbar-title {
  color: var(--color-text);
  white-space: nowrap;
  font-size: .875rem;
  font-weight: 600;
}
.sqled-toolbar-controls {
  flex-wrap: wrap;
  flex: 1;
  align-items: flex-end;
  gap: .75rem;
  display: flex;
}
.sqled-select-wrap {
  flex-direction: column;
  gap: .2rem;
  min-width: 160px;
  display: flex;
}
.sqled-select-label {
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--color-text-muted);
  font-size: .68rem;
  font-weight: 700;
}
.sqled-select-inner {
  align-items: center;
  display: flex;
  position: relative;
}
.sqled-select-prefix-icon {
  color: var(--color-text-muted);
  pointer-events: none;
  z-index: 1;
  position: absolute;
  left: .6rem;
}
.sqled-select-spinner {
  color: var(--color-primary);
  pointer-events: none;
  z-index: 1;
  position: absolute;
  left: .6rem;
}
.sqled-select {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  width: 100%;
  color: var(--color-text);
  font-size: .8125rem;
  font-family: var(--font-family);
  cursor: pointer;
  appearance: none;
  outline: none;
  padding: .4rem 2rem .4rem 1.8rem;
  transition: border-color .15s;
}
.sqled-select:focus {
  border-color: var(--color-primary);
}
.sqled-select:disabled {
  opacity: .5;
  cursor: not-allowed;
}
.sqled-select option {
  background: var(--color-surface);
}
.sqled-select-arrow {
  color: var(--color-text-muted);
  pointer-events: none;
  position: absolute;
  right: .6rem;
}
.sqled-run-btn {
  background: var(--color-primary);
  color: #fff;
  border-radius: var(--radius);
  font-size: .875rem;
  font-weight: 600;
  font-family: var(--font-family);
  cursor: pointer;
  white-space: nowrap;
  border: none;
  flex-shrink: 0;
  align-items: center;
  gap: .4rem;
  padding: .45rem 1rem;
  transition: background .15s;
  display: flex;
}
.sqled-run-btn:hover:not(:disabled) {
  background: var(--color-primary-hover);
}
.sqled-run-btn:disabled {
  opacity: .5;
  cursor: not-allowed;
}
.sqled-body {
  flex-direction: column;
  flex: 1;
  display: flex;
  overflow: hidden;
}
.sqled-editor-panel {
  border-bottom: 1px solid var(--color-border);
  flex-direction: column;
  flex-shrink: 0;
  height: 40%;
  min-height: 120px;
  display: flex;
}
.sqled-editor-header {
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: .05em;
  flex-shrink: 0;
  justify-content: space-between;
  align-items: center;
  padding: .35rem .875rem;
  font-size: .72rem;
  font-weight: 700;
  display: flex;
}
.sqled-hint {
  text-transform: none;
  letter-spacing: 0;
  opacity: .7;
  font-size: .68rem;
  font-weight: 400;
}
.sqled-editor-wrap {
  flex: 1;
  font-family: Consolas, Monaco, Courier New, monospace;
  font-size: .875rem;
  line-height: 1.6;
  display: flex;
  overflow: hidden;
}
.sqled-line-numbers {
  background: var(--color-bg);
  border-right: 1px solid var(--color-border);
  color: var(--color-text-subtle);
  text-align: right;
  -webkit-user-select: none;
  user-select: none;
  flex-shrink: 0;
  min-width: 40px;
  padding: .75rem .5rem .75rem .75rem;
  overflow: hidden;
}
.sqled-line-num {
  font-size: .78rem;
  line-height: 1.6;
}
.sqled-textarea {
  background: var(--color-surface);
  color: var(--color-text);
  resize: none;
  white-space: pre;
  tab-size: 2;
  border: none;
  outline: none;
  flex: 1;
  padding: .75rem 1rem;
  font-family: Consolas, Monaco, Courier New, monospace;
  font-size: .875rem;
  line-height: 1.6;
  overflow: auto;
}
.sqled-textarea::placeholder {
  color: var(--color-text-subtle);
}
.sqled-results-panel {
  flex-direction: column;
  flex: 1;
  min-height: 0;
  display: flex;
  overflow: hidden;
}
.sqled-results-header {
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: .05em;
  flex-shrink: 0;
  justify-content: space-between;
  align-items: center;
  padding: .35rem .875rem;
  font-size: .72rem;
  font-weight: 700;
  display: flex;
}
.sqled-results-count {
  text-transform: none;
  letter-spacing: 0;
  color: var(--color-success);
  font-size: .72rem;
  font-weight: 400;
}
.sqled-results-placeholder {
  color: var(--color-text-muted);
  flex-direction: column;
  flex: 1;
  justify-content: center;
  align-items: center;
  gap: .75rem;
  font-size: .875rem;
  display: flex;
}
.sqled-results {
  flex-direction: column;
  flex: 1;
  display: flex;
  overflow: hidden;
}
.sqled-results-toolbar {
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface);
  flex-shrink: 0;
  justify-content: space-between;
  align-items: center;
  padding: .35rem .875rem;
  display: flex;
}
.sqled-results-stats {
  color: var(--color-text);
  align-items: center;
  gap: .4rem;
  font-size: .8125rem;
  display: flex;
}
.sqled-stat-ok {
  color: var(--color-success);
}
.sqled-stat-sep {
  color: var(--color-text-muted);
}
.sqled-truncated-badge {
  background: var(--color-warning-bg);
  color: var(--color-warning);
  border: 1px solid #0000;
  border-radius: 3px;
  padding: .1rem .45rem;
  font-size: .68rem;
}
.sqled-download-btn {
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  color: var(--color-text-muted);
  font-size: .78rem;
  font-family: var(--font-family);
  cursor: pointer;
  align-items: center;
  gap: .3rem;
  padding: .3rem .6rem;
  transition: all .15s;
  display: flex;
}
.sqled-download-btn:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}
.sqled-table-wrap {
  flex: 1;
  overflow: auto;
}
.sqled-table {
  border-collapse: collapse;
  table-layout: auto;
  width: 100%;
  font-size: .8125rem;
}
.sqled-table th {
  background: var(--color-bg);
  text-align: left;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  border-bottom: 1px solid var(--color-border);
  border-right: 1px solid var(--color-border);
  white-space: nowrap;
  z-index: 1;
  min-width: 90px;
  max-width: 320px;
  padding: .4rem .75rem;
  font-size: .7rem;
  font-weight: 700;
  position: sticky;
  top: 0;
}
.sqled-table th:last-child {
  border-right: none;
}
.sqled-table th.sqled-row-num, .sqled-table td.sqled-row-num {
  color: var(--color-text-subtle);
  text-align: right;
  -webkit-user-select: none;
  user-select: none;
  width: 48px;
  min-width: 48px;
  padding-right: .625rem;
  font-size: .7rem;
}
.sqled-table td {
  border-bottom: 1px solid var(--color-border);
  border-right: 1px solid var(--color-border);
  color: var(--color-text);
  white-space: nowrap;
  text-overflow: ellipsis;
  max-width: 300px;
  padding: .3rem .75rem;
  overflow: hidden;
}
.sqled-table td:last-child {
  border-right: none;
}
.sqled-table tr:hover td {
  background: var(--color-surface-hover);
}
.sqled-table tr:last-child td {
  border-bottom: none;
}
.sqled-null {
  color: var(--color-text-subtle);
  font-size: .75rem;
  font-style: italic;
}
.sqled-error-panel {
  color: var(--color-danger);
  align-items: flex-start;
  gap: .75rem;
  padding: 1.25rem;
  font-size: .875rem;
  display: flex;
}
.sqled-error-panel pre {
  white-space: pre-wrap;
  word-break: break-word;
  color: var(--color-danger);
  flex: 1;
  font-family: Consolas, monospace;
  font-size: .8125rem;
}
.sqled-results-empty {
  color: var(--color-success);
  align-items: center;
  gap: .75rem;
  padding: 1.25rem;
  font-size: .875rem;
  display: flex;
}
.sqled-no-conn-banner {
  background: var(--color-warning-bg);
  border-radius: var(--radius);
  color: var(--color-warning);
  white-space: nowrap;
  border: 1px solid #e6510040;
  align-items: center;
  gap: .5rem;
  padding: .5rem .875rem;
  font-size: .8125rem;
  display: flex;
  position: absolute;
  bottom: 1rem;
  left: 50%;
  transform: translateX(-50%);
}
.sqled-no-conn-banner a {
  color: var(--color-primary);
  text-decoration: underline;
}
:root, [data-theme="light"] {
  --color-bg: var(--cx-color-bg);
  --color-surface: var(--cx-color-surface);
  --color-surface-hover: var(--cx-color-surface-hover);
  --color-border: var(--cx-color-border);
  --color-border-subtle: var(--cx-color-border-subtle);
  --color-border-muted: var(--cx-color-border-muted);
  --color-border-strong: var(--cx-color-border-strong);
  --color-text: var(--cx-color-text);
  --color-text-muted: var(--cx-color-text-muted);
  --color-text-subtle: var(--cx-color-text-subtle);
  --color-primary: var(--cx-color-primary);
  --color-primary-hover: var(--cx-color-primary-hover);
  --color-primary-bg: var(--cx-color-primary-bg);
  --color-danger: var(--cx-color-error-text);
  --color-danger-bg: var(--cx-color-error-bg);
  --color-success: var(--cx-color-success-text);
  --color-success-bg: var(--cx-color-success-bg);
  --color-warning: var(--cx-color-warning-text);
  --color-warning-bg: var(--cx-color-warning-bg);
  --color-severity-low: var(--cx-color-success-text);
  --color-severity-medium: var(--cx-color-warning-text);
  --color-severity-high: var(--cx-color-error-text);
  --color-severity-critical: var(--cx-color-brand-primary);
  --font-family: var(--cx-font-sans);
  --radius: var(--cx-radius-sm);
  --radius-lg: var(--cx-radius-lg);
  --sidebar-width: 236px;
  --shadow-sm: var(--cx-shadow-1);
  --shadow-md: var(--cx-shadow-2);
  --sb-bg: var(--cx-color-sidebar-bg);
  --sb-border: var(--cx-color-border);
  --sb-text: var(--cx-color-text);
  --sb-muted: var(--cx-color-text-muted);
  --sb-hover: var(--cx-color-sidebar-hover);
  --sb-active-bg: var(--cx-color-sidebar-active-bg);
  --sb-active-text: var(--cx-color-sidebar-active-text);
  --sb-divider: var(--cx-color-border);
  --sb-logo-bg: linear-gradient(135deg, var(--cx-color-brand-primary), #ff8b78);
}
[data-theme="dark"] {
  --color-bg: var(--cx-color-bg);
  --color-surface: var(--cx-color-surface);
  --color-surface-hover: var(--cx-color-surface-hover);
  --color-border: var(--cx-color-border);
  --color-border-subtle: var(--cx-color-border-subtle);
  --color-border-muted: var(--cx-color-border-muted);
  --color-border-strong: var(--cx-color-border-strong);
  --color-text: var(--cx-color-text);
  --color-text-muted: var(--cx-color-text-muted);
  --color-text-subtle: var(--cx-color-text-subtle);
  --color-primary: var(--cx-color-primary);
  --color-primary-hover: var(--cx-color-primary-hover);
  --color-primary-bg: var(--cx-color-primary-bg);
  --color-danger: #ffb0a1;
  --color-danger-bg: #ff5a3d29;
  --color-success: #c5e3a1;
  --color-success-bg: #97c45924;
  --color-warning: #ffd38e;
  --color-warning-bg: #ef9f2729;
  --color-severity-low: var(--color-success);
  --color-severity-medium: var(--color-warning);
  --color-severity-high: var(--color-danger);
  --color-severity-critical: var(--color-primary);
  --shadow-sm: var(--cx-shadow-1);
  --shadow-md: var(--cx-shadow-2);
  --sb-bg: var(--cx-color-sidebar-bg);
  --sb-border: var(--cx-color-border);
  --sb-text: var(--cx-color-text);
  --sb-muted: var(--cx-color-text-muted);
  --sb-hover: var(--cx-color-sidebar-hover);
  --sb-active-bg: var(--cx-color-sidebar-active-bg);
  --sb-active-text: var(--cx-color-sidebar-active-text);
  --sb-divider: var(--cx-color-border);
  --sb-logo-bg: linear-gradient(135deg, var(--cx-color-primary), #ff8b78);
}
html {
  background: var(--color-bg);
}
.btn-primary {
  padding: .5rem 1rem;
  font-weight: 600;
}
.btn-primary:hover:not(:disabled) {
  box-shadow: 0 6px 18px #ff362138;
}
.btn-outline {
  padding: .5rem 1rem;
}
.btn-outline:hover:not(:disabled) {
  border-color: var(--color-border-strong);
  color: var(--color-text);
  background: var(--color-surface-hover);
}
.input-field:focus, .form-input:focus {
  box-shadow: 0 0 0 3px var(--color-primary);
}
@supports (color: color-mix(in lab, red, red)) {
  .input-field:focus, .form-input:focus {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 18%, transparent);
  }
}
.app-shell {
  background: var(--color-surface);
}
.app-sidebar {
  width: var(--sidebar-width);
  background: var(--sb-bg, #fafafa);
  border: 0;
  border-right: 1px solid var(--sb-border, #e5e7eb);
  box-shadow: none;
  z-index: 1050;
  flex-direction: column;
  flex-shrink: 0;
  gap: 0;
  height: 100vh;
  padding: 0;
  transition: width .2s;
  display: flex;
  position: sticky;
  top: 0;
  overflow: visible;
}
.app-sidebar-edge-toggle {
  background: var(--color-surface, #fff);
  border: 1px solid var(--sb-border, #e5e7eb);
  width: 22px;
  height: 22px;
  color: var(--sb-muted, #64748b);
  cursor: pointer;
  z-index: 2000;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  padding: 0;
  transition: transform .15s, background .15s, color .15s, border-color .15s, box-shadow .15s;
  display: flex;
  position: absolute;
  top: 13px;
  right: -11px;
  box-shadow: 0 1px 3px #00000014, 0 1px 2px #0000000a;
}
.app-sidebar-edge-toggle:hover {
  background: var(--sb-hover, #f8fafc);
  color: var(--color-text, #0f172a);
  border-color: var(--color-border-strong, #94a3b8);
  transform: scale(1.08);
  box-shadow: 0 2px 6px #0000001f;
}
.app-sidebar-header {
  border-bottom: var(--cx-border-hairline-subtle);
  justify-content: space-between;
  align-items: center;
  gap: .5rem;
  height: 48px;
  min-height: 48px;
  padding: 0 1rem;
  display: flex;
}
.app-sidebar-logo {
  flex: 1;
  align-items: center;
  gap: .65rem;
  min-width: 0;
  min-height: 48px;
  margin: 0;
  padding: 0;
  display: flex;
}
.app-sidebar-logo-text-wrap {
  align-items: center;
  min-width: 0;
  display: flex;
}
.app-sidebar-logo-text {
  letter-spacing: -.02em;
  color: var(--color-text);
  white-space: nowrap;
  font-size: .95rem;
  font-weight: 650;
}
.app-sidebar-section {
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
  flex-direction: column;
  gap: .125rem;
  min-height: 0;
  padding: .75rem .75rem 0;
  transition: scrollbar-color .2s;
  display: flex;
  overflow-y: auto;
}
.app-sidebar-section::-webkit-scrollbar {
  width: 4px;
}
.app-sidebar-section::-webkit-scrollbar-track {
  background: none;
}
.app-sidebar-section::-webkit-scrollbar-thumb {
  background: none;
  border-radius: 4px;
  transition: background .2s;
}
.app-sidebar:hover .app-sidebar-section, .app-sidebar-section:hover {
  scrollbar-color: var(--sb-border, #0003) transparent;
}
.app-sidebar:hover .app-sidebar-section::-webkit-scrollbar-thumb {
  background: var(--sb-border, #0003);
}
.app-sidebar-section:hover::-webkit-scrollbar-thumb {
  background: var(--sb-border, #0003);
}
.app-sidebar:hover .app-sidebar-section::-webkit-scrollbar-thumb:hover {
  background: var(--sb-muted, #00000059);
}
.app-sidebar-section::-webkit-scrollbar-thumb:hover {
  background: var(--sb-muted, #00000059);
}
.app-sidebar-link {
  min-height: 34px;
  color: var(--sb-text);
  letter-spacing: -.01em;
  border-radius: 6px;
  padding: .35rem .65rem;
  font-size: .85rem;
  font-weight: 400;
}
.app-sidebar-link:hover {
  background: var(--sb-hover);
  color: var(--color-text, #111827);
}
.app-sidebar-link.is-active {
  background: var(--sb-active-bg);
  color: var(--sb-active-text);
  font-weight: 500;
}
.app-sidebar-footer {
  border-top: var(--cx-border-hairline-subtle);
  margin: 0 .75rem .75rem;
  padding-top: .75rem;
}
.app-theme-toggle {
  border-radius: 6px;
  min-height: 36px;
  padding: 0 .25rem;
  font-size: .875rem;
}
.app-theme-toggle-label {
  white-space: nowrap;
}
.app-sidebar.is-collapsed {
  width: 64px;
}
.app-sidebar.is-collapsed .app-sidebar-header {
  justify-content: center;
  align-items: center;
  height: 48px;
  min-height: 48px;
  padding: 0;
  display: flex;
}
.app-sidebar.is-collapsed .app-sidebar-logo {
  justify-content: center;
}
.app-sidebar.is-collapsed .app-sidebar-logo-text-wrap, .app-sidebar.is-collapsed .app-sidebar-logo-subtitle, .app-sidebar.is-collapsed .app-sidebar-link-label, .app-sidebar.is-collapsed .app-theme-toggle-label, .app-sidebar.is-collapsed .app-sidebar-divider-label, .app-sidebar.is-collapsed .app-sidebar-link-arrow {
  display: none;
}
.app-sidebar-group {
  flex-direction: column;
  gap: 2px;
  width: 100%;
  display: flex;
}
.app-sidebar.is-collapsed .app-sidebar-section {
  align-items: center;
  padding: .75rem .35rem 0;
}
.app-sidebar.is-collapsed .app-sidebar-link, .app-sidebar.is-collapsed .app-theme-toggle {
  justify-content: center;
  width: 100%;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.app-sidebar.is-collapsed .app-sidebar-link-container {
  width: 100%;
}
.app-sidebar.is-collapsed .app-sidebar-link-icon {
  margin: 0;
}
.app-sidebar.is-collapsed .custom-link-actions {
  display: none;
}
.app-sidebar.is-collapsed .app-sidebar-footer {
  margin: 0 .35rem .75rem;
}
.app-main {
  background: var(--color-surface);
}
.page-content {
  padding: 0 3.5rem 2rem;
}
.page-content:has(.compute-page), .page-content:has(.dashboard-page), .page-content:has(.dashboard-editor-page), .page-content:has(.agents-page), .page-content:has(.apps-page), .page-content:has(.notebooks-page), .page-content:has(.sql-warehouse-page), .page-content:has(.connections-page), .page-content:has(.monitoring-root) {
  padding: 0;
}
.dashboard-page {
  background: var(--color-surface);
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: 24px 40px 40px;
}
.agents-page, .apps-page, .notebooks-page, .connections-page {
  background: var(--color-surface);
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: 20px 28px 32px;
}
.app-topbar {
  border-bottom: var(--cx-border-hairline-subtle);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  background: #fafafa;
  height: 48px;
  padding: 0 1.25rem;
  position: relative;
}
.app-topbar-title {
  letter-spacing: 0;
  color: var(--color-text);
  font-size: .95rem;
  font-weight: 600;
}
.app-topbar-icon-btn, .app-topbar-avatar {
  background: none;
  border: none;
  border-radius: 8px;
}
.app-topbar-icon-btn.is-active {
  background: var(--color-primary-bg);
}
.secondary-split-layout {
  background: var(--color-surface);
  flex: 1;
  gap: 0;
  height: 100%;
  min-height: 0;
  display: flex;
  overflow: hidden;
}
.secondary-split-sidebar, .secondary-split-main {
  background: var(--color-surface);
  flex-direction: column;
  min-height: 0;
  display: flex;
}
.secondary-split-sidebar {
  border-right: var(--cx-border-hairline-subtle);
  flex: none;
  min-width: 280px;
  max-width: min(620px, 52vw);
  position: relative;
}
.secondary-split-main {
  flex: auto;
  min-width: 0;
}
.secondary-split-sidebar-header, .secondary-split-main-header {
  background: var(--color-surface);
  align-items: center;
  min-height: 34px;
  padding: .125rem .5rem;
  display: flex;
}
.secondary-split-main-header {
  justify-content: space-between;
  gap: 1rem;
}
.secondary-split-sidebar-body, .secondary-split-main-body {
  flex: 1;
  min-height: 0;
  overflow: auto;
}
.secondary-split-resize-handle {
  z-index: 4;
  cursor: col-resize;
  width: 10px;
  height: 100%;
  position: absolute;
  top: 0;
  right: -6px;
}
.secondary-split-resize-handle:after {
  content: "";
  background: none;
  width: 1px;
  height: 100%;
  position: absolute;
  top: 0;
  right: 5px;
}
.secondary-split-resize-handle:hover:after, .secondary-split-resize-handle:active:after {
  background: var(--color-primary);
}
.page-tabs {
  border-bottom: 1px solid var(--color-border);
  align-items: flex-end;
  gap: 18px;
  margin: 8px 0 16px;
  display: flex;
}
.page-tabs button {
  color: var(--color-text-muted);
  font: inherit;
  text-transform: capitalize;
  cursor: pointer;
  background: none;
  border: 0;
  border-bottom: 3px solid #0000;
  margin: 0;
  padding: 7px 0 8px;
  font-size: 14px;
  font-weight: 600;
}
.page-tabs button:hover {
  color: var(--color-text);
}
.page-tabs button.is-active {
  border-bottom-color: var(--color-primary);
  color: var(--color-text);
}
.app-table-wrap {
  border-top: 1px solid var(--color-border);
  min-width: 0;
  overflow-x: auto;
}
.app-table {
  border-collapse: collapse;
  background: var(--color-surface);
  width: 100%;
  color: var(--color-text);
  font-size: 13px;
}
.app-table th {
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text);
  white-space: nowrap;
  padding: 10px 16px;
  font-size: 12px;
  font-weight: 600;
}
.app-table td {
  border-bottom: 1px solid var(--color-border);
  vertical-align: middle;
  padding: 9px 16px;
}
.app-table tr.is-clickable {
  cursor: pointer;
}
.app-table tbody tr.is-clickable:hover {
  background: var(--color-surface-secondary);
}
.app-table tr.is-danger {
  background: #ef44440d;
}
.app-table-empty {
  color: var(--color-text-muted);
  text-align: center;
  padding: 24px 16px;
}
.app-table-skeleton {
  background: linear-gradient(90deg, var(--color-border) 0%, var(--color-surface-hover) 45%, var(--color-border) 90%);
  background-size: 220% 100%;
  border-radius: 999px;
  max-width: 100%;
  height: 5px;
  animation: 1.4s ease-in-out infinite app-table-skeleton-pulse;
  display: block;
}
@keyframes app-table-skeleton-pulse {
  0% {
    background-position: 100% 0;
  }

  100% {
    background-position: -100% 0;
  }
}
.app-table-muted {
  color: var(--color-text-muted);
}
.app-table-actions {
  white-space: nowrap;
}
.ghost-icon-btn {
  color: #5a5a5a;
  width: 24px;
  height: 24px;
  font: inherit;
  cursor: pointer;
  background: none;
  border: 0;
  border-radius: 3px;
  justify-content: center;
  align-items: center;
  margin-left: 6px;
  padding: 0;
  font-size: 12px;
  display: inline-flex;
}
.ghost-icon-btn:hover:not(:disabled) {
  background: var(--color-surface-hover);
}
.ghost-icon-btn:disabled {
  cursor: not-allowed;
  opacity: .45;
}
.dashboard-draft-pill {
  background: var(--color-warning-bg);
  color: var(--color-warning);
  border-radius: 4px;
  padding: 2px 6px;
  font-size: .65rem;
  font-weight: 600;
}
@media (max-width: 840px) {
  .secondary-split-layout {
    flex-direction: column;
  }

  .secondary-split-sidebar {
    border-right: 0;
    border-bottom: var(--cx-border-hairline-subtle);
    min-width: 0;
    max-width: none;
    min-height: 240px;
    max-height: 38vh;
    width: 100% !important;
  }

  .secondary-split-resize-handle {
    display: none;
  }
}
.page-content:has(.uc-shell) {
  padding: 0 !important;
}
.uc-shell {
  background: var(--color-surface);
  min-height: calc(100vh - 48px);
  color: var(--color-text);
  font-family: var(--font-family);
  flex-direction: column;
  display: flex;
}
.uc-workspace {
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
  grid-template-columns: 280px minmax(0, 1fr);
  height: calc(100vh - 48px);
  display: grid;
  overflow: hidden;
}
.uc-sidebar {
  background: var(--color-bg);
  border-right: 1px solid var(--color-border);
  flex-direction: column;
  gap: 12px;
  min-height: 0;
  padding: 16px 12px;
  display: flex;
  overflow-y: auto;
}
.uc-sidebar-header {
  justify-content: space-between;
  align-items: center;
  padding: 0 4px;
  display: flex;
}
.uc-sidebar-title-row {
  justify-content: space-between;
  align-items: center;
  width: 100%;
  display: flex;
}
.uc-sidebar-title {
  color: var(--color-text);
  font-size: 16px;
  font-weight: 600;
}
.uc-sidebar-actions {
  align-items: center;
  gap: 4px;
  display: flex;
}
.uc-icon-btn {
  width: 28px;
  height: 28px;
  color: var(--color-text-muted);
  cursor: pointer;
  background: none;
  border: 1px solid #0000;
  border-radius: 6px;
  justify-content: center;
  align-items: center;
  transition: all .15s;
  display: flex;
}
.uc-icon-btn:hover {
  background: var(--color-surface-hover);
  color: var(--color-text);
  border-color: var(--color-border);
}
.uc-dropdown-item {
  text-align: left;
  width: 100%;
  color: var(--color-text);
  cursor: pointer;
  white-space: nowrap;
  background: none;
  border: none;
  padding: 8px 14px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 400;
  transition: background .1s;
  display: block;
}
.uc-dropdown-item:hover {
  background: var(--color-surface-hover);
}
.uc-sidebar-compute-row {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  font-size: 11px;
  display: flex;
}
.uc-compute-dot {
  background-color: var(--color-success);
  border-radius: 50%;
  flex-shrink: 0;
  width: 8px;
  height: 8px;
}
.uc-compute-text {
  color: var(--color-text);
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 500;
  overflow: hidden;
}
.uc-compute-badge {
  background: var(--color-surface-hover);
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
  text-transform: uppercase;
  border-radius: 3px;
  padding: 1px 4px;
  font-size: 9px;
  font-weight: 600;
}
.uc-compute-size {
  color: var(--color-text-subtle);
  margin-left: auto;
  font-size: 10px;
  font-weight: 500;
}
.uc-sidebar-search-row {
  align-items: center;
  display: flex;
  position: relative;
}
.uc-sidebar-search-row input {
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  width: 100%;
  color: var(--color-text);
  border-radius: 6px;
  outline: none;
  padding: 6px 32px 6px 10px;
  font-size: 13px;
  transition: border-color .15s;
}
.uc-sidebar-search-row input:focus {
  border-color: var(--color-primary);
}
.uc-search-filter-btn {
  color: var(--color-text-subtle);
  cursor: pointer;
  background: none;
  border: none;
  align-items: center;
  padding: 0;
  display: flex;
  position: absolute;
  right: 10px;
}
.uc-search-filter-btn:hover {
  color: var(--color-text);
}
.uc-sidebar-tabs-row {
  border-bottom: 1px solid var(--color-border);
  gap: 4px;
  margin-top: 4px;
  padding-bottom: 8px;
  display: flex;
}
.uc-sidebar-tab {
  cursor: pointer;
  color: var(--color-text-muted);
  background: none;
  border: none;
  border-radius: 12px;
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 500;
  transition: all .15s;
}
.uc-sidebar-tab:hover {
  background: var(--color-surface-hover);
  color: var(--color-text);
}
.uc-sidebar-tab.is-active {
  font-weight: 600;
  background: var(--color-primary-bg) !important;
  color: var(--color-primary) !important;
}
.uc-sidebar-tree {
  flex-direction: column;
  flex: 1;
  min-height: 0;
  display: flex;
  overflow-y: auto;
}
.uc-tree-group {
  flex-direction: column;
  display: flex;
}
.uc-tree-row {
  color: var(--color-text);
  cursor: pointer;
  text-align: left;
  -webkit-user-select: none;
  user-select: none;
  background: none;
  border: none;
  border-radius: 4px;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 5px 6px;
  font-size: 13px;
  transition: background .1s;
  display: flex;
}
.uc-tree-row:hover {
  background: var(--color-surface-hover);
}
.uc-tree-row.is-selected {
  font-weight: 500;
  background: var(--color-primary-bg) !important;
  color: var(--color-primary) !important;
}
.uc-tree-row.is-pending {
  cursor: default;
  color: var(--color-text-muted);
  background: var(--color-primary);
}
@supports (color: color-mix(in lab, red, red)) {
  .uc-tree-row.is-pending {
    background: color-mix(in srgb, var(--color-primary) 7%, transparent);
  }
}
.uc-tree-row.is-pending {
  border: 1px dashed var(--color-primary);
}
@supports (color: color-mix(in lab, red, red)) {
  .uc-tree-row.is-pending {
    border: 1px dashed color-mix(in srgb, var(--color-primary) 28%, var(--color-border));
  }
}
.uc-tree-row.is-pending:hover {
  background: var(--color-primary);
}
@supports (color: color-mix(in lab, red, red)) {
  .uc-tree-row.is-pending:hover {
    background: color-mix(in srgb, var(--color-primary) 7%, transparent);
  }
}
.uc-tree-row.is-pending.is-failed {
  color: var(--color-danger, #dc2626);
  background: var(--color-danger, #dc2626);
}
@supports (color: color-mix(in lab, red, red)) {
  .uc-tree-row.is-pending.is-failed {
    background: color-mix(in srgb, var(--color-danger, #dc2626) 7%, transparent);
  }
}
.uc-tree-row.is-pending.is-failed {
  border-color: var(--color-danger, #dc2626);
}
@supports (color: color-mix(in lab, red, red)) {
  .uc-tree-row.is-pending.is-failed {
    border-color: color-mix(in srgb, var(--color-danger, #dc2626) 30%, var(--color-border));
  }
}
.uc-pending-status {
  text-transform: uppercase;
  letter-spacing: .04em;
  flex-shrink: 0;
  font-size: 9px;
  font-weight: 600;
}
.uc-pending-dismiss {
  color: inherit;
  cursor: pointer;
  background: none;
  border: 0;
  border-radius: 3px;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  padding: 1px;
  display: inline-flex;
}
.uc-pending-dismiss:hover {
  background: currentColor;
}
@supports (color: color-mix(in lab, red, red)) {
  .uc-pending-dismiss:hover {
    background: color-mix(in srgb, currentColor 12%, transparent);
  }
}
.uc-tree-row-chevron {
  color: var(--color-text-subtle);
  align-items: center;
  transition: transform .15s;
  display: flex;
}
.uc-tree-row-icon {
  color: var(--color-text-muted);
  align-items: center;
  display: flex;
}
.uc-tree-row.is-selected .uc-tree-row-icon {
  color: var(--color-primary);
}
.uc-tree-row-label {
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  overflow: hidden;
}
.uc-tree-count {
  color: var(--color-text-subtle);
  background: var(--color-surface-hover);
  border-radius: 4px;
  padding: 1px 4px;
  font-size: 10px;
}
.uc-tree-indent {
  border-left: 1px dashed var(--color-border);
  flex-direction: column;
  gap: 2px;
  margin-left: 12px;
  padding-left: 4px;
  display: flex;
}
.uc-main {
  background: var(--color-surface);
  flex-direction: column;
  height: 100%;
  min-height: 0;
  display: flex;
  overflow-y: auto;
}
.uc-assets-table-wrap, .uc-assets-table {
  border-collapse: collapse;
  width: 100%;
}
.uc-assets-table th {
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--color-text-muted);
  border-bottom: 1px solid var(--color-border);
  text-align: left;
  padding: 10px 16px;
  font-size: 11px;
  font-weight: 600;
}
.uc-assets-table td {
  border-bottom: 1px solid var(--color-border);
  vertical-align: middle;
  padding: 10px 16px;
}
.uc-assets-table tr {
  transition: background .1s;
}
.uc-assets-table tbody tr {
  cursor: pointer;
}
.uc-assets-table tbody tr:hover {
  background: var(--color-surface-hover);
}
.uc-item-meta-row {
  flex-direction: row !important;
  align-items: center !important;
  gap: 8px !important;
  display: flex !important;
}
.uc-item-meta-row svg {
  flex-shrink: 0 !important;
}
.uc-item-meta-cell {
  align-items: center;
  gap: 10px;
  display: flex;
}
.uc-item-icon-container {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  width: 32px;
  height: 32px;
  color: var(--color-text-muted);
  border-radius: 6px;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  display: flex;
}
.uc-item-details {
  flex-direction: column;
  display: flex;
}
.uc-item-name {
  color: var(--color-primary);
  font-size: 13.5px;
  font-weight: 500;
  text-decoration: none;
}
.uc-item-name:hover {
  text-decoration: underline;
}
.uc-item-namespace {
  color: var(--color-text-muted);
  margin-top: 2px;
  font-size: 11px;
}
.uc-item-time {
  color: var(--color-text-muted);
  font-size: 12px;
}
.uc-item-type {
  color: var(--color-text);
  font-size: 12px;
  font-weight: 500;
}
.uc-panel {
  flex-direction: column;
  gap: 12px;
  padding: 24px;
  display: flex;
}
.uc-panel .page-tabs {
  margin: 0;
}
.uc-panel .uc-tab-content {
  padding: 12px 0;
}
.uc-panel-hero {
  border-bottom: 1px solid var(--color-border);
  justify-content: space-between;
  align-items: center;
  padding-bottom: 16px;
  display: flex;
}
.uc-panel-hero h2 {
  color: var(--color-text);
  margin: 0 0 6px;
  font-size: 20px;
  font-weight: 600;
}
.uc-panel-eyebrow {
  margin-bottom: 4px;
}
.uc-panel-hero p {
  color: var(--color-text-muted);
  margin: 0;
  font-size: 13.5px;
}
.uc-hero-actions {
  align-items: center;
  gap: 8px;
  display: flex;
}
.uc-chip {
  background: var(--color-primary-bg);
  color: var(--color-primary);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  padding: 3px 8px;
  font-size: 11px;
  font-weight: 600;
}
.uc-chip.is-iceberg {
  color: #127f73;
  background: #11948314;
}
.uc-detail-grid {
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  display: grid;
}
.uc-detail-card {
  border: 1px solid var(--color-border);
  background: var(--color-bg);
  border-radius: 8px;
  padding: 16px;
}
.uc-detail-title {
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--color-text-muted);
  margin-bottom: 12px;
  font-size: 13px;
  font-weight: 600;
}
.uc-key-values {
  flex-direction: column;
  gap: 8px;
  display: flex;
}
.uc-key-values div {
  justify-content: space-between;
  font-size: 13px;
  display: flex;
}
.uc-key-values span {
  color: var(--color-text-muted);
}
.uc-key-values strong {
  color: var(--color-text);
  font-weight: 500;
}
.uc-lineage-list {
  flex-direction: column;
  gap: 6px;
  display: flex;
}
.uc-lineage-list div {
  color: var(--color-text);
  align-items: center;
  gap: 6px;
  font-size: 13px;
  display: flex;
}
.uc-section {
  flex-direction: column;
  gap: 12px;
  display: flex;
}
.uc-section-header {
  justify-content: space-between;
  align-items: center;
  display: flex;
}
.uc-section-header h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
}
.uc-columns-table-wrap {
  border: 1px solid var(--color-border);
  border-radius: 8px;
  overflow: hidden;
}
.uc-columns-table {
  border-collapse: collapse;
  width: 100%;
}
.uc-columns-table th {
  background: var(--color-bg);
  color: var(--color-text-muted);
  text-transform: uppercase;
  border-bottom: 1px solid var(--color-border);
  text-align: left;
  padding: 8px 12px;
  font-size: 11px;
  font-weight: 600;
}
.uc-columns-table td {
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text);
  padding: 8px 12px;
  font-size: 13px;
}
.uc-columns-table tr:last-child td {
  border-bottom: none;
}
.uc-modal-overlay {
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  z-index: 100;
  background: #0006;
  justify-content: center;
  align-items: center;
  display: flex;
  position: fixed;
  inset: 0;
}
.uc-modal {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  width: min(580px, 95vw);
  box-shadow: var(--shadow-md);
  border-radius: 12px;
  flex-direction: column;
  gap: 16px;
  padding: 24px;
  display: flex;
}
.uc-modal-header {
  justify-content: space-between;
  align-items: center;
  display: flex;
}
.uc-modal-header h3 {
  margin: 0 0 4px;
  font-size: 16px;
  font-weight: 600;
}
.uc-modal-header p {
  color: var(--color-text-muted);
  margin: 0;
  font-size: 13px;
}
.uc-form-grid {
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  display: grid;
}
.uc-form-grid-large {
  grid-template-columns: 1fr;
}
.uc-field {
  flex-direction: column;
  gap: 4px;
  display: flex;
}
.uc-field-label {
  text-transform: uppercase;
  color: var(--color-text-muted);
  font-size: 11px;
  font-weight: 600;
}
.uc-pill-row {
  gap: 8px;
  display: flex;
}
.uc-pill {
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
  cursor: pointer;
  background: none;
  border-radius: 16px;
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 500;
}
.uc-pill.is-active {
  background: var(--color-primary-bg);
  color: var(--color-primary);
  border-color: #0000;
}
.uc-banner {
  background: var(--color-primary-bg);
  color: var(--color-primary);
  border-radius: 6px;
  padding: 10px 12px;
  font-size: 12px;
}
.uc-banner.is-success {
  background: var(--color-success-bg);
  color: var(--color-success);
}
.uc-modal-footer {
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-top: 8px;
  display: flex;
}
.uc-inline-hint {
  color: var(--color-text-muted);
  max-width: 320px;
  font-size: 11px;
}
.uc-empty-state {
  text-align: center;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 12px;
  padding: 48px;
  display: flex;
}
.uc-empty-badge {
  background: var(--color-primary-bg);
  color: var(--color-primary);
  text-transform: uppercase;
  border-radius: 12px;
  padding: 2px 8px;
  font-size: 10px;
  font-weight: 600;
}
.uc-empty-actions {
  gap: 8px;
  display: flex;
}
.uc-tab-bar {
  border-bottom: 1px solid var(--color-border);
  gap: 0;
  margin-bottom: 0;
  padding: 0 24px;
  display: flex;
}
.uc-tab {
  cursor: pointer;
  color: var(--color-text-muted);
  background: none;
  border: none;
  border-bottom: 2px solid #0000;
  margin-bottom: -1px;
  padding: 10px 16px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  transition: color .15s, border-color .15s;
}
.uc-tab:hover {
  color: var(--color-text);
}
.uc-tab.is-active {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
  font-weight: 600;
}
.uc-tab-content {
  flex: 1;
  padding: 20px 24px;
  overflow-y: auto;
}
.uc-col-preview {
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
  display: flex;
}
.uc-col-pill {
  background: var(--color-surface-hover);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  font-size: 11px;
  display: flex;
}
.uc-col-pill-name {
  color: var(--color-text);
  font-weight: 600;
}
.uc-col-pill-type {
  color: var(--color-text-muted);
  font-family: monospace;
}
.uc-col-pill-more {
  color: var(--color-text-muted);
  padding: 3px 0;
  font-size: 11px;
}
.uc-child-list {
  flex-direction: column;
  gap: 2px;
  margin-top: 8px;
  display: flex;
}
.uc-child-item {
  cursor: pointer;
  color: var(--color-text);
  border-radius: 6px;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  font-size: 13px;
  transition: background .12s;
  display: flex;
}
.uc-child-item:hover {
  background: var(--color-surface-hover);
}
.uc-child-item > span:first-of-type {
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  overflow: hidden;
}
.uc-child-badge {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
  border-radius: 4px;
  padding: 1px 5px;
  font-size: 10px;
  font-weight: 500;
}
.uc-lineage-section {
  margin-bottom: 8px;
}
.uc-lineage-row {
  color: var(--color-text);
  border-bottom: 1px solid var(--color-border);
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  font-size: 13px;
  display: flex;
}
.uc-sample-table-wrap {
  border: 1px solid var(--color-border);
  border-radius: 6px;
  max-height: calc(100vh - 320px);
  overflow: auto;
}
.uc-sample-table th, .uc-sample-table td {
  min-width: 80px;
  max-width: 200px;
}
.uc-details-container {
  gap: 24px;
  width: 100%;
  min-height: 0;
  display: flex;
}
.uc-details-left {
  flex-direction: column;
  flex: 1;
  gap: 20px;
  min-width: 0;
  display: flex;
}
.uc-details-right {
  flex-direction: column;
  flex-shrink: 0;
  gap: 20px;
  width: 280px;
  display: flex;
}
.uc-panel-header-row {
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-bottom: 0;
  padding-bottom: 8px;
  display: flex;
}
.uc-panel-header-title {
  align-items: center;
  gap: 10px;
  display: flex;
}
.uc-panel-header-title h2 {
  color: var(--color-text);
  margin: 0;
  font-size: 24px;
  font-weight: 600;
}
.uc-icon-btn {
  color: var(--color-text-muted);
  cursor: pointer;
  background: none;
  border: none;
  border-radius: 4px;
  justify-content: center;
  align-items: center;
  padding: 6px;
  transition: background .15s, color .15s;
  display: inline-flex;
}
.uc-icon-btn:hover {
  background: var(--color-surface-hover);
  color: var(--color-text);
}
.uc-action-menu-container {
  display: inline-block;
  position: relative;
}
.uc-action-dropdown-menu {
  z-index: 50;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  width: 220px;
  box-shadow: var(--shadow-lg);
  border-radius: 6px;
  flex-direction: column;
  gap: 2px;
  padding: 4px;
  display: flex;
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
}
.uc-action-dropdown-menu button {
  text-align: left;
  width: 100%;
  color: var(--color-text);
  cursor: pointer;
  background: none;
  border: none;
  border-radius: 4px;
  flex-direction: column;
  gap: 2px;
  padding: 8px 10px;
  font-size: 13px;
  display: flex;
}
.uc-action-dropdown-menu button:hover {
  background: var(--color-surface-hover);
}
.uc-action-dropdown-menu button span {
  color: var(--color-text-muted);
  font-size: 11px;
}
.uc-desc-section {
  flex-direction: column;
  gap: 8px;
  display: flex;
}
.uc-desc-section h4 {
  color: var(--color-text);
  margin: 0;
  font-size: 13px;
  font-weight: 600;
}
.uc-desc-content {
  color: var(--color-text-muted);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  padding: 12px;
  font-size: 13.5px;
  line-height: 1.5;
  position: relative;
}
.uc-desc-edit-area {
  border: 1px solid var(--color-primary);
  background: var(--color-surface);
  width: 100%;
  min-height: 80px;
  color: var(--color-text);
  font: inherit;
  resize: vertical;
  border-radius: 6px;
  margin-bottom: 8px;
  padding: 8px;
  font-size: 13px;
}
.uc-subtab-toolbar {
  border-bottom: 1px solid var(--color-border);
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
  padding-bottom: 8px;
  display: flex;
}
.uc-subtab-left {
  align-items: center;
  gap: 10px;
  display: flex;
}
.uc-search-wrapper {
  width: 220px;
  position: relative;
}
.uc-search-wrapper input {
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  width: 100%;
  color: var(--color-text);
  border-radius: 6px;
  padding: 6px 10px 6px 30px;
  font-size: 13px;
}
.uc-search-wrapper input:focus {
  border-color: var(--color-primary);
  outline: none;
}
.uc-search-icon {
  color: var(--color-text-muted);
  pointer-events: none;
  position: absolute;
  top: 50%;
  left: 10px;
  transform: translateY(-50%);
}
.uc-subtab-btn {
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
  cursor: pointer;
  background: none;
  border-radius: 6px;
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 500;
}
.uc-subtab-btn.is-active {
  background: var(--color-primary-bg);
  border-color: var(--color-primary);
  color: var(--color-primary);
}
.uc-sort-select {
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text);
  cursor: pointer;
  border-radius: 6px;
  padding: 5px 8px;
  font-size: 13px;
}
.uc-popularity-bars {
  align-items: flex-end;
  gap: 2px;
  width: 18px;
  height: 12px;
  display: inline-flex;
}
.uc-popularity-bar {
  background: var(--color-border);
  border-radius: 1px;
  width: 3px;
}
.uc-popularity-bar.is-active {
  background: var(--color-primary);
}
.uc-metadata-sidebar-section {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  flex-direction: column;
  gap: 16px;
  padding: 16px;
  display: flex;
}
.uc-sidebar-block {
  flex-direction: column;
  gap: 8px;
  display: flex;
}
.uc-sidebar-block h4 {
  color: var(--color-text);
  margin: 0;
  font-size: 13px;
  font-weight: 600;
}
.uc-sidebar-owner-row {
  color: var(--color-text-muted);
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  display: flex;
}
.uc-sidebar-owner-input {
  border: 1px solid var(--color-primary);
  background: var(--color-surface);
  width: 100%;
  color: var(--color-text);
  border-radius: 4px;
  padding: 4px 6px;
  font-size: 12.5px;
}
.uc-tags-list {
  flex-wrap: wrap;
  gap: 6px;
  display: flex;
}
.uc-tag-badge {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  color: var(--color-text);
  border-radius: 4px;
  align-items: center;
  gap: 4px;
  padding: 2px 6px;
  font-size: 11px;
  display: inline-flex;
}
.uc-tag-badge button {
  cursor: pointer;
  color: var(--color-text-subtle);
  background: none;
  border: none;
  padding: 0;
  display: inline-flex;
}
.uc-tag-badge button:hover {
  color: var(--color-danger);
}
.uc-tag-add-input {
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text);
  border-radius: 4px;
  width: 100px;
  padding: 3px 6px;
  font-size: 11px;
}
.uc-policies-list {
  flex-direction: column;
  gap: 6px;
  display: flex;
}
.uc-policy-badge {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  color: var(--color-text);
  border-radius: 6px;
  justify-content: space-between;
  align-items: center;
  padding: 6px 8px;
  font-size: 12px;
  display: flex;
}
.uc-policy-badge button {
  cursor: pointer;
  color: var(--color-text-subtle);
  background: none;
  border: none;
}
.uc-policy-badge button:hover {
  color: var(--color-danger);
}
.page-header, .db-page-header, .swh-view-header, .page-section > .page-header {
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  display: flex;
}
.page-title, .db-page-title, .swh-view-title h1 {
  color: var(--color-text);
  margin: 0;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.15;
}
.page-subtitle {
  color: var(--color-text-muted);
  margin: 4px 0 0;
  font-size: .875rem;
}
.quick-connect-scroll-row {
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
  scrollbar-gutter: stable;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  margin-bottom: 12px;
  padding-top: 2px;
  padding-bottom: 6px;
  transition: scrollbar-color .2s;
  display: flex;
  overflow-x: auto;
}
.quick-connect-scroll-row::-webkit-scrollbar {
  height: 5px;
}
.quick-connect-scroll-row::-webkit-scrollbar-track {
  background: none;
}
.quick-connect-scroll-row::-webkit-scrollbar-thumb {
  background: none;
  border-radius: 4px;
  transition: background .2s;
}
.quick-connect-scroll-row:hover {
  scrollbar-color: #00000040 transparent;
}
.quick-connect-scroll-row:hover::-webkit-scrollbar-thumb {
  background: #00000040;
}
.flex {
  display: flex !important;
}
.inline-flex {
  display: inline-flex !important;
}
.items-center {
  align-items: center !important;
}
.items-start {
  align-items: flex-start !important;
}
.items-end {
  align-items: flex-end !important;
}
.justify-between {
  justify-content: space-between !important;
}
.justify-center {
  justify-content: center !important;
}
.justify-end {
  justify-content: flex-end !important;
}
.flex-col {
  flex-direction: column !important;
}
.flex-row {
  flex-direction: row !important;
}
.flex-wrap {
  flex-wrap: wrap !important;
}
.flex-1 {
  flex: 1 !important;
}
.gap-1 {
  gap: 4px !important;
}
.gap-2 {
  gap: 8px !important;
}
.gap-3 {
  gap: 12px !important;
}
.gap-4 {
  gap: 16px !important;
}
@keyframes slideInRight {
  from {
    opacity: .7;
    transform: translateX(100%);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}
:root {
  --font-weight-signature: 510;
  --font-weight-emphasis: 560;
  --font-weight-strong: 650;
  --icon-sm: 12px;
  --icon-md: 14px;
  --icon-lg: 16px;
  --color-indigo-brand: #5e6ad2;
  --color-indigo-brand-hover: #4e5ac0;
  --color-indigo-accent: #7170ff;
  --color-indigo-focus-ring: #5e6ad2b3;
  --color-indigo-text-soft: #bcc3ffeb;
  --color-indigo-a14: #5e6ad224;
  --color-indigo-a24: #5e6ad23d;
  --color-indigo-a55: #5e6ad28c;
  --color-canvas: #0a0a0d;
  --color-text-primary: #f7f8f8;
  --color-text-secondary: #d0d6e0;
  --color-text-tertiary: #8a8f98;
  --color-text-quaternary: #82828a;
  --color-text-on-accent: #fff;
  --color-overlay-1: #ffffff0a;
  --color-overlay-2: #ffffff14;
  --color-status-warning: #e8a838;
  --color-danger-text: #f07070;
  --color-success-text-a94: #50d296f0;
  --color-footprint-trail: #e8c47a;
  --color-footprint-trail-indigo: #c8d2ff;
  --topology-v2-panel-surface: #17171c;
  --topology-v2-panel-border: #ffffff14;
  --topology-v2-panel-divider: #ffffff0f;
  --topology-v2-panel-shadow: 0 8px 32px #00000073;
  --topology-v2-panel-radius: 8px;
  --topology-v2-panel-row-radius: 6px;
  --topology-v2-panel-row-hover: #ffffff0f;
  --topology-v2-panel-text-primary: #ececf0;
  --topology-v2-panel-text-secondary: #a3a3ac;
  --topology-v2-panel-text-tertiary: #868690;
  --topology-v2-panel-text-quaternary: #82828a;
  --motion-fast: .12s;
  --motion-base: .22s;
  --motion-ease: cubic-bezier(.16, 1, .3, 1);
  --topology-motion-ease-out: cubic-bezier(.16, 1, .3, 1);
  --radius-chip: 6px;
  --radius-micro: 4px;
  --radius-card: 8px;
  --topology-v2-node-fill-project: #1c1c22;
  --topology-v2-node-fill-domain: #191920;
  --topology-v2-node-fill-capability: #17171d;
  --topology-v2-node-fill-element: #15151a;
  --topology-v2-ink-depth-leaf: #7a7a86;
  --topology-v2-ink-depth-mid: #80808c;
  --topology-v2-ink-depth-top: #8a8a96;
  --topology-v2-node-stroke-project: #9898a3;
  --topology-v2-node-stroke-domain: var(--topology-v2-ink-depth-top);
  --topology-v2-node-stroke-capability: var(--topology-v2-ink-depth-mid);
  --topology-v2-node-stroke-element: var(--topology-v2-ink-depth-leaf);
  --topology-v2-node-fill-dim: #1e1e24;
  --topology-v2-node-stroke-dim: #6a6a74;
  --topology-v2-spotlight-rest-alpha: .65;
  --topology-v2-spotlight-ring-speed: .012;
  --topology-v2-node-fill-stale: #141418;
  --topology-v2-node-stroke-stale: #454549;
  --topology-v2-node-hole-fill: #0c0c10;
  --topology-v2-indigo: var(--color-indigo-brand);
  --topology-v2-indigo-bright: #8890e0;
  --topology-v2-amber-hub: #d4b478;
  --topology-v2-recent-change: #3fbfae;
  --topology-v2-numeral-shadow: #08080a;
  --topology-v2-numeral-face: #8c8c94;
  --topology-v2-cluster-chip-border-rest: #5c5c65;
  --topology-v2-cluster-chip-ink-rest: #5f5f65;
  --topology-v2-node-sheen-tint: #232329;
  --topology-v2-node-sheen-blend: .6;
  --topology-v2-project-hairline-inner: #d4b47859;
  --topology-v2-project-pin-tick: #d4b47880;
  --topology-v2-selection-ring-indigo: var(--topology-v2-indigo-bright);
  --topology-v2-selection-ring-hairline: #5e6ad273;
  --topology-v2-hover-ring: var(--color-indigo-a55);
  --topology-v2-hover-shimmer-seg: .16;
  --topology-v2-hover-shimmer-period-ms: 2400;
  --topology-v2-edge-contains: var(--topology-v2-ink-depth-mid);
  --topology-v2-edge-contains-l0: var(--topology-v2-ink-depth-top);
  --topology-v2-edge-contains-l2: var(--topology-v2-ink-depth-leaf);
  --topology-v2-edge-passthrough-alpha: .3;
  --topology-v2-node-min-separation-ratio: 1.35;
  --topology-v2-radius-magnitude-k: .45;
  --topology-v2-edge-selected: #c8d2ffa8;
  --topology-v2-expanded-cohort: #929cc2b8;
  --topology-v2-dust-parallax-min: .15;
  --topology-v2-dust-parallax-max: .45;
  --topology-v2-canvas-bg-parallax: .82;
  --topology-v2-edge-depends: #666685;
  --topology-v2-edge-dim: #1e1e22;
  --topology-v2-hull-stroke: #3a3a42;
  --topology-v2-label-project: #d4b478;
  --topology-v2-label-domain: #b8b8c1;
  --topology-v2-label-capability: #84848c;
  --topology-v2-label-element: #6a6a73;
  --topology-v2-label-max-width: 168;
  --topology-v2-canvas-bg-near: #0a0a0d;
  --topology-v2-canvas-bg-far: #050507;
  --topology-v2-grid-minor: #0e0e13;
  --topology-v2-grid-major: #121218;
  --topology-v2-vignette-base-alpha: .32;
  --topology-v2-vignette-far-alpha: .18;
  --topology-v2-dome-ring: #43434f;
  --canvas-bg-ink-max: .08;
  --canvas-bg-particle-rgb: 150, 165, 220;
  --topology-v2-radius-project: 30;
  --topology-v2-radius-domain: 17;
  --topology-v2-radius-capability: 11;
  --topology-v2-radius-element: 7;
  --topology-v2-layout-ring-domain: 250;
  --topology-v2-layout-ring-capability: 145;
  --topology-v2-layout-ring-element: 90;
  --topology-v2-realm-fill-radius-1: 130;
  --topology-v2-realm-fill-radius-2: 190;
  --topology-v2-realm-fill-radius-3: 250;
  --topology-v2-edge-bow-contains: 70;
  --topology-v2-edge-bow-depends: 92;
  --topology-v2-edge-blend-contains: .46;
  --topology-v2-edge-blend-depends: .62;
  --topology-v2-star-count: 4;
  --topology-v2-dust-area-per-point: 5200;
  --topology-v2-camera-spring-angfreq-interactive: 15;
  --topology-v2-camera-spring-angfreq-transition: 4.7;
  --topology-v2-camera-damping-default: 1;
  --topology-v2-camera-damping-flick: .82;
  --topology-v2-camera-momentum-decay: .998;
  --topology-v2-camera-release-velocity-window-ms: 80;
  --topology-v2-camera-flick-min-speed: .05;
  --topology-v2-camera-scale-min: .24;
  --topology-v2-camera-scale-max: 2.6;
  --topology-v2-camera-small-graph-scale-max: 1.3;
  --topology-v2-camera-max-zoom-ratio: 3.2;
  --topology-v2-camera-min-zoom-ratio: .5;
  --topology-v2-camera-focus-pan-margin: 180;
  --topology-v2-camera-pan-leash: 0;
  --topology-v2-altitude-far-high-ratio: .92;
  --topology-v2-altitude-far-low-ratio: .62;
  --topology-v2-overview-entry-ratio: .95;
  --topology-v2-focus-fit-max-scale: 1.9;
  --topology-v2-focus-bbox-margin: 1.15;
  --topology-v2-focus-max-zoom-ratio: 1.8;
  --topology-v2-hysteresis-px: 7;
  --topology-v2-emphasis-rise-tau: .09;
  --topology-v2-emphasis-decay-tau: .15;
  --topology-v2-focus-dim-tau: .16;
  --topology-v2-cluster-reveal-tau: .17;
  --topology-v2-ripple-stagger-ms: 55;
  --topology-v2-breathe-amplitude: .04;
  --topology-v2-breathe-freq-rad: 1.15;
  --topology-v2-pulse-duration-ms: 420;
  --topology-v2-select-pulse-duration-ms: 180;
  --topology-v2-tip-fade-ms: 120;
  --topology-v2-edge-pulse-speed: .075;
  --topology-v2-select-pulse-scale-delta: .28;
  --topology-v2-node-release-settle-ms: 900;
  --topology-v2-node-home-spring-angfreq: 7.5;
  --topology-v2-ego-reveal-rise-tau: .22;
  --topology-v2-ego-reveal-decay-tau: .12;
  --topology-v2-ripple-stagger-max-ms: 180;
  --topology-v2-edge-pulse-speed-ego: .2;
  --topology-v2-drag-tug-1hop: .45;
  --topology-v2-drag-tug-2hop: .15;
  --topology-v2-drag-tug-radius: 600;
  --topology-v2-safe-inset-left: 0;
  --topology-v2-safe-inset-right: 0;
  --topology-v2-safe-inset-top: 50;
  --topology-v2-safe-inset-bottom: 20;
}
@property --tw-translate-x {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-translate-y {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-translate-z {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-rotate-x {
  syntax: "*";
  inherits: false
}
@property --tw-rotate-y {
  syntax: "*";
  inherits: false
}
@property --tw-rotate-z {
  syntax: "*";
  inherits: false
}
@property --tw-skew-x {
  syntax: "*";
  inherits: false
}
@property --tw-skew-y {
  syntax: "*";
  inherits: false
}
@property --tw-space-y-reverse {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-border-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}
@property --tw-leading {
  syntax: "*";
  inherits: false
}
@property --tw-font-weight {
  syntax: "*";
  inherits: false
}
@property --tw-tracking {
  syntax: "*";
  inherits: false
}
@property --tw-ordinal {
  syntax: "*";
  inherits: false
}
@property --tw-slashed-zero {
  syntax: "*";
  inherits: false
}
@property --tw-numeric-figure {
  syntax: "*";
  inherits: false
}
@property --tw-numeric-spacing {
  syntax: "*";
  inherits: false
}
@property --tw-numeric-fraction {
  syntax: "*";
  inherits: false
}
@property --tw-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-shadow-color {
  syntax: "*";
  inherits: false
}
@property --tw-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-inset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-inset-shadow-color {
  syntax: "*";
  inherits: false
}
@property --tw-inset-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-ring-color {
  syntax: "*";
  inherits: false
}
@property --tw-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-inset-ring-color {
  syntax: "*";
  inherits: false
}
@property --tw-inset-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-ring-inset {
  syntax: "*";
  inherits: false
}
@property --tw-ring-offset-width {
  syntax: "<length>";
  inherits: false;
  initial-value: 0;
}
@property --tw-ring-offset-color {
  syntax: "*";
  inherits: false;
  initial-value: #fff;
}
@property --tw-ring-offset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-outline-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}
@property --tw-blur {
  syntax: "*";
  inherits: false
}
@property --tw-brightness {
  syntax: "*";
  inherits: false
}
@property --tw-contrast {
  syntax: "*";
  inherits: false
}
@property --tw-grayscale {
  syntax: "*";
  inherits: false
}
@property --tw-hue-rotate {
  syntax: "*";
  inherits: false
}
@property --tw-invert {
  syntax: "*";
  inherits: false
}
@property --tw-opacity {
  syntax: "*";
  inherits: false
}
@property --tw-saturate {
  syntax: "*";
  inherits: false
}
@property --tw-sepia {
  syntax: "*";
  inherits: false
}
@property --tw-drop-shadow {
  syntax: "*";
  inherits: false
}
@property --tw-drop-shadow-color {
  syntax: "*";
  inherits: false
}
@property --tw-drop-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-drop-shadow-size {
  syntax: "*";
  inherits: false
}
@property --tw-backdrop-blur {
  syntax: "*";
  inherits: false
}
@property --tw-backdrop-brightness {
  syntax: "*";
  inherits: false
}
@property --tw-backdrop-contrast {
  syntax: "*";
  inherits: false
}
@property --tw-backdrop-grayscale {
  syntax: "*";
  inherits: false
}
@property --tw-backdrop-hue-rotate {
  syntax: "*";
  inherits: false
}
@property --tw-backdrop-invert {
  syntax: "*";
  inherits: false
}
@property --tw-backdrop-opacity {
  syntax: "*";
  inherits: false
}
@property --tw-backdrop-saturate {
  syntax: "*";
  inherits: false
}
@property --tw-backdrop-sepia {
  syntax: "*";
  inherits: false
}
@property --tw-duration {
  syntax: "*";
  inherits: false
}
@property --tw-ease {
  syntax: "*";
  inherits: false
}

/* ═══════════════════════════════════════════════════════════════════════════
   SHARED UTILITY CLASSES (used by Jobs and other new pages)
   ═══════════════════════════════════════════════════════════════════════════ */

/* Generic .btn base */
.btn {
  display: inline-flex; align-items: center; gap: 0.375rem;
  padding: 0.4rem 0.875rem; border-radius: var(--radius);
  font-size: 0.8125rem; font-weight: 500; font-family: var(--font-family);
  cursor: pointer; border: none; white-space: nowrap;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

.btn.btn-primary { background: var(--color-primary); color: #fff; }
.btn.btn-primary:hover:not(:disabled) { background: var(--color-primary-hover); }

.btn.btn-secondary {
  background: var(--color-surface); color: var(--color-text);
  border: 1px solid var(--color-border);
}
.btn.btn-secondary:hover:not(:disabled) {
  border-color: var(--color-primary); color: var(--color-primary); background: var(--color-primary-bg);
}

.btn.btn-danger { background: var(--color-danger); color: #fff; }
.btn.btn-danger:hover:not(:disabled) { opacity: 0.88; }

.btn.btn-sm { padding: 0.25rem 0.6rem; font-size: 0.75rem; }

/* Icon-only button */
.btn-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: var(--radius);
  background: transparent; border: 1px solid transparent;
  color: var(--color-text-muted); cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  flex-shrink: 0;
}
.btn-icon:hover { background: var(--color-surface-hover); border-color: var(--color-border); color: var(--color-text); }
.btn-icon:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-icon.btn-icon-muted { color: var(--color-text-subtle); }
.btn-icon.btn-icon-danger:hover { color: var(--color-danger); border-color: var(--color-danger-bg); background: var(--color-danger-bg); }

/* Page layout */
.page-section { padding: 0.875rem 1.5rem 1.25rem; display: flex; flex-direction: column; gap: 0.5rem; }
.page-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.page-title { font-size: 1.25rem; font-weight: 600; margin-bottom: 0.15rem; }
.page-subtitle { font-size: 0.875rem; color: var(--color-text-muted); }

/* Search bar */
.search-bar-wrapper {
  display: flex; align-items: center; gap: 8px;
  padding: 0.5rem 0.85rem; border-radius: var(--radius);
  background: var(--color-surface); border: 1px solid var(--color-border);
  max-width: 320px;
}
.search-bar-wrapper:focus-within { border-color: var(--color-primary); }
.search-icon { color: var(--color-text-muted); flex-shrink: 0; }
.search-input {
  background: transparent; border: none; outline: none;
  color: var(--color-text); font-size: 0.875rem; width: 100%; font-family: var(--font-family);
}
.search-input::placeholder { color: var(--color-text-subtle); }

/* Admin table */
.admin-table-wrap {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); overflow: hidden;
}
.admin-table { width: 100%; border-collapse: collapse; font-size: 0.8125rem; }
.admin-table th {
  padding: 0.5rem 0.875rem; text-align: left; font-size: 0.7rem;
  font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--color-text-muted); background: var(--color-bg);
  border-bottom: 1px solid var(--color-border); white-space: nowrap;
}
.admin-table td { padding: 0.6rem 0.875rem; border-bottom: 1px solid var(--color-border); color: var(--color-text); }
.admin-table tbody tr:last-child td { border-bottom: none; }
.table-row-clickable { cursor: pointer; }
.table-row-clickable:hover td { background: var(--color-surface-hover); }
.table-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 3rem; color: var(--color-text-muted); font-size: 0.875rem; gap: 6px; text-align: center;
}
.table-empty.error { color: var(--color-danger); }

/* Badge count */
.badge-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 24px; padding: 2px 6px; border-radius: 4px;
  font-size: 0.75rem; font-weight: 600; background: var(--color-primary-bg); color: var(--color-primary);
}

/* Row actions */
.row-actions { display: flex; align-items: center; gap: 4px; justify-content: flex-end; }
.runs-tbl .row-actions .btn-icon { width: 22px; height: 22px; }

/* Form fields (shared) */
.form-field { display: flex; flex-direction: column; gap: 4px; }
.form-label { font-size: 0.75rem; font-weight: 600; color: var(--color-text-muted); letter-spacing: 0.01em; }
.form-input {
  width: 100%; padding: 0.4375rem 0.75rem;
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius); color: var(--color-text);
  font-size: 0.8125rem; font-family: var(--font-family); outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.form-input:focus { border-color: var(--color-primary); box-shadow: 0 0 0 2px rgba(27,110,243,0.14); }
.form-input::placeholder { color: var(--color-text-subtle); }
select.form-input { cursor: pointer; }
textarea.form-input { resize: vertical; min-height: 72px; }
.form-hint { font-size: 0.72rem; color: var(--color-text-subtle); margin-top: 2px; }

/* Radio group */
.radio-group { display: flex; gap: 12px; flex-wrap: wrap; }
.radio-option { display: flex; align-items: center; gap: 6px; font-size: 0.8125rem; cursor: pointer; }
.radio-option input[type="radio"] { accent-color: var(--color-primary); }

/* Modal */
.modal-backdrop {
  position: fixed; inset: 0; background: rgba(0,0,0,0.4);
  display: flex; align-items: center; justify-content: center; z-index: 50;
  backdrop-filter: blur(2px);
}
.modal-panel {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-md);
  display: flex; flex-direction: column; max-height: 90vh; overflow: hidden;
  animation: fadeIn 0.15s ease-out;
}
.modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1rem 1.25rem; border-bottom: 1px solid var(--color-border);
}
.modal-title { font-size: 1rem; font-weight: 600; }
.modal-body { padding: 1.25rem; display: flex; flex-direction: column; gap: 1rem; overflow-y: auto; }
.modal-footer { display: flex; justify-content: flex-end; gap: 8px; padding-top: 0.5rem; }

.jobs-confirm-dialog {
  width: min(48rem, calc(100vw - 2rem));
  max-width: calc(100vw - 2rem);
  border: none;
  border-radius: 1.15rem;
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.18);
}

.jobs-confirm-dialog-close-row {
  display: flex;
  justify-content: flex-end;
  padding: 1rem 1rem 0 1rem;
}

.jobs-confirm-dialog-close {
  width: 32px;
  height: 32px;
}

.jobs-confirm-dialog-body {
  padding: 0.25rem 1.75rem 1.25rem 1.75rem;
}

.jobs-confirm-dialog-title-row {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}

.jobs-confirm-dialog-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-danger);
  flex-shrink: 0;
}

.jobs-confirm-dialog-title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--color-text);
}

.jobs-confirm-dialog-message {
  margin: 1.25rem 0 0 0;
  font-size: 0.98rem;
  line-height: 1.6;
  color: var(--color-text);
}

.jobs-confirm-dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.65rem;
  padding: 0 1.75rem 1.6rem 1.75rem;
}

/* ═══════════════════════════════════════════════════════════════════════════
   JOB DETAIL SHELL  (unified Tasks + Runs page)
   ═══════════════════════════════════════════════════════════════════════════ */

/* Full-bleed shell */
.job-detail-shell {
  display: flex; flex-direction: column; height: 100%; overflow: hidden;
}
.page-content:has(.job-detail-shell) {
  padding: 0; max-width: 100%; flex: 1; display: flex; flex-direction: column;
}

/* Jobs/Runs list pages: remove outer page-content padding, manage internally */
.page-content:has(.jobs-list-page) {
  padding: 0; max-width: 100%;
}

/* Breadcrumb */
.jd-breadcrumb {
  display: flex; align-items: center; gap: 6px;
  padding: 0.5rem 1.5rem 0;
  font-size: 0.8rem;
}
.jd-bc-link {
  background: none; border: none; cursor: pointer; color: var(--color-primary);
  font-size: 0.8rem; font-family: var(--font-family); padding: 0;
}
.jd-bc-link:hover { text-decoration: underline; }
.jd-bc-current { color: var(--color-text-muted); }

/* Title bar */
.jd-titlebar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.5rem 1.5rem 0; gap: 12px; flex-wrap: wrap;
}
.jd-titlebar-left { display: flex; align-items: center; gap: 8px; min-width: 0; }
.jd-title-icon {
  color: var(--color-text-muted); display: flex; align-items: center;
  flex-shrink: 0;
}
.jd-title {
  font-size: 1.2rem; font-weight: 700; color: var(--color-text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.jd-title-edit-btn {
  background: none; border: none; cursor: pointer; color: var(--color-text-subtle);
  display: flex; align-items: center; padding: 3px; border-radius: 4px;
  transition: color 0.15s, background 0.15s;
}
.jd-title-edit-btn:hover { color: var(--color-text); background: var(--color-surface-hover); }
.jd-titlebar-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

/* More button + dropdown */
.jd-more-btn { width: 32px; height: 32px; padding: 0; justify-content: center; }
.jd-dropdown {
  position: absolute; right: 0; top: calc(100% + 4px); z-index: 30;
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-md);
  min-width: 160px; overflow: hidden;
  animation: fadeIn 0.12s ease-out;
}
.jd-dropdown-item {
  display: flex; align-items: center; gap: 8px;
  padding: 0.5rem 0.875rem; font-size: 0.8125rem; font-family: var(--font-family);
  background: none; border: none; cursor: pointer; width: 100%; text-align: left;
  color: var(--color-text);
  transition: background 0.12s;
}
.jd-dropdown-item:hover { background: var(--color-surface-hover); }

/* Tabs (Tasks / Runs) */
.jd-tabs {
  display: flex; gap: 0; padding: 0 1.5rem;
  border-bottom: 2px solid var(--color-border);
  margin-top: 0.5rem;
}
.jd-tab {
  padding: 0.5rem 1rem; font-size: 0.875rem; font-weight: 500;
  background: none; border: none; cursor: pointer;
  color: var(--color-text-muted); font-family: var(--font-family);
  border-bottom: 2px solid transparent; margin-bottom: -2px;
  transition: color 0.15s, border-color 0.15s;
}
.jd-tab:hover { color: var(--color-text); }
.jd-tab-active { color: var(--color-primary); border-bottom-color: var(--color-primary); font-weight: 600; }

/* Tab content wrapper */
.jd-tab-content { flex: 1; overflow: hidden; display: flex; flex-direction: column; min-height: 0; }

/* Tasks tab: canvas shell */
.jd-tasks-shell { display: flex; flex-direction: column; flex: 1; overflow: hidden; min-height: 0; }

/* Shared shared toolbar */
.job-name-input {
  font-size: 1.1rem; font-weight: 600; background: var(--color-bg);
  border: 1px solid var(--color-primary); border-radius: var(--radius);
  padding: 0.2rem 0.5rem; outline: none; color: var(--color-text); font-family: var(--font-family);
  min-width: 240px;
}

.dag-toolbar {
  display: flex; align-items: center; gap: 12px;
  padding: 0.5rem 1.25rem; background: var(--color-bg);
  border-bottom: 1px solid var(--color-border); flex-shrink: 0;
}
.dag-toolbar-hint { font-size: 0.75rem; color: var(--color-text-subtle); }

/* ── Runs tab layout: main + sidebar ── */
.jd-runs-layout {
  display: flex; gap: 0; flex: 1; overflow: hidden;
}
.jd-runs-main {
  flex: 1; overflow-y: auto; padding: 1.25rem 1.5rem;
  display: flex; flex-direction: column; gap: 1rem; min-width: 0;
}
.jd-sidebar {
  width: 280px; flex-shrink: 0;
  border-left: 1px solid var(--color-border);
  overflow-y: auto; padding: 1rem;
  display: flex; flex-direction: column; gap: 0;
}

/* Sidebar sections */
.jd-sidebar-section {
  padding: 0.75rem 0; border-bottom: 1px solid var(--color-border);
  display: flex; flex-direction: column; gap: 6px;
}
.jd-sidebar-section:last-child { border-bottom: none; }
.jd-sidebar-title {
  font-size: 0.72rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.05em; color: var(--color-text-muted); margin-bottom: 4px;
}
.jd-sidebar-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; font-size: 0.8rem;
}
.jd-sidebar-key { color: var(--color-text-muted); flex-shrink: 0; }
.jd-sidebar-val { color: var(--color-text); text-align: right; font-size: 0.8rem; }
.jd-mono { font-family: monospace; }
.jd-sidebar-empty { font-size: 0.78rem; color: var(--color-text-subtle); }
.jd-sidebar-add-btn {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 0.78rem; font-family: var(--font-family);
  background: none; border: none; cursor: pointer;
  color: var(--color-primary); padding: 2px 0;
  transition: opacity 0.15s;
}
.jd-sidebar-add-btn:hover { opacity: 0.8; }

/* ── Status badge ── */
.jd-status-badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 8px; border-radius: 4px;
  font-size: 0.75rem; font-weight: 600; white-space: nowrap;
}

/* ── Run history chart ── */
.jd-chart-card {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); padding: 1rem 1.25rem;
}
.jd-chart-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 0.75rem;
}
.jd-chart-title { font-size: 0.8125rem; font-weight: 600; color: var(--color-text); }
.jd-chart-legend { display: flex; align-items: center; gap: 12px; }
.jd-legend-item { display: flex; align-items: center; gap: 4px; font-size: 0.72rem; color: var(--color-text-muted); }
.jd-legend-dot { width: 8px; height: 8px; border-radius: 2px; flex-shrink: 0; }

.jd-chart-wrap {
  overflow-x: auto; padding-bottom: 20px; position: relative;
}
.jd-chart-labels {
  position: absolute; bottom: 0; left: 0; height: 18px;
}
.jd-chart-label {
  position: absolute; font-size: 0.65rem; color: var(--color-text-subtle);
  white-space: nowrap; transform: translateX(-50%);
}

.jd-run-chart-shell {
  overflow-x: auto;
  padding-top: 2.25rem;
}

.jd-run-chart-body {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  min-width: fit-content;
}

.jd-run-chart-axis-title {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-size: 0.82rem;
  color: var(--color-text-muted);
  letter-spacing: 0.01em;
  padding-top: 0.35rem;
}

.jd-run-chart-main {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.jd-run-chart-top-labels {
  position: relative;
  height: 1.5rem;
  margin-left: 5.5rem;
}

.jd-run-chart-top-label {
  position: absolute;
  transform: translateX(-50%);
  font-size: 0.78rem;
  color: var(--color-text);
  white-space: nowrap;
}

.jd-run-chart-grid {
  position: relative;
  border-left: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  margin-left: 2.6rem;
}

.jd-run-chart-grid-line {
  position: absolute;
  left: 0;
  right: 0;
  border-top: 1px solid var(--color-border);
}

.jd-run-chart-grid-label {
  position: absolute;
  left: -2.45rem;
  top: -0.65rem;
  font-size: 0.76rem;
  color: var(--color-text-muted);
}

.jd-run-chart-bars {
  position: relative;
}

.jd-run-chart-bar-group {
  position: absolute;
  bottom: 0;
  display: flex;
  align-items: flex-end;
}

.jd-run-chart-bar {
  width: 100%;
  min-height: 18px;
  border-radius: 4px 4px 0 0;
}

.jd-run-chart-task-track {
  position: relative;
  height: 18px;
  border-top: 1px solid var(--color-border);
}

.jd-run-chart-task-matrix {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}
.jd-run-chart-task-cell {
  position: absolute;
  top: 3px;
  height: 18px;
  border-radius: 4px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   TASK CONFIG PANEL (right slide-in)
   ═══════════════════════════════════════════════════════════════════════════ */

.config-panel {
  width: 300px; flex-shrink: 0;
  background: var(--color-surface); border-left: 1px solid var(--color-border);
  display: flex; flex-direction: column;
  animation: slideIn 0.2s ease-out;
  overflow: hidden;
}
.config-panel-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.625rem 0.875rem; border-bottom: 1px solid var(--color-border);
}
.config-panel-title { font-size: 0.85rem; font-weight: 600; }
.config-panel-body { flex: 1; overflow-y: auto; padding: 0.75rem 0.875rem; display: flex; flex-direction: column; gap: 0.625rem; }
.config-panel-footer {
  display: flex; justify-content: flex-end; gap: 6px;
  padding: 0.625rem 0.875rem; border-top: 1px solid var(--color-border);
}

/* Dependency chip */
.dep-chip {
  display: inline-flex; align-items: center; padding: 2px 8px;
  border-radius: 3px; font-size: 0.75rem; font-weight: 500;
  background: var(--color-primary-bg); color: var(--color-primary);
  border: 1px solid rgba(27,110,243,0.2);
}

/* ═══════════════════════════════════════════════════════════════════════════
   RUN DETAIL PAGE
   ═══════════════════════════════════════════════════════════════════════════ */

/* Breadcrumb */
.run-breadcrumb { display: flex; align-items: center; gap: 6px; font-size: 0.8125rem; }
.run-bc-link { background: none; border: none; cursor: pointer; color: var(--color-primary); font-size: 0.8125rem; font-family: var(--font-family); padding: 0; }
.run-bc-link:hover { text-decoration: underline; }
.run-bc-sep { color: var(--color-text-muted); }
.run-bc-current { color: var(--color-text-muted); }

/* Title bar */
.run-titlebar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.run-title-icon { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; background: var(--color-bg); border: 1px solid var(--color-border); border-radius: 6px; flex-shrink: 0; }
.run-title { font-size: 1.1rem; font-weight: 600; }
.run-subtitle { font-size: 0.8125rem; color: var(--color-text-muted); }

/* Progress */
.run-progress-wrap { height: 6px; background: var(--color-border); border-radius: 3px; overflow: hidden; }
.run-progress-bar { height: 100%; border-radius: 3px; transition: width 0.4s ease; }
.run-progress-label { font-size: 0.75rem; color: var(--color-text-muted); margin-top: 4px; }

/* Tabs (Graph / List) */
.run-tabs {
  display: flex; gap: 0; border-bottom: 2px solid var(--color-border);
}
.run-tab {
  padding: 0.5rem 1.125rem; font-size: 0.8125rem; font-weight: 500;
  background: none; border: none; cursor: pointer;
  color: var(--color-text-muted); font-family: var(--font-family);
  border-bottom: 2px solid transparent; margin-bottom: -2px;
  transition: color 0.15s, border-color 0.15s;
}
.run-tab:hover { color: var(--color-text); }
.run-tab-active { color: var(--color-primary); border-bottom-color: var(--color-primary); font-weight: 600; }

/* Graph wrapper */
.run-graph-wrap {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

/* List wrapper */
.run-list-wrap { display: flex; flex-direction: column; gap: 6px; }

/* ── Run list row (Databricks-style with left accent bar) ── */
.run-list-row {
  position: relative;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.run-list-accent {
  position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
}
.run-list-header {
  display: flex; align-items: center; gap: 8px;
  padding: 0.625rem 0.875rem 0.625rem 1.25rem;
  min-height: 52px;
}
.run-list-header:hover { background: var(--color-surface-hover); }
.run-list-index {
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--color-bg); border: 1px solid var(--color-border);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.68rem; font-weight: 700; color: var(--color-text-muted);
  flex-shrink: 0;
}
.run-list-toggle { flex-shrink: 0; color: var(--color-text-muted); display: flex; align-items: center; }
.run-list-name { font-size: 0.875rem; font-weight: 600; color: var(--color-text); }
.run-list-meta { font-size: 0.72rem; color: var(--color-text-muted); }
.run-list-dur { font-size: 0.75rem; color: var(--color-text-muted); white-space: nowrap; margin-left: 4px; }
.run-list-body {
  padding: 1rem 1.25rem 1.25rem 1.5rem;
  border-top: 1px solid var(--color-border);
  background: var(--color-bg);
  animation: fadeIn 0.15s ease-out;
}

/* ═══════════════════════════════════════════════════════════════════════════
   TRACE LIST (JobEditPage › Traces tab)
   ═══════════════════════════════════════════════════════════════════════════ */

.trace-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 56px 24px;
  color: var(--color-text-muted);
  font-size: 0.88rem;
}
.trace-empty-icon { color: var(--color-text-subtle); margin-bottom: 4px; }
.trace-error-cell {
  font-size: 0.75rem;
  color: #C62828;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ═══════════════════════════════════════════════════════════════════════════
   TRACE DETAIL PAGE
   ═══════════════════════════════════════════════════════════════════════════ */

.trace-detail-shell { padding-bottom: 2rem; }

/* meta pills row */
.trace-detail-meta-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0 0 0.75rem 0;
  margin-top: -4px;
}
.trace-meta-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 20px;
  font-size: 0.75rem;
  color: var(--color-text-muted);
}
.trace-live-indicator {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  background: #E8F5E9;
  border: 1px solid #A5D6A7;
  border-radius: 20px;
  font-size: 0.75rem;
  color: #2E7D32;
  font-weight: 600;
}
.trace-live-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #4CAF50;
  animation: tracePulse 1.2s ease-in-out infinite;
}
@keyframes tracePulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.45; transform: scale(0.82); }
}

/* error banner */
.trace-error-banner {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px 14px;
  background: #FFEBEE;
  border: 1px solid #FFCDD2;
  border-radius: 6px;
  color: #C62828;
  font-size: 0.82rem;
  margin-bottom: 12px;
}

.trace-tab-body { padding: 0; min-height: 320px; }

/* ═══════════════════════════════════════════════════════════════════════════
   STEP TREE (Graph tab)
   ═══════════════════════════════════════════════════════════════════════════ */

.step-tree-container {
  border: 1px solid var(--color-border);
  border-radius: 6px;
  overflow: hidden;
  background: var(--color-bg);
}
.step-tree-row {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 7px 12px;
  cursor: pointer;
  border-bottom: 1px solid var(--color-border-light, #F3F4F6);
  transition: background 0.12s;
  border-left: 3px solid transparent;
}
.step-tree-row:last-child { border-bottom: none; }
.step-tree-row:hover { background: var(--color-surface-hover, #F8F9FA); }
.step-tree-row--deepest-fail { border-left-color: #EF5350; background: #FFF5F5; }
.step-tree-toggle {
  flex-shrink: 0;
  color: var(--color-text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
}
.step-tree-type-dot {
  width: 8px;
  height: 8px;
  flex-shrink: 0;
  border-radius: 50%;
}
.step-tree-name {
  flex: 1;
  font-size: 0.82rem;
  color: var(--color-text);
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.step-tree-type-label {
  font-size: 0.72rem;
  font-weight: 600;
  white-space: nowrap;
  flex-shrink: 0;
}
.step-tree-status {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 7px;
  border-radius: 4px;
  font-size: 0.72rem;
  font-weight: 600;
  white-space: nowrap;
  flex-shrink: 0;
}
.step-tree-dur {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  white-space: nowrap;
  min-width: 52px;
  text-align: right;
}

/* ═══════════════════════════════════════════════════════════════════════════
   TIMELINE (Gantt tab)
   ═══════════════════════════════════════════════════════════════════════════ */

.step-timeline-wrap {
  overflow-x: auto;
  padding-bottom: 0.5rem;
}
.step-timeline-chart {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  overflow: hidden;
  background: var(--color-bg);
}
.step-timeline-row {
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--color-border-light, #F3F4F6);
  cursor: pointer;
  transition: background 0.1s;
}
.step-timeline-row:last-child { border-bottom: none; }
.step-timeline-row:hover { background: var(--color-surface-hover, #F8F9FA); }
.step-timeline-label {
  flex-shrink: 0;
  font-size: 0.73rem;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 0 8px 0 10px;
  border-right: 1px solid var(--color-border);
}
.step-timeline-bar-area {
  flex-shrink: 0;
  position: relative;
  height: 100%;
  background: var(--color-surface);
}
.step-timeline-bar {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  height: 14px;
  border-radius: 3px;
  transition: opacity 0.15s;
}
.step-timeline-row:hover .step-timeline-bar { opacity: 1 !important; }
.step-timeline-dur {
  flex-shrink: 0;
  font-size: 0.73rem;
  color: var(--color-text-muted);
  padding: 0 10px;
  white-space: nowrap;
}
.step-timeline-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 10px 14px;
  border-top: 1px solid var(--color-border);
  background: var(--color-surface);
}
.step-timeline-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.72rem;
  color: var(--color-text-muted);
}
.step-timeline-legend-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════════════════════
   LIST TAB
   ═══════════════════════════════════════════════════════════════════════════ */

.step-list-row { cursor: pointer; }
.step-list-name {
  font-size: 0.82rem;
  color: var(--color-text);
  font-weight: 500;
}
.step-list-meta-row td { padding: 0 !important; }
.step-list-meta-json {
  margin: 0;
  border-radius: 0;
  border: none;
  border-top: 1px solid var(--color-border-light, #F3F4F6);
  background: var(--color-surface, #F9FAFB);
}

/* ═══════════════════════════════════════════════════════════════════════════
   STEP DETAIL PANEL (StepDetailPanel slide-out)
   ═══════════════════════════════════════════════════════════════════════════ */

.step-detail-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.38);
  z-index: 400;
  animation: fadeIn 0.15s ease-out;
}
.step-detail-panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(520px, 100vw);
  z-index: 401;
  background: var(--color-bg, #fff);
  box-shadow: -4px 0 24px rgba(0, 0, 0, 0.15);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: slideInRight 0.2s ease-out;
}
@keyframes slideInRight {
  from { transform: translateX(100%); }
  to   { transform: translateX(0); }
}
.step-detail-header {
  padding: 14px 16px 12px 16px;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface, #F9FAFB);
  flex-shrink: 0;
}
.step-detail-header-top {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.step-detail-type-chip {
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 0.7rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.03em;
  white-space: nowrap;
  flex-shrink: 0;
}
.step-detail-name {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--color-text);
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin: 0;
}
.step-detail-close {
  flex-shrink: 0;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-text-muted);
  padding: 4px;
  border-radius: 4px;
  display: flex;
  align-items: center;
}
.step-detail-close:hover { background: var(--color-surface-hover, #F3F4F6); color: var(--color-text); }
.step-detail-meta-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.step-detail-body {
  flex: 1;
  overflow-y: auto;
  padding: 0;
}
.step-detail-section {
  padding: 12px 16px;
  border-bottom: 1px solid var(--color-border-light, #F3F4F6);
}
.step-detail-section:last-child { border-bottom: none; }
.step-detail-section-title {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 0 8px 0;
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  user-select: none;
}
.step-detail-section-title:hover { color: var(--color-text); }
.step-detail-json {
  font-family: "JetBrains Mono", "Fira Code", "Consolas", monospace;
  font-size: 0.72rem;
  background: var(--color-surface, #F9FAFB);
  border: 1px solid var(--color-border);
  border-radius: 5px;
  padding: 10px 12px;
  overflow-x: auto;
  white-space: pre;
  margin: 0;
  color: var(--color-text);
}
.step-detail-error {
  background: #FFEBEE;
  border: 1px solid #FFCDD2;
  border-radius: 5px;
  padding: 10px 12px;
}
.step-detail-error-msg {
  color: #C62828;
  font-size: 0.8rem;
  line-height: 1.5;
  word-break: break-word;
}
.step-detail-col-list {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.step-detail-col-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 7px;
  background: var(--color-surface, #F3F4F6);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  font-size: 0.71rem;
}
.step-detail-col-name { font-weight: 600; color: var(--color-text); }
.step-detail-col-dtype { color: var(--color-text-muted); }
.step-detail-dataset-tabs {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.step-detail-dataset-tab {
  padding: 4px 10px;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  font-size: 0.75rem;
  cursor: pointer;
  background: var(--color-surface);
  color: var(--color-text-muted);
  transition: background 0.1s;
}
.step-detail-dataset-tab:hover { background: var(--color-surface-hover, #E9EBF0); }
.step-detail-dataset-tab.active {
  background: var(--color-primary, #1B6EF3);
  color: #fff;
  border-color: transparent;
}
.step-detail-sample-summary {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  margin-bottom: 8px;
}
.step-detail-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--color-border);
  border-radius: 5px;
}
.step-detail-data-table {
  border-collapse: collapse;
  font-size: 0.72rem;
  width: 100%;
  min-width: 300px;
}
.step-detail-data-table th {
  background: var(--color-surface, #F9FAFB);
  padding: 5px 10px;
  text-align: left;
  font-weight: 600;
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text-muted);
  white-space: nowrap;
}
.step-detail-data-table td {
  padding: 4px 10px;
  border-bottom: 1px solid var(--color-border-light, #F3F4F6);
  color: var(--color-text);
  white-space: nowrap;
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.step-detail-data-table tr:last-child td { border-bottom: none; }
.step-detail-pagination {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: flex-end;
  padding: 6px 0 0 0;
  font-size: 0.75rem;
  color: var(--color-text-muted);
}
.step-detail-stats {
  border-collapse: collapse;
  font-size: 0.72rem;
  width: 100%;
}
.step-detail-stats th {
  background: var(--color-surface, #F9FAFB);
  padding: 4px 8px;
  text-align: left;
  font-weight: 600;
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text-muted);
}
.step-detail-stats td {
  padding: 3px 8px;
  border-bottom: 1px solid var(--color-border-light, #F3F4F6);
  color: var(--color-text);
}
.step-detail-stats tr:last-child td { border-bottom: none; }

/* 
   DATABRICKS-STYLE PAGE SHELL  Jobs & Pipelines / Runs
    */

/* Page header */
.db-page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.25rem 0 0 0;
  margin-bottom: 0;
}
.db-page-title {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--color-text);
  margin: 0;
}

/* Top-level page tabs (Jobs & pipelines | Runs) */
.db-page-tabs {
  display: flex;
  align-items: flex-end;
  gap: 0;
  border-bottom: 2px solid var(--color-border);
  margin: 4px 0 0 0;
}
.db-page-tab {
  display: inline-flex;
  align-items: center;
  padding: 6px 16px;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--color-text-muted);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  cursor: pointer;
  transition: color 0.12s, border-color 0.12s;
  white-space: nowrap;
}
.db-page-tab:hover { color: var(--color-text); }
.db-page-tab--active {
  color: var(--color-primary, #1B6EF3);
  border-bottom-color: var(--color-primary, #1B6EF3);
  font-weight: 600;
}

/* Filter row */
.db-filter-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0 4px 0;
  flex-wrap: wrap;
}
.db-filter-chip {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border: 1px solid var(--color-border);
  border-radius: 20px;
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--color-text-muted);
  cursor: pointer;
  background: var(--color-surface);
  transition: background 0.1s, border-color 0.1s;
  white-space: nowrap;
  user-select: none;
}
.db-filter-chip:hover { background: var(--color-surface-hover, #F0F1F3); }
.db-filter-chip--active {
  background: var(--color-primary-bg, #E8F1FF);
  border-color: var(--color-primary, #1B6EF3);
  color: var(--color-primary, #1B6EF3);
  font-weight: 600;
}
.db-filter-select {
  padding: 5px 10px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  font-size: 0.78rem;
  background: var(--color-surface);
  color: var(--color-text);
  cursor: pointer;
  outline: none;
}
.db-filter-select:focus { border-color: var(--color-primary, #1B6EF3); }
.db-filter-date-label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.78rem;
  color: var(--color-text-muted);
}
.db-filter-date {
  padding: 4px 7px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  font-size: 0.77rem;
  background: var(--color-surface);
  color: var(--color-text);
  outline: none;
}
.db-filter-date:focus { border-color: var(--color-primary, #1B6EF3); }

/* Pagination */
.db-pagination {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  padding: 10px 0;
  font-size: 0.8rem;
  color: var(--color-text-muted);
}
.db-pagination-btn {
  padding: 4px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  color: var(--color-text-muted);
  font-size: 0.78rem;
  cursor: pointer;
  transition: background 0.1s;
}
.db-pagination-btn:hover:not(:disabled) { background: var(--color-surface-hover, #F0F1F3); color: var(--color-text); }
.db-pagination-btn:disabled { opacity: 0.4; cursor: default; }
.db-pagination-info { font-size: 0.78rem; }

/* Job name link style in table */
.db-job-name-link {
  font-size: 0.855rem;
  font-weight: 500;
  color: #5B8DEF;
}
.db-job-name-link:hover { text-decoration: underline; }

/* Generic table link — shared via DataTable component */
.runs-tbl .tbl-link {
  color: #5B8DEF;
  cursor: pointer;
}
.runs-tbl .tbl-link:hover { text-decoration: underline; }

/* Recent-run status dots */
.run-status-dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
}

/*
   RUNS OVERVIEW SECTION (bar chart + top errors)
    */

.db-runs-overview {
  display: flex;
  gap: 16px;
  padding: 4px 0 0 0;
  align-items: stretch;
}
/* Give chart area a minimum height so bars are prominent */
.runs-chart-area {
  min-height: 185px;
}
.db-runs-chart-wrap {
  flex: 1;
  min-width: 0;
  overflow-x: auto;
  background: none;
  border: none;
  border-radius: 0;
  padding: 4px 0 2px;
}
.db-runs-chart-legend {
  display: flex;
  gap: 14px;
  margin-top: 6px;
  font-size: 0.72rem;
  color: var(--color-text-muted);
}
.db-runs-chart-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

/* Top errors panel */
.db-top-errors {
  width: 300px;
  flex-shrink: 0;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  padding: 12px 14px;
}
.db-top-errors-title {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 10px;
}
.db-top-error-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
}
.db-top-error-label {
  flex: 1;
  font-size: 0.73rem;
  color: var(--color-text);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.db-top-error-bar-wrap {
  width: 70px;
  height: 8px;
  background: var(--color-border);
  border-radius: 3px;
  overflow: hidden;
  flex-shrink: 0;
}
.db-top-error-bar {
  height: 100%;
  background: #E53935;
  border-radius: 3px;
  min-width: 4px;
}
.db-top-error-count {
  font-size: 0.73rem;
  font-weight: 600;
  color: #C62828;
  width: 28px;
  text-align: right;
  flex-shrink: 0;
}

/* 
   STEP FLOW GRAPH (ReactFlow step DAG)
    */

.step-flow-node {
  width: 230px;
  min-height: 80px;
  background: var(--color-bg, #fff);
  border: 1px solid var(--color-border);
  border-top: 3px solid #43A047;
  border-radius: 5px;
  padding: 10px 12px 8px 12px;
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(0,0,0,0.07);
  position: relative;
  transition: box-shadow 0.15s, transform 0.1s;
}
.step-flow-node:hover {
  box-shadow: 0 3px 12px rgba(0,0,0,0.13);
  transform: translateY(-1px);
}
.step-flow-node--selected {
  box-shadow: 0 0 0 2px var(--color-primary, #1B6EF3), 0 3px 12px rgba(0,0,0,0.1);
}
.step-flow-status-dot {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #43A047;
}
.step-flow-name {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--color-text);
  margin: 0 18px 4px 0;   /* right margin to avoid dot overlap */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.step-flow-meta {
  font-size: 0.73rem;
  font-weight: 600;
  margin-bottom: 3px;
  display: flex;
  align-items: center;
  gap: 4px;
}
.step-flow-dur {
  font-weight: 400;
  color: var(--color-text-muted);
}
.step-flow-type {
  font-size: 0.69rem;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Databricks-style page shell */


/* ── Compact Runs Table (GlobalRunsPage) ─────────────────────────────── */
.runs-tbl { background: none; border: none !important; box-shadow: none !important; border-radius: 0; }
.runs-tbl .admin-table { font-size: 0.775rem; border-collapse: collapse; }
.runs-tbl .admin-table th {
  padding: 5px 10px 5px 10px;
  font-size: 0.68rem;
  background: transparent;
  border-bottom: 1px solid var(--color-border);
}
.runs-tbl .admin-table th:first-child { padding-left: 14px; }
.runs-tbl .admin-table td {
  padding: 7px 10px 7px 14px;
  line-height: 1.35;
  font-size: 0.775rem;
  vertical-align: middle;
}
.runs-tbl .admin-table tbody tr { position: relative; }
.runs-tbl .admin-table tbody tr td:first-child { padding-left: 14px; }
.runs-tbl .admin-table tbody tr:last-child td { border-bottom: none; }
.runs-tbl .admin-table tr:hover td { background: var(--color-surface-hover, rgba(0,0,0,0.03)); }


.run-time-link {
  color: #5B8DEF;
  font-size: 0.755rem;
  cursor: pointer;
  white-space: nowrap;
}
.run-time-link:hover { text-decoration: underline; }
.run-status-inline {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 0.755rem;
  font-weight: 500;
}
.run-job-name-cell {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.775rem;
  color: #5B8DEF;
  cursor: pointer;
  line-height: 1.2;
}
.run-job-name-cell:hover { text-decoration: underline; }
.run-error-cell {
  font-size: 0.73rem;
  color: var(--color-text-muted);
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.run-error-cell.has-error { color: #C62828; }
.runs-filter-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  padding: 4px 0 4px;
}
.runs-filter-row .search-bar-wrapper {
  padding: 4px 10px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   TASK GRAPH NODES  (used by TaskGraphCanvas.tsx / @xyflow/react)
   ═══════════════════════════════════════════════════════════════════════════ */

.db-node {
  background: var(--color-surface);
  border: 1.5px solid var(--color-border);
  border-radius: 8px;
  width: 240px;
  min-height: 90px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 12px 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  transition: box-shadow 0.15s, border-color 0.15s;
  position: relative;
  font-family: var(--font-family);
}
.db-node:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.12); }
.db-node-editor:hover { border-color: var(--color-primary); }
.db-node-selected { border-color: var(--color-primary) !important; box-shadow: 0 0 0 3px rgba(27,110,243,0.18); }

.db-node-header {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 6px;
}
.db-node-title {
  font-size: 0.8125rem; font-weight: 600; color: var(--color-text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1;
}
.db-node-header-icon { flex-shrink: 0; margin-top: 1px; }

.db-node-subtitle {
  display: flex; align-items: center; gap: 6px; min-height: 20px;
}

.db-node-meta-row {
  display: flex; align-items: center; gap: 4px;
}
.db-node-meta-text {
  font-size: 0.7rem; color: var(--color-text-subtle);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-family: monospace;
}

.db-node-actions {
  position: absolute; top: 6px; right: 6px;
  display: none; gap: 4px;
}
.db-node:hover .db-node-actions { display: flex; }

.db-node-btn {
  width: 22px; height: 22px; border-radius: 4px;
  background: var(--color-surface-hover); border: 1px solid var(--color-border);
  color: var(--color-text-muted); font-size: 13px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.12s, color 0.12s;
}
.db-node-btn:hover { background: var(--color-primary-bg); color: var(--color-primary); }

/* XY Flow handle overrides */
.db-handle {
  width: 10px; height: 10px;
  background: var(--color-primary);
  border: 2px solid var(--color-surface);
  border-radius: 50%;
}
.db-handle-target { left: -5px; }
.db-handle-source { right: -5px; }

/* ═══════════════════════════════════════════════════════════════════════════
   CONFIG PANEL  (used by TaskDrawer.tsx — slides in from right)
   ═══════════════════════════════════════════════════════════════════════════ */

.config-panel {
  display: flex; flex-direction: column; height: 100%;
  background: var(--color-surface);
  font-family: var(--font-family);
}
.config-panel-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.875rem 1rem 0.625rem;
  border-bottom: 1px solid var(--color-border);
  flex-shrink: 0;
}
.config-panel-title {
  font-size: 0.9rem; font-weight: 700; color: var(--color-text);
}
.config-panel-body {
  flex: 1; overflow-y: auto; padding: 1rem;
  display: flex; flex-direction: column; gap: 14px;
}
.config-panel-footer {
  display: flex; justify-content: flex-end; gap: 8px;
  padding: 0.75rem 1rem;
  border-top: 1px solid var(--color-border);
  flex-shrink: 0;
}

/* @keyframes pulse for running dots */
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.5; transform: scale(1.3); }
}
.maplibregl-map{font:12px/20px Helvetica Neue,Arial,Helvetica,sans-serif;overflow:hidden;position:relative;-webkit-tap-highlight-color:rgb(0 0 0/0)}.maplibregl-canvas{left:0;position:absolute;top:0}.maplibregl-map:fullscreen{height:100%;width:100%}.maplibregl-ctrl-group button.maplibregl-ctrl-compass{touch-action:none}.maplibregl-canvas-container.maplibregl-interactive,.maplibregl-ctrl-group button.maplibregl-ctrl-compass{cursor:grab;-webkit-user-select:none;-moz-user-select:none;user-select:none}.maplibregl-canvas-container.maplibregl-interactive.maplibregl-track-pointer{cursor:pointer}.maplibregl-canvas-container.maplibregl-interactive:active,.maplibregl-ctrl-group button.maplibregl-ctrl-compass:active{cursor:grabbing}.maplibregl-canvas-container.maplibregl-touch-zoom-rotate,.maplibregl-canvas-container.maplibregl-touch-zoom-rotate .maplibregl-canvas{touch-action:pan-x pan-y}.maplibregl-canvas-container.maplibregl-touch-drag-pan,.maplibregl-canvas-container.maplibregl-touch-drag-pan .maplibregl-canvas{touch-action:pinch-zoom}.maplibregl-canvas-container.maplibregl-touch-zoom-rotate.maplibregl-touch-drag-pan,.maplibregl-canvas-container.maplibregl-touch-zoom-rotate.maplibregl-touch-drag-pan .maplibregl-canvas{touch-action:none}.maplibregl-canvas-container.maplibregl-touch-drag-pan.maplibregl-cooperative-gestures,.maplibregl-canvas-container.maplibregl-touch-drag-pan.maplibregl-cooperative-gestures .maplibregl-canvas{touch-action:pan-x pan-y}.maplibregl-ctrl-bottom-left,.maplibregl-ctrl-bottom-right,.maplibregl-ctrl-top-left,.maplibregl-ctrl-top-right{pointer-events:none;position:absolute;z-index:2}.maplibregl-ctrl-top-left{left:0;top:0}.maplibregl-ctrl-top-right{right:0;top:0}.maplibregl-ctrl-bottom-left{bottom:0;left:0}.maplibregl-ctrl-bottom-right{bottom:0;right:0}.maplibregl-ctrl{clear:both;pointer-events:auto;transform:translate(0)}.maplibregl-ctrl-top-left .maplibregl-ctrl{float:left;margin:10px 0 0 10px}.maplibregl-ctrl-top-right .maplibregl-ctrl{float:right;margin:10px 10px 0 0}.maplibregl-ctrl-bottom-left .maplibregl-ctrl{float:left;margin:0 0 10px 10px}.maplibregl-ctrl-bottom-right .maplibregl-ctrl{float:right;margin:0 10px 10px 0}.maplibregl-ctrl-group{background:#fff;border-radius:4px}.maplibregl-ctrl-group:not(:empty){box-shadow:0 0 0 2px rgba(0,0,0,.1)}@media (forced-colors:active){.maplibregl-ctrl-group:not(:empty){box-shadow:0 0 0 2px ButtonText}}.maplibregl-ctrl-group button{background-color:transparent;border:0;box-sizing:border-box;cursor:pointer;display:block;height:29px;outline:none;padding:0;width:29px}.maplibregl-ctrl-group button+button{border-top:1px solid #ddd}.maplibregl-ctrl button .maplibregl-ctrl-icon{background-position:50%;background-repeat:no-repeat;display:block;height:100%;width:100%}@media (forced-colors:active){.maplibregl-ctrl-icon{background-color:transparent}.maplibregl-ctrl-group button+button{border-top:1px solid ButtonText}}.maplibregl-ctrl button::-moz-focus-inner{border:0;padding:0}.maplibregl-ctrl-attrib-button:focus,.maplibregl-ctrl-group button:focus{box-shadow:0 0 2px 2px #0096ff}.maplibregl-ctrl button:disabled{cursor:not-allowed}.maplibregl-ctrl button:disabled .maplibregl-ctrl-icon{opacity:.25}.maplibregl-ctrl button:not(:disabled):hover{background-color:rgb(0 0 0/5%)}.maplibregl-ctrl-group button:focus:focus-visible{box-shadow:0 0 2px 2px #0096ff}.maplibregl-ctrl-group button:focus:not(:focus-visible){box-shadow:none}.maplibregl-ctrl-group button:focus:first-child{border-radius:4px 4px 0 0}.maplibregl-ctrl-group button:focus:last-child{border-radius:0 0 4px 4px}.maplibregl-ctrl-group button:focus:only-child{border-radius:inherit}.maplibregl-ctrl button.maplibregl-ctrl-zoom-out .maplibregl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='29' height='29' fill='%23333' viewBox='0 0 29 29'%3E%3Cpath d='M10 13c-.75 0-1.5.75-1.5 1.5S9.25 16 10 16h9c.75 0 1.5-.75 1.5-1.5S19.75 13 19 13z'/%3E%3C/svg%3E")}.maplibregl-ctrl button.maplibregl-ctrl-zoom-in .maplibregl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='29' height='29' fill='%23333' viewBox='0 0 29 29'%3E%3Cpath d='M14.5 8.5c-.75 0-1.5.75-1.5 1.5v3h-3c-.75 0-1.5.75-1.5 1.5S9.25 16 10 16h3v3c0 .75.75 1.5 1.5 1.5S16 19.75 16 19v-3h3c.75 0 1.5-.75 1.5-1.5S19.75 13 19 13h-3v-3c0-.75-.75-1.5-1.5-1.5'/%3E%3C/svg%3E")}@media (forced-colors:active){.maplibregl-ctrl button.maplibregl-ctrl-zoom-out .maplibregl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='29' height='29' fill='%23fff' viewBox='0 0 29 29'%3E%3Cpath d='M10 13c-.75 0-1.5.75-1.5 1.5S9.25 16 10 16h9c.75 0 1.5-.75 1.5-1.5S19.75 13 19 13z'/%3E%3C/svg%3E")}.maplibregl-ctrl button.maplibregl-ctrl-zoom-in .maplibregl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='29' height='29' fill='%23fff' viewBox='0 0 29 29'%3E%3Cpath d='M14.5 8.5c-.75 0-1.5.75-1.5 1.5v3h-3c-.75 0-1.5.75-1.5 1.5S9.25 16 10 16h3v3c0 .75.75 1.5 1.5 1.5S16 19.75 16 19v-3h3c.75 0 1.5-.75 1.5-1.5S19.75 13 19 13h-3v-3c0-.75-.75-1.5-1.5-1.5'/%3E%3C/svg%3E")}}@media (forced-colors:active) and (prefers-color-scheme:light){.maplibregl-ctrl button.maplibregl-ctrl-zoom-out .maplibregl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='29' height='29' viewBox='0 0 29 29'%3E%3Cpath d='M10 13c-.75 0-1.5.75-1.5 1.5S9.25 16 10 16h9c.75 0 1.5-.75 1.5-1.5S19.75 13 19 13z'/%3E%3C/svg%3E")}.maplibregl-ctrl button.maplibregl-ctrl-zoom-in .maplibregl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='29' height='29' viewBox='0 0 29 29'%3E%3Cpath d='M14.5 8.5c-.75 0-1.5.75-1.5 1.5v3h-3c-.75 0-1.5.75-1.5 1.5S9.25 16 10 16h3v3c0 .75.75 1.5 1.5 1.5S16 19.75 16 19v-3h3c.75 0 1.5-.75 1.5-1.5S19.75 13 19 13h-3v-3c0-.75-.75-1.5-1.5-1.5'/%3E%3C/svg%3E")}}.maplibregl-ctrl button.maplibregl-ctrl-fullscreen .maplibregl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='29' height='29' fill='%23333' viewBox='0 0 29 29'%3E%3Cpath d='M24 16v5.5c0 1.75-.75 2.5-2.5 2.5H16v-1l3-1.5-4-5.5 1-1 5.5 4 1.5-3zM6 16l1.5 3 5.5-4 1 1-4 5.5 3 1.5v1H7.5C5.75 24 5 23.25 5 21.5V16zm7-11v1l-3 1.5 4 5.5-1 1-5.5-4L6 13H5V7.5C5 5.75 5.75 5 7.5 5zm11 2.5c0-1.75-.75-2.5-2.5-2.5H16v1l3 1.5-4 5.5 1 1 5.5-4 1.5 3h1z'/%3E%3C/svg%3E")}.maplibregl-ctrl button.maplibregl-ctrl-shrink .maplibregl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='29' height='29' viewBox='0 0 29 29'%3E%3Cpath d='M18.5 16c-1.75 0-2.5.75-2.5 2.5V24h1l1.5-3 5.5 4 1-1-4-5.5 3-1.5v-1zM13 18.5c0-1.75-.75-2.5-2.5-2.5H5v1l3 1.5L4 24l1 1 5.5-4 1.5 3h1zm3-8c0 1.75.75 2.5 2.5 2.5H24v-1l-3-1.5L25 5l-1-1-5.5 4L17 5h-1zM10.5 13c1.75 0 2.5-.75 2.5-2.5V5h-1l-1.5 3L5 4 4 5l4 5.5L5 12v1z'/%3E%3C/svg%3E")}@media (forced-colors:active){.maplibregl-ctrl button.maplibregl-ctrl-fullscreen .maplibregl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='29' height='29' fill='%23fff' viewBox='0 0 29 29'%3E%3Cpath d='M24 16v5.5c0 1.75-.75 2.5-2.5 2.5H16v-1l3-1.5-4-5.5 1-1 5.5 4 1.5-3zM6 16l1.5 3 5.5-4 1 1-4 5.5 3 1.5v1H7.5C5.75 24 5 23.25 5 21.5V16zm7-11v1l-3 1.5 4 5.5-1 1-5.5-4L6 13H5V7.5C5 5.75 5.75 5 7.5 5zm11 2.5c0-1.75-.75-2.5-2.5-2.5H16v1l3 1.5-4 5.5 1 1 5.5-4 1.5 3h1z'/%3E%3C/svg%3E")}.maplibregl-ctrl button.maplibregl-ctrl-shrink .maplibregl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='29' height='29' fill='%23fff' viewBox='0 0 29 29'%3E%3Cpath d='M18.5 16c-1.75 0-2.5.75-2.5 2.5V24h1l1.5-3 5.5 4 1-1-4-5.5 3-1.5v-1zM13 18.5c0-1.75-.75-2.5-2.5-2.5H5v1l3 1.5L4 24l1 1 5.5-4 1.5 3h1zm3-8c0 1.75.75 2.5 2.5 2.5H24v-1l-3-1.5L25 5l-1-1-5.5 4L17 5h-1zM10.5 13c1.75 0 2.5-.75 2.5-2.5V5h-1l-1.5 3L5 4 4 5l4 5.5L5 12v1z'/%3E%3C/svg%3E")}}@media (forced-colors:active) and (prefers-color-scheme:light){.maplibregl-ctrl button.maplibregl-ctrl-fullscreen .maplibregl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='29' height='29' viewBox='0 0 29 29'%3E%3Cpath d='M24 16v5.5c0 1.75-.75 2.5-2.5 2.5H16v-1l3-1.5-4-5.5 1-1 5.5 4 1.5-3zM6 16l1.5 3 5.5-4 1 1-4 5.5 3 1.5v1H7.5C5.75 24 5 23.25 5 21.5V16zm7-11v1l-3 1.5 4 5.5-1 1-5.5-4L6 13H5V7.5C5 5.75 5.75 5 7.5 5zm11 2.5c0-1.75-.75-2.5-2.5-2.5H16v1l3 1.5-4 5.5 1 1 5.5-4 1.5 3h1z'/%3E%3C/svg%3E")}.maplibregl-ctrl button.maplibregl-ctrl-shrink .maplibregl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='29' height='29' viewBox='0 0 29 29'%3E%3Cpath d='M18.5 16c-1.75 0-2.5.75-2.5 2.5V24h1l1.5-3 5.5 4 1-1-4-5.5 3-1.5v-1zM13 18.5c0-1.75-.75-2.5-2.5-2.5H5v1l3 1.5L4 24l1 1 5.5-4 1.5 3h1zm3-8c0 1.75.75 2.5 2.5 2.5H24v-1l-3-1.5L25 5l-1-1-5.5 4L17 5h-1zM10.5 13c1.75 0 2.5-.75 2.5-2.5V5h-1l-1.5 3L5 4 4 5l4 5.5L5 12v1z'/%3E%3C/svg%3E")}}.maplibregl-ctrl button.maplibregl-ctrl-compass .maplibregl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='29' height='29' fill='%23333' viewBox='0 0 29 29'%3E%3Cpath d='m10.5 14 4-8 4 8z'/%3E%3Cpath fill='%23ccc' d='m10.5 16 4 8 4-8z'/%3E%3C/svg%3E")}@media (forced-colors:active){.maplibregl-ctrl button.maplibregl-ctrl-compass .maplibregl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='29' height='29' fill='%23fff' viewBox='0 0 29 29'%3E%3Cpath d='m10.5 14 4-8 4 8z'/%3E%3Cpath fill='%23ccc' d='m10.5 16 4 8 4-8z'/%3E%3C/svg%3E")}}@media (forced-colors:active) and (prefers-color-scheme:light){.maplibregl-ctrl button.maplibregl-ctrl-compass .maplibregl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='29' height='29' viewBox='0 0 29 29'%3E%3Cpath d='m10.5 14 4-8 4 8z'/%3E%3Cpath fill='%23ccc' d='m10.5 16 4 8 4-8z'/%3E%3C/svg%3E")}}.maplibregl-ctrl button.maplibregl-ctrl-terrain .maplibregl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' fill='%23333' viewBox='0 0 22 22'%3E%3Cpath d='m1.754 13.406 4.453-4.851 3.09 3.09 3.281 3.277.969-.969-3.309-3.312 3.844-4.121 6.148 6.886h1.082v-.855l-7.207-8.07-4.84 5.187L6.169 6.57l-5.48 5.965v.871ZM.688 16.844h20.625v1.375H.688Zm0 0'/%3E%3C/svg%3E")}.maplibregl-ctrl button.maplibregl-ctrl-terrain-enabled .maplibregl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' fill='%2333b5e5' viewBox='0 0 22 22'%3E%3Cpath d='m1.754 13.406 4.453-4.851 3.09 3.09 3.281 3.277.969-.969-3.309-3.312 3.844-4.121 6.148 6.886h1.082v-.855l-7.207-8.07-4.84 5.187L6.169 6.57l-5.48 5.965v.871ZM.688 16.844h20.625v1.375H.688Zm0 0'/%3E%3C/svg%3E")}.maplibregl-ctrl button.maplibregl-ctrl-geolocate .maplibregl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='29' height='29' fill='%23333' viewBox='0 0 20 20'%3E%3Cpath d='M10 4C9 4 9 5 9 5v.1A5 5 0 0 0 5.1 9H5s-1 0-1 1 1 1 1 1h.1A5 5 0 0 0 9 14.9v.1s0 1 1 1 1-1 1-1v-.1a5 5 0 0 0 3.9-3.9h.1s1 0 1-1-1-1-1-1h-.1A5 5 0 0 0 11 5.1V5s0-1-1-1m0 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 1 0-7'/%3E%3Ccircle cx='10' cy='10' r='2'/%3E%3C/svg%3E")}.maplibregl-ctrl button.maplibregl-ctrl-geolocate:disabled .maplibregl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='29' height='29' fill='%23aaa' viewBox='0 0 20 20'%3E%3Cpath d='M10 4C9 4 9 5 9 5v.1A5 5 0 0 0 5.1 9H5s-1 0-1 1 1 1 1 1h.1A5 5 0 0 0 9 14.9v.1s0 1 1 1 1-1 1-1v-.1a5 5 0 0 0 3.9-3.9h.1s1 0 1-1-1-1-1-1h-.1A5 5 0 0 0 11 5.1V5s0-1-1-1m0 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 1 0-7'/%3E%3Ccircle cx='10' cy='10' r='2'/%3E%3Cpath fill='red' d='m14 5 1 1-9 9-1-1z'/%3E%3C/svg%3E")}.maplibregl-ctrl button.maplibregl-ctrl-geolocate.maplibregl-ctrl-geolocate-active .maplibregl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='29' height='29' fill='%2333b5e5' viewBox='0 0 20 20'%3E%3Cpath d='M10 4C9 4 9 5 9 5v.1A5 5 0 0 0 5.1 9H5s-1 0-1 1 1 1 1 1h.1A5 5 0 0 0 9 14.9v.1s0 1 1 1 1-1 1-1v-.1a5 5 0 0 0 3.9-3.9h.1s1 0 1-1-1-1-1-1h-.1A5 5 0 0 0 11 5.1V5s0-1-1-1m0 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 1 0-7'/%3E%3Ccircle cx='10' cy='10' r='2'/%3E%3C/svg%3E")}.maplibregl-ctrl button.maplibregl-ctrl-geolocate.maplibregl-ctrl-geolocate-active-error .maplibregl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='29' height='29' fill='%23e58978' viewBox='0 0 20 20'%3E%3Cpath d='M10 4C9 4 9 5 9 5v.1A5 5 0 0 0 5.1 9H5s-1 0-1 1 1 1 1 1h.1A5 5 0 0 0 9 14.9v.1s0 1 1 1 1-1 1-1v-.1a5 5 0 0 0 3.9-3.9h.1s1 0 1-1-1-1-1-1h-.1A5 5 0 0 0 11 5.1V5s0-1-1-1m0 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 1 0-7'/%3E%3Ccircle cx='10' cy='10' r='2'/%3E%3C/svg%3E")}.maplibregl-ctrl button.maplibregl-ctrl-geolocate.maplibregl-ctrl-geolocate-background .maplibregl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='29' height='29' fill='%2333b5e5' viewBox='0 0 20 20'%3E%3Cpath d='M10 4C9 4 9 5 9 5v.1A5 5 0 0 0 5.1 9H5s-1 0-1 1 1 1 1 1h.1A5 5 0 0 0 9 14.9v.1s0 1 1 1 1-1 1-1v-.1a5 5 0 0 0 3.9-3.9h.1s1 0 1-1-1-1-1-1h-.1A5 5 0 0 0 11 5.1V5s0-1-1-1m0 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 1 0-7'/%3E%3C/svg%3E")}.maplibregl-ctrl button.maplibregl-ctrl-geolocate.maplibregl-ctrl-geolocate-background-error .maplibregl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='29' height='29' fill='%23e54e33' viewBox='0 0 20 20'%3E%3Cpath d='M10 4C9 4 9 5 9 5v.1A5 5 0 0 0 5.1 9H5s-1 0-1 1 1 1 1 1h.1A5 5 0 0 0 9 14.9v.1s0 1 1 1 1-1 1-1v-.1a5 5 0 0 0 3.9-3.9h.1s1 0 1-1-1-1-1-1h-.1A5 5 0 0 0 11 5.1V5s0-1-1-1m0 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 1 0-7'/%3E%3C/svg%3E")}.maplibregl-ctrl button.maplibregl-ctrl-geolocate.maplibregl-ctrl-geolocate-waiting .maplibregl-ctrl-icon{animation:maplibregl-spin 2s linear infinite}@media (forced-colors:active){.maplibregl-ctrl button.maplibregl-ctrl-geolocate .maplibregl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='29' height='29' fill='%23fff' viewBox='0 0 20 20'%3E%3Cpath d='M10 4C9 4 9 5 9 5v.1A5 5 0 0 0 5.1 9H5s-1 0-1 1 1 1 1 1h.1A5 5 0 0 0 9 14.9v.1s0 1 1 1 1-1 1-1v-.1a5 5 0 0 0 3.9-3.9h.1s1 0 1-1-1-1-1-1h-.1A5 5 0 0 0 11 5.1V5s0-1-1-1m0 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 1 0-7'/%3E%3Ccircle cx='10' cy='10' r='2'/%3E%3C/svg%3E")}.maplibregl-ctrl button.maplibregl-ctrl-geolocate:disabled .maplibregl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='29' height='29' fill='%23999' viewBox='0 0 20 20'%3E%3Cpath d='M10 4C9 4 9 5 9 5v.1A5 5 0 0 0 5.1 9H5s-1 0-1 1 1 1 1 1h.1A5 5 0 0 0 9 14.9v.1s0 1 1 1 1-1 1-1v-.1a5 5 0 0 0 3.9-3.9h.1s1 0 1-1-1-1-1-1h-.1A5 5 0 0 0 11 5.1V5s0-1-1-1m0 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 1 0-7'/%3E%3Ccircle cx='10' cy='10' r='2'/%3E%3Cpath fill='red' d='m14 5 1 1-9 9-1-1z'/%3E%3C/svg%3E")}.maplibregl-ctrl button.maplibregl-ctrl-geolocate.maplibregl-ctrl-geolocate-active .maplibregl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='29' height='29' fill='%2333b5e5' viewBox='0 0 20 20'%3E%3Cpath d='M10 4C9 4 9 5 9 5v.1A5 5 0 0 0 5.1 9H5s-1 0-1 1 1 1 1 1h.1A5 5 0 0 0 9 14.9v.1s0 1 1 1 1-1 1-1v-.1a5 5 0 0 0 3.9-3.9h.1s1 0 1-1-1-1-1-1h-.1A5 5 0 0 0 11 5.1V5s0-1-1-1m0 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 1 0-7'/%3E%3Ccircle cx='10' cy='10' r='2'/%3E%3C/svg%3E")}.maplibregl-ctrl button.maplibregl-ctrl-geolocate.maplibregl-ctrl-geolocate-active-error .maplibregl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='29' height='29' fill='%23e58978' viewBox='0 0 20 20'%3E%3Cpath d='M10 4C9 4 9 5 9 5v.1A5 5 0 0 0 5.1 9H5s-1 0-1 1 1 1 1 1h.1A5 5 0 0 0 9 14.9v.1s0 1 1 1 1-1 1-1v-.1a5 5 0 0 0 3.9-3.9h.1s1 0 1-1-1-1-1-1h-.1A5 5 0 0 0 11 5.1V5s0-1-1-1m0 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 1 0-7'/%3E%3Ccircle cx='10' cy='10' r='2'/%3E%3C/svg%3E")}.maplibregl-ctrl button.maplibregl-ctrl-geolocate.maplibregl-ctrl-geolocate-background .maplibregl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='29' height='29' fill='%2333b5e5' viewBox='0 0 20 20'%3E%3Cpath d='M10 4C9 4 9 5 9 5v.1A5 5 0 0 0 5.1 9H5s-1 0-1 1 1 1 1 1h.1A5 5 0 0 0 9 14.9v.1s0 1 1 1 1-1 1-1v-.1a5 5 0 0 0 3.9-3.9h.1s1 0 1-1-1-1-1-1h-.1A5 5 0 0 0 11 5.1V5s0-1-1-1m0 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 1 0-7'/%3E%3C/svg%3E")}.maplibregl-ctrl button.maplibregl-ctrl-geolocate.maplibregl-ctrl-geolocate-background-error .maplibregl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='29' height='29' fill='%23e54e33' viewBox='0 0 20 20'%3E%3Cpath d='M10 4C9 4 9 5 9 5v.1A5 5 0 0 0 5.1 9H5s-1 0-1 1 1 1 1 1h.1A5 5 0 0 0 9 14.9v.1s0 1 1 1 1-1 1-1v-.1a5 5 0 0 0 3.9-3.9h.1s1 0 1-1-1-1-1-1h-.1A5 5 0 0 0 11 5.1V5s0-1-1-1m0 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 1 0-7'/%3E%3C/svg%3E")}}@media (forced-colors:active) and (prefers-color-scheme:light){.maplibregl-ctrl button.maplibregl-ctrl-geolocate .maplibregl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='29' height='29' viewBox='0 0 20 20'%3E%3Cpath d='M10 4C9 4 9 5 9 5v.1A5 5 0 0 0 5.1 9H5s-1 0-1 1 1 1 1 1h.1A5 5 0 0 0 9 14.9v.1s0 1 1 1 1-1 1-1v-.1a5 5 0 0 0 3.9-3.9h.1s1 0 1-1-1-1-1-1h-.1A5 5 0 0 0 11 5.1V5s0-1-1-1m0 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 1 0-7'/%3E%3Ccircle cx='10' cy='10' r='2'/%3E%3C/svg%3E")}.maplibregl-ctrl button.maplibregl-ctrl-geolocate:disabled .maplibregl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='29' height='29' fill='%23666' viewBox='0 0 20 20'%3E%3Cpath d='M10 4C9 4 9 5 9 5v.1A5 5 0 0 0 5.1 9H5s-1 0-1 1 1 1 1 1h.1A5 5 0 0 0 9 14.9v.1s0 1 1 1 1-1 1-1v-.1a5 5 0 0 0 3.9-3.9h.1s1 0 1-1-1-1-1-1h-.1A5 5 0 0 0 11 5.1V5s0-1-1-1m0 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 1 0-7'/%3E%3Ccircle cx='10' cy='10' r='2'/%3E%3Cpath fill='red' d='m14 5 1 1-9 9-1-1z'/%3E%3C/svg%3E")}}@keyframes maplibregl-spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}a.maplibregl-ctrl-logo{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='88' height='23' fill='none'%3E%3Cpath fill='%23000' fill-opacity='.4' fill-rule='evenodd' d='M17.408 16.796h-1.827l2.501-12.095h.198l3.324 6.533.988 2.19.988-2.19 3.258-6.533h.181l2.6 12.095h-1.81l-1.218-5.644-.362-1.71-.658 1.71-2.929 5.644h-.098l-2.914-5.644-.757-1.71-.345 1.71zm1.958-3.42-.726 3.663a1.255 1.255 0 0 1-1.232 1.011h-1.827a1.255 1.255 0 0 1-1.229-1.509l2.501-12.095a1.255 1.255 0 0 1 1.23-1.001h.197a1.25 1.25 0 0 1 1.12.685l3.19 6.273 3.125-6.263a1.25 1.25 0 0 1 1.123-.695h.181a1.255 1.255 0 0 1 1.227.991l1.443 6.71a5 5 0 0 1 .314-.787l.009-.016a4.6 4.6 0 0 1 1.777-1.887c.782-.46 1.668-.667 2.611-.667a4.6 4.6 0 0 1 1.7.32l.306.134c.21-.16.474-.256.759-.256h1.694a1.255 1.255 0 0 1 1.212.925 1.255 1.255 0 0 1 1.212-.925h1.711c.284 0 .545.094.755.252.613-.3 1.312-.45 2.075-.45 1.356 0 2.557.445 3.482 1.4q.47.48.763 1.064V4.701a1.255 1.255 0 0 1 1.255-1.255h1.86A1.255 1.255 0 0 1 54.44 4.7v9.194h2.217c.19 0 .37.043.532.118v-4.77c0-.356.147-.678.385-.906a2.42 2.42 0 0 1-.682-1.71c0-.665.267-1.253.735-1.7a2.45 2.45 0 0 1 1.722-.674 2.43 2.43 0 0 1 1.705.675q.318.302.504.683V4.7a1.255 1.255 0 0 1 1.255-1.255h1.744A1.255 1.255 0 0 1 65.812 4.7v3.335a4.8 4.8 0 0 1 1.526-.246c.938 0 1.817.214 2.59.69a4.47 4.47 0 0 1 1.67 1.743v-.98a1.255 1.255 0 0 1 1.256-1.256h1.777c.233 0 .451.064.639.174a3.4 3.4 0 0 1 1.567-.372c.346 0 .861.02 1.285.232a1.25 1.25 0 0 1 .689 1.004 4.7 4.7 0 0 1 .853-.588c.795-.44 1.675-.647 2.61-.647 1.385 0 2.65.39 3.525 1.396.836.938 1.168 2.173 1.168 3.528q-.001.515-.056 1.051a1.255 1.255 0 0 1-.947 1.09l.408.952a1.255 1.255 0 0 1-.477 1.552c-.418.268-.92.463-1.458.612-.613.171-1.304.244-2.049.244-1.06 0-2.043-.207-2.886-.698l-.015-.008c-.798-.48-1.419-1.135-1.818-1.963l-.004-.008a5.8 5.8 0 0 1-.548-2.512q0-.429.053-.843a1.3 1.3 0 0 1-.333-.086l-.166-.004c-.223 0-.426.062-.643.228-.03.024-.142.139-.142.59v3.883a1.255 1.255 0 0 1-1.256 1.256h-1.777a1.255 1.255 0 0 1-1.256-1.256V15.69l-.032.057a4.8 4.8 0 0 1-1.86 1.833 5.04 5.04 0 0 1-2.484.634 4.5 4.5 0 0 1-1.935-.424 1.25 1.25 0 0 1-.764.258h-1.71a1.255 1.255 0 0 1-1.256-1.255V7.687a2.4 2.4 0 0 1-.428.625c.253.23.412.561.412.93v7.553a1.255 1.255 0 0 1-1.256 1.255h-1.843a1.25 1.25 0 0 1-.894-.373c-.228.23-.544.373-.894.373H51.32a1.255 1.255 0 0 1-1.256-1.255v-1.251l-.061.117a4.7 4.7 0 0 1-1.782 1.884 4.77 4.77 0 0 1-2.485.67 5.6 5.6 0 0 1-1.485-.188l.009 2.764a1.255 1.255 0 0 1-1.255 1.259h-1.729a1.255 1.255 0 0 1-1.255-1.255v-3.537a1.255 1.255 0 0 1-1.167.793h-1.679a1.25 1.25 0 0 1-.77-.263 4.5 4.5 0 0 1-1.945.429c-.885 0-1.724-.21-2.495-.632l-.017-.01a5 5 0 0 1-1.081-.836 1.255 1.255 0 0 1-1.254 1.312h-1.81a1.255 1.255 0 0 1-1.228-.99l-.782-3.625-2.044 3.939a1.25 1.25 0 0 1-1.115.676h-.098a1.25 1.25 0 0 1-1.116-.68l-2.061-3.994zM35.92 16.63l.207-.114.223-.15q.493-.356.735-.785l.061-.118.033 1.332h1.678V9.242h-1.694l-.033 1.267q-.133-.329-.526-.658l-.032-.028a3.2 3.2 0 0 0-.668-.428l-.27-.12a3.3 3.3 0 0 0-1.235-.23q-1.136-.001-1.974.493a3.36 3.36 0 0 0-1.3 1.382q-.445.89-.444 2.074 0 1.2.51 2.107a3.8 3.8 0 0 0 1.382 1.381 3.9 3.9 0 0 0 1.893.477q.795 0 1.455-.33zm-2.789-5.38q-.576.675-.575 1.762 0 1.102.559 1.794.576.675 1.645.675a2.25 2.25 0 0 0 .934-.19 2.2 2.2 0 0 0 .468-.29l.178-.161a2.2 2.2 0 0 0 .397-.561q.244-.5.244-1.15v-.115q0-.708-.296-1.267l-.043-.077a2.2 2.2 0 0 0-.633-.709l-.13-.086-.047-.028a2.1 2.1 0 0 0-1.073-.285q-1.052 0-1.629.692zm2.316 2.706c.163-.17.28-.407.28-.83v-.114c0-.292-.06-.508-.15-.68a.96.96 0 0 0-.353-.389.85.85 0 0 0-.464-.127c-.4 0-.56.114-.664.239l-.01.012c-.148.174-.275.45-.275.945 0 .506.122.801.27.99.097.11.266.224.68.224.303 0 .504-.09.687-.269zm7.545 1.705a2.6 2.6 0 0 0 .331.423q.319.33.755.548l.173.074q.65.255 1.49.255 1.02 0 1.844-.493a3.45 3.45 0 0 0 1.316-1.4q.493-.904.493-2.089 0-1.909-.988-2.913-.988-1.02-2.584-1.02-.898 0-1.575.347a3 3 0 0 0-.415.262l-.199.166a3.4 3.4 0 0 0-.64.82V9.242h-1.712v11.553h1.729l-.017-5.134zm.53-1.138q.206.29.48.5l.155.11.053.034q.51.296 1.119.297 1.07 0 1.645-.675.577-.69.576-1.762 0-1.119-.576-1.777-.558-.675-1.645-.675-.435 0-.835.16a2 2 0 0 0-.284.136 2 2 0 0 0-.363.254 2.2 2.2 0 0 0-.46.569l-.082.162a2.6 2.6 0 0 0-.213 1.072v.115q0 .707.296 1.267l.135.211zm.964-.818a1.1 1.1 0 0 0 .367.385.94.94 0 0 0 .476.118c.423 0 .59-.117.687-.23.159-.194.28-.478.28-.95 0-.53-.133-.8-.266-.952l-.021-.025c-.078-.094-.231-.221-.68-.221a1 1 0 0 0-.503.135l-.012.007a.86.86 0 0 0-.335.343c-.073.133-.132.324-.132.614v.115a1.4 1.4 0 0 0 .14.66zm15.7-6.222q.347-.346.346-.856a1.05 1.05 0 0 0-.345-.79 1.18 1.18 0 0 0-.84-.329q-.51 0-.855.33a1.05 1.05 0 0 0-.346.79q0 .51.346.855.345.346.856.346.51 0 .839-.346zm4.337 9.314.033-1.332q.191.403.59.747l.098.081a4 4 0 0 0 .316.224l.223.122a3.2 3.2 0 0 0 1.44.322 3.8 3.8 0 0 0 1.875-.477 3.5 3.5 0 0 0 1.382-1.366q.527-.89.526-2.09 0-1.184-.444-2.073a3.24 3.24 0 0 0-1.283-1.399q-.823-.51-1.942-.51a3.5 3.5 0 0 0-1.527.344l-.086.043-.165.09a3 3 0 0 0-.33.214q-.432.315-.656.707a2 2 0 0 0-.099.198l.082-1.283V4.701h-1.744v12.095zm.473-2.509a2.5 2.5 0 0 0 .566.7q.117.098.245.18l.144.08a2.1 2.1 0 0 0 .975.232q1.07 0 1.645-.675.576-.69.576-1.778 0-1.102-.576-1.777-.56-.691-1.645-.692a2.2 2.2 0 0 0-1.015.235q-.22.113-.415.282l-.15.142a2.1 2.1 0 0 0-.42.594q-.223.479-.223 1.1v.115q0 .705.293 1.26zm2.616-.293c.157-.191.28-.479.28-.967 0-.51-.13-.79-.276-.961l-.021-.026c-.082-.1-.232-.225-.67-.225a.87.87 0 0 0-.681.279l-.012.011c-.154.155-.274.38-.274.807v.115c0 .285.057.499.144.669a1.1 1.1 0 0 0 .367.405c.137.082.28.123.455.123.423 0 .59-.118.686-.23zm8.266-3.013q.345-.13.724-.14l.069-.002q.493 0 .642.099l.247-1.794q-.196-.099-.717-.099a2.3 2.3 0 0 0-.545.063 2 2 0 0 0-.411.148 2.2 2.2 0 0 0-.4.249 2.5 2.5 0 0 0-.485.499 2.7 2.7 0 0 0-.32.581l-.05.137v-1.48h-1.778v7.553h1.777v-3.884q0-.546.159-.943a1.5 1.5 0 0 1 .466-.636 2.5 2.5 0 0 1 .399-.253 2 2 0 0 1 .224-.099zm9.784 2.656.05-.922q0-1.743-.856-2.698-.838-.97-2.584-.97-1.119-.001-2.007.493a3.46 3.46 0 0 0-1.4 1.382q-.493.906-.493 2.106 0 1.07.428 1.975.428.89 1.332 1.432.906.526 2.255.526.973 0 1.668-.185l.044-.012.135-.04q.613-.184.984-.421l-.542-1.267q-.3.162-.642.274l-.297.087q-.51.131-1.3.131-.954 0-1.497-.444a1.6 1.6 0 0 1-.192-.193q-.366-.44-.512-1.234l-.004-.021zm-5.427-1.256-.003.022h3.752v-.138q-.011-.727-.288-1.118a1 1 0 0 0-.156-.176q-.46-.428-1.316-.428-.986 0-1.494.604-.379.45-.494 1.234zm-27.053 2.77V4.7h-1.86v12.095h5.333V15.15zm7.103-5.908v7.553h-1.843V9.242h1.843z'/%3E%3Cpath fill='%23fff' d='m19.63 11.151-.757-1.71-.345 1.71-1.12 5.644h-1.827L18.083 4.7h.197l3.325 6.533.988 2.19.988-2.19L26.839 4.7h.181l2.6 12.095h-1.81l-1.218-5.644-.362-1.71-.658 1.71-2.93 5.644h-.098l-2.913-5.644zm14.836 5.81q-1.02 0-1.893-.478a3.8 3.8 0 0 1-1.381-1.382q-.51-.906-.51-2.106 0-1.185.444-2.074a3.36 3.36 0 0 1 1.3-1.382q.839-.494 1.974-.494a3.3 3.3 0 0 1 1.234.231 3.3 3.3 0 0 1 .97.575q.396.33.527.659l.033-1.267h1.694v7.553H37.18l-.033-1.332q-.279.593-1.02 1.053a3.17 3.17 0 0 1-1.662.444zm.296-1.482q.938 0 1.58-.642.642-.66.642-1.711v-.115q0-.708-.296-1.267a2.2 2.2 0 0 0-.807-.872 2.1 2.1 0 0 0-1.119-.313q-1.053 0-1.629.692-.575.675-.575 1.76 0 1.103.559 1.795.577.675 1.645.675zm6.521-6.237h1.711v1.4q.906-1.597 2.83-1.597 1.596 0 2.584 1.02.988 1.005.988 2.914 0 1.185-.493 2.09a3.46 3.46 0 0 1-1.316 1.399 3.5 3.5 0 0 1-1.844.493q-.954 0-1.662-.329a2.67 2.67 0 0 1-1.086-.97l.017 5.134h-1.728zm4.048 6.22q1.07 0 1.645-.674.577-.69.576-1.762 0-1.119-.576-1.777-.558-.675-1.645-.675-.592 0-1.12.296-.51.28-.822.823-.296.527-.296 1.234v.115q0 .708.296 1.267.313.543.823.855.51.296 1.119.297z'/%3E%3Cpath fill='%23e1e3e9' d='M51.325 4.7h1.86v10.45h3.473v1.646h-5.333zm7.12 4.542h1.843v7.553h-1.843zm.905-1.415a1.16 1.16 0 0 1-.856-.346 1.17 1.17 0 0 1-.346-.856 1.05 1.05 0 0 1 .346-.79q.346-.329.856-.329.494 0 .839.33a1.05 1.05 0 0 1 .345.79 1.16 1.16 0 0 1-.345.855q-.33.346-.84.346zm7.875 9.133a3.17 3.17 0 0 1-1.662-.444q-.723-.46-1.004-1.053l-.033 1.332h-1.71V4.701h1.743v4.657l-.082 1.283q.279-.658 1.086-1.119a3.5 3.5 0 0 1 1.778-.477q1.119 0 1.942.51a3.24 3.24 0 0 1 1.283 1.4q.445.888.444 2.072 0 1.201-.526 2.09a3.5 3.5 0 0 1-1.382 1.366 3.8 3.8 0 0 1-1.876.477zm-.296-1.481q1.069 0 1.645-.675.577-.69.577-1.778 0-1.102-.577-1.776-.56-.691-1.645-.692a2.12 2.12 0 0 0-1.58.659q-.642.641-.642 1.694v.115q0 .71.296 1.267a2.4 2.4 0 0 0 .807.872 2.1 2.1 0 0 0 1.119.313zm5.927-6.237h1.777v1.481q.263-.757.856-1.217a2.14 2.14 0 0 1 1.349-.46q.527 0 .724.098l-.247 1.794q-.149-.099-.642-.099-.774 0-1.416.494-.626.493-.626 1.58v3.883h-1.777V9.242zm9.534 7.718q-1.35 0-2.255-.526-.904-.543-1.332-1.432a4.6 4.6 0 0 1-.428-1.975q0-1.2.493-2.106a3.46 3.46 0 0 1 1.4-1.382q.889-.495 2.007-.494 1.744 0 2.584.97.855.956.856 2.7 0 .444-.05.92h-5.43q.18 1.005.708 1.45.542.443 1.497.443.79 0 1.3-.131a4 4 0 0 0 .938-.362l.542 1.267q-.411.263-1.119.46-.708.198-1.711.197zm1.596-4.558q.016-1.02-.444-1.432-.46-.428-1.316-.428-1.728 0-1.991 1.86z'/%3E%3Cpath d='M5.074 15.948a.484.657 0 0 0-.486.659v1.84a.484.657 0 0 0 .486.659h4.101a.484.657 0 0 0 .486-.659v-1.84a.484.657 0 0 0-.486-.659zm3.56 1.16H5.617v.838h3.017z' style='fill:%23fff;fill-rule:evenodd;stroke-width:1.03600001'/%3E%3Cg style='stroke-width:1.12603545'%3E%3Cpath d='M-9.408-1.416c-3.833-.025-7.056 2.912-7.08 6.615-.02 3.08 1.653 4.832 3.107 6.268.903.892 1.721 1.74 2.32 2.902l-.525-.004c-.543-.003-.992.304-1.24.639a1.87 1.87 0 0 0-.362 1.121l-.011 1.877c-.003.402.104.787.347 1.125.244.338.688.653 1.23.656l4.142.028c.542.003.99-.306 1.238-.641a1.87 1.87 0 0 0 .363-1.121l.012-1.875a1.87 1.87 0 0 0-.348-1.127c-.243-.338-.688-.653-1.23-.656l-.518-.004c.597-1.145 1.425-1.983 2.348-2.87 1.473-1.414 3.18-3.149 3.2-6.226-.016-3.59-2.923-6.684-6.993-6.707m-.006 1.1v.002c3.274.02 5.92 2.532 5.9 5.6-.017 2.706-1.39 4.026-2.863 5.44-1.034.994-2.118 2.033-2.814 3.633-.018.041-.052.055-.075.065q-.013.004-.02.01a.34.34 0 0 1-.226.084.34.34 0 0 1-.224-.086l-.092-.077c-.699-1.615-1.768-2.669-2.781-3.67-1.454-1.435-2.797-2.762-2.78-5.478.02-3.067 2.7-5.545 5.975-5.523m-.02 2.826c-1.62-.01-2.944 1.315-2.955 2.96-.01 1.646 1.295 2.988 2.916 2.999h.002c1.621.01 2.943-1.316 2.953-2.961.011-1.646-1.294-2.988-2.916-2.998m-.005 1.1c1.017.006 1.829.83 1.822 1.89s-.83 1.874-1.848 1.867c-1.018-.006-1.829-.83-1.822-1.89s.83-1.874 1.848-1.868m-2.155 11.857 4.14.025c.271.002.49.305.487.676l-.013 1.875c-.003.37-.224.67-.495.668l-4.14-.025c-.27-.002-.487-.306-.485-.676l.012-1.875c.003-.37.224-.67.494-.668' style='color:%23000;font-style:normal;font-variant:normal;font-weight:400;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;font-variant-ligatures:normal;font-variant-position:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-alternates:normal;font-feature-settings:normal;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:%23000;letter-spacing:normal;word-spacing:normal;text-transform:none;writing-mode:lr-tb;direction:ltr;text-orientation:mixed;dominant-baseline:auto;baseline-shift:baseline;text-anchor:start;white-space:normal;shape-padding:0;clip-rule:evenodd;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:%23000;solid-opacity:1;vector-effect:none;fill:%23000;fill-opacity:.4;fill-rule:evenodd;stroke:none;stroke-width:2.47727823;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto' transform='translate(15.553 2.85)scale(.88807)'/%3E%3Cpath d='M-9.415-.316C-12.69-.338-15.37 2.14-15.39 5.207c-.017 2.716 1.326 4.041 2.78 5.477 1.013 1 2.081 2.055 2.78 3.67l.092.076a.34.34 0 0 0 .225.086.34.34 0 0 0 .227-.083l.019-.01c.022-.009.057-.024.074-.064.697-1.6 1.78-2.64 2.814-3.634 1.473-1.414 2.847-2.733 2.864-5.44.02-3.067-2.627-5.58-5.901-5.601m-.057 8.784c1.621.011 2.944-1.315 2.955-2.96.01-1.646-1.295-2.988-2.916-2.999-1.622-.01-2.945 1.315-2.955 2.96s1.295 2.989 2.916 3' style='clip-rule:evenodd;fill:%23e1e3e9;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:2.47727823;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:.4' transform='translate(15.553 2.85)scale(.88807)'/%3E%3Cpath d='M-11.594 15.465c-.27-.002-.492.297-.494.668l-.012 1.876c-.003.371.214.673.485.675l4.14.027c.271.002.492-.298.495-.668l.012-1.877c.003-.37-.215-.672-.485-.674z' style='clip-rule:evenodd;fill:%23fff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:2.47727823;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:.4' transform='translate(15.553 2.85)scale(.88807)'/%3E%3C/g%3E%3C/svg%3E");background-repeat:no-repeat;cursor:pointer;display:block;height:23px;margin:0 0 -4px -4px;overflow:hidden;width:88px}a.maplibregl-ctrl-logo.maplibregl-compact{width:14px}@media (forced-colors:active){a.maplibregl-ctrl-logo{background-color:transparent;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='88' height='23' fill='none'%3E%3Cpath fill='%23000' fill-opacity='.4' fill-rule='evenodd' d='M17.408 16.796h-1.827l2.501-12.095h.198l3.324 6.533.988 2.19.988-2.19 3.258-6.533h.181l2.6 12.095h-1.81l-1.218-5.644-.362-1.71-.658 1.71-2.929 5.644h-.098l-2.914-5.644-.757-1.71-.345 1.71zm1.958-3.42-.726 3.663a1.255 1.255 0 0 1-1.232 1.011h-1.827a1.255 1.255 0 0 1-1.229-1.509l2.501-12.095a1.255 1.255 0 0 1 1.23-1.001h.197a1.25 1.25 0 0 1 1.12.685l3.19 6.273 3.125-6.263a1.25 1.25 0 0 1 1.123-.695h.181a1.255 1.255 0 0 1 1.227.991l1.443 6.71a5 5 0 0 1 .314-.787l.009-.016a4.6 4.6 0 0 1 1.777-1.887c.782-.46 1.668-.667 2.611-.667a4.6 4.6 0 0 1 1.7.32l.306.134c.21-.16.474-.256.759-.256h1.694a1.255 1.255 0 0 1 1.212.925 1.255 1.255 0 0 1 1.212-.925h1.711c.284 0 .545.094.755.252.613-.3 1.312-.45 2.075-.45 1.356 0 2.557.445 3.482 1.4q.47.48.763 1.064V4.701a1.255 1.255 0 0 1 1.255-1.255h1.86A1.255 1.255 0 0 1 54.44 4.7v9.194h2.217c.19 0 .37.043.532.118v-4.77c0-.356.147-.678.385-.906a2.42 2.42 0 0 1-.682-1.71c0-.665.267-1.253.735-1.7a2.45 2.45 0 0 1 1.722-.674 2.43 2.43 0 0 1 1.705.675q.318.302.504.683V4.7a1.255 1.255 0 0 1 1.255-1.255h1.744A1.255 1.255 0 0 1 65.812 4.7v3.335a4.8 4.8 0 0 1 1.526-.246c.938 0 1.817.214 2.59.69a4.47 4.47 0 0 1 1.67 1.743v-.98a1.255 1.255 0 0 1 1.256-1.256h1.777c.233 0 .451.064.639.174a3.4 3.4 0 0 1 1.567-.372c.346 0 .861.02 1.285.232a1.25 1.25 0 0 1 .689 1.004 4.7 4.7 0 0 1 .853-.588c.795-.44 1.675-.647 2.61-.647 1.385 0 2.65.39 3.525 1.396.836.938 1.168 2.173 1.168 3.528q-.001.515-.056 1.051a1.255 1.255 0 0 1-.947 1.09l.408.952a1.255 1.255 0 0 1-.477 1.552c-.418.268-.92.463-1.458.612-.613.171-1.304.244-2.049.244-1.06 0-2.043-.207-2.886-.698l-.015-.008c-.798-.48-1.419-1.135-1.818-1.963l-.004-.008a5.8 5.8 0 0 1-.548-2.512q0-.429.053-.843a1.3 1.3 0 0 1-.333-.086l-.166-.004c-.223 0-.426.062-.643.228-.03.024-.142.139-.142.59v3.883a1.255 1.255 0 0 1-1.256 1.256h-1.777a1.255 1.255 0 0 1-1.256-1.256V15.69l-.032.057a4.8 4.8 0 0 1-1.86 1.833 5.04 5.04 0 0 1-2.484.634 4.5 4.5 0 0 1-1.935-.424 1.25 1.25 0 0 1-.764.258h-1.71a1.255 1.255 0 0 1-1.256-1.255V7.687a2.4 2.4 0 0 1-.428.625c.253.23.412.561.412.93v7.553a1.255 1.255 0 0 1-1.256 1.255h-1.843a1.25 1.25 0 0 1-.894-.373c-.228.23-.544.373-.894.373H51.32a1.255 1.255 0 0 1-1.256-1.255v-1.251l-.061.117a4.7 4.7 0 0 1-1.782 1.884 4.77 4.77 0 0 1-2.485.67 5.6 5.6 0 0 1-1.485-.188l.009 2.764a1.255 1.255 0 0 1-1.255 1.259h-1.729a1.255 1.255 0 0 1-1.255-1.255v-3.537a1.255 1.255 0 0 1-1.167.793h-1.679a1.25 1.25 0 0 1-.77-.263 4.5 4.5 0 0 1-1.945.429c-.885 0-1.724-.21-2.495-.632l-.017-.01a5 5 0 0 1-1.081-.836 1.255 1.255 0 0 1-1.254 1.312h-1.81a1.255 1.255 0 0 1-1.228-.99l-.782-3.625-2.044 3.939a1.25 1.25 0 0 1-1.115.676h-.098a1.25 1.25 0 0 1-1.116-.68l-2.061-3.994zM35.92 16.63l.207-.114.223-.15q.493-.356.735-.785l.061-.118.033 1.332h1.678V9.242h-1.694l-.033 1.267q-.133-.329-.526-.658l-.032-.028a3.2 3.2 0 0 0-.668-.428l-.27-.12a3.3 3.3 0 0 0-1.235-.23q-1.136-.001-1.974.493a3.36 3.36 0 0 0-1.3 1.382q-.445.89-.444 2.074 0 1.2.51 2.107a3.8 3.8 0 0 0 1.382 1.381 3.9 3.9 0 0 0 1.893.477q.795 0 1.455-.33zm-2.789-5.38q-.576.675-.575 1.762 0 1.102.559 1.794.576.675 1.645.675a2.25 2.25 0 0 0 .934-.19 2.2 2.2 0 0 0 .468-.29l.178-.161a2.2 2.2 0 0 0 .397-.561q.244-.5.244-1.15v-.115q0-.708-.296-1.267l-.043-.077a2.2 2.2 0 0 0-.633-.709l-.13-.086-.047-.028a2.1 2.1 0 0 0-1.073-.285q-1.052 0-1.629.692zm2.316 2.706c.163-.17.28-.407.28-.83v-.114c0-.292-.06-.508-.15-.68a.96.96 0 0 0-.353-.389.85.85 0 0 0-.464-.127c-.4 0-.56.114-.664.239l-.01.012c-.148.174-.275.45-.275.945 0 .506.122.801.27.99.097.11.266.224.68.224.303 0 .504-.09.687-.269zm7.545 1.705a2.6 2.6 0 0 0 .331.423q.319.33.755.548l.173.074q.65.255 1.49.255 1.02 0 1.844-.493a3.45 3.45 0 0 0 1.316-1.4q.493-.904.493-2.089 0-1.909-.988-2.913-.988-1.02-2.584-1.02-.898 0-1.575.347a3 3 0 0 0-.415.262l-.199.166a3.4 3.4 0 0 0-.64.82V9.242h-1.712v11.553h1.729l-.017-5.134zm.53-1.138q.206.29.48.5l.155.11.053.034q.51.296 1.119.297 1.07 0 1.645-.675.577-.69.576-1.762 0-1.119-.576-1.777-.558-.675-1.645-.675-.435 0-.835.16a2 2 0 0 0-.284.136 2 2 0 0 0-.363.254 2.2 2.2 0 0 0-.46.569l-.082.162a2.6 2.6 0 0 0-.213 1.072v.115q0 .707.296 1.267l.135.211zm.964-.818a1.1 1.1 0 0 0 .367.385.94.94 0 0 0 .476.118c.423 0 .59-.117.687-.23.159-.194.28-.478.28-.95 0-.53-.133-.8-.266-.952l-.021-.025c-.078-.094-.231-.221-.68-.221a1 1 0 0 0-.503.135l-.012.007a.86.86 0 0 0-.335.343c-.073.133-.132.324-.132.614v.115a1.4 1.4 0 0 0 .14.66zm15.7-6.222q.347-.346.346-.856a1.05 1.05 0 0 0-.345-.79 1.18 1.18 0 0 0-.84-.329q-.51 0-.855.33a1.05 1.05 0 0 0-.346.79q0 .51.346.855.345.346.856.346.51 0 .839-.346zm4.337 9.314.033-1.332q.191.403.59.747l.098.081a4 4 0 0 0 .316.224l.223.122a3.2 3.2 0 0 0 1.44.322 3.8 3.8 0 0 0 1.875-.477 3.5 3.5 0 0 0 1.382-1.366q.527-.89.526-2.09 0-1.184-.444-2.073a3.24 3.24 0 0 0-1.283-1.399q-.823-.51-1.942-.51a3.5 3.5 0 0 0-1.527.344l-.086.043-.165.09a3 3 0 0 0-.33.214q-.432.315-.656.707a2 2 0 0 0-.099.198l.082-1.283V4.701h-1.744v12.095zm.473-2.509a2.5 2.5 0 0 0 .566.7q.117.098.245.18l.144.08a2.1 2.1 0 0 0 .975.232q1.07 0 1.645-.675.576-.69.576-1.778 0-1.102-.576-1.777-.56-.691-1.645-.692a2.2 2.2 0 0 0-1.015.235q-.22.113-.415.282l-.15.142a2.1 2.1 0 0 0-.42.594q-.223.479-.223 1.1v.115q0 .705.293 1.26zm2.616-.293c.157-.191.28-.479.28-.967 0-.51-.13-.79-.276-.961l-.021-.026c-.082-.1-.232-.225-.67-.225a.87.87 0 0 0-.681.279l-.012.011c-.154.155-.274.38-.274.807v.115c0 .285.057.499.144.669a1.1 1.1 0 0 0 .367.405c.137.082.28.123.455.123.423 0 .59-.118.686-.23zm8.266-3.013q.345-.13.724-.14l.069-.002q.493 0 .642.099l.247-1.794q-.196-.099-.717-.099a2.3 2.3 0 0 0-.545.063 2 2 0 0 0-.411.148 2.2 2.2 0 0 0-.4.249 2.5 2.5 0 0 0-.485.499 2.7 2.7 0 0 0-.32.581l-.05.137v-1.48h-1.778v7.553h1.777v-3.884q0-.546.159-.943a1.5 1.5 0 0 1 .466-.636 2.5 2.5 0 0 1 .399-.253 2 2 0 0 1 .224-.099zm9.784 2.656.05-.922q0-1.743-.856-2.698-.838-.97-2.584-.97-1.119-.001-2.007.493a3.46 3.46 0 0 0-1.4 1.382q-.493.906-.493 2.106 0 1.07.428 1.975.428.89 1.332 1.432.906.526 2.255.526.973 0 1.668-.185l.044-.012.135-.04q.613-.184.984-.421l-.542-1.267q-.3.162-.642.274l-.297.087q-.51.131-1.3.131-.954 0-1.497-.444a1.6 1.6 0 0 1-.192-.193q-.366-.44-.512-1.234l-.004-.021zm-5.427-1.256-.003.022h3.752v-.138q-.011-.727-.288-1.118a1 1 0 0 0-.156-.176q-.46-.428-1.316-.428-.986 0-1.494.604-.379.45-.494 1.234zm-27.053 2.77V4.7h-1.86v12.095h5.333V15.15zm7.103-5.908v7.553h-1.843V9.242h1.843z'/%3E%3Cpath fill='%23fff' d='m19.63 11.151-.757-1.71-.345 1.71-1.12 5.644h-1.827L18.083 4.7h.197l3.325 6.533.988 2.19.988-2.19L26.839 4.7h.181l2.6 12.095h-1.81l-1.218-5.644-.362-1.71-.658 1.71-2.93 5.644h-.098l-2.913-5.644zm14.836 5.81q-1.02 0-1.893-.478a3.8 3.8 0 0 1-1.381-1.382q-.51-.906-.51-2.106 0-1.185.444-2.074a3.36 3.36 0 0 1 1.3-1.382q.839-.494 1.974-.494a3.3 3.3 0 0 1 1.234.231 3.3 3.3 0 0 1 .97.575q.396.33.527.659l.033-1.267h1.694v7.553H37.18l-.033-1.332q-.279.593-1.02 1.053a3.17 3.17 0 0 1-1.662.444zm.296-1.482q.938 0 1.58-.642.642-.66.642-1.711v-.115q0-.708-.296-1.267a2.2 2.2 0 0 0-.807-.872 2.1 2.1 0 0 0-1.119-.313q-1.053 0-1.629.692-.575.675-.575 1.76 0 1.103.559 1.795.577.675 1.645.675zm6.521-6.237h1.711v1.4q.906-1.597 2.83-1.597 1.596 0 2.584 1.02.988 1.005.988 2.914 0 1.185-.493 2.09a3.46 3.46 0 0 1-1.316 1.399 3.5 3.5 0 0 1-1.844.493q-.954 0-1.662-.329a2.67 2.67 0 0 1-1.086-.97l.017 5.134h-1.728zm4.048 6.22q1.07 0 1.645-.674.577-.69.576-1.762 0-1.119-.576-1.777-.558-.675-1.645-.675-.592 0-1.12.296-.51.28-.822.823-.296.527-.296 1.234v.115q0 .708.296 1.267.313.543.823.855.51.296 1.119.297z'/%3E%3Cpath fill='%23e1e3e9' d='M51.325 4.7h1.86v10.45h3.473v1.646h-5.333zm7.12 4.542h1.843v7.553h-1.843zm.905-1.415a1.16 1.16 0 0 1-.856-.346 1.17 1.17 0 0 1-.346-.856 1.05 1.05 0 0 1 .346-.79q.346-.329.856-.329.494 0 .839.33a1.05 1.05 0 0 1 .345.79 1.16 1.16 0 0 1-.345.855q-.33.346-.84.346zm7.875 9.133a3.17 3.17 0 0 1-1.662-.444q-.723-.46-1.004-1.053l-.033 1.332h-1.71V4.701h1.743v4.657l-.082 1.283q.279-.658 1.086-1.119a3.5 3.5 0 0 1 1.778-.477q1.119 0 1.942.51a3.24 3.24 0 0 1 1.283 1.4q.445.888.444 2.072 0 1.201-.526 2.09a3.5 3.5 0 0 1-1.382 1.366 3.8 3.8 0 0 1-1.876.477zm-.296-1.481q1.069 0 1.645-.675.577-.69.577-1.778 0-1.102-.577-1.776-.56-.691-1.645-.692a2.12 2.12 0 0 0-1.58.659q-.642.641-.642 1.694v.115q0 .71.296 1.267a2.4 2.4 0 0 0 .807.872 2.1 2.1 0 0 0 1.119.313zm5.927-6.237h1.777v1.481q.263-.757.856-1.217a2.14 2.14 0 0 1 1.349-.46q.527 0 .724.098l-.247 1.794q-.149-.099-.642-.099-.774 0-1.416.494-.626.493-.626 1.58v3.883h-1.777V9.242zm9.534 7.718q-1.35 0-2.255-.526-.904-.543-1.332-1.432a4.6 4.6 0 0 1-.428-1.975q0-1.2.493-2.106a3.46 3.46 0 0 1 1.4-1.382q.889-.495 2.007-.494 1.744 0 2.584.97.855.956.856 2.7 0 .444-.05.92h-5.43q.18 1.005.708 1.45.542.443 1.497.443.79 0 1.3-.131a4 4 0 0 0 .938-.362l.542 1.267q-.411.263-1.119.46-.708.198-1.711.197zm1.596-4.558q.016-1.02-.444-1.432-.46-.428-1.316-.428-1.728 0-1.991 1.86z'/%3E%3Cpath d='M5.074 15.948a.484.657 0 0 0-.486.659v1.84a.484.657 0 0 0 .486.659h4.101a.484.657 0 0 0 .486-.659v-1.84a.484.657 0 0 0-.486-.659zm3.56 1.16H5.617v.838h3.017z' style='fill:%23fff;fill-rule:evenodd;stroke-width:1.03600001'/%3E%3Cg style='stroke-width:1.12603545'%3E%3Cpath d='M-9.408-1.416c-3.833-.025-7.056 2.912-7.08 6.615-.02 3.08 1.653 4.832 3.107 6.268.903.892 1.721 1.74 2.32 2.902l-.525-.004c-.543-.003-.992.304-1.24.639a1.87 1.87 0 0 0-.362 1.121l-.011 1.877c-.003.402.104.787.347 1.125.244.338.688.653 1.23.656l4.142.028c.542.003.99-.306 1.238-.641a1.87 1.87 0 0 0 .363-1.121l.012-1.875a1.87 1.87 0 0 0-.348-1.127c-.243-.338-.688-.653-1.23-.656l-.518-.004c.597-1.145 1.425-1.983 2.348-2.87 1.473-1.414 3.18-3.149 3.2-6.226-.016-3.59-2.923-6.684-6.993-6.707m-.006 1.1v.002c3.274.02 5.92 2.532 5.9 5.6-.017 2.706-1.39 4.026-2.863 5.44-1.034.994-2.118 2.033-2.814 3.633-.018.041-.052.055-.075.065q-.013.004-.02.01a.34.34 0 0 1-.226.084.34.34 0 0 1-.224-.086l-.092-.077c-.699-1.615-1.768-2.669-2.781-3.67-1.454-1.435-2.797-2.762-2.78-5.478.02-3.067 2.7-5.545 5.975-5.523m-.02 2.826c-1.62-.01-2.944 1.315-2.955 2.96-.01 1.646 1.295 2.988 2.916 2.999h.002c1.621.01 2.943-1.316 2.953-2.961.011-1.646-1.294-2.988-2.916-2.998m-.005 1.1c1.017.006 1.829.83 1.822 1.89s-.83 1.874-1.848 1.867c-1.018-.006-1.829-.83-1.822-1.89s.83-1.874 1.848-1.868m-2.155 11.857 4.14.025c.271.002.49.305.487.676l-.013 1.875c-.003.37-.224.67-.495.668l-4.14-.025c-.27-.002-.487-.306-.485-.676l.012-1.875c.003-.37.224-.67.494-.668' style='color:%23000;font-style:normal;font-variant:normal;font-weight:400;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;font-variant-ligatures:normal;font-variant-position:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-alternates:normal;font-feature-settings:normal;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:%23000;letter-spacing:normal;word-spacing:normal;text-transform:none;writing-mode:lr-tb;direction:ltr;text-orientation:mixed;dominant-baseline:auto;baseline-shift:baseline;text-anchor:start;white-space:normal;shape-padding:0;clip-rule:evenodd;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:%23000;solid-opacity:1;vector-effect:none;fill:%23000;fill-opacity:.4;fill-rule:evenodd;stroke:none;stroke-width:2.47727823;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto' transform='translate(15.553 2.85)scale(.88807)'/%3E%3Cpath d='M-9.415-.316C-12.69-.338-15.37 2.14-15.39 5.207c-.017 2.716 1.326 4.041 2.78 5.477 1.013 1 2.081 2.055 2.78 3.67l.092.076a.34.34 0 0 0 .225.086.34.34 0 0 0 .227-.083l.019-.01c.022-.009.057-.024.074-.064.697-1.6 1.78-2.64 2.814-3.634 1.473-1.414 2.847-2.733 2.864-5.44.02-3.067-2.627-5.58-5.901-5.601m-.057 8.784c1.621.011 2.944-1.315 2.955-2.96.01-1.646-1.295-2.988-2.916-2.999-1.622-.01-2.945 1.315-2.955 2.96s1.295 2.989 2.916 3' style='clip-rule:evenodd;fill:%23e1e3e9;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:2.47727823;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:.4' transform='translate(15.553 2.85)scale(.88807)'/%3E%3Cpath d='M-11.594 15.465c-.27-.002-.492.297-.494.668l-.012 1.876c-.003.371.214.673.485.675l4.14.027c.271.002.492-.298.495-.668l.012-1.877c.003-.37-.215-.672-.485-.674z' style='clip-rule:evenodd;fill:%23fff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:2.47727823;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:.4' transform='translate(15.553 2.85)scale(.88807)'/%3E%3C/g%3E%3C/svg%3E")}}@media (forced-colors:active) and (prefers-color-scheme:light){a.maplibregl-ctrl-logo{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='88' height='23' fill='none'%3E%3Cpath fill='%23000' fill-opacity='.4' fill-rule='evenodd' d='M17.408 16.796h-1.827l2.501-12.095h.198l3.324 6.533.988 2.19.988-2.19 3.258-6.533h.181l2.6 12.095h-1.81l-1.218-5.644-.362-1.71-.658 1.71-2.929 5.644h-.098l-2.914-5.644-.757-1.71-.345 1.71zm1.958-3.42-.726 3.663a1.255 1.255 0 0 1-1.232 1.011h-1.827a1.255 1.255 0 0 1-1.229-1.509l2.501-12.095a1.255 1.255 0 0 1 1.23-1.001h.197a1.25 1.25 0 0 1 1.12.685l3.19 6.273 3.125-6.263a1.25 1.25 0 0 1 1.123-.695h.181a1.255 1.255 0 0 1 1.227.991l1.443 6.71a5 5 0 0 1 .314-.787l.009-.016a4.6 4.6 0 0 1 1.777-1.887c.782-.46 1.668-.667 2.611-.667a4.6 4.6 0 0 1 1.7.32l.306.134c.21-.16.474-.256.759-.256h1.694a1.255 1.255 0 0 1 1.212.925 1.255 1.255 0 0 1 1.212-.925h1.711c.284 0 .545.094.755.252.613-.3 1.312-.45 2.075-.45 1.356 0 2.557.445 3.482 1.4q.47.48.763 1.064V4.701a1.255 1.255 0 0 1 1.255-1.255h1.86A1.255 1.255 0 0 1 54.44 4.7v9.194h2.217c.19 0 .37.043.532.118v-4.77c0-.356.147-.678.385-.906a2.42 2.42 0 0 1-.682-1.71c0-.665.267-1.253.735-1.7a2.45 2.45 0 0 1 1.722-.674 2.43 2.43 0 0 1 1.705.675q.318.302.504.683V4.7a1.255 1.255 0 0 1 1.255-1.255h1.744A1.255 1.255 0 0 1 65.812 4.7v3.335a4.8 4.8 0 0 1 1.526-.246c.938 0 1.817.214 2.59.69a4.47 4.47 0 0 1 1.67 1.743v-.98a1.255 1.255 0 0 1 1.256-1.256h1.777c.233 0 .451.064.639.174a3.4 3.4 0 0 1 1.567-.372c.346 0 .861.02 1.285.232a1.25 1.25 0 0 1 .689 1.004 4.7 4.7 0 0 1 .853-.588c.795-.44 1.675-.647 2.61-.647 1.385 0 2.65.39 3.525 1.396.836.938 1.168 2.173 1.168 3.528q-.001.515-.056 1.051a1.255 1.255 0 0 1-.947 1.09l.408.952a1.255 1.255 0 0 1-.477 1.552c-.418.268-.92.463-1.458.612-.613.171-1.304.244-2.049.244-1.06 0-2.043-.207-2.886-.698l-.015-.008c-.798-.48-1.419-1.135-1.818-1.963l-.004-.008a5.8 5.8 0 0 1-.548-2.512q0-.429.053-.843a1.3 1.3 0 0 1-.333-.086l-.166-.004c-.223 0-.426.062-.643.228-.03.024-.142.139-.142.59v3.883a1.255 1.255 0 0 1-1.256 1.256h-1.777a1.255 1.255 0 0 1-1.256-1.256V15.69l-.032.057a4.8 4.8 0 0 1-1.86 1.833 5.04 5.04 0 0 1-2.484.634 4.5 4.5 0 0 1-1.935-.424 1.25 1.25 0 0 1-.764.258h-1.71a1.255 1.255 0 0 1-1.256-1.255V7.687a2.4 2.4 0 0 1-.428.625c.253.23.412.561.412.93v7.553a1.255 1.255 0 0 1-1.256 1.255h-1.843a1.25 1.25 0 0 1-.894-.373c-.228.23-.544.373-.894.373H51.32a1.255 1.255 0 0 1-1.256-1.255v-1.251l-.061.117a4.7 4.7 0 0 1-1.782 1.884 4.77 4.77 0 0 1-2.485.67 5.6 5.6 0 0 1-1.485-.188l.009 2.764a1.255 1.255 0 0 1-1.255 1.259h-1.729a1.255 1.255 0 0 1-1.255-1.255v-3.537a1.255 1.255 0 0 1-1.167.793h-1.679a1.25 1.25 0 0 1-.77-.263 4.5 4.5 0 0 1-1.945.429c-.885 0-1.724-.21-2.495-.632l-.017-.01a5 5 0 0 1-1.081-.836 1.255 1.255 0 0 1-1.254 1.312h-1.81a1.255 1.255 0 0 1-1.228-.99l-.782-3.625-2.044 3.939a1.25 1.25 0 0 1-1.115.676h-.098a1.25 1.25 0 0 1-1.116-.68l-2.061-3.994zM35.92 16.63l.207-.114.223-.15q.493-.356.735-.785l.061-.118.033 1.332h1.678V9.242h-1.694l-.033 1.267q-.133-.329-.526-.658l-.032-.028a3.2 3.2 0 0 0-.668-.428l-.27-.12a3.3 3.3 0 0 0-1.235-.23q-1.136-.001-1.974.493a3.36 3.36 0 0 0-1.3 1.382q-.445.89-.444 2.074 0 1.2.51 2.107a3.8 3.8 0 0 0 1.382 1.381 3.9 3.9 0 0 0 1.893.477q.795 0 1.455-.33zm-2.789-5.38q-.576.675-.575 1.762 0 1.102.559 1.794.576.675 1.645.675a2.25 2.25 0 0 0 .934-.19 2.2 2.2 0 0 0 .468-.29l.178-.161a2.2 2.2 0 0 0 .397-.561q.244-.5.244-1.15v-.115q0-.708-.296-1.267l-.043-.077a2.2 2.2 0 0 0-.633-.709l-.13-.086-.047-.028a2.1 2.1 0 0 0-1.073-.285q-1.052 0-1.629.692zm2.316 2.706c.163-.17.28-.407.28-.83v-.114c0-.292-.06-.508-.15-.68a.96.96 0 0 0-.353-.389.85.85 0 0 0-.464-.127c-.4 0-.56.114-.664.239l-.01.012c-.148.174-.275.45-.275.945 0 .506.122.801.27.99.097.11.266.224.68.224.303 0 .504-.09.687-.269zm7.545 1.705a2.6 2.6 0 0 0 .331.423q.319.33.755.548l.173.074q.65.255 1.49.255 1.02 0 1.844-.493a3.45 3.45 0 0 0 1.316-1.4q.493-.904.493-2.089 0-1.909-.988-2.913-.988-1.02-2.584-1.02-.898 0-1.575.347a3 3 0 0 0-.415.262l-.199.166a3.4 3.4 0 0 0-.64.82V9.242h-1.712v11.553h1.729l-.017-5.134zm.53-1.138q.206.29.48.5l.155.11.053.034q.51.296 1.119.297 1.07 0 1.645-.675.577-.69.576-1.762 0-1.119-.576-1.777-.558-.675-1.645-.675-.435 0-.835.16a2 2 0 0 0-.284.136 2 2 0 0 0-.363.254 2.2 2.2 0 0 0-.46.569l-.082.162a2.6 2.6 0 0 0-.213 1.072v.115q0 .707.296 1.267l.135.211zm.964-.818a1.1 1.1 0 0 0 .367.385.94.94 0 0 0 .476.118c.423 0 .59-.117.687-.23.159-.194.28-.478.28-.95 0-.53-.133-.8-.266-.952l-.021-.025c-.078-.094-.231-.221-.68-.221a1 1 0 0 0-.503.135l-.012.007a.86.86 0 0 0-.335.343c-.073.133-.132.324-.132.614v.115a1.4 1.4 0 0 0 .14.66zm15.7-6.222q.347-.346.346-.856a1.05 1.05 0 0 0-.345-.79 1.18 1.18 0 0 0-.84-.329q-.51 0-.855.33a1.05 1.05 0 0 0-.346.79q0 .51.346.855.345.346.856.346.51 0 .839-.346zm4.337 9.314.033-1.332q.191.403.59.747l.098.081a4 4 0 0 0 .316.224l.223.122a3.2 3.2 0 0 0 1.44.322 3.8 3.8 0 0 0 1.875-.477 3.5 3.5 0 0 0 1.382-1.366q.527-.89.526-2.09 0-1.184-.444-2.073a3.24 3.24 0 0 0-1.283-1.399q-.823-.51-1.942-.51a3.5 3.5 0 0 0-1.527.344l-.086.043-.165.09a3 3 0 0 0-.33.214q-.432.315-.656.707a2 2 0 0 0-.099.198l.082-1.283V4.701h-1.744v12.095zm.473-2.509a2.5 2.5 0 0 0 .566.7q.117.098.245.18l.144.08a2.1 2.1 0 0 0 .975.232q1.07 0 1.645-.675.576-.69.576-1.778 0-1.102-.576-1.777-.56-.691-1.645-.692a2.2 2.2 0 0 0-1.015.235q-.22.113-.415.282l-.15.142a2.1 2.1 0 0 0-.42.594q-.223.479-.223 1.1v.115q0 .705.293 1.26zm2.616-.293c.157-.191.28-.479.28-.967 0-.51-.13-.79-.276-.961l-.021-.026c-.082-.1-.232-.225-.67-.225a.87.87 0 0 0-.681.279l-.012.011c-.154.155-.274.38-.274.807v.115c0 .285.057.499.144.669a1.1 1.1 0 0 0 .367.405c.137.082.28.123.455.123.423 0 .59-.118.686-.23zm8.266-3.013q.345-.13.724-.14l.069-.002q.493 0 .642.099l.247-1.794q-.196-.099-.717-.099a2.3 2.3 0 0 0-.545.063 2 2 0 0 0-.411.148 2.2 2.2 0 0 0-.4.249 2.5 2.5 0 0 0-.485.499 2.7 2.7 0 0 0-.32.581l-.05.137v-1.48h-1.778v7.553h1.777v-3.884q0-.546.159-.943a1.5 1.5 0 0 1 .466-.636 2.5 2.5 0 0 1 .399-.253 2 2 0 0 1 .224-.099zm9.784 2.656.05-.922q0-1.743-.856-2.698-.838-.97-2.584-.97-1.119-.001-2.007.493a3.46 3.46 0 0 0-1.4 1.382q-.493.906-.493 2.106 0 1.07.428 1.975.428.89 1.332 1.432.906.526 2.255.526.973 0 1.668-.185l.044-.012.135-.04q.613-.184.984-.421l-.542-1.267q-.3.162-.642.274l-.297.087q-.51.131-1.3.131-.954 0-1.497-.444a1.6 1.6 0 0 1-.192-.193q-.366-.44-.512-1.234l-.004-.021zm-5.427-1.256-.003.022h3.752v-.138q-.011-.727-.288-1.118a1 1 0 0 0-.156-.176q-.46-.428-1.316-.428-.986 0-1.494.604-.379.45-.494 1.234zm-27.053 2.77V4.7h-1.86v12.095h5.333V15.15zm7.103-5.908v7.553h-1.843V9.242h1.843z'/%3E%3Cpath fill='%23fff' d='m19.63 11.151-.757-1.71-.345 1.71-1.12 5.644h-1.827L18.083 4.7h.197l3.325 6.533.988 2.19.988-2.19L26.839 4.7h.181l2.6 12.095h-1.81l-1.218-5.644-.362-1.71-.658 1.71-2.93 5.644h-.098l-2.913-5.644zm14.836 5.81q-1.02 0-1.893-.478a3.8 3.8 0 0 1-1.381-1.382q-.51-.906-.51-2.106 0-1.185.444-2.074a3.36 3.36 0 0 1 1.3-1.382q.839-.494 1.974-.494a3.3 3.3 0 0 1 1.234.231 3.3 3.3 0 0 1 .97.575q.396.33.527.659l.033-1.267h1.694v7.553H37.18l-.033-1.332q-.279.593-1.02 1.053a3.17 3.17 0 0 1-1.662.444zm.296-1.482q.938 0 1.58-.642.642-.66.642-1.711v-.115q0-.708-.296-1.267a2.2 2.2 0 0 0-.807-.872 2.1 2.1 0 0 0-1.119-.313q-1.053 0-1.629.692-.575.675-.575 1.76 0 1.103.559 1.795.577.675 1.645.675zm6.521-6.237h1.711v1.4q.906-1.597 2.83-1.597 1.596 0 2.584 1.02.988 1.005.988 2.914 0 1.185-.493 2.09a3.46 3.46 0 0 1-1.316 1.399 3.5 3.5 0 0 1-1.844.493q-.954 0-1.662-.329a2.67 2.67 0 0 1-1.086-.97l.017 5.134h-1.728zm4.048 6.22q1.07 0 1.645-.674.577-.69.576-1.762 0-1.119-.576-1.777-.558-.675-1.645-.675-.592 0-1.12.296-.51.28-.822.823-.296.527-.296 1.234v.115q0 .708.296 1.267.313.543.823.855.51.296 1.119.297z'/%3E%3Cpath fill='%23e1e3e9' d='M51.325 4.7h1.86v10.45h3.473v1.646h-5.333zm7.12 4.542h1.843v7.553h-1.843zm.905-1.415a1.16 1.16 0 0 1-.856-.346 1.17 1.17 0 0 1-.346-.856 1.05 1.05 0 0 1 .346-.79q.346-.329.856-.329.494 0 .839.33a1.05 1.05 0 0 1 .345.79 1.16 1.16 0 0 1-.345.855q-.33.346-.84.346zm7.875 9.133a3.17 3.17 0 0 1-1.662-.444q-.723-.46-1.004-1.053l-.033 1.332h-1.71V4.701h1.743v4.657l-.082 1.283q.279-.658 1.086-1.119a3.5 3.5 0 0 1 1.778-.477q1.119 0 1.942.51a3.24 3.24 0 0 1 1.283 1.4q.445.888.444 2.072 0 1.201-.526 2.09a3.5 3.5 0 0 1-1.382 1.366 3.8 3.8 0 0 1-1.876.477zm-.296-1.481q1.069 0 1.645-.675.577-.69.577-1.778 0-1.102-.577-1.776-.56-.691-1.645-.692a2.12 2.12 0 0 0-1.58.659q-.642.641-.642 1.694v.115q0 .71.296 1.267a2.4 2.4 0 0 0 .807.872 2.1 2.1 0 0 0 1.119.313zm5.927-6.237h1.777v1.481q.263-.757.856-1.217a2.14 2.14 0 0 1 1.349-.46q.527 0 .724.098l-.247 1.794q-.149-.099-.642-.099-.774 0-1.416.494-.626.493-.626 1.58v3.883h-1.777V9.242zm9.534 7.718q-1.35 0-2.255-.526-.904-.543-1.332-1.432a4.6 4.6 0 0 1-.428-1.975q0-1.2.493-2.106a3.46 3.46 0 0 1 1.4-1.382q.889-.495 2.007-.494 1.744 0 2.584.97.855.956.856 2.7 0 .444-.05.92h-5.43q.18 1.005.708 1.45.542.443 1.497.443.79 0 1.3-.131a4 4 0 0 0 .938-.362l.542 1.267q-.411.263-1.119.46-.708.198-1.711.197zm1.596-4.558q.016-1.02-.444-1.432-.46-.428-1.316-.428-1.728 0-1.991 1.86z'/%3E%3Cpath d='M5.074 15.948a.484.657 0 0 0-.486.659v1.84a.484.657 0 0 0 .486.659h4.101a.484.657 0 0 0 .486-.659v-1.84a.484.657 0 0 0-.486-.659zm3.56 1.16H5.617v.838h3.017z' style='fill:%23fff;fill-rule:evenodd;stroke-width:1.03600001'/%3E%3Cg style='stroke-width:1.12603545'%3E%3Cpath d='M-9.408-1.416c-3.833-.025-7.056 2.912-7.08 6.615-.02 3.08 1.653 4.832 3.107 6.268.903.892 1.721 1.74 2.32 2.902l-.525-.004c-.543-.003-.992.304-1.24.639a1.87 1.87 0 0 0-.362 1.121l-.011 1.877c-.003.402.104.787.347 1.125.244.338.688.653 1.23.656l4.142.028c.542.003.99-.306 1.238-.641a1.87 1.87 0 0 0 .363-1.121l.012-1.875a1.87 1.87 0 0 0-.348-1.127c-.243-.338-.688-.653-1.23-.656l-.518-.004c.597-1.145 1.425-1.983 2.348-2.87 1.473-1.414 3.18-3.149 3.2-6.226-.016-3.59-2.923-6.684-6.993-6.707m-.006 1.1v.002c3.274.02 5.92 2.532 5.9 5.6-.017 2.706-1.39 4.026-2.863 5.44-1.034.994-2.118 2.033-2.814 3.633-.018.041-.052.055-.075.065q-.013.004-.02.01a.34.34 0 0 1-.226.084.34.34 0 0 1-.224-.086l-.092-.077c-.699-1.615-1.768-2.669-2.781-3.67-1.454-1.435-2.797-2.762-2.78-5.478.02-3.067 2.7-5.545 5.975-5.523m-.02 2.826c-1.62-.01-2.944 1.315-2.955 2.96-.01 1.646 1.295 2.988 2.916 2.999h.002c1.621.01 2.943-1.316 2.953-2.961.011-1.646-1.294-2.988-2.916-2.998m-.005 1.1c1.017.006 1.829.83 1.822 1.89s-.83 1.874-1.848 1.867c-1.018-.006-1.829-.83-1.822-1.89s.83-1.874 1.848-1.868m-2.155 11.857 4.14.025c.271.002.49.305.487.676l-.013 1.875c-.003.37-.224.67-.495.668l-4.14-.025c-.27-.002-.487-.306-.485-.676l.012-1.875c.003-.37.224-.67.494-.668' style='color:%23000;font-style:normal;font-variant:normal;font-weight:400;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;font-variant-ligatures:normal;font-variant-position:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-alternates:normal;font-feature-settings:normal;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:%23000;letter-spacing:normal;word-spacing:normal;text-transform:none;writing-mode:lr-tb;direction:ltr;text-orientation:mixed;dominant-baseline:auto;baseline-shift:baseline;text-anchor:start;white-space:normal;shape-padding:0;clip-rule:evenodd;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:%23000;solid-opacity:1;vector-effect:none;fill:%23000;fill-opacity:.4;fill-rule:evenodd;stroke:none;stroke-width:2.47727823;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto' transform='translate(15.553 2.85)scale(.88807)'/%3E%3Cpath d='M-9.415-.316C-12.69-.338-15.37 2.14-15.39 5.207c-.017 2.716 1.326 4.041 2.78 5.477 1.013 1 2.081 2.055 2.78 3.67l.092.076a.34.34 0 0 0 .225.086.34.34 0 0 0 .227-.083l.019-.01c.022-.009.057-.024.074-.064.697-1.6 1.78-2.64 2.814-3.634 1.473-1.414 2.847-2.733 2.864-5.44.02-3.067-2.627-5.58-5.901-5.601m-.057 8.784c1.621.011 2.944-1.315 2.955-2.96.01-1.646-1.295-2.988-2.916-2.999-1.622-.01-2.945 1.315-2.955 2.96s1.295 2.989 2.916 3' style='clip-rule:evenodd;fill:%23e1e3e9;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:2.47727823;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:.4' transform='translate(15.553 2.85)scale(.88807)'/%3E%3Cpath d='M-11.594 15.465c-.27-.002-.492.297-.494.668l-.012 1.876c-.003.371.214.673.485.675l4.14.027c.271.002.492-.298.495-.668l.012-1.877c.003-.37-.215-.672-.485-.674z' style='clip-rule:evenodd;fill:%23fff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:2.47727823;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:.4' transform='translate(15.553 2.85)scale(.88807)'/%3E%3C/g%3E%3C/svg%3E")}}.maplibregl-ctrl.maplibregl-ctrl-attrib{background-color:hsla(0,0%,100%,.5);margin:0;padding:0 5px}@media screen{.maplibregl-ctrl-attrib.maplibregl-compact{background-color:#fff;border-radius:12px;box-sizing:content-box;color:#000;margin:10px;min-height:20px;padding:2px 24px 2px 0;position:relative}.maplibregl-ctrl-attrib.maplibregl-compact-show{padding:2px 28px 2px 8px;visibility:visible}.maplibregl-ctrl-bottom-left>.maplibregl-ctrl-attrib.maplibregl-compact-show,.maplibregl-ctrl-top-left>.maplibregl-ctrl-attrib.maplibregl-compact-show{border-radius:12px;padding:2px 8px 2px 28px}.maplibregl-ctrl-attrib.maplibregl-compact .maplibregl-ctrl-attrib-inner{display:none}.maplibregl-ctrl-attrib-button{background-color:hsla(0,0%,100%,.5);background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill-rule='evenodd' viewBox='0 0 20 20'%3E%3Cpath d='M4 10a6 6 0 1 0 12 0 6 6 0 1 0-12 0m5-3a1 1 0 1 0 2 0 1 1 0 1 0-2 0m0 3a1 1 0 1 1 2 0v3a1 1 0 1 1-2 0'/%3E%3C/svg%3E");border:0;border-radius:12px;box-sizing:border-box;cursor:pointer;display:none;height:24px;outline:none;position:absolute;right:0;top:0;width:24px}.maplibregl-ctrl-attrib summary.maplibregl-ctrl-attrib-button{-webkit-appearance:none;-moz-appearance:none;appearance:none;list-style:none}.maplibregl-ctrl-attrib summary.maplibregl-ctrl-attrib-button::-webkit-details-marker{display:none}.maplibregl-ctrl-bottom-left .maplibregl-ctrl-attrib-button,.maplibregl-ctrl-top-left .maplibregl-ctrl-attrib-button{left:0}.maplibregl-ctrl-attrib.maplibregl-compact .maplibregl-ctrl-attrib-button,.maplibregl-ctrl-attrib.maplibregl-compact-show .maplibregl-ctrl-attrib-inner{display:block}.maplibregl-ctrl-attrib.maplibregl-compact-show .maplibregl-ctrl-attrib-button{background-color:rgb(0 0 0/5%)}.maplibregl-ctrl-bottom-right>.maplibregl-ctrl-attrib.maplibregl-compact:after{bottom:0;right:0}.maplibregl-ctrl-top-right>.maplibregl-ctrl-attrib.maplibregl-compact:after{right:0;top:0}.maplibregl-ctrl-top-left>.maplibregl-ctrl-attrib.maplibregl-compact:after{left:0;top:0}.maplibregl-ctrl-bottom-left>.maplibregl-ctrl-attrib.maplibregl-compact:after{bottom:0;left:0}}@media screen and (forced-colors:active){.maplibregl-ctrl-attrib.maplibregl-compact:after{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='%23fff' fill-rule='evenodd' viewBox='0 0 20 20'%3E%3Cpath d='M4 10a6 6 0 1 0 12 0 6 6 0 1 0-12 0m5-3a1 1 0 1 0 2 0 1 1 0 1 0-2 0m0 3a1 1 0 1 1 2 0v3a1 1 0 1 1-2 0'/%3E%3C/svg%3E")}}@media screen and (forced-colors:active) and (prefers-color-scheme:light){.maplibregl-ctrl-attrib.maplibregl-compact:after{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill-rule='evenodd' viewBox='0 0 20 20'%3E%3Cpath d='M4 10a6 6 0 1 0 12 0 6 6 0 1 0-12 0m5-3a1 1 0 1 0 2 0 1 1 0 1 0-2 0m0 3a1 1 0 1 1 2 0v3a1 1 0 1 1-2 0'/%3E%3C/svg%3E")}}.maplibregl-ctrl-attrib a{color:rgba(0,0,0,.75);text-decoration:none}.maplibregl-ctrl-attrib a:hover{color:inherit;text-decoration:underline}.maplibregl-attrib-empty{display:none}.maplibregl-ctrl-scale{background-color:hsla(0,0%,100%,.75);border:2px solid #333;border-top:#333;box-sizing:border-box;color:#333;font-size:10px;padding:0 5px}.maplibregl-popup{display:flex;left:0;pointer-events:none;position:absolute;top:0;will-change:transform}.maplibregl-popup-anchor-top,.maplibregl-popup-anchor-top-left,.maplibregl-popup-anchor-top-right{flex-direction:column}.maplibregl-popup-anchor-bottom,.maplibregl-popup-anchor-bottom-left,.maplibregl-popup-anchor-bottom-right{flex-direction:column-reverse}.maplibregl-popup-anchor-left{flex-direction:row}.maplibregl-popup-anchor-right{flex-direction:row-reverse}.maplibregl-popup-tip{border:10px solid transparent;height:0;width:0;z-index:1}.maplibregl-popup-anchor-top .maplibregl-popup-tip{align-self:center;border-bottom-color:#fff;border-top:none}.maplibregl-popup-anchor-top-left .maplibregl-popup-tip{align-self:flex-start;border-bottom-color:#fff;border-left:none;border-top:none}.maplibregl-popup-anchor-top-right .maplibregl-popup-tip{align-self:flex-end;border-bottom-color:#fff;border-right:none;border-top:none}.maplibregl-popup-anchor-bottom .maplibregl-popup-tip{align-self:center;border-bottom:none;border-top-color:#fff}.maplibregl-popup-anchor-bottom-left .maplibregl-popup-tip{align-self:flex-start;border-bottom:none;border-left:none;border-top-color:#fff}.maplibregl-popup-anchor-bottom-right .maplibregl-popup-tip{align-self:flex-end;border-bottom:none;border-right:none;border-top-color:#fff}.maplibregl-popup-anchor-left .maplibregl-popup-tip{align-self:center;border-left:none;border-right-color:#fff}.maplibregl-popup-anchor-right .maplibregl-popup-tip{align-self:center;border-left-color:#fff;border-right:none}.maplibregl-popup-close-button{background-color:transparent;border:0;border-radius:0 3px 0 0;cursor:pointer;position:absolute;right:0;top:0}.maplibregl-popup-close-button:hover{background-color:rgb(0 0 0/5%)}.maplibregl-popup-content{background:#fff;border-radius:3px;box-shadow:0 1px 2px rgba(0,0,0,.1);padding:15px 10px;pointer-events:auto;position:relative}.maplibregl-popup-anchor-top-left .maplibregl-popup-content{border-top-left-radius:0}.maplibregl-popup-anchor-top-right .maplibregl-popup-content{border-top-right-radius:0}.maplibregl-popup-anchor-bottom-left .maplibregl-popup-content{border-bottom-left-radius:0}.maplibregl-popup-anchor-bottom-right .maplibregl-popup-content{border-bottom-right-radius:0}.maplibregl-popup-track-pointer{display:none}.maplibregl-popup-track-pointer *{pointer-events:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}.maplibregl-map:hover .maplibregl-popup-track-pointer{display:flex}.maplibregl-map:active .maplibregl-popup-track-pointer{display:none}.maplibregl-marker{left:0;position:absolute;top:0;transition:opacity .2s;will-change:transform}.maplibregl-user-location-dot,.maplibregl-user-location-dot:before{background-color:#1da1f2;border-radius:50%;height:15px;width:15px}.maplibregl-user-location-dot:before{animation:maplibregl-user-location-dot-pulse 2s infinite;content:"";position:absolute}.maplibregl-user-location-dot:after{border:2px solid #fff;border-radius:50%;box-shadow:0 0 3px rgba(0,0,0,.35);box-sizing:border-box;content:"";height:19px;left:-2px;position:absolute;top:-2px;width:19px}@keyframes maplibregl-user-location-dot-pulse{0%{opacity:1;transform:scale(1)}70%{opacity:0;transform:scale(3)}to{opacity:0;transform:scale(1)}}.maplibregl-user-location-dot-stale{background-color:#aaa}.maplibregl-user-location-dot-stale:after{display:none}.maplibregl-user-location-accuracy-circle{background-color:#1da1f233;border-radius:100%;height:1px;width:1px}.maplibregl-crosshair,.maplibregl-crosshair .maplibregl-interactive,.maplibregl-crosshair .maplibregl-interactive:active{cursor:crosshair}.maplibregl-boxzoom{background:#fff;border:2px dotted #202020;height:0;left:0;opacity:.5;position:absolute;top:0;width:0}.maplibregl-cooperative-gesture-screen{align-items:center;background:rgba(0,0,0,.4);color:#fff;display:flex;font-size:1.4em;inset:0;justify-content:center;line-height:1.2;opacity:0;padding:1rem;pointer-events:none;position:absolute;transition:opacity 1s ease 1s;z-index:99999}.maplibregl-cooperative-gesture-screen.maplibregl-show{opacity:1;transition:opacity .05s}.maplibregl-cooperative-gesture-screen .maplibregl-mobile-message{display:none}@media (hover:none),(width <= 480px){.maplibregl-cooperative-gesture-screen .maplibregl-desktop-message{display:none}.maplibregl-cooperative-gesture-screen .maplibregl-mobile-message{display:block}}.maplibregl-pseudo-fullscreen{height:100%!important;left:0!important;position:fixed!important;top:0!important;width:100%!important;z-index:99999}