/* ═══════════════════════════════════════════════════════════════════
   VRE UI — Chromium-inspired DevTools shell
   ═══════════════════════════════════════════════════════════════════ */

/* ── 1. Design tokens (light theme) ──────────────────────────────── */
.vreui-root,
.vreui-root * {
  box-sizing: border-box;
}

.vreui-root button,
.vreui-root input,
.vreui-root textarea,
.vreui-root select {
  font: inherit;
  color: inherit;
  margin: 0;
}
.vreui-root {

  /* Backgrounds */
  --bg: #ffffff;
  --surface: #f7f7f7;
  --surface2: #f1f3f4;
  --surface3: #e2e3e6;

  /* Borders */
  --border: #e8e8e8;
  --border2: #d1d1d1;

  /* Text */
  --text: #222222;
  --text-dim: #717171;
  --label: #80868b;

  /* Accent */
  --accent: #0078d7;
  --accent-soft: #e8f0fe;
  --accent-border: #c6dafc;

  /* Semantic colours */
  --blue: #1a73e8;
  --green: #188038;
  --yellow: #b06000;
  --red: #dc362e;

  /* Semantic soft backgrounds */
  --red-soft: #fcebeb;
  --yellow-soft: #fef6d5;
  --red-text: #600e0b;
  --yellow-text: #a75400;
  /* Console */
  --console-border: #dfe3e8;
  --console-hover: #f8f9fa;

  /* Syntax — Elements panel */
  --syn-tag: #8e004b;
  --syn-attr-name: #9f4312;
  --syn-attr-val: #1a1aa6;

  /* Syntax — Styles panel */
  --syn-selector: #8e004b;
  --syn-prop-name: #132c79;
  --syn-prop-val: #222222;
  --syn-source-link: #1a73e8;

  /* Syntax — Console values */
  --syn-string: #9e3379;
  --syn-number: #0842a0;
  --syn-object: #792675;
  --syn-key: #8e004b;
  --syn-origin: #023b8f;
  --syn-disclosure: #5f6368;
  --syn-debug: #5f6368;

  /* Box model zone colours */
  --bm-margin-bg: #f9cc9d;
  --bm-margin-border: #000000;
  --bm-border-bg: #fddd9b;
  --bm-border-border: #000000;
  --bm-padding-bg: #c3d08b;
  --bm-padding-border: #000000;
  --bm-content-bg: #8cb6c0;
  --bm-content-border: #000000;
  --bm-content-text: #222222;

  /* Console table */
  --table-border: #d3e3fd;
  --table-header-bg: #f7f7f7;
  --table-header-text: #24292f;
  --table-cell-bg: #ffffff;
  --table-cell-text: #24292f;

  /* Source viewer */
  --src-line-hover: #f8f9fa;
  --src-line-active: #fff3c4;
  --src-num-color: #9aa0a6;
  --src-num-border: #eef0f2;

  /* Network rows */
  --net-row-border: #eef0f2;
  --net-row-hover: #f8f9fa;

  /* Inspector nodes */
  --insp-node-hover: #f3f9ff;
  --insp-node-hover-border: #e5e5e5;
  --insp-node-sel: #efefef;
  --insp-node-sel-border: #e5e5e5;
  --insp-ellipsis-border: #a8c7fa;

  /* Computed panel */
  --computed-prop-border: #f0f0f0;
  --computed-prop-hover: #f8f9fa;

  /* Styles panel */
  --styles-rule-border: #e5e5e5;

  /* Layout panel */
  --layout-prop-border: #f0f0f0;

  /* Scrollbar */
  --scrollbar-thumb: #c5c9d0;
  --scrollbar-thumb-hover: #9aa0a6;

  /* Mobile size label bg */
  --mobile-label-bg: rgba(255, 255, 255, 0.85);

  /* Typography */
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --sans: "Segoe UI", Roboto, Arial, sans-serif;

  /* ── Layout ─────────────────────────────────────────────────────── */
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 12px;
  line-height: 1.4;
  overflow: hidden;
  position: relative;
}


/* ═══════════════════════════════════════════════════════════════════
   2. Toolbar
   ═══════════════════════════════════════════════════════════════════ */

.vreui-toolbar {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 34px;
  padding: 0 8px;
  background: var(--bg);
  flex-shrink: 0;
  z-index: 2;
}

/* ── Icon buttons (toolbar + devtools) ───────────────────────────── */

.vreui-tb-btn,
.vreui-dt-icon-btn {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 5px;
  color: var(--text-dim);
  cursor: pointer;
  padding: 0;
}

.vreui-tb-btn svg,
.vreui-dt-icon-btn svg,
.vreui-dt-tab svg {
  display: block;
  pointer-events: none;
}

.vreui-tb-btn:hover:not(:disabled),
.vreui-dt-icon-btn:hover {
  background: var(--surface3);
  color: var(--text);
}

.vreui-tb-btn:disabled {
  opacity: 0.35;
  cursor: default;
}

/* ── Play / Stop ─────────────────────────────────────────────────── */

.vreui-btn-play,
.vreui-btn-stop {
  width: 24px;
  height: 24px;
  min-width: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 5px;
  color: var(--text-dim);
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
}

.vreui-btn-play:hover:not(:disabled),
.vreui-btn-stop:hover:not(:disabled) {
  background: var(--surface3);
  color: var(--text);
}

.vreui-btn-play:active:not(:disabled),
.vreui-btn-stop:active:not(:disabled) {
  background: var(--surface3);
}

.vreui-btn-stop:disabled {
  opacity: 0.35;
  cursor: default;
}

