:root {
  --brand: #0f2a3f;
  --brand-light: #2b587a;
  --accent: #1f6feb;
  --bg: #f5f7fa;
  --panel: #ffffff;
  --border: #e4e8ee;
  --text: #17202a;
  --muted: #5b6673;
}

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

main {
  max-width: 980px;
  margin: 0 auto;
  padding: 1.5rem 2rem 3rem;
}

code {
  background: #eef2f6;
  padding: 0.1rem 0.3rem;
  border-radius: 4px;
}

h1 {
  margin: 0 0 0.5rem 0;
  font-size: 2rem;
}

.muted {
  color: var(--muted);
  margin-top: 0;
}

.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 2rem;
  background: var(--panel);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 10;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}

.brand img {
  height: 64px;
  width: auto;
}

.brand img:last-of-type {
  height: 56px;
}

.brand-title {
  font-weight: 700;
  color: var(--brand);
}

.brand-sub {
  font-size: 0.85rem;
  color: var(--muted);
}

.hero {
  background: linear-gradient(135deg, #ffffff, #f0f4f9);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 2rem;
  margin: 1.5rem 0;
  box-shadow: 0 10px 30px rgba(15, 42, 63, 0.08);
}

.hero.compact {
  padding: 1.2rem 1.6rem;
}

.hero-actions {
  display: flex;
  gap: 0.75rem;
  margin-top: 1rem;
}

.language-control {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: var(--muted);
  font-size: 0.85rem;
}

.language-control select {
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 0.2rem;
}

.profile-cards,
.advanced-tool-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 0.8rem;
}

.profile-card,
.tool-card {
  display: grid;
  gap: 0.35rem;
  padding: 1rem;
  border: 1px solid #c9d9e8;
  border-radius: 8px;
  color: var(--text);
  background: #f8fbfe;
  text-decoration: none;
}

.profile-card:hover,
.tool-card:hover {
  border-color: var(--accent);
  box-shadow: 0 4px 12px rgba(31, 111, 235, 0.12);
}

.profile-card small,
.tool-card span {
  color: var(--muted);
}

.panel {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 1rem;
  margin-top: 1.5rem;
  box-shadow: 0 6px 18px rgba(15, 42, 63, 0.06);
}

.nav {
  display: flex;
  gap: 0.75rem;
  margin-bottom: 0;
}

.nav a {
  text-decoration: none;
  color: var(--brand-light);
  font-weight: 500;
}

#json-input {
  width: 100%;
  min-height: 280px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px;
  padding: 0.75rem;
  border: 1px solid #ddd;
  border-radius: 6px;
  background: #fdfdfd;
  box-sizing: border-box;
}

.registry-form {
  display: grid;
  gap: 0.75rem;
}

.registry-id-controls {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.registry-id-controls input {
  flex: 1 1 auto;
  min-width: 0;
}

.registry-id-controls button {
  flex: 0 0 auto;
  white-space: nowrap;
}

.registry-object-field {
  display: grid;
  gap: 0.65rem;
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  padding: 0.75rem;
}

.registry-array-list {
  display: grid;
  gap: 0.65rem;
}

.registry-array-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.5rem;
  align-items: start;
}

.json-highlight {
  overflow: auto;
  margin: 0.75rem 0 0;
  padding: 0.75rem;
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  background: #f8fafc;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  white-space: pre-wrap;
}

