/*
 * Amethyst Mapper primary UI stylesheet.
 * Responsibilities in this file:
 * 1. Define visual system tokens, layout, and interactive component styling.
 * 2. Style canvas primitives (cards/groups/links), tools, and dialogs.
 * 3. Maintain responsive and touch-friendly behavior across viewport classes.
 */

:root {
  --bg: #140f24;
  --grid: rgba(214, 191, 255, 0.1);
  --grid2: rgba(173, 145, 238, 0.06);
  --stage-radial-a: rgba(181, 132, 255, 0.18);
  --stage-radial-b: rgba(139, 108, 232, 0.16);
  --stage-fade-top: rgba(27, 20, 47, 0.22);
  --stage-fade-bottom: rgba(10, 8, 19, 0.38);
  --node-bg-a: rgba(55, 43, 86, 0.99);
  --node-bg-b: rgba(33, 27, 56, 0.995);
  --node-border: rgba(220, 204, 255, 0.3);
  --node-text: rgba(251, 246, 255, 0.95);
  --node-muted: rgba(247, 236, 255, 0.62);
  --node-header-bg: rgba(216, 193, 255, 0.09);
  --node-header-border: rgba(222, 206, 255, 0.18);
  --group-bg: rgba(70, 55, 108, 0.24);
  --group-border: rgba(214, 196, 255, 0.44);
  --txt: rgba(255, 255, 255, 0.92);
  --muted: rgba(255, 255, 255, 0.65);
  --link-color: #9ed8ff;
  --link-hover: #d4efff;
  --link-visited: #c7b7ff;
  --accent: #a472ff;
  --accent-soft: #d4b7ff;
  --stroke: rgba(188, 153, 255, 0.84);
  --shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
  --dd-glow:
    0 0 18px rgba(204, 153, 255, 0.3),
    0 0 36px rgba(140, 92, 226, 0.24);
  --radius: 14px;
  --font:
    ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}