/* ── Devtools toggle ─────────────────────────────────────────────── */

.vreui-devtools-toggle {
  position: relative;
}

.vreui-devtools-toggle.active {
  color: var(--accent);
  background: var(--accent-soft);
  border-color: var(--accent-border);
}

.vreui-devtools-dot {
  position: absolute;
  right: 3px;
  bottom: 3px;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--red);
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 120ms ease, transform 120ms ease;
  pointer-events: none;
}

.vreui-devtools-toggle.has-alert .vreui-devtools-dot {
  opacity: 1;
  transform: scale(1);
}

/* ── Tab dot (console alert indicator) ───────────────────────────── */

.vreui-dt-tab-icon {
  position: relative;
}

.vreui-tab-dot {
  position: absolute;
  right: -2px;
  bottom: 0;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--red);
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 120ms ease, transform 120ms ease;
  pointer-events: none;
}

/* ── Unified SVG icon sizing ─────────────────────────────────────── */

.vreui-tb-btn svg,
.vreui-btn-play svg,
.vreui-btn-stop svg,
.vreui-dt-icon-btn svg,
.vreui-dt-tab svg {
  width: 14px;
  height: 14px;
  display: block;
  flex-shrink: 0;
}

.vreui-dt-tab svg {
  width: 13px;
  height: 13px;
}

/* ── URL bar ─────────────────────────────────────────────────────── */

.vreui-url-wrap {
  flex: 1;
  min-width: 0;
  position: relative;
}

.vreui-url-bar {
  width: 100%;
  height: 24px;
  background: var(--surface);
  border: 1px solid transparent;
  border-radius: 5px;
  padding: 0 8px;
  padding-right: 20px;
  color: var(--text);
  font-family: var(--sans);
  font-size: 11px;
  outline: none;
}

.vreui-url-bar:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent-soft);
  background: var(--bg);
}

.vreui-url-bar::placeholder {
  color: var(--label);
}

/* ── URL bar action buttons ──────────────────────────────────────── */

.vreui-url-actions {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 2px;
}

.vreui-url-action-btn {
  width: 17px;
  height: 17px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 4px;
  color: var(--label);
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
}

.vreui-url-action-btn:hover {
  background: var(--surface3);
  color: var(--text);
}

.vreui-url-action-btn.active {
  color: var(--accent);
  background: var(--accent-soft);
  border-color: var(--accent-border);
}

.vreui-url-action-btn svg {
  width: 13px;
  height: 13px;
  display: block;
  pointer-events: none;
}

.preview-mode-toggle.vreui-url-action-btn.active {
  border-color: transparent;
  background-color: var(--surface3);
  color: var(--text);
}

/* ── Go button ───────────────────────────────────────────────────── */

.vreui-go-btn {
  color: var(--accent);
}


/* ═══════════════════════════════════════════════════════════════════
   3. Preview area
   ═══════════════════════════════════════════════════════════════════ */

.vreui-preview {
  flex: 1;
  position: relative;
  overflow: hidden;
  background: var(--bg);
  min-height: 0;
}

.vreui-preview iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
  background: transparent;
}

/* ── Iframe shield (blocks mouse during resize) ───────────────────── */

.vreui-iframe-shield {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 10;
  /* cursor: ns-resize; */
}

.vreui-iframe-shield.active {
  display: block;
}

/* ── Idle / no-preview state ─────────────────────────────────────── */

.vreui-idle {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 10px;
  background: var(--bg);
  color: var(--label);
  font-size: 12px;
  pointer-events: none;
  z-index: 1;
  transition: opacity 0.16s;
}

.vreui-idle.hidden {
  opacity: 0;
  pointer-events: none;
}

.vreui-idle-title {
  margin: 0 0 8px;
  font-size: 15px;
  font-weight: 600;
  color: var(--text-dim);
  opacity: 0.5;
}

.vreui-idle-sub {
  color: var(--label);
  font-size: 12px;
}

.vreui-idle-icon {
  width: min(45vw, 240px);
  max-width: 200px;
  aspect-ratio: 480 / 368;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.25;
  color: var(--text-dim);
  /* no fill here — let each SVG handle its own fill */
}

.vreui-idle-icon svg {
  width: 100%;
  height: 100%;
  display: block;
  color: var(--text-dim);
  /* no fill override here either */
  max-width: 120px;
}

.vreui-idle-icon-plane svg {
  max-width: 200px;
}

.vreui-idle-icon-plane svg path {
  fill: currentColor;
}

.vreui-idle-icon svg [fill="none"] {
  fill: none !important;
}

.vreui-idle-icon svg [stroke="currentColor"],
.vreui-idle-icon svg path,
.vreui-idle-icon svg rect,
.vreui-idle-icon svg circle {
  stroke: currentColor;
}


/* ═══════════════════════════════════════════════════════════════════
   4. Mobile viewport frame
   ═══════════════════════════════════════════════════════════════════ */

.vreui-preview.mobile-mode {
  background: var(--bg);
}

.vreui-preview.mobile-mode iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 12px;
  box-shadow: 0 0 0 1px var(--border2), 0 4px 24px rgba(0, 0, 0, 0.18);
  overflow: auto;
  scrollbar-width: thin;
}

.vreui-iframe-shield.mobile-touch-layer {
  display: block;
  pointer-events: auto;
  cursor: none;
  background: transparent;
  z-index: 25;
}

.vreui-touch-cursor {
  display: none;
  position: absolute;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid rgba(0, 120, 215, 0.65);
  background: rgba(0, 120, 215, 0.22);
  pointer-events: none;
  transform: translate(-50%, -50%);
  z-index: 30;
}