.json-string { color: #0b6e4f; }
.json-number { color: #9a3412; }
.json-literal { color: #6d28d9; }

.actions {
  margin-top: 0.75rem;
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

button,
.btn {
  background: var(--accent);
  color: white;
  border: none;
  padding: 0.5rem 0.9rem;
  border-radius: 6px;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

button.ghost,
.btn.ghost {
  background: #eef2f6;
  color: var(--text);
}

.file-btn {
  background: #eef2f6;
  color: var(--text);
  border: none;
  padding: 0.5rem 0.9rem;
  border-radius: 6px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
}

.file-btn input {
  display: none;
}

#validation-output {
  background: #0b0b0b;
  color: #e8e8e8;
  padding: 0.75rem;
  border-radius: 6px;
  margin-top: 0.75rem;
  white-space: pre-wrap;
}

.validation-list {
  margin: 0.5rem 0 0;
  padding-left: 1.2rem;
}

.validation-error {
  display: inline;
  background: none;
  color: #9ed0ff;
  padding: 0;
  text-decoration: underline;
  text-align: left;
}

.item-validation-output {
  display: none;
  margin: 0.75rem 0 0;
  padding: 0.65rem 0.75rem;
  border-radius: 6px;
  white-space: pre-wrap;
}

.item-validation-output.validation-valid,
.item-validation-output.validation-invalid {
  display: block;
}

.item-validation-output.validation-valid {
  background: #eaf7ee;
  color: #176b36;
}

.item-validation-output.validation-invalid {
  background: #fff0f0;
  color: #9c1c1c;
}

#header-form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.75rem;
}

.form-row label {
  display: block;
  font-size: 0.85rem;
  margin-bottom: 0.25rem;
  color: #333;
}

.form-row input,
.form-row select,
.form-row textarea {
  width: 100%;
  padding: 0.4rem 0.5rem;
  border: 1px solid #ddd;
  border-radius: 6px;
  box-sizing: border-box;
}

.form-row textarea {
  min-height: 100px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
}

.field-description {
  display: block;
  color: var(--muted);
  margin-top: 0.25rem;
  line-height: 1.35;
}

.relationship-panel {
  display: grid;
  gap: 0.25rem;
  margin-bottom: 0.75rem;
  padding: 0.65rem;
  border: 1px solid #b7d4ef;
  border-radius: 6px;
  background: #f3f8fd;
}

.relationship-heading {
  display: block;
  margin-top: 0.25rem;
  color: var(--text);
}

.relationship-help {
  margin-bottom: 0.25rem;
}

.guided-item-picker {
  min-width: 180px;
  max-width: 280px;
  padding: 0.35rem 0.45rem;
  border: 1px solid #c9d5e2;
  border-radius: 6px;
  background: white;
  color: var(--text);
}

.guided-role-help {
  display: block;
  margin: 0.35rem 0 0.1rem;
  color: #7a4f00;
  font-size: 0.85rem;
}

.reference-checklist {
  display: grid;
  gap: 0.35rem;
  padding: 0.45rem;
  border: 1px solid #d6dee7;
  border-radius: 6px;
  background: #fff;
}

.reference-option {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  cursor: pointer;
}

.reference-option input {
  width: auto;
  margin: 0;
}

.reference-clear {
  align-self: start;
  margin-top: 0.4rem;
}

.unit-editor {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 0.5rem;
}

.unit-part {
  display: grid;
  gap: 0.2rem;
  font-size: 0.75rem;
  color: var(--muted);
}

.unit-array-list {
  display: grid;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.unit-array-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.5rem;
  align-items: end;
  padding: 0.5rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: #fafafa;
}

.object-array-list {
  display: grid;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.object-array-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.5rem;
  align-items: start;
}

.object-array-row textarea {
  min-height: 120px;
}

.mode-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.mode-tab {
  background: #eef2f6;
  color: var(--text);
}

.mode-tab.is-active {
  background: var(--accent);
  color: #fff;
}

.profile-control {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.9rem;
  font-weight: 600;
}

.profile-control select {
  padding: 0.4rem 0.5rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: #fff;
}

body[data-editor-mode="guided"] .expert-panel,
body[data-editor-mode="advanced"] .expert-panel {
  display: none;
}

body:not([data-editor-mode="guided"]) .guided-panel {
  display: none;
}

body[data-editor-mode="guided"] .editor-surface {
  display: none;
}

body[data-editor-mode="expert"] .guided-panel {
  display: none;
}

.guided-steps {
  display: grid;
  gap: 0.6rem;
}

.guided-navigation {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.8rem;
}

.guided-step {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.7rem 0.8rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: #fafafa;
}

.guided-step-block {
  display: grid;
  gap: 0.4rem;
}

.guided-dependency {
  padding-left: 0.8rem;
  color: var(--muted);
  font-style: italic;
}

.guided-questions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.75rem;
  padding: 0.6rem 0.8rem 0.2rem;
}

.example-values-heading,
.example-values-help {
  grid-column: 1 / -1;
}

.example-values-heading {
  margin-top: 0.5rem;
  color: var(--text);
}

.data-set-file-field {
  padding: 0.6rem;
  border: 1px solid #d8dee4;
  border-radius: 0.4rem;
  background: #f8fafc;
}

.data-set-file-field > strong {
  display: block;
  margin-bottom: 0.4rem;
}

.data-set-list-field {
  padding: 0.6rem;
  border: 1px solid #d8dee4;
  border-radius: 0.4rem;
  background: #f8fafc;
}

.data-set-list-preview {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

.guided-step.is-complete {
  border-color: #63a86b;
  background: #f1fbf2;
}

.guided-step.is-current {
  box-shadow: 0 0 0 2px rgba(31, 111, 235, 0.2);
}

.guided-step-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.array-list {
  margin-top: 0.75rem;
  display: grid;
  gap: 0.75rem;
}

.array-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.array-item {
  border: 1px solid #e6e6e6;
  border-radius: 6px;
  padding: 0.75rem;
  background: #fafafa;
}

.array-item-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.array-item textarea {
  width: 100%;
  min-height: 140px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  border: 1px solid #ddd;
  border-radius: 6px;
  padding: 0.5rem;
  box-sizing: border-box;
}

.array-item-form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.75rem;
}

.array-item-form .form-row textarea {
  min-height: 120px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  box-sizing: border-box;
}

.custom-properties-panel {
  grid-column: 1 / -1;
  display: grid;
  gap: 0.45rem;
  padding: 0.7rem;
  border: 1px dashed #b7c5d4;
  border-radius: 6px;
  background: #f8fbfe;
}

.custom-properties-list {
  display: grid;
  gap: 0.5rem;
}

.custom-property-row {
  display: grid;
  grid-template-columns: minmax(130px, 1fr) 110px minmax(150px, 2fr) auto;
  gap: 0.45rem;
  align-items: start;
}

.custom-property-row input,
.custom-property-row select,
.custom-property-row textarea {
  width: 100%;
  box-sizing: border-box;
}

.custom-property-row textarea {
  min-height: 70px;
}

@media (max-width: 700px) {
  .custom-property-row {
    grid-template-columns: 1fr;
  }
}

#schema-tree ul {
  list-style: none;
  padding-left: 1rem;
  margin: 0.25rem 0;
  border-left: 1px solid var(--border);
}

#schema-tree li {
  margin: 0.2rem 0;
}