.app.theme-amethyst {
  --grid: rgba(214, 191, 255, 0.1);
  --grid2: rgba(173, 145, 238, 0.06);
  --stage-radial-a: rgba(181, 132, 255, 0.18);
  --stage-radial-b: rgba(139, 108, 232, 0.16);
  --stage-fade-top: rgba(27, 20, 47, 0.22);
  --stage-fade-bottom: rgba(10, 8, 19, 0.38);
  --node-bg-a: rgba(55, 43, 86, 0.99);
  --node-bg-b: rgba(33, 27, 56, 0.995);
  --node-border: rgba(220, 204, 255, 0.3);
  --node-text: rgba(251, 246, 255, 0.95);
  --node-muted: rgba(247, 236, 255, 0.62);
  --node-header-bg: rgba(216, 193, 255, 0.09);
  --node-header-border: rgba(222, 206, 255, 0.18);
  --group-bg: rgba(70, 55, 108, 0.24);
  --group-border: rgba(214, 196, 255, 0.44);
}
.app.theme-blue {
  --grid: rgba(150, 208, 255, 0.14);
  --grid2: rgba(112, 174, 245, 0.08);
  --stage-radial-a: rgba(98, 174, 255, 0.27);
  --stage-radial-b: rgba(65, 138, 226, 0.2);
  --stage-fade-top: rgba(11, 30, 56, 0.24);
  --stage-fade-bottom: rgba(5, 17, 34, 0.44);
  --node-bg-a: rgba(33, 60, 97, 0.985);
  --node-bg-b: rgba(20, 40, 72, 0.99);
  --node-border: rgba(166, 214, 255, 0.34);
  --node-text: rgba(233, 244, 255, 0.95);
  --node-muted: rgba(192, 221, 247, 0.72);
  --node-header-bg: rgba(115, 185, 255, 0.14);
  --node-header-border: rgba(171, 220, 255, 0.2);
  --group-bg: rgba(39, 69, 112, 0.2);
  --group-border: rgba(164, 212, 255, 0.44);
}
.app.theme-slate {
  --grid: rgba(195, 205, 221, 0.11);
  --grid2: rgba(148, 160, 180, 0.08);
  --stage-radial-a: rgba(149, 164, 186, 0.2);
  --stage-radial-b: rgba(103, 117, 139, 0.18);
  --stage-fade-top: rgba(24, 29, 37, 0.32);
  --stage-fade-bottom: rgba(12, 15, 20, 0.5);
  --node-bg-a: rgba(62, 70, 84, 0.985);
  --node-bg-b: rgba(39, 46, 58, 0.992);
  --node-border: rgba(196, 206, 222, 0.34);
  --node-text: rgba(239, 244, 250, 0.95);
  --node-muted: rgba(205, 214, 228, 0.72);
  --node-header-bg: rgba(187, 200, 219, 0.13);
  --node-header-border: rgba(201, 213, 229, 0.22);
  --group-bg: rgba(85, 95, 112, 0.2);
  --group-border: rgba(196, 206, 222, 0.44);
}
.app.theme-light {
  --grid: rgba(118, 120, 143, 0.16);
  --grid2: rgba(148, 151, 176, 0.1);
  --stage-radial-a: rgba(212, 216, 229, 0.42);
  --stage-radial-b: rgba(189, 197, 214, 0.36);
  --stage-fade-top: rgba(232, 236, 244, 0.84);
  --stage-fade-bottom: rgba(214, 220, 231, 0.92);
  --node-bg-a: rgba(234, 238, 246, 0.99);
  --node-bg-b: rgba(221, 227, 238, 0.995);
  --node-border: rgba(126, 132, 158, 0.38);
  --node-text: rgba(30, 35, 49, 0.96);
  --node-muted: rgba(73, 81, 104, 0.82);
  --node-header-bg: rgba(201, 205, 224, 0.4);
  --node-header-border: rgba(139, 146, 172, 0.3);
  --group-bg: rgba(217, 220, 236, 0.28);
  --group-border: rgba(133, 140, 168, 0.52);
  --link-color: #2b3fa7;
  --link-hover: #1d2c78;
  --link-visited: #6a2d97;
}
html,
body {
  height: 100%;
  margin: 0;
  background: var(--bg);
  color: var(--txt);
  font-family: var(--font);
  overflow: hidden;
  touch-action: pan-x pan-y;
}
.app {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
}
.app.hud-hidden .hud {
  display: none;
}
.srOnly {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}
a:not(.btn) {
  color: var(--link-color);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
a:not(.btn):visited {
  color: var(--link-visited);
}
a:not(.btn):hover {
  color: var(--link-hover);
}
a:not(.btn):focus-visible {
  outline: 2px solid rgba(34, 211, 238, 0.7);
  outline-offset: 2px;
  border-radius: 4px;
}

/* --- Topbar and dropdown menus --- */
.topbar {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.04),
    rgba(255, 255, 255, 0.02)
  );
  user-select: none;
  flex-wrap: wrap;
}
.topbar .brandHeader {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: max-content;
}
.topbar .brandRoundLogo {
  width: 34px;
  height: 34px;
  object-fit: contain;
  border-radius: 0;
  background: transparent;
  padding: 0;
  box-shadow: none;
}
.topbar .brandCopy {
  display: flex;
  flex-direction: column;
  gap: 1px;
  line-height: 1.1;
}
.topbar .title {
  font-weight: 700;
}
.topbar .hint {
  color: var(--muted);
  font-size: 12px;
}
.topbar .spacer {
  flex: 1;
}
.langTopWrap {
  display: inline-flex;
  align-items: center;
}
.langSelect {
  appearance: none;
  border: 1px solid rgba(20, 184, 166, 0.28);
  background: rgba(6, 40, 45, 0.55);
  color: var(--txt);
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  min-width: 88px;
}
.langSelect:focus-visible {
  outline: 2px solid rgba(34, 211, 238, 0.7);
  outline-offset: 2px;
}
.topbar-sep {
  width: 1px;
  height: 24px;
  background: rgba(128, 128, 128, 0.3);
  margin: 0 8px;
}
.menuWrap {
  position: relative;
}
.menuTrigger {
  min-width: 86px;
}
.omiMenuTrigger {
  position: relative;
  gap: 8px;
}
.omiNotifDot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #ff4d85;
  box-shadow:
    0 0 0 2px rgba(255, 77, 133, 0.2),
    0 0 12px rgba(255, 77, 133, 0.68);
}
.omiNotifDot[hidden] {
  display: none !important;
}
.btn.has-notification {
  border-color: rgba(255, 120, 170, 0.56);
  box-shadow:
    0 0 16px rgba(255, 92, 156, 0.2),
    0 0 30px rgba(255, 92, 156, 0.16);
}
.menuList {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  z-index: 80;
  min-width: 184px;
  max-width: min(92vw, 320px);
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(10, 14, 26, 0.94);
  box-shadow: var(--shadow);
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.menuList[hidden] {
  display: none !important;
}
.menuList.fileMenu {
  min-width: 218px;
}
.menuList.omiMenu {
  min-width: 236px;
}
.menuItem {
  width: 100%;
  justify-content: flex-start;
  border-radius: 10px;
  padding: 7px 10px;
}
.menuDivider {
  height: 1px;
  background: rgba(255, 255, 255, 0.14);
  margin: 2px 0;
}
.submenuWrap {
  position: relative;
}
.submenuTrigger {
  justify-content: space-between;
}
.submenuList {
  position: absolute;
  right: calc(100% + 8px);
  left: auto;
  top: 0;
  z-index: 90;
  min-width: 186px;
  max-width: min(84vw, 280px);
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(10, 14, 26, 0.96);
  box-shadow: var(--shadow);
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.submenuList[hidden] {
  display: none !important;
}
.menuWrap.open > .menuTrigger {
  border-color: rgba(34, 211, 238, 0.55);
  box-shadow: var(--dd-glow);
  background: rgba(6, 55, 60, 0.62);
}
.submenuWrap.open > .submenuTrigger {
  border-color: rgba(34, 211, 238, 0.55);
  box-shadow: var(--dd-glow);
  background: rgba(6, 55, 60, 0.62);
}

/* --- Shared button styles --- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  appearance: none;
  border: 1px solid rgba(20, 184, 166, 0.28);
  background: rgba(6, 40, 45, 0.55);
  color: var(--txt);
  padding: 8px 12px;
  border-radius: 999px;
  font-size: 13px;
  letter-spacing: 0.3px;
  font-weight: 700;
  cursor: pointer;
  transition:
    transform 0.15s ease,
    box-shadow 0.5s ease,
    border-color 0.4s ease,
    background 0.2s ease;
}
.btn:hover {
  transform: translateY(-1px);
  border-color: rgba(34, 211, 238, 0.55);
  box-shadow: var(--dd-glow);
  background: rgba(6, 55, 60, 0.62);
}
.btn:active {
  transform: translateY(0);
}
.btn:focus-visible {
  outline: 2px solid rgba(34, 211, 238, 0.7);
  outline-offset: 2px;
}
.btn.small {
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
}
.btn.danger {
  border-color: rgba(255, 99, 99, 0.25);
  background: rgba(60, 18, 24, 0.55);
}
.btn.danger:hover {
  border-color: rgba(255, 120, 120, 0.55);
  box-shadow:
    0 0 18px rgba(255, 120, 120, 0.24),
    0 0 36px rgba(255, 90, 90, 0.16);
  background: rgba(80, 24, 30, 0.62);
}
.btn.active {
  outline: 2px solid rgba(34, 211, 238, 0.65);
  box-shadow: var(--dd-glow);
}
.mode-btn {
  font-weight: 800;
  letter-spacing: 0.8px;
  padding: 8px 14px;
}
.mode-btn.active {
  background: rgba(124, 192, 255, 0.24);
  border-color: rgba(124, 192, 255, 0.85);
  box-shadow: 0 0 0 2px rgba(124, 192, 255, 0.25) inset;
}

/* --- Canvas stage, world transform, and layered render surfaces --- */
.stage {
  position: relative;
  flex: 1;
  background:
    radial-gradient(
      1200px 800px at 72% 18%,
      var(--stage-radial-a),
      transparent 55%
    ),
    radial-gradient(
      900px 700px at 18% 72%,
      var(--stage-radial-b),
      transparent 55%
    ),
    linear-gradient(
      to bottom,
      var(--stage-fade-top),
      var(--stage-fade-bottom)
    );
  overflow: hidden;
}
.stage::before {
  content: "";
  position: absolute;
  inset: -2000px;
  background:
    linear-gradient(to right, var(--grid) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid) 1px, transparent 1px),
    linear-gradient(to right, var(--grid2) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid2) 1px, transparent 1px);
  background-size:
    64px 64px,
    64px 64px,
    16px 16px,
    16px 16px;
  transform-origin: 0 0;
  pointer-events: none;
  opacity: 0.74;
}
.app.snap-grid-on .stage::before {
  opacity: 0.9;
}
.app.grid-hidden .stage::before {
  opacity: 0;
}
.viewport {
  position: absolute;
  inset: 0;
  overflow: hidden;
  touch-action: none;
}
.world {
  position: absolute;
  left: 0;
  top: 0;
  transform-origin: 0 0;
  will-change: transform;
}
#groupsLayer {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 10;
}
svg#edgesSvg {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 20;
  overflow: visible;
  pointer-events: none;
}
#nodesLayer {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 30;
}