.vreui-preview.mobile-mode .vreui-touch-cursor {
  display: block;
}

.vreui-mobile-resize-handle {
  display: none;
  position: absolute;
  top: 50%;
  width: 6px;
  background: transparent;
  border-radius: 3px;
  cursor: ew-resize;
  z-index: 20;
  transform: translateY(-50%);
  transition: background 120ms;
}

.vreui-preview.mobile-mode .vreui-mobile-resize-handle {
  display: block;
}

.vreui-mobile-resize-handle:hover,
.vreui-mobile-resize-handle.dragging {
  background: var(--accent);
  opacity: 0.6;
}

.vreui-mobile-size-label {
  display: none;
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 10px;
  color: var(--text-dim);
  white-space: nowrap;
  font-family: var(--mono);
  pointer-events: none;
  background: var(--mobile-label-bg);
  padding: 1px 6px;
  border-radius: 4px;
  z-index: 1;
}

.vreui-preview.mobile-mode .vreui-mobile-size-label {
  display: block;
}


/* ═══════════════════════════════════════════════════════════════════
   5. Devtools panel + resize handle
   ═══════════════════════════════════════════════════════════════════ */

.vreui-resize {
  height: 5px;
  background: transparent;
  border-bottom: 1px solid var(--border);
  cursor: ns-resize;
  flex-shrink: 0;
  position: relative;
  z-index: 5;
  margin-top: -4px;
}

.vreui-devtools {
  background: var(--bg);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  flex-shrink: 0;
  container-type: inline-size;
  container-name: devtools;
}

/* ── Tab bar ─────────────────────────────────────────────────────── */

.vreui-dt-tabs {
  display: flex;
  align-items: center;
  height: 34px;
  background: var(--bg);
  flex-shrink: 0;
  padding: 0 4px;
  border-radius: 2px;
  border-bottom: 1px solid var(--border);
}

.vreui-dt-tab {
  height: 34px;
  padding: 0 10px;
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--text-dim);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  user-select: none;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 500;
}

.vreui-dt-tab:hover {
  color: var(--text);
  background: var(--surface);
}

.vreui-dt-tab.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
  background: var(--bg);
  font-weight: 500;
}

.vreui-dt-tab.active svg {
  color: var(--text);
}

.vreui-dt-tab-icon {
  width: 15px;
  height: 15px;
  font-size: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: inherit;
}

.vreui-dt-tab-icon svg {
  width: 16px;
  height: 16px;
}

.vreui-dt-badge {
  background: var(--red);
  color: var(--bg);
  border-radius: 999px;
  padding: 0 3px;
  font-size: 10px;
  min-width: 15px;
  text-align: center;
  line-height: 13px;
  margin-left: 2px;
}

/* ── Tab actions (right side of tab bar) ─────────────────────────── */

.vreui-dt-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 4px;
  padding-right: 4px;
  flex-shrink: 0;
}

.vreui-dt-icon-btn.active {
  color: var(--accent);
  background: var(--accent-soft);
  border-color: var(--accent-border);
}

.vreui-dt-icon-btn.active-danger {
  color: var(--red);
  background: var(--red-soft);
  border-color: color-mix(in srgb, var(--red) 20%, transparent);
}

.vreui-dt-filter {
  height: 24px;
  width: 150px;
  background: var(--surface);
  border: 1px solid transparent;
  border-radius: 5px;
  padding: 0 8px;
  color: var(--text);
  font-size: 12px;
  outline: none;
  font-family: inherit;
}

.vreui-dt-filter:focus {
  background: var(--bg);
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent-soft);
}

.vreui-dt-filter::placeholder {
  color: var(--label);
}

/* ── Panel body ──────────────────────────────────────────────────── */

.vreui-dt-body {
  flex: 1;
  overflow: hidden;
  position: relative;
  background: var(--bg);
}

.vreui-tab-panel {
  display: none;
  position: absolute;
  inset: 0;
  overflow-y: auto;
  overflow-x: hidden;
  background: var(--bg);
}

.vreui-tab-panel.active {
  display: block;
}

.vreui-console-empty,
.vreui-src-placeholder,
.vreui-insp-empty {
  padding: 14px 12px;
  color: var(--label);
  font-family: var(--mono);
  font-size: 11px;
}


/* ═══════════════════════════════════════════════════════════════════
   6. Console panel
   ═══════════════════════════════════════════════════════════════════ */

#vreui-p-console {
  background: var(--bg);
  font-family: var(--mono);
  font-size: 11px;
  overflow: hidden;
  min-height: 0;
}

.vreui-console-body {
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  min-height: 0;
  overscroll-behavior: contain;
  padding-bottom: 4px;
  box-sizing: border-box;
}

.vreui-console-row {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr) max-content;
  align-items: start;
  column-gap: 1px;
  min-height: 20px;
  padding: 1px 22px 1px 6px;
  color: var(--text);
  background: var(--bg);
  font-family: var(--mono);
  font-size: 11px;
  line-height: 18px;
  margin: 6px;
  border-radius: 5px;
}

.vreui-console-row.log {
  border-radius: 0;
  border-bottom: 1px solid var(--table-border);
}

.vreui-console-row.info {
  color: var(--text);
}

.vreui-console-row.debug {
  color: var(--syn-debug);
}

.vreui-console-row.warn {
  color: var(--yellow-text);
  background: var(--yellow-soft);
}

.vreui-console-row.error {
  color: var(--red-text);
  background: var(--red-soft);
}

/* ── Console icons ───────────────────────────────────────────────── */

.vreui-console-icon {
  width: 14px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: transparent;
  flex-shrink: 0;
}

