:root {
  /* ─── Soft color palette ─────────────────────────────────────── */
  --comfort-bg: #f5f5f0;
  --comfort-bg-soft: #fafaf7;
  --comfort-bg-card: #ffffff;
  --comfort-text: #2c2c2c;
  --comfort-text-secondary: #6b6b6b;
  --comfort-text-muted: #999999;
  --comfort-border: #e8e8e3;
  --comfort-border-light: #f0f0eb;
  --comfort-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.03);
  --comfort-shadow-hover: 0 2px 8px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.04);
  --comfort-primary: #5b8c5a;
  --comfort-primary-light: #7dab7c;
  --comfort-primary-bg: #eef5ee;
  --comfort-success: #5b8c5a;
  --comfort-warning: #c4a35a;
  --comfort-danger: #c46a5a;
  --comfort-info: #6b8a9a;
  --comfort-font: "Inter", "LXGW WenKai", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  --comfort-font-mono: "Cascadia Code", "JetBrains Mono", "Fira Code", "Consolas", monospace;
  --comfort-radius: 8px;
  --comfort-radius-sm: 6px;

  /* Element Plus variable overrides */
  --el-bg-color: var(--comfort-bg);
  --el-bg-color-overlay: var(--comfort-bg-card);
  --el-text-color-primary: var(--comfort-text);
  --el-text-color-regular: var(--comfort-text);
  --el-text-color-secondary: var(--comfort-text-secondary);
  --el-text-color-placeholder: var(--comfort-text-muted);
  --el-border-color: var(--comfort-border);
  --el-border-color-light: var(--comfort-border-light);
  --el-border-color-extra-light: var(--comfort-border-light);
  --el-fill-color: #efefea;
  --el-fill-color-light: #eaeae5;
  --el-fill-color-lighter: #f0f0eb;
  --el-fill-color-extra-light: #f5f5f0;
  --el-color-primary: var(--comfort-primary);
  --el-color-primary-light-3: var(--comfort-primary-light);
  --el-color-primary-light-5: #9dc09c;
  --el-color-primary-light-7: #bdd5bc;
  --el-color-primary-light-8: #d0e2cf;
  --el-color-primary-light-9: var(--comfort-primary-bg);
  --el-color-primary-dark-2: #4a7a49;
  --el-color-success: var(--comfort-success);
  --el-color-warning: var(--comfort-warning);
  --el-color-danger: var(--comfort-danger);
  --el-color-info: var(--comfort-info);
  --el-border-radius-base: var(--comfort-radius-sm);
  --el-font-size-base: 13px;
  --el-font-size-small: 12px;
  --el-font-size-extra-small: 11px;
  --el-font-family: var(--comfort-font);
}