/* --- Links (edges), hit targets, labels, and endpoint handles --- */
.edge {
  stroke: var(--stroke);
  stroke-width: 2.2;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.95;
  pointer-events: none;
}
.edge-hit {
  stroke: transparent;
  stroke-width: 14;
  fill: none;
  pointer-events: stroke;
}
.edge.is-selected {
  stroke: #ff92c8;
  stroke-dasharray: 7 4;
  stroke-width: 3;
}
.edgeLabel {
  fill: rgba(255, 255, 255, 0.85);
  font-size: 18px;
  font-weight: 600;
  font-family: var(--font);
  paint-order: stroke;
  stroke: rgba(0, 0, 0, 0.65);
  stroke-width: 4px;
  pointer-events: all;
  cursor: text;
}
.edge-endpoint {
  pointer-events: all;
  fill: #c8b2f7;
  stroke: rgba(255, 255, 255, 0.95);
  stroke-width: 2.2px;
  cursor: pointer;
  filter:
    drop-shadow(0 0 10px rgba(190, 136, 255, 0.7))
    drop-shadow(0 0 20px rgba(138, 88, 226, 0.45));
  animation: endpointPulse 1.6s ease-in-out infinite;
}
.edge-endpoint:hover {
  filter:
    drop-shadow(0 0 14px rgba(208, 162, 255, 0.85))
    drop-shadow(0 0 26px rgba(153, 106, 235, 0.58));
}
@keyframes endpointPulse {
  0% {
    stroke-width: 2px;
  }
  50% {
    stroke-width: 3px;
  }
  100% {
    stroke-width: 2px;
  }
}

/* --- Card/group nodes, ports, and inline editors --- */
.node {
  position: absolute;
  display: flex;
  flex-direction: column;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  border: 1px solid var(--node-border);
  background: linear-gradient(180deg, var(--node-bg-a), var(--node-bg-b));
  overflow: hidden;
}
.node.selected {
  outline: 2px solid var(--node-accent, rgba(186, 151, 255, 0.86));
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.16),
    0 0 24px var(--node-glow, rgba(177, 136, 247, 0.35)),
    var(--shadow);
  filter: saturate(1.12);
}
.node.group {
  background: var(--group-bg);
  border: 2px dashed var(--group-border);
  box-shadow: none;
}
.node .hdr {
  padding: 10px 12px;
  border-bottom: 1px solid var(--node-header-border);
  background: var(--node-header-bg);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  user-select: none;
  cursor: grab;
}
.node.group .hdr {
  border-bottom: none;
  cursor: grab;
}
.node .hdr .id {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--node-muted);
}
.node .hdr .label {
  font-weight: 700;
  font-size: 12.5px;
  color: var(--node-text);
}
.node .body {
  flex: 1;
  min-height: 0;
  padding: 11px 12px 13px;
  font-size: 13.5px;
  line-height: 1.42;
  color: var(--node-text);
  word-wrap: break-word;
  max-height: none;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  -webkit-touch-callout: none;
  user-select: none;
  -webkit-user-select: none;
}
.node:not(.group) .body {
  cursor: grab;
  overscroll-behavior: contain;
}
.node:not(.group):not(.selected) .body {
  touch-action: none;
}
.node:not(.group).selected .body {
  touch-action: none;
}
.node:not(.group).touch-dragging .body {
  touch-action: none;
}
.node:not(.group) .body:active {
  cursor: grabbing;
}
.node.group .body {
  display: none;
}
.port {
  position: absolute;
  right: 3px;
  top: 50%;
  transform: translateY(-50%);
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: rgba(219, 193, 255, 0.98);
  border: 1px solid rgba(255, 255, 255, 0.72);
  box-shadow: 0 0 10px rgba(176, 124, 247, 0.36);
  cursor: crosshair;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.12s ease;
}
.port.port-left {
  right: auto;
  left: 3px;
}
.port.port-top {
  top: 3px;
  right: 50%;
  transform: translateX(50%);
}
.port.port-bottom {
  top: auto;
  bottom: 3px;
  right: 50%;
  transform: translateX(50%);
}
.editor {
  position: absolute;
  inset: 8px;
  width: calc(100% - 16px);
  height: calc(100% - 16px);
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(14, 18, 32, 0.94);
  color: var(--node-text);
  font: 12px/1.35 var(--mono);
  padding: 8px;
  resize: none;
  overflow: auto;
  touch-action: pan-y;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  outline: none;
}
.node.selected .port {
  opacity: 1;
  pointer-events: auto;
}