.jv-light-con {
  background: #fff;
  color: #17202a;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  overflow: auto;
  width: 100%;
}

.jv-light-current {
  line-height: 1.8;
  min-height: 1.8rem;
  position: relative;
}

.jv-light-left {
  display: inline-block;
}

.jv-light-rightObj {
  display: block;
  height: 0;
  overflow: hidden;
}

.jv-light-rightObj.add-height {
  height: auto;
}

.jv-light-folder {
  display: inline-block;
  width: 1rem;
  margin-left: -1rem;
  color: #2b587a;
  cursor: pointer;
}

.jv-light-folder::before {
  content: "▸";
}

.jv-light-folder.rotate90::before {
  content: "▾";
}

.jv-light-rightString { color: #7a3e9d; }
.jv-light-rightBoolean { color: #448c27; }
.jv-light-rightNumber { color: #c04a1c; }
.jv-light-rightNull { color: #9c5d27; }

.graph-action-hidden {
  display: none;
}

.schema-toolbar {
  display: flex;
  gap: 0.75rem;
  margin-bottom: 1rem;
  align-items: center;
}

.schema-toolbar input {
  flex: 1;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  box-sizing: border-box;
}

.graph-container {
  margin-top: 1rem;
  padding: 0.75rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
  overflow: auto;
  max-height: 600px;
  min-height: 120px;
}

.graph-workspace-interactive {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(280px, 0.9fr);
  gap: 1rem;
  align-items: start;
}

.graph-workspace-interactive .graph-container {
  min-width: 0;
}

.graph-inspector {
  min-width: 0;
  max-height: min(75vh, 900px);
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
}

.graph-inspector-banner {
  padding: 1rem;
  background: #eef5fb;
  border-bottom: 1px solid var(--border);
}

.graph-inspector-eyebrow {
  display: block;
  margin-bottom: 0.35rem;
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.graph-inspector-banner h3 {
  margin: 0;
}

.graph-inspector-banner p {
  margin: 0.35rem 0;
}

.graph-inspector-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.75rem;
}

.graph-inspector-status {
  margin: 0.75rem 0 0;
  white-space: pre-line;
}

.graph-inspector-fields {
  padding: 0.75rem 1rem;
}

.graph-inspector-field {
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--border);
}

.graph-inspector-field:last-child {
  border-bottom: 0;
}

.graph-inspector-field h4 {
  margin: 0;
  font-size: 0.95rem;
}

.graph-inspector-field h4 code {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 400;
}

.graph-inspector-field p {
  margin: 0.3rem 0;
  font-size: 0.85rem;
}

.graph-inspector-field pre {
  margin: 0.45rem 0 0;
  padding: 0.55rem;
  overflow: auto;
  border-radius: 5px;
  background: #f5f7fa;
  color: var(--text);
  font: 0.82rem/1.4 ui-monospace, SFMono-Regular, Consolas, monospace;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.graph-container.graph-container-interactive {
  max-height: none;
  overflow: hidden;
}

.graph-container svg {
  width: 100%;
  height: auto;
  cursor: zoom-in;
}

.graph-container .cytoscape-graph {
  position: relative;
  width: 100%;
  min-height: 520px;
  height: min(75vh, 900px);
  border: 1px solid #e4e8ee;
  border-radius: 6px;
  background: #fff;
  cursor: grab;
  touch-action: none;
}

.cytoscape-node-hit-layer {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
}

.cytoscape-node-hit-area {
  position: absolute;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  pointer-events: auto;
}

.cytoscape-node-hit-area:focus-visible {
  outline: 3px solid #1d70b8;
  outline-offset: 2px;
}

.cytoscape-node-hit-area.graph-node-selected {
  outline: 2px dashed #111;
  outline-offset: 7px;
  z-index: 2;
}

.graph-container .cytoscape-graph:active {
  cursor: grabbing;
}

.graph-workspace:fullscreen,
.graph-workspace-fullscreen-fallback {
  position: fixed;
  inset: 0;
  z-index: 9998;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(320px, 0.9fr);
  gap: 1rem;
  width: 100vw;
  height: 100vh;
  padding: 1rem;
  overflow: hidden;
  background: var(--bg);
}

.graph-workspace:fullscreen .graph-container,
.graph-workspace-fullscreen-fallback .graph-container {
  height: 100%;
  min-height: 0;
  max-height: none;
  margin-top: 0;
}

.graph-workspace:fullscreen .graph-inspector,
.graph-workspace-fullscreen-fallback .graph-inspector {
  height: 100%;
  max-height: none;
}

.graph-navigation-help {
  margin: 0.65rem 0 0;
}

@media (max-width: 900px) {
  .graph-workspace-interactive {
    display: block;
  }

  .graph-inspector {
    margin-top: 1rem;
    max-height: none;
  }
}

.graph-frame {
  display: block;
  width: 100%;
  min-height: 620px;
  border: 0;
  background: #fff;
}

.graph-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 20, 30, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 2rem;
}

.graph-overlay-inner {
  background: #fff;
  border-radius: 10px;
  max-width: 95vw;
  max-height: 90vh;
  width: 95vw;
  height: 90vh;
  overflow: auto;
  padding: 1rem;
  position: relative;
}

.graph-overlay-inner svg {
  width: 100%;
  height: 100%;
  display: block;
  cursor: zoom-out;
}

.graph-overlay-media {
  max-height: 95vh;
  max-width: 95vw;
  overflow: auto;
}

.graph-overlay-media img,
.graph-overlay-media iframe {
  display: block;
  width: min(90vw, 1400px);
  height: auto;
  min-height: 70vh;
  border: 0;
  background: #fff;
}

.graph-overlay-close {
  position: absolute;
  top: 12px;
  right: 12px;
  background: #eef2f6;
  color: #17202a;
  border: 1px solid #d9dee5;
  border-radius: 6px;
  padding: 0.4rem 0.7rem;
  cursor: pointer;
  z-index: 2;
}

.schema-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.85rem;
  color: var(--muted);
}

.schema-toggle select {
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.4rem 0.5rem;
  background: #fff;
}

.registry-local-items {
  display: grid;
  gap: 0.5rem;
}

.registry-local-item {
  align-items: center;
  border: 1px solid #d4dce8;
  border-radius: 0.4rem;
  display: flex;
  gap: 0.75rem;
  justify-content: space-between;
  padding: 0.55rem 0.7rem;
}

.local-registry-heading {
  display: block;
  flex-basis: 100%;
  margin-top: 0.4rem;
}