/* ─── Dark mode ─────────────────────────────────────────────────── */
.dark {
  --comfort-bg: #1a1a1e;
  --comfort-bg-soft: #222226;
  --comfort-bg-card: #2a2a2e;
  --comfort-text: #e0e0e0;
  --comfort-text-secondary: #a0a0a0;
  --comfort-text-muted: #707070;
  --comfort-border: #3a3a3e;
  --comfort-border-light: #323236;
  --comfort-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  --comfort-shadow-hover: 0 2px 8px rgba(0, 0, 0, 0.3);
  --comfort-primary: #7dab7c;
  --comfort-primary-light: #9dc09c;
  --comfort-primary-bg: #2a3a2a;
  --comfort-success: #7dab7c;
  --comfort-warning: #c4a35a;
  --comfort-danger: #c46a5a;
  --comfort-info: #6b8a9a;

  /* Element Plus core */
  --el-color-white: #1a1a1e;
  --el-color-black: #e0e0e0;
  --el-bg-color: var(--comfort-bg);
  --el-bg-color-overlay: var(--comfort-bg-card);
  --el-bg-color-page: var(--comfort-bg);
  --el-text-color-primary: var(--comfort-text);
  --el-text-color-regular: var(--comfort-text);
  --el-text-color-secondary: var(--comfort-text-secondary);
  --el-text-color-placeholder: var(--comfort-text-muted);
  --el-text-color-disabled: #505050;
  --el-border-color: var(--comfort-border);
  --el-border-color-light: var(--comfort-border-light);
  --el-border-color-lighter: #2e2e32;
  --el-border-color-extra-light: #2a2a2e;
  --el-border-color-dark: #4a4a4e;
  --el-fill-color: #2e2e32;
  --el-fill-color-light: #36363a;
  --el-fill-color-lighter: #323236;
  --el-fill-color-extra-light: #2a2a2e;
  --el-fill-color-dark: #3a3a3e;
  --el-fill-color-blank: var(--comfort-bg-card);

  /* Element Plus component colors */
  --el-color-primary: var(--comfort-primary);
  --el-color-primary-light-3: var(--comfort-primary-light);
  --el-color-primary-light-5: #bdd5bc;
  --el-color-primary-light-7: #3a4a3a;
  --el-color-primary-light-8: #324032;
  --el-color-primary-light-9: var(--comfort-primary-bg);
  --el-color-primary-dark-2: #5b8c5a;
  --el-color-success: var(--comfort-success);
  --el-color-success-light-3: #9dc09c;
  --el-color-success-light-5: #7dab7c;
  --el-color-success-light-7: #3a4a3a;
  --el-color-success-light-8: #324032;
  --el-color-success-light-9: #2a3a2a;
  --el-color-success-dark-2: #5b8c5a;
  --el-color-warning: var(--comfort-warning);
  --el-color-warning-light-3: #d4b86a;
  --el-color-warning-light-5: #c4a35a;
  --el-color-warning-light-7: #4a3a2a;
  --el-color-warning-light-8: #3a3020;
  --el-color-warning-light-9: #2a2a1a;
  --el-color-warning-dark-2: #a08040;
  --el-color-danger: var(--comfort-danger);
  --el-color-danger-light-3: #d47a6a;
  --el-color-danger-light-5: #c46a5a;
  --el-color-danger-light-7: #4a2a2a;
  --el-color-danger-light-8: #3a2020;
  --el-color-danger-light-9: #2a1a1a;
  --el-color-danger-dark-2: #a05040;
  --el-color-info: var(--comfort-info);
  --el-color-info-light-3: #8baab0;
  --el-color-info-light-5: #6b8a9a;
  --el-color-info-light-7: #2a3a3a;
  --el-color-info-light-8: #202a2a;
  --el-color-info-light-9: #1a2a2a;
  --el-color-info-dark-2: #4a6a7a;

  /* Element Plus specific */
  --el-mask-color: rgba(0, 0, 0, 0.5);
  --el-overlay-color: rgba(0, 0, 0, 0.6);
  --el-overlay-color-lighter: rgba(0, 0, 0, 0.4);
  --el-popper-bg-color: var(--comfort-bg-card);
  --el-input-bg-color: var(--comfort-bg-soft);
  --el-input-text-color: var(--comfort-text);
  --el-input-border-color: var(--comfort-border);
  --el-input-hover-border-color: var(--comfort-primary-light);
  --el-input-focus-border-color: var(--comfort-primary);
  --el-input-placeholder-color: var(--comfort-text-muted);
  --el-table-bg-color: var(--comfort-bg-card);
  --el-table-tr-bg-color: var(--comfort-bg-card);
  --el-table-header-bg-color: var(--comfort-bg-soft);
  --el-table-header-text-color: var(--comfort-text-secondary);
  --el-table-text-color: var(--comfort-text);
  --el-table-row-hover-bg-color: var(--comfort-primary-bg);
  --el-table-border-color: var(--comfort-border-light);
  --el-tag-bg-color: var(--comfort-primary-bg);
  --el-tag-text-color: var(--comfort-primary);
  --el-tag-border-color: transparent;
  --el-dialog-bg-color: var(--comfort-bg-card);
  --el-select-bg-color: var(--comfort-bg-soft);
  --el-select-input-focus-border-color: var(--comfort-primary);
  --el-select-dropdown-bg: var(--comfort-bg-card);
  --el-select-dropdown-border: var(--comfort-border);
  --el-message-bg-color: var(--comfort-bg-card);
  --el-message-shadow: var(--comfort-shadow-hover);
  --el-checkbox-bg-color: var(--comfort-bg-soft);
  --el-checkbox-checked-bg-color: var(--comfort-primary);
  --el-checkbox-input-border-color: var(--comfort-border);
  --el-checkbox-input-border-color-hover: var(--comfort-primary-light);
  --el-switch-on-color: var(--comfort-primary);
  --el-switch-off-color: #3a3a3e;
}

/* ─── Global comfort styles ─────────────────────────────────────── */
body {
  background: var(--comfort-bg);
  color: var(--comfort-text);
  font-family: var(--comfort-font);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Softer scrollbar */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: var(--comfort-border);
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--comfort-text-muted);
}

