/* ============================================================
   OASIS Advanced Modals — shared sizing & component styles
   Celestial Map, Social Graph, OAPP Map, Karma Ledger,
   Chain Explorer, Holon Designer, Holon Diff,
   Provider Migration, OASIS Config
   ============================================================ */

.celestial-map-modal-block,
.social-graph-modal-block,
.oapp-map-modal-block,
.karma-ledger-modal-block,
.chain-explorer-modal-block,
.holon-designer-modal-block,
.holon-diff-modal-block,
.provider-migration-modal-block,
.oasis-config-modal-block,
.holon-browser-modal-block {
  width: min(920px, calc(100vw - 24px));
  max-height: calc(100vh - 24px);
  overflow-y: auto;
  overflow-x: hidden;
  left: 50%;
  top: 50%;
  padding: 0;
  background: transparent;
  box-shadow: none;
  border-radius: 0;
  backdrop-filter: none;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  letter-spacing: normal;
}

.celestial-map-modal-shell, .social-graph-modal-shell, .oapp-map-modal-shell,
.karma-ledger-modal-shell, .chain-explorer-modal-shell, .holon-designer-modal-shell,
.holon-diff-modal-shell, .provider-migration-modal-shell, .oasis-config-modal-shell {
  width: 100%; padding: 0;
}

.celestial-map-modal-card, .social-graph-modal-card, .oapp-map-modal-card,
.karma-ledger-modal-card, .chain-explorer-modal-card, .holon-designer-modal-card,
.holon-diff-modal-card, .provider-migration-modal-card, .oasis-config-modal-card {
  background: #0d1e35;
  border: 1px solid #1a3a5c;
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 520px;
}

/* ---- Top bars ---- */
.celestial-map-modal-top, .social-graph-modal-top, .oapp-map-modal-top,
.karma-ledger-modal-top, .chain-explorer-modal-top, .holon-designer-modal-top,
.holon-diff-modal-top, .provider-migration-modal-top, .oasis-config-modal-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 20px 24px 16px;
  border-bottom: 1px solid #1a3a5c;
}

.celestial-map-modal-title, .social-graph-modal-title, .oapp-map-modal-title,
.karma-ledger-modal-title, .chain-explorer-modal-title, .holon-designer-modal-title,
.holon-diff-modal-title, .provider-migration-modal-title, .oasis-config-modal-title {
  font-size: 20px; font-weight: 700; color: #a8bfd8; margin: 0 0 4px;
}

.celestial-map-modal-lead, .social-graph-modal-lead, .oapp-map-modal-lead,
.karma-ledger-modal-lead, .chain-explorer-modal-lead, .holon-designer-modal-lead,
.holon-diff-modal-lead, .provider-migration-modal-lead, .oasis-config-modal-lead {
  margin: 0; font-size: 13px; color: #a8bfd8; opacity: .7;
}

/* ---- Shared toolbar ---- */
.celestial-map-toolbar, .social-graph-toolbar, .oapp-map-toolbar,
.karma-ledger-toolbar, .chain-explorer-toolbar {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 16px; border-bottom: 1px solid #1a3a5c; flex-wrap: wrap;
}