.vreui-console-row.log .vreui-console-icon,
.vreui-console-row.info .vreui-console-icon,
.vreui-console-row.debug .vreui-console-icon {
  visibility: hidden;
}

.vreui-console-row.warn .vreui-console-icon {
  visibility: visible;
  color: var(--yellow);
}

.vreui-console-row.error .vreui-console-icon {
  visibility: visible;
  color: var(--red);
}

/* ── Console message + origin ────────────────────────────────────── */

.vreui-console-msg {
  min-width: 0;
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: anywhere;
  color: inherit;
}

.vreui-console-origin {
  justify-self: end;
  margin-left: 18px;
  max-width: 45vw;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--syn-origin);
  cursor: pointer;
  text-decoration: underline;
  font-family: var(--mono);
  font-size: 11px;
  line-height: 18px;
}

.vreui-console-origin:hover {
  color: var(--blue);
  background: var(--surface3);
}

/* ── Console value syntax colours ────────────────────────────────── */

.vreui-console-object,
.vreui-console-array {
  color: var(--syn-object);
}

.vreui-console-string {
  color: var(--syn-string);
}

.vreui-console-number,
.vreui-console-bool,
.vreui-console-null {
  color: var(--syn-number);
}

.vreui-console-disclosure {
  color: var(--syn-disclosure);
  margin-right: 3px;
  user-select: none;
  font-size: 14px;
}

.vreui-console-key {
  color: var(--syn-key);
}

/* ── Console expandable objects ──────────────────────────────────── */

.vreui-console-expandable {
  cursor: pointer;
  user-select: none;
  font-style: italic;
  border-radius: 5px;
}

.vreui-console-expandable:hover {
  background: var(--surface2);
}

.vreui-console-expanded {
  display: block;
  margin-top: 1px;
  font-family: var(--mono);
  font-size: 11px;
  line-height: 18px;
}

.vreui-console-expanded-line {
  display: block;
  white-space: pre-wrap;
}

/* ── Console table ───────────────────────────────────────────────── */

.vreui-console-table {
  grid-column: 1 / -1;
  width: 100%;
  border-collapse: collapse;
  margin: 0;
  font-family: var(--mono);
  font-size: 11px;
  line-height: 18px;
}

.vreui-console-table th,
.vreui-console-table td {
  border: 1px solid var(--table-border);
  padding: 1px 5px;
  text-align: left;
  vertical-align: top;
  font-weight: 400;
}

.vreui-console-table th {
  background: var(--table-header-bg);
  color: var(--table-header-text);
}

.vreui-console-table td {
  background: var(--table-cell-bg);
  color: var(--table-cell-text);
}

.vreui-console-table-source {
  margin-top: 2px;
  line-height: 18px;
}

.vreui-console-group-title {
  font-weight: 600;
}


/* ═══════════════════════════════════════════════════════════════════
   7. Network panel
   ═══════════════════════════════════════════════════════════════════ */

.vreui-net-header,
.vreui-net-row {
  display: grid;
  grid-template-columns: minmax(140px, 1fr) 60px 90px 60px 60px minmax(80px, 120px);
  gap: 8px;
  padding: 0 10px;
  align-items: center;
  font-family: var(--sans);
  font-size: 12px;
}

.vreui-net-header {
  height: 27px;
  color: var(--text-dim);
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 1;
  font-weight: 500;
}

.vreui-net-row {
  height: 25px;
  color: var(--text-dim);
  border-bottom: 1px solid var(--net-row-border);
}

.vreui-net-row:hover {
  background: var(--net-row-hover);
}

.vreui-net-url {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text);
}

.vreui-net-ok {
  color: var(--green);
}

.vreui-net-err {
  color: var(--red);
}

.vreui-net-warn {
  color: var(--yellow);
}

.vreui-net-size,
.vreui-net-dur,
.vreui-net-type {
  color: var(--text-dim);
}

.vreui-net-initiator {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-dim);
  font-size: 11px;
}

.vreui-net-initiator-link {
  display: inline;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--syn-source-link);
  cursor: pointer;
  text-decoration: underline;
  font-family: var(--mono);
  font-size: 11px;
  line-height: 18px;
}

.vreui-net-initiator-link:hover {
  display: inline;
  width: fit-content;
  color: var(--blue);
  background: var(--surface3);
}

/* ═══════════════════════════════════════════════════════════════════
   8. Sources panel
   ═══════════════════════════════════════════════════════════════════ */

.vreui-sources {
  display: flex;
  height: 100%;
}

/* ── Sources tree ────────────────────────────────────────────────── */

.vreui-src-tree {
  width: 220px;
  flex-shrink: 0;
  border-right: 1px solid var(--border);
  overflow-y: auto;
  padding: 4px;
  padding-bottom: 8px;
  background: var(--bg);
}

.vreui-src-domain {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 1px 8px;
  font-size: 12px;
  color: var(--text-dim);
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border-radius: 5px;
  min-height: 20.8px;
}

.vreui-src-domain::before {
  display: none;
}

.vreui-src-domain:hover {
  background: var(--surface2);
}

.vreui-src-domain-icon {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  margin-right: 1px;
}

.vreui-src-domain-icon svg {
  display: block;
}

.vreui-src-folder-body {
  margin-left: 14px;
}

.vreui-src-folder-body>.vreui-src-domain,
.vreui-src-folder-body>.vreui-src-file {
  padding-left: 8px;
  border-radius: 5px;
}

