:root {
  --nm-ink: #07111f;
  --nm-ink-2: #102033;
  --nm-blue: #0a66c2;
  --nm-cyan: #00a6d6;
  --nm-green: #00a88e;
  --nm-lime: #32d06d;
  --nm-paper: #ffffff;
  --nm-soft: #f4f7fb;
  --nm-line: #dfe7f0;
  --nm-text: #1f2937;
  --nm-muted: #657286;
  --editor-split: 50%;
}

* {
  box-sizing: border-box;
}

html,
body {
  min-height: 100%;
}

body.editor-app {
  margin: 0;
  color: var(--nm-text);
  background:
    radial-gradient(circle at top left, rgba(10, 102, 194, .12), transparent 30%),
    linear-gradient(180deg, #f7fbff 0%, #eef5fb 100%);
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.tool-shell {
  min-height: 100vh;
  display: grid;
  grid-template-rows: auto auto 1fr;
}

.tool-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 18px;
  color: #fff;
  background:
    linear-gradient(135deg, rgba(10, 102, 194, .96), rgba(0, 168, 142, .88)),
    var(--nm-ink);
  border-bottom: 1px solid rgba(255, 255, 255, .16);
}

.tool-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.tool-back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(255, 255, 255, .24);
  border-radius: 8px;
  color: #fff;
  background: rgba(255, 255, 255, .08);
  font-weight: 900;
  text-decoration: none;
}

.tool-back:hover,
.tool-back:focus {
  color: #fff;
  background: rgba(255, 255, 255, .15);
}

.tool-brand-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  border-radius: 8px;
  color: var(--nm-ink);
  background: var(--nm-lime);
  font-size: 1.12rem;
}

.tool-title {
  margin: 0;
  color: #fff;
  font-size: clamp(1.05rem, 2vw, 1.45rem);
  font-weight: 900;
  line-height: 1.1;
}

.tool-subtitle {
  margin: 3px 0 0;
  color: rgba(255, 255, 255, .78);
  font-size: .86rem;
}

.tool-header-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.tool-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 18px;
  background: rgba(255, 255, 255, .92);
  border-bottom: 1px solid var(--nm-line);
  backdrop-filter: blur(14px);
}

.tool-toolbar-group {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.tool-status {
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  border: 1px solid #cfe1f0;
  border-radius: 8px;
  padding: 5px 9px;
  color: var(--nm-muted);
  background: #fff;
  font-size: .82rem;
  font-weight: 700;
}

.tool-status.is-error {
  color: #b42318;
  border-color: #f3b8b3;
  background: #fff5f5;
}

.tool-status.is-ok {
  color: #067647;
  border-color: #a6e7cd;
  background: #effdf7;
}

.tool-tabs {
  padding: 0 18px;
  border-bottom: 1px solid var(--nm-line);
  background: #fff;
}

.tool-tabs .nav-link {
  color: var(--nm-muted);
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  padding: 10px 12px;
  font-weight: 800;
}

.tool-tabs .nav-link.active {
  color: var(--nm-blue);
  border-bottom-color: var(--nm-green);
  background: transparent;
}

.tool-workspace {
  display: flex;
  min-height: 0;
  height: calc(100vh - 124px);
  padding: 14px;
  background: transparent;
}

.tool-workspace.has-tabs {
  height: calc(100vh - 171px);
}

.editor-pane {
  min-width: 240px;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--nm-line);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 16px 40px rgba(16, 32, 51, .08);
}

.editor-pane-primary {
  flex: 0 0 calc(var(--editor-split) - 5px);
}

.editor-pane-secondary {
  flex: 1 1 auto;
}

.pane-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 42px;
  padding: 10px 12px;
  color: var(--nm-ink-2);
  background: linear-gradient(180deg, #fff, #f7fbff);
  border-bottom: 1px solid var(--nm-line);
  font-size: .78rem;
  font-weight: 900;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.pane-meta {
  color: var(--nm-muted);
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}

.editor-input,
.editor-output,
.editor-preview {
  width: 100%;
  min-height: 0;
  flex: 1 1 auto;
  margin: 0;
  border: 0;
  outline: 0;
  overflow: auto;
  padding: 16px;
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  font-size: .93rem;
  line-height: 1.6;
}

.code-area {
  min-height: 0;
  flex: 1 1 auto;
}

.editor-input {
  resize: none;
  color: #e8f1ff;
  background: #07111f;
}

iframe.editor-preview {
  border: 0;
  padding: 0;
}

.editor-preview,
.editor-output {
  color: var(--nm-text);
  background: #fff;
}

.editor-output pre,
.editor-preview pre {
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;
}

.resize-handle {
  flex: 0 0 10px;
  position: relative;
  cursor: col-resize;
  touch-action: none;
}

.resize-handle::before {
  content: "";
  position: absolute;
  inset: 12px 3px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--nm-blue), var(--nm-green));
  opacity: .56;
}

.resize-handle:hover::before,
.resize-handle:focus-visible::before,
.resize-handle.is-active::before {
  opacity: 1;
}

.resize-handle:focus-visible {
  outline: 2px solid var(--nm-blue);
  outline-offset: 2px;
}

.stack-pane {
  display: grid;
  grid-template-rows: auto minmax(140px, 1fr) auto minmax(220px, 2fr);
  gap: 10px;
  min-height: 0;
}

.stack-pane .editor-pane {
  min-width: 0;
}

.field-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 96px;
  gap: 10px;
}

.tab-close {
  margin-left: .45rem;
  color: #b42318;
  cursor: pointer;
}

.error,
.text-danger {
  color: #b42318 !important;
}

body.theme-dark.editor-app {
  color: #d9e5f3;
  background:
    radial-gradient(circle at top left, rgba(0, 168, 142, .16), transparent 32%),
    linear-gradient(180deg, #07111f 0%, #101d31 100%);
}

body.theme-dark .tool-toolbar,
body.theme-dark .tool-tabs {
  background: rgba(7, 17, 31, .92);
  border-color: #223149;
}

body.theme-dark .editor-pane {
  border-color: #223149;
  background: #101d31;
  box-shadow: 0 16px 40px rgba(0, 0, 0, .24);
}

body.theme-dark .pane-header {
  color: #eef7ff;
  background: #101d31;
  border-color: #223149;
}

body.theme-dark .pane-meta,
body.theme-dark .tool-status {
  color: #aebed1;
}

body.theme-dark .editor-preview,
body.theme-dark .editor-output {
  color: #d9e5f3;
  background: #07111f;
}

body.theme-dark .tool-tabs .nav-link {
  color: #aebed1;
}

body.theme-dark .tool-tabs .nav-link.active {
  color: #8cf2c3;
}

@media (max-width: 900px) {
  .tool-header,
  .tool-toolbar {
    align-items: flex-start;
    flex-direction: column;
  }

  .tool-header-actions,
  .tool-toolbar-group {
    justify-content: flex-start;
  }

  .tool-workspace,
  .tool-workspace.has-tabs {
    height: auto;
    min-height: calc(100vh - 170px);
    flex-direction: column;
    gap: 12px;
  }

  .editor-pane,
  .editor-pane-primary,
  .editor-pane-secondary {
    flex: none;
    min-width: 0;
    min-height: 320px;
  }

  .resize-handle {
    display: none;
  }

  .field-row {
    grid-template-columns: 1fr;
  }

  .stack-pane {
    display: contents;
  }
}