.celestial-map-input {
  background: #0a1628; border: 1px solid #1a3a5c; border-radius: 6px;
  color: #a8bfd8; font-size: 12px; padding: 5px 10px;
  min-width: 160px; flex: 1;
}
.celestial-map-input:focus { outline: none; border-color: #4fa3e0; }

.celestial-map-btn {
  background: #0a1628; border: 1px solid #1a3a5c; border-radius: 6px;
  color: #6a80a8; cursor: pointer; font-size: 12px;
  padding: 5px 12px; white-space: nowrap;
}
.celestial-map-btn:hover { color: #a8bfd8; border-color: #4fa3e0; }
.celestial-map-btn:disabled { opacity: .5; cursor: not-allowed; }

.celestial-map-status-text { font-size: 11px; color: #50c8c8; }

/* ---- SVG canvases ---- */
.celestial-map-canvas-wrap, .social-graph-canvas-wrap {
  flex: 1; overflow: hidden; min-height: 360px;
  background: #0a1628; position: relative;
}
.celestial-map-svg, .social-graph-svg {
  display: block; width: 100%; height: 100%; cursor: grab;
}
.celestial-map-svg:active, .social-graph-svg:active { cursor: grabbing; }

/* ---- Celestial detail panel ---- */
.celestial-map-detail {
  border-top: 1px solid #1a3a5c; padding: 10px 16px;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  background: #0d1e35; font-size: 13px; color: #a8bfd8;
}
.celestial-map-detail-inner { flex: 1; }

/* ---- Legends ---- */
.social-graph-legend { padding: 8px 16px; font-size: 11px; color: #6a80a8; border-top: 1px solid #1a3a5c; }
.oapp-map-legend { padding: 6px 16px; font-size: 11px; color: #6a80a8; border-bottom: 1px solid #1a3a5c; }

/* ============================================================
   Karma Ledger
   ============================================================ */
.karma-ledger-body { padding: 12px 20px; flex: 1; overflow-y: auto; }
.karma-ledger-section-label {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; color: #4a6080;
  border-bottom: 1px solid #1a3a5c; padding-bottom: 4px; margin-bottom: 8px;
}
.karma-ledger-chart { display: flex; flex-direction: column; gap: 5px; }
.karma-ledger-bar-row { display: flex; align-items: center; gap: 8px; }
.karma-ledger-bar-label {
  min-width: 120px; font-size: 11px; color: #6a80a8;
  text-overflow: ellipsis; overflow: hidden; white-space: nowrap;
}
.karma-ledger-bar-track {
  flex: 1; height: 10px; background: #0a1628; border-radius: 5px; overflow: hidden;
}
.karma-ledger-bar-fill { height: 100%; background: #50c878; border-radius: 5px; transition: width .3s; }
.karma-ledger-bar-val { min-width: 60px; font-size: 11px; color: #50c878; text-align: right; }
.karma-ledger-list { display: flex; flex-direction: column; gap: 3px; max-height: 240px; overflow-y: auto; }
.karma-ledger-event-row {
  display: flex; align-items: center; gap: 10px;
  padding: 5px 8px; background: #0a1628; border-radius: 5px; font-size: 11px;
}
.karma-ledger-event-action { flex: 1.5; color: #a8bfd8; }
.karma-ledger-event-provider { flex: 1; color: #6a80a8; font-size: 10px; }
.karma-ledger-event-delta { min-width: 56px; text-align: right; font-weight: 600; }
.karma-ledger-event-date { min-width: 80px; color: #4a6080; font-size: 10px; text-align: right; }

/* ============================================================
   Chain Explorer
   ============================================================ */
.chain-explorer-filter { flex: 1; min-width: 180px; }
.chain-explorer-select {
  background: #0a1628; border: 1px solid #1a3a5c; border-radius: 6px;
  color: #a8bfd8; font-size: 12px; padding: 5px 8px;
}
.chain-explorer-table-wrap {
  flex: 1; overflow-x: auto; overflow-y: auto; min-height: 280px;
}
.chain-explorer-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.chain-explorer-table th {
  padding: 8px 12px; text-align: left; font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em; color: #4a6080;
  border-bottom: 1px solid #1a3a5c; white-space: nowrap;
}
.chain-explorer-table td {
  padding: 7px 12px; color: #a8bfd8;
  border-bottom: 1px solid #0a1628; white-space: nowrap;
}
.chain-explorer-table tr:hover td { background: #0a1628; }
.chain-explorer-hash { font-family: monospace; font-size: 11px; color: #4fa3e0; }
.chain-explorer-pagination {
  display: flex; align-items: center; justify-content: center;
  gap: 12px; padding: 10px 16px; border-top: 1px solid #1a3a5c;
}

/* ============================================================
   Holon Schema Designer
   ============================================================ */
.holon-designer-layout { display: flex; flex: 1; overflow: hidden; }
.holon-designer-sidebar {
  width: 260px; flex-shrink: 0; border-right: 1px solid #1a3a5c;
  padding: 12px 16px; overflow-y: auto;
  display: flex; flex-direction: column; gap: 6px;
}
.holon-designer-canvas-wrap {
  flex: 1; overflow: auto; background: #0a1628;
  display: flex; align-items: flex-start; justify-content: center; padding: 24px;
}
.holon-designer-section-label {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; color: #4a6080;
}
.holon-designer-input {
  background: #0a1628; border: 1px solid #1a3a5c; border-radius: 5px;
  color: #a8bfd8; font-size: 12px; padding: 5px 8px;
  width: 100%; box-sizing: border-box;
}
.holon-designer-input:focus { outline: none; border-color: #4fa3e0; }
.holon-designer-select {
  background: #0a1628; border: 1px solid #1a3a5c; border-radius: 5px;
  color: #a8bfd8; font-size: 12px; padding: 5px 6px;
}
.holon-designer-fields-list {
  display: flex; flex-direction: column; gap: 3px;
  max-height: 200px; overflow-y: auto;
}
.holon-designer-field-row {
  display: flex; align-items: center; gap: 6px;
  background: #0a1628; border-radius: 4px; padding: 4px 8px; font-size: 11px;
}
.holon-designer-field-name { flex: 1; color: #a8bfd8; }
.holon-designer-field-type { color: #4fa3e0; font-size: 10px; }
.holon-designer-field-req { color: #e06b4f; font-size: 10px; }
.holon-designer-del-btn {
  background: none; border: none; color: #4a6080; cursor: pointer;
  font-size: 12px; margin-left: auto;
}
.holon-designer-del-btn:hover { color: #e06b4f; }
.holon-designer-add-row { display: flex; gap: 5px; align-items: center; }
.holon-designer-action-row { display: flex; gap: 8px; margin-top: 8px; }
.holon-designer-save-btn {
  background: #4fa3e0 !important; color: #0a1628 !important;
  font-weight: 600; border-color: #4fa3e0 !important;
}
.holon-designer-msg {
  padding: 6px 10px; border-radius: 5px; font-size: 12px;
  margin-top: 6px; background: #0a1628;
}

/* Holon card preview */
.holon-designer-card {
  background: #0d1e35; border: 2px solid #4fa3e0;
  border-radius: 10px; overflow: hidden; min-width: 240px;
}
.holon-designer-card-title {
  background: #4fa3e0; color: #0a1628; font-size: 14px;
  font-weight: 700; padding: 8px 14px;
}
.holon-designer-card-subtitle {
  padding: 4px 14px; font-size: 10px; color: #4a6080;
  background: #0a1628; text-transform: uppercase; letter-spacing: .06em;
}
.holon-designer-card-fields { padding: 8px 0; }
.holon-designer-card-field {
  display: flex; justify-content: space-between;
  padding: 4px 14px; font-size: 12px;
  border-bottom: 1px solid #0d1e35;
}
.holon-designer-card-field:last-child { border-bottom: none; }
.holon-designer-card-field-name { color: #a8bfd8; }
.holon-designer-card-field-type { color: #4fa3e0; font-size: 10px; }

/* ============================================================
   Holon Version Diff
   ============================================================ */
.holon-diff-controls {
  padding: 10px 16px; border-bottom: 1px solid #1a3a5c;
  display: flex; flex-direction: column; gap: 8px;
}
.holon-diff-control-row { display: flex; align-items: center; gap: 8px; }
.holon-diff-label { font-size: 11px; color: #6a80a8; white-space: nowrap; }
.holon-diff-id-input { flex: 1; }
.holon-diff-version-row { display: flex; align-items: center; gap: 10px; }
.holon-diff-side { display: flex; align-items: center; gap: 6px; flex: 1; }
.holon-diff-panels {
  display: flex; flex: 1; overflow: hidden; gap: 2px;
  background: #0a1628; min-height: 320px;
}
.holon-diff-panel { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
.holon-diff-panel-header {
  padding: 6px 12px; font-size: 11px; font-weight: 700; color: #6a80a8;
  background: #0d1e35; border-bottom: 1px solid #1a3a5c;
}
.holon-diff-pre {
  flex: 1; overflow: auto; margin: 0; padding: 10px 12px;
  font-family: monospace; font-size: 11px; color: #a8bfd8;
  background: #0a1628; white-space: pre; line-height: 1.6;
}
.diff-add  { display: block; background: rgba(80,200,120,.12); color: #50c878; }
.diff-del  { display: block; background: rgba(224,107,79,.12); color: #e06b4f; }
.diff-empty { display: block; color: transparent; background: rgba(26,58,92,.18); }

/* ============================================================
   Provider Migration Wizard
   ============================================================ */
.pmig-steps { display: flex; align-items: center; gap: 0; padding: 10px 20px 6px; }
.pmig-step {
  width: 28px; height: 28px; border-radius: 50%;
  border: 2px solid #1a3a5c; background: #0a1628; color: #4a6080;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700;
  margin-right: 32px; position: relative; z-index: 1; flex-shrink: 0;
}
.pmig-step::after {
  content: '';
  position: absolute; left: 28px; top: 50%;
  width: 32px; height: 1px;
  background: #1a3a5c; transform: translateY(-50%);
}
.pmig-step:last-child::after { display: none; }
.pmig-step.active { border-color: #4fa3e0; color: #4fa3e0; }
.pmig-step.done   { border-color: #50c878; color: #50c878; background: rgba(80,200,120,.1); }
.pmig-error { margin: 4px 20px; color: #e06b4f; font-size: 12px; }
.pmig-body {
  flex: 1; overflow-y: auto; padding: 14px 20px;
  display: flex; flex-direction: column; gap: 8px;
}
.pmig-section {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; color: #4a6080;
  border-bottom: 1px solid #1a3a5c; padding-bottom: 4px;
}
.pmig-select {
  background: #0a1628; border: 1px solid #1a3a5c; border-radius: 6px;
  color: #a8bfd8; font-size: 12px; padding: 6px 10px; width: 100%;
}
.pmig-select:focus { outline: none; border-color: #4fa3e0; }
.pmig-type-cards { display: flex; flex-wrap: wrap; gap: 8px; }
.pmig-type-card {
  background: #0a1628; border: 1px solid #1a3a5c; border-radius: 8px;
  padding: 8px 14px; cursor: pointer; font-size: 13px;
  color: #6a80a8; user-select: none;
}
.pmig-type-card.selected {
  border-color: #4fa3e0; color: #4fa3e0;
  background: rgba(79,163,224,.08);
}
.pmig-summary {
  background: #0a1628; border: 1px solid #1a3a5c; border-radius: 8px;
  padding: 10px 14px; font-size: 12px; color: #6a80a8;
  display: flex; flex-direction: column; gap: 4px;
}
.pmig-src { color: #e06b4f; }
.pmig-dst { color: #50c878; }
.pmig-btn-row { display: flex; gap: 8px; margin-top: 4px; }
.pmig-next-btn {
  flex: 1; background: #4fa3e0; border: none; border-radius: 6px;
  color: #0a1628; cursor: pointer; font-size: 13px; font-weight: 700; padding: 9px;
}
.pmig-next-btn:disabled { opacity: .5; cursor: not-allowed; }
.pmig-back-btn {
  background: none; border: 1px solid #1a3a5c; border-radius: 6px;
  color: #6a80a8; cursor: pointer; font-size: 12px; padding: 9px 16px;
}
.pmig-run-btn {
  flex: 1; background: #50c878; border: none; border-radius: 6px;
  color: #0a1628; cursor: pointer; font-size: 13px; font-weight: 700; padding: 9px;
}
.pmig-preview-list {
  display: flex; flex-direction: column; gap: 3px;
  max-height: 220px; overflow-y: auto;
}
.pmig-preview-item {
  display: flex; justify-content: space-between;
  background: #0a1628; border-radius: 4px; padding: 5px 10px; font-size: 11px;
}
.pmig-item-name { color: #a8bfd8; }
.pmig-item-id { color: #4a6080; font-family: monospace; font-size: 10px; }
.pmig-progress-track { height: 10px; background: #0a1628; border-radius: 5px; overflow: hidden; }
.pmig-progress-fill { height: 100%; border-radius: 5px; transition: width .2s; }
.pmig-progress-label { font-size: 12px; color: #6a80a8; text-align: center; padding: 4px 0; }
.pmig-run-list {
  display: flex; flex-direction: column; gap: 3px;
  max-height: 260px; overflow-y: auto;
}
.pmig-run-item {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 8px; border-radius: 5px; font-size: 12px;
}
.pmig-run-item.done      { background: rgba(80,200,120,.08); }
.pmig-run-item.error     { background: rgba(224,107,79,.08); }
.pmig-run-item.migrating { background: rgba(79,163,224,.08); }
.pmig-run-icon { font-size: 14px; flex-shrink: 0; }
.pmig-run-item.done .pmig-run-icon      { color: #50c878; }
.pmig-run-item.error .pmig-run-icon     { color: #e06b4f; }
.pmig-run-item.migrating .pmig-run-icon { color: #4fa3e0; }

/* ============================================================
   OASIS Config Editor
   ============================================================ */
.oasis-config-body {
  padding: 14px 20px; flex: 1; overflow-y: auto;
  display: flex; flex-direction: column; gap: 6px;
}
.oasis-config-section-label {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; color: #4a6080;
  border-bottom: 1px solid #1a3a5c; padding-bottom: 4px;
}
.oasis-config-select {
  background: #0a1628; border: 1px solid #1a3a5c; border-radius: 6px;
  color: #a8bfd8; font-size: 12px; padding: 6px 10px; width: 100%;
}
.oasis-config-select:focus { outline: none; border-color: #4fa3e0; }
.oasis-config-providers-grid { display: flex; flex-wrap: wrap; gap: 6px; }
.oasis-config-chip {
  background: #0a1628; border: 1px solid #1a3a5c; border-radius: 12px;
  padding: 4px 10px; font-size: 11px; color: #6a80a8;
  cursor: pointer; user-select: none;
}
.oasis-config-chip.on {
  border-color: #4fa3e0; color: #4fa3e0;
  background: rgba(79,163,224,.1);
}
.oasis-config-check-row {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; color: #a8bfd8; cursor: pointer;
}
.oasis-config-check-row input[type=checkbox] {
  accent-color: #4fa3e0; width: 16px; height: 16px;
}
.oasis-config-action-row { display: flex; gap: 10px; margin-top: 12px; }
.oasis-config-save-btn {
  background: #4fa3e0; border: none; border-radius: 6px;
  color: #0a1628; cursor: pointer; font-size: 13px; font-weight: 700; padding: 9px 20px;
}
.oasis-config-save-btn:hover { background: #3a8ecf; }

/* ============================================================
   Holon Browser
   ============================================================ */
.holon-browser-modal-shell { width: 100%; padding: 0; }
.holon-browser-modal-card {
  background: #0d1e35; border: 1px solid #1a3a5c; border-radius: 16px;
  overflow: hidden; display: flex; flex-direction: column; min-height: 520px;
}
.holon-browser-modal-top {
  display: flex; align-items: flex-start; justify-content: space-between;
  padding: 20px 24px 16px; border-bottom: 1px solid #1a3a5c;
}
.holon-browser-modal-title { font-size: 20px; font-weight: 700; color: #a8bfd8; margin: 0 0 4px; }
.holon-browser-modal-lead  { margin: 0; font-size: 13px; color: #a8bfd8; opacity: .7; }

.hbrow-toolbar {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 10px 16px; border-bottom: 1px solid #1a3a5c;
}
.hbrow-input {
  flex: 1; min-width: 140px; background: #0a1628; border: 1px solid #1a3a5c;
  border-radius: 5px; color: #a8bfd8; font-size: 12px; padding: 5px 9px;
}
.hbrow-sel {
  background: #0a1628; border: 1px solid #1a3a5c; border-radius: 5px;
  color: #a8bfd8; font-size: 11px; padding: 5px 6px;
}
.hbrow-btn {
  background: #1a3a5c; border: none; border-radius: 5px;
  color: #a8bfd8; cursor: pointer; font-size: 11px; padding: 5px 10px;
}
.hbrow-btn:hover { background: #2a5a8c; }
.hbrow-status-text { font-size: 11px; color: #50c8c8; }

.hbrow-body { display: flex; flex: 1; overflow: hidden; min-height: 0; }
.hbrow-split .hbrow-list-col { flex: 1; }
.hbrow-list-col { flex: 1; overflow-y: auto; display: flex; flex-direction: column; }
#hbrow-body { display: flex; flex: 1; overflow: hidden; }

.hbrow-row {
  padding: 9px 14px; border-bottom: 1px solid #0a1628; cursor: pointer; transition: background .15s;
}
.hbrow-row:hover { background: #0a1628; }
.hbrow-row--active { background: #0a1628; border-left: 2px solid #4fa3e0; padding-left: 12px; }
.hbrow-row-main {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 3px;
}
.hbrow-row-name  { font-size: 13px; font-weight: 600; color: #a8bfd8; }
.hbrow-row-type  { font-size: 10px; background: #1a3a5c; color: #4fa3e0; border-radius: 6px; padding: 1px 7px; flex-shrink: 0; }
.hbrow-row-meta  { display: flex; align-items: center; gap: 12px; font-size: 10px; color: #4a6080; }

.hbrow-detail-col {
  width: 260px; flex-shrink: 0; border-left: 1px solid #1a3a5c;
  display: flex; flex-direction: column; overflow: hidden;
}
.hbrow-detail-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  padding: 12px 14px; border-bottom: 1px solid #1a3a5c;
}
.hbrow-detail-name { font-size: 14px; font-weight: 700; color: #a8bfd8; }
.hbrow-detail-type-badge { font-size: 10px; color: #4fa3e0; margin-top: 3px; display: block; }
.hbrow-detail-card { display: flex; flex-direction: column; flex: 1; overflow: hidden; }
.hbrow-detail-fields { flex: 1; overflow-y: auto; padding: 4px 0; }
.hbrow-field-row {
  display: flex; gap: 8px; padding: 5px 14px; border-bottom: 1px solid #0a1628;
}
.hbrow-field-key { min-width: 72px; font-size: 10px; color: #4a6080; flex-shrink: 0; padding-top: 1px; }
.hbrow-field-val { font-size: 11px; color: #a8bfd8; word-break: break-all; }
.hbrow-field-mono { font-family: monospace; font-size: 10px; color: #50c8c8; }