.group-label-editor {
  position: absolute;
  inset: 8px 8px auto 8px;
  width: calc(100% - 16px);
  height: 20px;
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(14, 18, 32, 0.94);
  color: var(--node-text);
  font: 700 13px var(--font);
  padding: 0 4px;
  outline: none;
}
.welcome-brand {
  margin-top: 10px;
  font-size: 11px;
  opacity: 0.9;
}
.welcome-brand a {
  color: #9dc0ff;
  text-decoration: none;
}
.app.theme-light .editor,
.app.theme-light .group-label-editor {
  background: rgba(242, 244, 252, 0.96);
  border-color: rgba(126, 132, 158, 0.42);
}
.welcome-brand a:hover {
  text-decoration: underline;
}

/* --- Preset palette color classes --- */
.node:not(.group).c1 {
  border-color: rgba(182, 131, 78, 0.78);
  background: linear-gradient(180deg, rgba(182, 131, 78, 0.72), rgba(121, 84, 46, 0.56));
}
.node:not(.group).c2 {
  border-color: rgba(63, 141, 147, 0.78);
  background: linear-gradient(180deg, rgba(63, 141, 147, 0.72), rgba(37, 92, 96, 0.56));
}
.node:not(.group).c3 {
  border-color: rgba(77, 138, 103, 0.78);
  background: linear-gradient(180deg, rgba(77, 138, 103, 0.72), rgba(48, 91, 67, 0.56));
}
.node:not(.group).c4 {
  border-color: rgba(122, 97, 184, 0.8);
  background: linear-gradient(180deg, rgba(122, 97, 184, 0.74), rgba(79, 60, 128, 0.58));
}
.node:not(.group).c5 {
  border-color: rgba(79, 115, 181, 0.78);
  background: linear-gradient(180deg, rgba(79, 115, 181, 0.72), rgba(50, 73, 121, 0.56));
}
.node:not(.group).c6 {
  border-color: rgba(160, 90, 128, 0.78);
  background: linear-gradient(180deg, rgba(160, 90, 128, 0.72), rgba(104, 57, 84, 0.56));
}
.node.group.c1 {
  border-color: rgba(182, 131, 78, 0.9);
}
.node.group.c2 {
  border-color: rgba(63, 141, 147, 0.9);
}
.node.group.c3 {
  border-color: rgba(77, 138, 103, 0.9);
}
.node.group.c4 {
  border-color: rgba(122, 97, 184, 0.9);
}
.node.group.c5 {
  border-color: rgba(79, 115, 181, 0.9);
}
.node.group.c6 {
  border-color: rgba(160, 90, 128, 0.9);
}
.app.theme-light .node .body a {
  color: #3858a7;
}
.app.theme-light .welcome-brand a {
  color: #2f5d9a;
}
.app.theme-light .node .body pre,
.app.theme-light .node .body code {
  background: rgba(123, 138, 176, 0.18);
  color: rgba(29, 37, 52, 0.95);
}