.vreui-src-file {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 1px 8px 3px 20px;
  font-family: var(--sans);
  font-size: 12px;
  color: var(--text);
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.vreui-src-file::before {
  display: none;
}

.vreui-src-file:hover {
  background: var(--surface2);
}

.vreui-src-file.active {
  background: var(--accent-soft);
  color: var(--accent);
}

.vreui-src-file-icon {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}

.vreui-src-file-icon svg {
  display: block;
  width: 13px;
  height: 13px;
}

/* ── Source code viewer ──────────────────────────────────────────── */

.vreui-src-content {
  flex: 1;
  overflow: auto;
  background: var(--bg);
}

.vreui-src-line {
  display: flex;
  min-height: 18px;
  font-family: var(--mono);
  font-size: 11.5px;
  line-height: 18px;
}

.vreui-src-line:hover {
  background: var(--src-line-hover);
}

.vreui-src-line.active-line {
  background: var(--src-line-active);
}

.vreui-src-num {
  flex-shrink: 0;
  width: 42px;
  text-align: right;
  padding-right: 10px;
  color: var(--src-num-color);
  background: var(--bg);
  user-select: none;
  border-right: 1px solid var(--src-num-border);
}

.vreui-src-text {
  flex: 1;
  padding: 0 16px 0 10px;
  white-space: pre;
  color: var(--text);
}


.vreui-src-media-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 8px;
  gap: 6px;
  height: 100%;
  box-sizing: border-box;
}