/* Subtle transitions */
* {
  transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

/* Card style */
.comfort-card {
  background: var(--comfort-bg-card);
  border: 1px solid var(--comfort-border);
  border-radius: var(--comfort-radius);
  box-shadow: var(--comfort-shadow);
}

/* Better focus ring */
:focus-visible {
  outline: 2px solid var(--comfort-primary-light);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Input/textarea comfort */
.el-input__wrapper,
.el-textarea__inner {
  box-shadow: none !important;
  border: 1px solid var(--comfort-border) !important;
  background: var(--comfort-bg-soft) !important;
  border-radius: var(--comfort-radius-sm) !important;
}
.el-input__wrapper:hover,
.el-textarea__inner:hover {
  border-color: var(--comfort-primary-light) !important;
}
.el-input__wrapper.is-focus,
.el-textarea__inner:focus {
  border-color: var(--comfort-primary) !important;
}

/* Button comfort */
.el-button {
  --el-button-hover-bg-color: var(--comfort-primary-bg);
  --el-button-hover-border-color: var(--comfort-primary-light);
  border-radius: var(--comfort-radius-sm) !important;
  font-weight: 450 !important;
}
.el-button--primary {
  --el-button-bg-color: var(--comfort-primary);
  --el-button-border-color: var(--comfort-primary);
  --el-button-hover-bg-color: var(--comfort-primary-light);
  --el-button-hover-border-color: var(--comfort-primary-light);
}

/* Table comfort */
.el-table {
  --el-table-border-color: var(--comfort-border-light) !important;
  --el-table-header-bg-color: var(--comfort-bg-soft) !important;
  --el-table-row-hover-bg-color: var(--comfort-primary-bg) !important;
  font-size: 13px !important;
}
.el-table th.el-table__cell {
  font-weight: 600 !important;
  color: var(--comfort-text-secondary) !important;
  font-size: 12px !important;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

/* Dialog comfort */
.el-dialog {
  --el-dialog-bg-color: var(--comfort-bg-card);
  border-radius: var(--comfort-radius) !important;
  box-shadow: var(--comfort-shadow-hover) !important;
}

/* Tag comfort */
.el-tag {
  --el-tag-bg-color: var(--comfort-primary-bg);
  --el-tag-border-color: transparent;
  --el-tag-text-color: var(--comfort-primary);
  font-weight: 450;
  border-radius: 4px;
}

/* Select dropdown comfort */
.el-select-dropdown {
  --el-select-dropdown-bg: var(--comfort-bg-card);
  border: 1px solid var(--comfort-border) !important;
  box-shadow: var(--comfort-shadow-hover) !important;
  border-radius: var(--comfort-radius-sm) !important;
}
.el-select-dropdown__item.hover {
  background: var(--comfort-primary-bg) !important;
}

/* Message comfort */
.el-message {
  border-radius: var(--comfort-radius-sm) !important;
  box-shadow: var(--comfort-shadow-hover) !important;
  border: 1px solid var(--comfort-border) !important;
}

/* Checkbox comfort */
.el-checkbox {
  --el-checkbox-checked-bg-color: var(--comfort-primary);
  --el-checkbox-checked-input-border-color: var(--comfort-primary);
  --el-checkbox-input-border-color-hover: var(--comfort-primary-light);
}

/* ─── visual-json theme override ───────────────────────────────────
   The library injects its dark defaults as inline custom properties,
   so we need !important stylesheet rules to win the cascade and follow
   the app's light/dark comfort palette. */
[data-vj-root] {
  --vj-bg: var(--comfort-bg-card) !important;
  --vj-bg-panel: var(--comfort-bg-soft) !important;
  --vj-bg-hover: #f0f0eb !important;
  --vj-bg-selected: var(--comfort-primary-bg) !important;
  --vj-bg-selected-muted: #f0f0eb !important;
  --vj-bg-match: #f7ecd2 !important;
  --vj-bg-match-active: #f0dc9f !important;
  --vj-border: var(--comfort-border) !important;
  --vj-border-subtle: var(--comfort-border-light) !important;
  --vj-text: var(--comfort-text) !important;
  --vj-text-muted: var(--comfort-text-secondary) !important;
  --vj-text-dim: var(--comfort-text-muted) !important;
  --vj-text-dimmer: #c0c0ba !important;
  --vj-string: #a31515 !important;
  --vj-number: #098658 !important;
  --vj-boolean: #0000ff !important;
  --vj-accent: var(--comfort-primary) !important;
  --vj-accent-muted: #d7e5d6 !important;
  --vj-input-bg: var(--comfort-bg-card) !important;
  --vj-input-border: var(--comfort-border) !important;
  --vj-error: var(--comfort-danger) !important;
  --vj-font: var(--comfort-font-mono) !important;
  --vj-input-font-size: 13px !important;
}

.dark [data-vj-root] {
  --vj-bg: var(--comfort-bg-card) !important;
  --vj-bg-panel: var(--comfort-bg-soft) !important;
  --vj-bg-hover: #323236 !important;
  --vj-bg-selected: var(--comfort-primary-bg) !important;
  --vj-bg-selected-muted: #2e2e32 !important;
  --vj-bg-match: #3a3520 !important;
  --vj-bg-match-active: #51502b !important;
  --vj-border: var(--comfort-border) !important;
  --vj-border-subtle: var(--comfort-border-light) !important;
  --vj-text: var(--comfort-text) !important;
  --vj-text-muted: var(--comfort-text-secondary) !important;
  --vj-text-dim: var(--comfort-text-muted) !important;
  --vj-text-dimmer: #555555 !important;
  --vj-string: #ce9178 !important;
  --vj-number: #b5cea8 !important;
  --vj-boolean: #569cd6 !important;
  --vj-accent: var(--comfort-primary) !important;
  --vj-accent-muted: #3a4a3a !important;
  --vj-input-bg: #36363a !important;
  --vj-input-border: #4a4a4e !important;
  --vj-error: var(--comfort-danger) !important;
  --vj-font: var(--comfort-font-mono) !important;
  --vj-input-font-size: 13px !important;
}