/* --- HUD, toast, and floating tool panels --- */
.hud {
  position: absolute;
  right: 12px;
  bottom: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: rgba(10, 14, 26, 0.62);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  padding: 10px;
  box-shadow: var(--shadow);
}
.hud .row {
  display: flex;
  gap: 8px;
}
.hud .k {
  color: var(--muted);
  font-size: 11px;
  width: 96px;
}
.hud .v {
  font-family: var(--mono);
  font-size: 11px;
}
.toast {
  position: absolute;
  left: 12px;
  bottom: 12px;
  background: rgba(10, 14, 26, 0.62);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  padding: 10px 12px;
  box-shadow: var(--shadow);
  color: rgba(255, 255, 255, 0.85);
  max-width: 560px;
  font-size: 12px;
}
.viewTools {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 45;
  align-items: stretch;
}
.viewTools .btn {
  min-width: 78px;
}
.quickTools {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 40;
  align-items: stretch;
  overflow: visible;
}
.quickTools .btn {
  min-width: 72px;
}
.colorPanel {
  position: absolute;
  right: calc(100% + 10px);
  top: 0;
  z-index: 60;
  width: 238px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(10, 14, 26, 0.92);
  box-shadow: var(--shadow);
  padding: 10px;
  max-height: min(62vh, 420px);
  overflow: auto;
}
.colorPanelTitle {
  font-size: 12px;
  font-weight: 700;
  margin-bottom: 8px;
}
.colorSwatches {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 6px;
  margin-bottom: 8px;
}
.colorSwatch {
  height: 24px;
  border-radius: 7px;
  border: 1px solid rgba(255, 255, 255, 0.32);
  cursor: pointer;
}
.colorSwatch:hover {
  box-shadow: var(--dd-glow);
}
.colorSwatch.sw-1 {
  background: #b6834e;
}
.colorSwatch.sw-2 {
  background: #3f8d93;
}
.colorSwatch.sw-3 {
  background: #4d8a67;
}
.colorSwatch.sw-4 {
  background: #7a61b8;
}
.colorSwatch.sw-5 {
  background: #4f73b5;
}
.colorSwatch.sw-6 {
  background: #a05a80;
}
.colorPickerRow {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 6px;
  margin-bottom: 8px;
}
#colorPicker {
  width: 100%;
  height: 30px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.04);
  padding: 0;
}
.colorPanelHint {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.3;
}
.brandFloatingInfo {
  position: absolute;
  left: 50%;
  bottom: 8px;
  transform: translateX(-50%);
  color: rgba(173, 196, 238, 0.86);
  font-size: 11px;
  z-index: 35;
  line-height: 1.3;
  text-align: center;
}
.brandFloatingInfo a {
  color: rgba(173, 196, 238, 0.92);
  text-decoration: none;
}
.brandFloatingInfo a:hover {
  color: rgba(173, 196, 238, 0.95);
  text-decoration: underline;
}

/* --- Dialog layouts and shared modal styling --- */
textarea#jsonInput,
textarea#jsonEditorInput {
  width: min(920px, 96vw);
  height: min(340px, 50vh);
  background: rgba(10, 14, 26, 0.75);
  color: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 16px;
  padding: 12px;
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.35;
  outline: none;
}
textarea#jsonEditorInput {
  height: min(560px, 62vh);
}
.jsonEditorArea {
  width: 100%;
  box-sizing: border-box;
  min-height: 96px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(10, 14, 26, 0.75);
  color: rgba(255, 255, 255, 0.92);
  padding: 8px 10px;
  font-size: 13px;
  line-height: 1.35;
  font-family: var(--font-ui);
  outline: none;
  resize: vertical;
}
.jsonEditorArea:focus {
  border-color: rgba(34, 211, 238, 0.55);
  box-shadow: var(--dd-glow);
}
dialog {
  position: relative;
  border: none;
  border-radius: 18px;
  background: rgba(10, 14, 26, 0.92);
  color: var(--txt);
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.65);
  padding: 14px 14px 40px;
}
dialog[open] {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  max-width: 96vw;
  max-height: calc(100dvh - 24px);
}
dialog::after {
  content: "Amethyst Mapper";
  position: absolute;
  left: 14px;
  bottom: 10px;
  color: rgba(173, 196, 238, 0.86);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.2px;
}
#helpDlg {
  width: min(980px, 96vw);
}
#jsonEditorDlg {
  width: min(980px, 96vw);
}
#aboutDlg {
  width: min(686px, 92vw);
}
#welcomeDlg {
  width: min(620px, 92vw);
  padding: 18px 20px 14px;
}
#platformDlg {
  width: min(980px, 96vw);
}
#omiDlg {
  width: min(980px, 96vw);
}
#edgeLabelDlg {
  width: min(540px, 94vw);
}
#nodeJumpDlg {
  width: min(540px, 94vw);
}
#supportDlg {
  width: min(760px, 94vw);
}
#supportDlg .settingsInfoWrap {
  max-height: min(62vh, 640px);
  overflow: auto;
  padding-right: 6px;
}
dialog::backdrop {
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(4px);
}
.dlgHdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.dlgHint {
  color: var(--muted);
  font-size: 12px;
  margin-bottom: 10px;
}
.edgeLabelInput {
  width: 100%;
  box-sizing: border-box;
  height: 36px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(10, 14, 26, 0.75);
  color: rgba(255, 255, 255, 0.92);
  padding: 0 10px;
  font-size: 13px;
  outline: none;
}
.edgeLabelInput:focus {
  border-color: rgba(34, 211, 238, 0.55);
  box-shadow: var(--dd-glow);
}