.vreui-src-media-img {
  max-width: 100%;
  max-height: calc(100% - 12px);
  object-fit: contain;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.vreui-src-media-audio {
  width: 100%;
  max-width: 480px;
}

.vreui-src-media-video {
  max-width: 100%;
  max-height: calc(100% - 12px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.vreui-src-media-label {
  font-size: 11px;
  color: var(--text-dim, #888);
  font-family: monospace;
  display: none;
}

/* ── Sources resize divider ──────────────────────────────────────── */

.vreui-insp-divider {
  width: 5px;
  background: transparent;
  border-left: 1px solid var(--border);
  cursor: ew-resize;
  flex-shrink: 0;
  position: relative;
  z-index: 3;
  margin-left: -1px;
  margin-right: -4px;
}


/* ═══════════════════════════════════════════════════════════════════
   9. Elements panel
   ═══════════════════════════════════════════════════════════════════ */

.vreui-inspector {
  display: flex;
  height: 100%;
  overflow: hidden;
}

/* ── DOM tree ────────────────────────────────────────────────────── */

.vreui-insp-tree {
  width: 55%;
  min-width: 120px;
  flex-shrink: 0;
  overflow-y: auto;
  padding: 4px 0;
  font-family: var(--mono);
  font-size: 11.5px;
  background: var(--bg);
  position: relative;
}

.vreui-insp-node {
  padding: 0 0 0 8px;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--syn-tag);
  min-height: 13px;
  max-height: 16px;
  display: flex;
  align-items: center;
  gap: 3px;
  margin: 0 6px;
  border-top: thin solid transparent;
  border-bottom: thin solid transparent;
  border-left: none;
  border-right: none;
}

.vreui-insp-node:hover {
  background: var(--insp-node-hover);
  border-color: var(--insp-node-hover-border);
}

.vreui-insp-node.sel {
  background: var(--insp-node-sel);
  border-color: var(--insp-node-sel-border);
}

.vreui-insp-closing {
  opacity: 0.72;
}

.vreui-insp-toggle {
  color: var(--text-dim);
  font-size: 11px;
  flex-shrink: 0;
  user-select: none;
  width: 6px;
  display: flex;
  align-items: center;
}

.vreui-insp-ellipsis {
  display: inline-flex;
  align-items: center;
  margin: 0 3px;
  padding: 0 2px;
  height: 11px;
  font-size: 10px;
  font-family: var(--sans);
  color: var(--accent);
  background: var(--bg);
  border: 1px solid var(--insp-ellipsis-border);
  border-radius: 999px;
  cursor: pointer;
  letter-spacing: 0.5px;
  flex-shrink: 0;
  user-select: none;
  font-weight: 900;
}

.vreui-insp-ellipsis:hover {
  background: var(--surface3);
  color: var(--text);
}

/* ── Syntax tokens ───────────────────────────────────────────────── */

.vreui-insp-tag {
  color: var(--syn-tag);
}

.vreui-insp-attr-name {
  color: var(--syn-attr-name);
}

.vreui-insp-attr-val {
  color: var(--syn-attr-val);
}

.vreui-insp-text-node {
  color: var(--text-dim);
  font-style: italic;
}

/* ── Detail pane ─────────────────────────────────────────────────── */

.vreui-insp-detail {
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--bg);
}

/* ── Sub-tabs (Styles / Computed / Layout) ───────────────────────── */

.vreui-insp-subtabs {
  display: flex;
  align-items: center;
  height: 30px;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  padding: 0 4px;
}

.vreui-insp-subtab {
  height: 30px;
  padding: 0 10px;
  display: flex;
  align-items: center;
  font-size: 11px;
  font-weight: 500;
  color: var(--text-dim);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  user-select: none;
  white-space: nowrap;
}

.vreui-insp-subtab:hover {
  color: var(--text);
  background: var(--surface);
}

.vreui-insp-subtab.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
  background: var(--bg);
}

/* ── Filter bar (inside detail pane) ─────────────────────────────── */

.vreui-insp-filter-wrap {
  display: flex;
  align-items: center;
  padding: 4px 4px;
  background: var(--bg);
  flex-shrink: 0;
  gap: 4px;
  height: 34px;
}

.vreui-insp-filter {
  flex: 1;
  height: 24px;
  background: var(--surface);
  border: 1px solid transparent;
  border-radius: 5px;
  padding: 0 7px;
  font-size: 11px;
  font-family: var(--sans);
  color: var(--text);
  outline: none;
}

.vreui-insp-filter:focus {
  background: var(--bg);
  border-color: var(--accent);
}

.vreui-insp-filter::placeholder {
  color: var(--label);
}

/* ── Sub-panels ──────────────────────────────────────────────────── */

.vreui-insp-subpanel {
  display: none;
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
}

.vreui-insp-subpanel.active {
  display: block;
}


/* ═══════════════════════════════════════════════════════════════════
   10. Styles sub-panel
   ═══════════════════════════════════════════════════════════════════ */

.vreui-styles-rule {
  padding: 1px 6px 2px;
  font-family: var(--mono);
  font-size: 11px;
  line-height: 14px;
  border-bottom: 1px solid var(--styles-rule-border);
}

.vreui-styles-brace {
  display: block;
  height: 14px;
  line-height: 14px;
  color: var(--text-dim);
}

/* Empty rule — inline compact form */
.vreui-styles-rule.empty {
  padding: 1px 6px;
  line-height: 14px;
}

.vreui-styles-rule.empty .vreui-styles-selector-name {
  color: var(--text-dim);
}

.vreui-styles-rule.empty .vreui-styles-selector {
  display: inline-flex;
  margin-right: 4px;
  vertical-align: baseline;
}

.vreui-styles-rule.empty .vreui-styles-brace {
  display: inline;
  height: auto;
  line-height: 14px;
}

.vreui-styles-rule.empty .vreui-styles-brace:first-of-type,
.vreui-styles-rule.empty .vreui-styles-brace:last-of-type {
  margin-left: 3px;
}

.vreui-styles-selector {
  color: var(--text-dim);
  font-size: 11px;
  font-weight: 500;
  margin-bottom: 2px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.vreui-styles-selector-name {
  color: var(--syn-selector);
}

.vreui-styles-source {
  color: var(--syn-source-link);
  font-size: 10.5px;
  cursor: pointer;
  text-decoration: underline;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 120px;
}

.vreui-styles-source:hover {
  color: var(--blue);
}

/* ── Individual property row ─────────────────────────────────────── */

.vreui-styles-prop {
  display: flex;
  align-items: baseline;
  gap: 4px;
  padding: 0;
  line-height: 1.6;
  min-height: 0;
}

.vreui-styles-prop.overridden .vreui-styles-val,
.vreui-styles-prop.overridden .vreui-styles-name {
  text-decoration: line-through;
  opacity: 0.55;
}

.vreui-styles-prop-cb {
  width: 10px;
  height: 10px;
  flex-shrink: 0;
  accent-color: var(--accent);
  cursor: pointer;
  margin-right: 1px;
  opacity: 0;
  transition: opacity 100ms;
}

.vreui-styles-prop:hover .vreui-styles-prop-cb {
  opacity: 1;
}

.vreui-styles-name {
  color: var(--syn-prop-name);
  flex-shrink: 0;
}

.vreui-styles-colon {
  color: var(--text-dim);
}

.vreui-styles-val {
  color: var(--syn-prop-val);
  word-break: break-all;
}

.vreui-styles-color-swatch {
  display: inline-block;
  width: 9px;
  height: 9px;
  border: 1px solid rgba(0, 0, 0, 0.25);
  border-radius: 2px;
  vertical-align: middle;
  margin-right: 2px;
  flex-shrink: 0;
}

.vreui-styles-inherited-header {
  padding: 4px 10px;
  font-size: 11px;
  color: var(--text-dim);
  background: var(--surface2);
  border-bottom: 1px solid var(--border);
  font-style: italic;
}

/* ── Editable prop names / values ────────────────────────────────── */

.vreui-styles-name[contenteditable],
.vreui-styles-val[contenteditable] {
  outline: none;
  border-radius: 2px;
  cursor: text;
  min-width: 4px;
}

.vreui-styles-name[contenteditable]:hover,
.vreui-styles-val[contenteditable]:hover {
  background: var(--accent-soft);
}

.vreui-styles-name[contenteditable]:focus,
.vreui-styles-val[contenteditable]:focus {
  background: var(--bg);
  box-shadow: 0 0 0 1px var(--accent);
  caret-color: var(--accent);
}


/* ═══════════════════════════════════════════════════════════════════
   11. Computed sub-panel
   ═══════════════════════════════════════════════════════════════════ */

.vreui-computed-prop {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 4px;
  padding: 3px 10px;
  font-family: var(--mono);
  font-size: 11px;
  border-bottom: 1px solid var(--computed-prop-border);
  line-height: 1.5;
}

.vreui-computed-prop:hover {
  background: var(--computed-prop-hover);
}

.vreui-computed-name {
  color: var(--text-dim);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vreui-computed-val {
  color: var(--text);
  word-break: break-word;
}

.vreui-computed-group-header {
  padding: 5px 10px 3px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--label);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 1;
}

/* ═══════════════════════════════════════════════════════════════════
   12. Layout / box model sub-panel
   ═══════════════════════════════════════════════════════════════════ */

.vreui-layout-wrap {
  padding: 12px 16px;
}

.vreui-layout-label {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--label);
  margin-bottom: 8px;
}

.vreui-box-model {
  position: relative;
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--text-dim);
  user-select: none;
  container-type: inline-size;
  max-width: 220px;
  margin: 0 auto;
}

.vreui-bm-layer {
  border: 1.5px solid;
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.vreui-bm-margin {
  border-color: var(--bm-margin-border);
  background: var(--bm-margin-bg);
  padding: clamp(4px, 4cqi, 18px);
}

.vreui-bm-border {
  border-color: var(--bm-border-border);
  background: var(--bm-border-bg);
  padding: clamp(3px, 3cqi, 16px);
}

.vreui-bm-padding {
  border-color: var(--bm-padding-border);
  background: var(--bm-padding-bg);
  padding: clamp(3px, 3cqi, 16px);
}

.vreui-bm-content {
  border-color: var(--bm-content-border);
  background: var(--bm-content-bg);
  min-height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  padding: 6px;
  font-size: clamp(9.5px, 2.5cqi, 11px);
  color: var(--bm-content-text);
  font-weight: 500;
  text-align: center;
  overflow: hidden;
}

.vreui-bm-label {
  font-size: clamp(8.5px, 1.8cqi, 9.5px);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #222222;
  position: absolute;
  top: 2px;
  left: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 60%;
}

.vreui-bm-center-row {
  display: flex;
  align-items: center;
  width: 100%;
}

.vreui-bm-inner {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.vreui-bm-edge {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 0;
  flex-shrink: 1;
}

.vreui-bm-val {
  font-size: clamp(9.5px, 2.2cqi, 10.5px);
  color: #222222;
  text-align: center;
  min-width: 0;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0 2px;
}

/* ── Layout props table ──────────────────────────────────────────── */

.vreui-layout-props {
  margin-top: 14px;
  border-top: 1px solid var(--border);
  padding-top: 10px;
}

.vreui-layout-prop {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 4px;
  padding: 3px 0;
  font-family: var(--mono);
  font-size: 11px;
  border-bottom: 1px solid var(--layout-prop-border);
}

.vreui-layout-prop-name {
  color: var(--text-dim);
}

.vreui-layout-prop-val {
  color: var(--text);
}

/* ── Shared inspector misc ───────────────────────────────────────── */

.vreui-insp-section {
  border-bottom: 1px solid var(--border);
}

.vreui-insp-section-title {
  height: 28px;
  padding: 0 10px;
  display: flex;
  align-items: center;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  color: var(--text);
  font-weight: 500;
}

.vreui-insp-prop {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 8px;
  padding: 4px 10px;
  line-height: 1.45;
  border-bottom: 1px solid var(--net-row-border);
}

.vreui-insp-key {
  color: var(--text-dim);
  min-width: 0;
}

.vreui-insp-val {
  color: var(--text);
  word-break: break-word;
}


/* ═══════════════════════════════════════════════════════════════════
   13. Scrollbar
   ═══════════════════════════════════════════════════════════════════ */

.vreui-root ::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

.vreui-root ::-webkit-scrollbar-track {
  background: transparent;
}

.vreui-root ::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border: 2px solid transparent;
  background-clip: content-box;
  border-radius: 999px;
}

.vreui-root ::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb-hover);
  border: 2px solid transparent;
  background-clip: content-box;
}

.vreui-dt-filter {
  width: 150px;
  max-width: 150px;
  opacity: 1;
  overflow: hidden;
  transition:
    width 0.2s ease,
    max-width 0.2s ease,
    opacity 0.15s ease,
    padding 0.2s ease,
    border-width 0.2s ease;
}

.vreui-dt-tab {
  transition: padding 0.2s ease;
}

.vreui-dt-tab>span:not(.vreui-dt-tab-icon):not(.vreui-dt-badge) {
  display: inline-block;
  max-width: 55px;
  overflow: hidden;
  transition:
    opacity 0.15s ease,
    transform 0.15s ease,
    max-width 0.2s ease;
}

/* ═══════════════════════════════════════════════════════════════════
   14. Responsive / container queries
   ═══════════════════════════════════════════════════════════════════ */

@container devtools (max-width: 640px) {
  .vreui-dt-filter {
    width: 125px;
    max-width: 125px;
  }

  .vreui-dt-tab {
    padding: 0 8px;
  }
}

@container devtools (max-width: 603px) {
  .vreui-dt-tab>span:not(.vreui-dt-tab-icon):not(.vreui-dt-badge) {
    opacity: 0;
    transform: translateX(-4px);
    max-width: 0;
  }

  .vreui-dt-tab {
    padding: 0 10px;
  }
}

@container devtools (max-width: 435px) {
  .vreui-dt-filter {
    width: 90px;
    max-width: 90px;
  }
}

@container devtools (max-width: 395px) {
  .vreui-dt-filter {
    width: 0;
    max-width: 0;
    min-width: 0;
    padding-left: 0;
    padding-right: 0;
    border-width: 0;
    opacity: 0;
    pointer-events: none;
  }

  .vreui-dt-actions {
    gap: 2px;
    padding-right: 2px;
  }

  .vreui-url-bar {
    font-size: 10px;
  }
}

@container devtools (max-width: 300px) {
  .vreui-dt-actions {
    display: none;
  }
}


/* ═══════════════════════════════════════════════════════════════════
   15. Dark theme
   ═══════════════════════════════════════════════════════════════════ */