/* --- Help/About content layout --- */
.helpTabs,
.settingsTabs {
  display: grid;
  gap: 8px;
  margin-bottom: 10px;
}
.helpTabs {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.settingsTabs {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}
.helpTab,
.settingsTab {
  width: 100%;
  min-height: 34px;
}
.helpTab.active,
.settingsTab.active,
.themeOption.active {
  border-color: rgba(199, 161, 255, 0.68);
  background: rgba(92, 51, 168, 0.45);
  box-shadow: 0 0 0 1px rgba(199, 161, 255, 0.3) inset;
}
.helpPanel,
.settingsPanel {
  display: none;
}
.helpPanel.active,
.settingsPanel.active {
  display: block;
}
.accountPanel {
  display: none;
  min-height: min(66vh, 700px);
  max-height: min(66vh, 700px);
  overflow: auto;
  padding-right: 6px;
}
.accountPanel.active {
  display: block;
}
.helpPanel {
  min-height: min(66vh, 700px);
  max-height: min(66vh, 700px);
  overflow: auto;
  padding-right: 6px;
}
.helpLayout {
  display: grid;
  grid-template-columns: repeat(2, minmax(280px, 1fr));
  gap: 10px;
}
.helpSection {
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.03);
  padding: 10px 12px;
}
.helpSectionWide {
  grid-column: 1 / -1;
}
.helpSection h3 {
  margin: 0 0 8px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  letter-spacing: 0.2px;
  color: rgba(255, 255, 255, 0.94);
}
.helpSectionIcon {
  min-width: 26px;
  height: 22px;
  padding: 0 5px;
  border-radius: 7px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(34, 211, 238, 0.42);
  background: linear-gradient(
    135deg,
    rgba(34, 211, 238, 0.28),
    rgba(20, 184, 166, 0.2)
  );
  color: rgba(225, 247, 255, 0.96);
  font: 700 9px var(--mono);
}
.helpRows {
  display: grid;
  gap: 6px;
}
.helpRow {
  display: grid;
  grid-template-columns: 124px 1fr;
  gap: 8px;
  align-items: start;
}
.helpKey {
  color: rgba(221, 240, 255, 0.95);
  font-size: 11.5px;
  font-weight: 700;
}
.helpValue {
  color: rgba(255, 255, 255, 0.76);
  font-size: 11.5px;
  line-height: 1.35;
}
.helpValue a {
  color: #9dc0ff;
  text-decoration: none;
}
.helpValue a:hover {
  text-decoration: underline;
}

.settingsPanelsHost {
  min-height: min(66vh, 700px);
}
.settingsPanel {
  min-height: min(66vh, 700px);
  max-height: min(66vh, 700px);
  overflow: auto;
  padding-right: 6px;
}
.settingsInfoWrap {
  display: grid;
  gap: 10px;
  align-content: start;
}
.settingsInfoCard {
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.04);
  padding: 12px 14px;
}
.settingsInfoCard h4 {
  margin: 0 0 8px;
  font-size: 13px;
  letter-spacing: 0.2px;
  color: rgba(248, 241, 255, 0.96);
}
.settingsInfoCard h5 {
  margin: 0 0 6px;
  font-size: 12px;
  letter-spacing: 0.2px;
}
.settingsInfoCard p {
  margin: 0 0 8px;
  color: rgba(248, 247, 255, 0.78);
  font-size: 12px;
  line-height: 1.45;
}
.settingsInfoCard p:last-child {
  margin-bottom: 0;
}
.omiDashboardWrap {
  display: grid;
  grid-template-columns: repeat(2, minmax(280px, 1fr));
  gap: 10px;
}
.omiActionGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(180px, 1fr));
  gap: 8px;
  margin-top: 10px;
}
.omiActionGrid .btn {
  width: 100%;
}
.omiMetaRows {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}
.omiMetaRow {
  display: grid;
  grid-template-columns: minmax(120px, 1fr) minmax(180px, 1.6fr);
  gap: 10px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.03);
  padding: 8px 10px;
  align-items: center;
}
.omiMetaKey {
  color: rgba(213, 228, 255, 0.88);
  font-size: 11px;
  letter-spacing: 0.2px;
  font-weight: 700;
}
.omiMetaValue {
  color: rgba(243, 247, 255, 0.96);
  font-size: 12px;
  line-height: 1.35;
  text-align: right;
}
.accountFields {
  display: grid;
  grid-template-columns: repeat(2, minmax(210px, 1fr));
  gap: 10px;
  margin-top: 10px;
}
.accountField {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.accountField span {
  color: rgba(215, 232, 255, 0.9);
  font-size: 11px;
  letter-spacing: 0.2px;
  font-weight: 700;
}
.accountActivityList {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}
.accountActivityItem {
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.03);
  padding: 9px 10px;
  display: grid;
  gap: 5px;
}
.accountActivityTitle {
  color: rgba(236, 244, 255, 0.95);
  font-size: 12px;
  font-weight: 700;
}
.accountActivityMeta {
  color: rgba(222, 235, 255, 0.78);
  font-size: 11px;
  line-height: 1.35;
}
.accountActivityTimes {
  color: rgba(208, 224, 250, 0.74);
  font-size: 10.5px;
  line-height: 1.35;
}
.accountActivityEmpty {
  border: 1px dashed rgba(255, 255, 255, 0.2);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.02);
  padding: 10px;
  color: rgba(232, 239, 255, 0.78);
  font-size: 11px;
}
.subscriptionsGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(240px, 1fr));
  gap: 10px;
}
.integrationBadges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}
.integrationBadge {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  border: 1px solid rgba(182, 213, 255, 0.25);
  background: rgba(255, 255, 255, 0.05);
  color: rgba(236, 242, 255, 0.92);
  padding: 4px 10px;
  font-size: 11px;
  letter-spacing: 0.2px;
}
.integrationWizard {
  display: grid;
  gap: 10px;
}
.wizardStep {
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.03);
  padding: 10px;
}
.wizardStep h5 {
  margin: 0 0 8px;
}
.wizardFields {
  display: grid;
  grid-template-columns: repeat(2, minmax(180px, 1fr));
  gap: 8px;
}
.integrationOut {
  margin: 8px 0 0;
  min-height: 86px;
  max-height: 240px;
  overflow: auto;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  background: rgba(6, 8, 14, 0.46);
  color: rgba(226, 236, 255, 0.92);
  padding: 9px 10px;
  font-size: 11px;
  line-height: 1.4;
  font-family: var(--mono);
  white-space: pre-wrap;
  word-break: break-word;
}
.integrationEndpoints {
  margin-top: 10px;
}
.integrationEndpointLabel {
  font-size: 11px;
  letter-spacing: 0.2px;
  color: rgba(212, 226, 255, 0.82);
  margin-bottom: 4px;
}
.integrationEndpoints code {
  display: block;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(8, 10, 20, 0.42);
  color: rgba(223, 236, 255, 0.94);
  font-size: 11px;
  line-height: 1.4;
  font-family: var(--mono);
  word-break: break-all;
}
.integrationTextarea {
  min-height: 80px;
}
.subscriptionCard {
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.04);
  padding: 12px 14px;
}
.supportActions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 10px;
}
.supportActions .btn {
  min-width: 160px;
}
.supportMeta {
  margin-top: 8px !important;
}
.inlineLinkBtn {
  text-decoration: none;
  font-weight: 700;
}
.themePicker {
  display: grid;
  grid-template-columns: repeat(2, minmax(140px, 160px));
  justify-content: center;
  gap: 8px;
}
.themePicker .themeOption {
  width: 100%;
  justify-content: center;
}
.settingsToggle {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.86);
  margin-top: 8px;
}
.settingsToggleStack {
  align-items: flex-start;
  flex-direction: column;
}
.settingsToggle input {
  width: 16px;
  height: 16px;
}
.supportModeSelect {
  min-width: 210px;
}

.platformFields {
  display: grid;
  grid-template-columns: repeat(2, minmax(260px, 1fr));
  gap: 8px 12px;
  margin-bottom: 10px;
  align-items: start;
}
.platformField {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.platformField span {
  color: rgba(255, 255, 255, 0.86);
  font-size: 11px;
  font-weight: 700;
}
.platformField .edgeLabelInput {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}
.platformActions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.platformAdminBox {
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.03);
  padding: 8px;
  margin-bottom: 8px;
}
.platformAdminBox h4 {
  margin: 0 0 6px;
  font-size: 12px;
}
.platformAdminHint {
  color: rgba(255, 255, 255, 0.72);
  font-size: 11px;
  margin-bottom: 8px;
}
.platformAdminFields {
  display: grid;
  grid-template-columns: repeat(2, minmax(220px, 1fr));
  gap: 8px 10px;
}
.platformFieldWide {
  grid-column: 1 / -1;
}
.platformAdminEntitlements {
  width: 100%;
  min-height: 96px;
  resize: vertical;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(10, 14, 26, 0.75);
  color: rgba(255, 255, 255, 0.92);
  padding: 8px 10px;
  box-sizing: border-box;
  font-size: 12px;
  line-height: 1.3;
  font-family: var(--mono);
  outline: none;
}
.platformAdminEntitlements:focus {
  border-color: rgba(34, 211, 238, 0.55);
  box-shadow: var(--dd-glow);
}
.platformAdminActions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 8px;
}
.platformStatus {
  color: rgba(255, 255, 255, 0.78);
  font-size: 11px;
  margin-bottom: 8px;
}
.platformOutputs {
  display: grid;
  grid-template-columns: repeat(3, minmax(220px, 1fr));
  gap: 8px;
  max-height: min(48vh, 520px);
  overflow: auto;
  padding-right: 4px;
}
.platformOutput {
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.03);
  padding: 8px;
}
.platformOutput h4 {
  margin: 0 0 6px;
  font-size: 12px;
}
.platformOutput pre {
  margin: 0;
  font-size: 10.5px;
  line-height: 1.35;
  color: rgba(219, 230, 255, 0.92);
  font-family: var(--mono);
  white-space: pre-wrap;
  word-break: break-word;
  max-height: min(38vh, 400px);
  overflow: auto;
}
.welcomeActions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
  margin-bottom: 8px;
}
.welcomePrimaryActions {
  display: grid;
  grid-template-columns: repeat(2, minmax(140px, 1fr));
  gap: 10px;
  justify-content: stretch;
}
.welcomePrimaryActions .btn {
  width: 100%;
  min-height: 34px;
}
.welcomeInstallRow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 2px 0 10px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.04);
}
#welcomeInstallHint {
  color: rgba(226, 236, 255, 0.9);
  font-size: 12px;
  line-height: 1.4;
}

#welcomeDlg .dlgHdr {
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
#welcomeDlg .ttl {
  letter-spacing: 0.2px;
}
#welcomeDlg .dlgHint {
  margin: 0 0 14px;
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.035);
  font-size: 12.5px;
  line-height: 1.5;
}
#welcomeDlg .dlgHint p {
  margin: 0;
}
#welcomeDlg .dlgHint p + p {
  margin-top: 9px;
}
#welcomeDlg .welcomeActions {
  gap: 10px;
  margin: 2px 0 10px;
}
#welcomeDlg .dlgBrand {
  margin-top: 10px;
  padding-top: 10px;
}
.dlgBrandLogo {
  display: flex;
  justify-content: flex-end;
  margin-top: 8px;
}
.dlgBrandLogo img {
  width: min(64vw, 240px);
  height: auto;
  filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.35));
}
.dlgBrand {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.7);
  font-size: 11px;
}
.dlgBrand a {
  color: #9dc0ff;
  text-decoration: none;
}
.dlgBrand a:hover {
  text-decoration: underline;
}
.dlgVersion {
  position: absolute;
  right: 14px;
  bottom: 10px;
  color: rgba(173, 196, 238, 0.82);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.2px;
}
.aboutBrandStrip {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin: 0 0 8px;
}
.aboutBrandStrip img {
  max-height: 34px;
  width: auto;
  object-fit: contain;
}
.aboutBrandStrip .aboutDdLogo {
  max-height: 26px;
}