.vreui-root[data-theme="dark"] {

  /* Backgrounds */
  --bg: #282828;
  --surface: #333333;
  --surface2: #3c3c3c;
  --surface3: #3c3c3c;

  /* Borders */
  --border: #3c3c3c;
  --border2: #414141;

  /* Text */
  --text: #e3e3e3;
  --text-dim: #9f9f9f;
  --label: #6d6d6d;

  /* Accent */
  --accent: #4ea1e1;
  --accent-soft: #253e57;
  --accent-border: #2a4a6a;

  /* Semantic */
  --blue: #4ea1e1;
  --green: #4caf7d;
  --yellow: #fe8d59;
  --red: #e46962;

  /* Semantic soft backgrounds */
  --red-soft: #4e3534;
  --yellow-soft: #413c26;
  --red-text: #f9dedc;
  --yellow-text: #fdf3aa;

  /* Console */
  --console-border: #3c3c3c;
  --console-hover: #2a2a2a;

  /* Syntax — Elements */
  --syn-tag: #7cacf8;
  --syn-attr-name: #d1977f;
  --syn-attr-val: #9cdcfe;

  /* Syntax — Styles */
  --syn-selector: #7cacf8;
  --syn-prop-name: #9cdcfe;
  --syn-prop-val: #e3e3e3;
  --syn-source-link: #4ea1e1;

  /* Syntax — Console */
  --syn-string: #d1977f;
  --syn-number: #9980ff;
  --syn-object: #dcdcaa;
  --syn-key: #7cacf8;
  --syn-origin: #4ea1e1;
  --syn-disclosure: #9f9f9f;
  --syn-debug: #9f9f9f;

  /* Box model */
  --bm-margin-bg: #b08354;
  --bm-margin-border: #000000;
  --bm-border-bg: #e4c482;
  --bm-border-border: #000000;
  --bm-padding-bg: #b8c480;
  --bm-padding-border: #000000;
  --bm-content-bg: #88b2bd;
  --bm-content-border: #000000;
  --bm-content-text: #222222;

  /* Console table */
  --table-border: #3c3c3c;
  --table-header-bg: #3c3c3c;
  --table-header-text: #e3e3e3;
  --table-cell-bg: #282828;
  --table-cell-text: #e3e3e3;

  /* Source viewer */
  --src-line-hover: #2a2a2a;
  --src-line-active: #413c26;
  --src-num-color: #6d6d6d;
  --src-num-border: #3c3c3c;

  /* Network */
  --net-row-border: #3c3c3c;
  --net-row-hover: #2a2a2a;

  /* Inspector nodes */
  --insp-node-hover: #393f45;
  --insp-node-hover-border: #646464;
  --insp-node-sel: #353535;
  --insp-node-sel-border: #646464;
  --insp-ellipsis-border: #047db7;

  /* Computed */
  --computed-prop-border: #3c3c3c;
  --computed-prop-hover: #2a2a2a;

  /* Styles */
  --styles-rule-border: #3c3c3c;

  /* Layout */
  --layout-prop-border: #3c3c3c;

  /* Scrollbar */
  --scrollbar-thumb: #414141;
  --scrollbar-thumb-hover: #6d6d6d;

  /* Mobile label */
  --mobile-label-bg: rgba(30, 30, 30, 0.85);
}

/* System theme — follow OS */
@media (prefers-color-scheme: dark) {
  .vreui-root[data-theme="system"] {
    --bg: #282828;
    --surface: #333333;
    --surface2: #3c3c3c;
    --surface3: #3c3c3c;
    --border: #3c3c3c;
    --border2: #414141;
    --text: #e3e3e3;
    --text-dim: #9f9f9f;
    --label: #6d6d6d;
    --accent: #4ea1e1;
    --accent-soft: #1a2a3a;
    --accent-border: #2a4a6a;
    --blue: #4ea1e1;
    --green: #4caf7d;
    --yellow: #fe8d59;
    --red: #e46962;
    --red-soft: #4e3534;
    --yellow-soft: #413c26;
    --red-text: #f9dedc;
    --yellow-text: #fdf3aa;
    --syn-tag: #7cacf8;
    --syn-attr-name: #d1977f;
    --syn-attr-val: #9cdcfe;
    --syn-selector: #7cacf8;
    --syn-prop-name: #9cdcfe;
    --syn-prop-val: #e3e3e3;
    --syn-source-link: #4ea1e1;
    --syn-string: #d1977f;
    --syn-number: #9980ff;
    --syn-object: #dcdcaa;
    --syn-key: #7cacf8;
    --syn-origin: #4ea1e1;
    --syn-disclosure: #9f9f9f;
    --syn-debug: #9f9f9f;
    --table-border: #3c3c3c;
    --table-header-bg: #3c3c3c;
    --table-header-text: #e3e3e3;
    --table-cell-bg: #282828;
    --table-cell-text: #e3e3e3;
    --src-line-hover: #2a2a2a;
    --src-line-active: #413c26;
    --src-num-color: #6d6d6d;
    --src-num-border: #3c3c3c;
    --net-row-border: #3c3c3c;
    --net-row-hover: #2a2a2a;
    --bm-margin-bg: #b08354;
    --bm-margin-border: #000000;
    --bm-border-bg: #e4c482;
    --bm-border-border: #000000;
    --bm-padding-bg: #b8c480;
    --bm-padding-border: #000000;
    --bm-content-bg: #88b2bd;
    --bm-content-border: #000000;
    --bm-content-text: #222222;
    --insp-node-hover: #393f45;
    --insp-node-hover-border: #646464;
    --insp-node-sel: #353535;
    --insp-node-sel-border: #646464;
    --insp-ellipsis-border: #047db7;
    --computed-prop-border: #3c3c3c;
    --computed-prop-hover: #2a2a2a;
    --styles-rule-border: #3c3c3c;
    --layout-prop-border: #3c3c3c;
    --scrollbar-thumb: #414141;
    --scrollbar-thumb-hover: #6d6d6d;
    --mobile-label-bg: rgba(30, 30, 30, 0.85);
    --console-border: #3c3c3c;
    --console-hover: #2a2a2a;
  }
}