/* --- Markdown typography inside card bodies --- */
.node .body h1,
.node .body h2,
.node .body h3,
.node .body h4,
.node .body h5,
.node .body h6 {
  margin: 4px 0 2px;
}
.node .body p {
  margin: 4px 0;
}
.node .body ul {
  margin: 4px 0 4px 16px;
  padding: 0;
}
.node .body li {
  margin: 2px 0;
}
.node .body pre {
  background: rgba(40, 50, 80, 0.65);
  padding: 8px;
  border-radius: 6px;
  overflow: auto;
}
.node .body code {
  background: rgba(40, 50, 80, 0.65);
  padding: 2px 4px;
  border-radius: 4px;
}

.resize-handle {
  position: absolute;
  width: 12px;
  height: 12px;
  right: 2px;
  bottom: 2px;
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 3px;
  background: rgba(124, 192, 255, 0.35);
  cursor: nwse-resize;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.12s ease;
}
.node.selected .resize-handle {
  opacity: 1;
  pointer-events: auto;
}

.node .body,
.editor {
  scrollbar-width: thin;
  scrollbar-color: rgba(220, 209, 255, 0.34) transparent;
}
.node .body::-webkit-scrollbar,
.editor::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
.node .body::-webkit-scrollbar-track,
.editor::-webkit-scrollbar-track {
  background: transparent;
}
.node .body::-webkit-scrollbar-thumb,
.editor::-webkit-scrollbar-thumb {
  background: rgba(220, 209, 255, 0.34);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
.app.theme-light .node .body,
.app.theme-light .editor {
  scrollbar-color: rgba(92, 103, 136, 0.36) transparent;
}
.app.theme-light .node .body::-webkit-scrollbar-thumb,
.app.theme-light .editor::-webkit-scrollbar-thumb {
  background: rgba(92, 103, 136, 0.36);
}

/* --- Accessibility and responsive behavior --- */
@media (prefers-reduced-motion: reduce) {
  .edge-endpoint {
    animation: none;
  }
}

@media (max-width: 900px) {
  .topbar-sep {
    display: none;
  }
  .quickTools {
    right: 8px;
    top: auto;
    bottom: 90px;
    transform: none;
  }
  .viewTools {
    left: 8px;
    top: auto;
    bottom: 90px;
    transform: none;
  }
  .quickTools .btn {
    min-width: 64px;
  }
  .viewTools .btn {
    min-width: 64px;
  }
  .helpLayout {
    grid-template-columns: 1fr;
  }
  .helpPanel,
  .settingsPanel {
    min-height: min(62vh, 620px);
    max-height: min(62vh, 620px);
  }
  .platformFields {
    grid-template-columns: 1fr;
  }
  .platformAdminFields {
    grid-template-columns: 1fr;
  }
  .platformOutputs {
    grid-template-columns: 1fr;
    max-height: min(42vh, 420px);
  }
  .subscriptionsGrid {
    grid-template-columns: 1fr;
  }
  .wizardFields {
    grid-template-columns: 1fr;
  }
  .omiDashboardWrap {
    grid-template-columns: 1fr;
  }
  .omiActionGrid {
    grid-template-columns: 1fr;
  }
  .omiMetaRow {
    grid-template-columns: 1fr;
  }
  .omiMetaValue {
    text-align: left;
  }
  .accountFields {
    grid-template-columns: 1fr;
  }
  .settingsTabs {
    gap: 6px;
  }
  .helpTabs {
    gap: 6px;
  }
  .settingsTab {
    min-width: 0;
  }
  .helpTab {
    min-width: 0;
  }
  .themePicker {
    grid-template-columns: repeat(2, minmax(120px, 1fr));
  }
  .helpRow {
    grid-template-columns: 104px 1fr;
  }
  #welcomeDlg {
    width: min(620px, 94vw);
    padding: 14px 14px 12px;
  }
  #welcomeDlg .dlgHint {
    padding: 12px;
  }
  #welcomeDlg .welcomeActions {
    justify-content: stretch;
  }
  #welcomeDlg .welcomePrimaryActions {
    grid-template-columns: 1fr;
  }
  #welcomeDlg .welcomeActions .btn {
    flex: 1 1 150px;
  }
  .welcomeInstallRow {
    flex-direction: column;
    align-items: stretch;
  }
  .welcomeInstallRow .btn {
    width: 100%;
  }
  .colorPanel {
    right: 0;
    left: auto;
    top: calc(100% + 8px);
    width: min(76vw, 238px);
    max-height: min(50vh, 340px);
  }
  .menuList {
    right: auto;
    left: 0;
    min-width: 168px;
    max-width: min(92vw, 300px);
  }
  .menuList.omiMenu {
    left: auto;
    right: 0;
  }
  .submenuList {
    position: static;
    min-width: 100%;
    max-width: none;
  }
  .brandFloatingInfo {
    bottom: 4px;
    font-size: 10px;
  }
}

@media (max-width: 900px) and (orientation: portrait) {
  .quickTools {
    left: 8px;
    right: auto;
    bottom: 124px;
    top: auto;
    transform: none;
    max-height: calc(100dvh - 245px);
  }
  .viewTools {
    right: 8px;
    left: auto;
    bottom: 124px;
    top: auto;
    transform: none;
  }
  .colorPanel {
    left: calc(100% + 8px);
    right: auto;
    top: auto;
    bottom: 0;
    width: min(68vw, 248px);
    max-height: min(52dvh, 360px);
  }
  .hud {
    right: 8px;
    bottom: 8px;
  }
  .brandFloatingInfo {
    bottom: 54px;
  }
}