.resize-observer[data-v-b329ee4c]{position:absolute;top:0;left:0;z-index:-1;width:100%;height:100%;border:none;background-color:transparent;pointer-events:none;display:block;overflow:hidden;opacity:0}.resize-observer[data-v-b329ee4c] object{display:block;position:absolute;top:0;left:0;height:100%;width:100%;overflow:hidden;pointer-events:none;z-index:-1}.v-popper__popper{z-index:10000;top:0;left:0;outline:none}.v-popper__popper.v-popper__popper--hidden{visibility:hidden;opacity:0;transition:opacity .15s,visibility .15s;pointer-events:none}.v-popper__popper.v-popper__popper--shown{visibility:visible;opacity:1;transition:opacity .15s}.v-popper__popper.v-popper__popper--skip-transition,.v-popper__popper.v-popper__popper--skip-transition>.v-popper__wrapper{transition:none!important}.v-popper__backdrop{position:absolute;top:0;left:0;width:100%;height:100%;display:none}.v-popper__inner{position:relative;box-sizing:border-box;overflow-y:auto}.v-popper__inner>div{position:relative;z-index:1;max-width:inherit;max-height:inherit}.v-popper__arrow-container{position:absolute;width:10px;height:10px}.v-popper__popper--arrow-overflow .v-popper__arrow-container,.v-popper__popper--no-positioning .v-popper__arrow-container{display:none}.v-popper__arrow-inner,.v-popper__arrow-outer{border-style:solid;position:absolute;top:0;left:0;width:0;height:0}.v-popper__arrow-inner{visibility:hidden;border-width:7px}.v-popper__arrow-outer{border-width:6px}.v-popper__popper[data-popper-placement^=top] .v-popper__arrow-inner,.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-inner{left:-2px}.v-popper__popper[data-popper-placement^=top] .v-popper__arrow-outer,.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-outer{left:-1px}.v-popper__popper[data-popper-placement^=top] .v-popper__arrow-inner,.v-popper__popper[data-popper-placement^=top] .v-popper__arrow-outer{border-bottom-width:0;border-left-color:transparent!important;border-right-color:transparent!important;border-bottom-color:transparent!important}.v-popper__popper[data-popper-placement^=top] .v-popper__arrow-inner{top:-2px}.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-container{top:0}.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-inner,.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-outer{border-top-width:0;border-left-color:transparent!important;border-right-color:transparent!important;border-top-color:transparent!important}.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-inner{top:-4px}.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-outer{top:-6px}.v-popper__popper[data-popper-placement^=left] .v-popper__arrow-inner,.v-popper__popper[data-popper-placement^=right] .v-popper__arrow-inner{top:-2px}.v-popper__popper[data-popper-placement^=left] .v-popper__arrow-outer,.v-popper__popper[data-popper-placement^=right] .v-popper__arrow-outer{top:-1px}.v-popper__popper[data-popper-placement^=right] .v-popper__arrow-inner,.v-popper__popper[data-popper-placement^=right] .v-popper__arrow-outer{border-left-width:0;border-left-color:transparent!important;border-top-color:transparent!important;border-bottom-color:transparent!important}.v-popper__popper[data-popper-placement^=right] .v-popper__arrow-inner{left:-4px}.v-popper__popper[data-popper-placement^=right] .v-popper__arrow-outer{left:-6px}.v-popper__popper[data-popper-placement^=left] .v-popper__arrow-container{right:-10px}.v-popper__popper[data-popper-placement^=left] .v-popper__arrow-inner,.v-popper__popper[data-popper-placement^=left] .v-popper__arrow-outer{border-right-width:0;border-top-color:transparent!important;border-right-color:transparent!important;border-bottom-color:transparent!important}.v-popper__popper[data-popper-placement^=left] .v-popper__arrow-inner{left:-2px}.v-popper--theme-tooltip .v-popper__inner{background:rgba(0,0,0,.8);color:#fff;border-radius:6px;padding:7px 12px 6px}.v-popper--theme-tooltip .v-popper__arrow-outer{border-color:#000c}.v-popper--theme-dropdown .v-popper__inner{background:#fff;color:#000;border-radius:6px;border:1px solid #ddd;box-shadow:0 6px 30px #0000001a}.v-popper--theme-dropdown .v-popper__arrow-inner{visibility:visible;border-color:#fff}.v-popper--theme-dropdown .v-popper__arrow-outer{border-color:#ddd}

.app[data-v-4ac51967] {
  height: 100vh;
  width: 100vw;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.app__body[data-v-4ac51967] {
  flex: 1;
  min-height: 0;
  overflow: hidden;
}
.app__viewport[data-v-4ac51967] {
  height: 100%;
  width: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.app__viewport[data-v-4ac51967] > * {
  flex: 1;
  min-height: 0;
}
[data-v-4ac51967] h3{
  margin: 1.5em 0 0 0;
  padding: 0 !important;
  color: white;
  font-size: 0.9em;
}
:root {
  /* Strictly Monochromatic (Pure Grayscale) */
  --neutral-0: #ffffff;
  --neutral-50: #fafafa;
  --neutral-100: #f5f5f5;
  --neutral-200: #e5e5e5;
  --neutral-300: #d4d4d4;
  --neutral-400: #a3a3a3;
  --neutral-500: #737373;
  --neutral-600: #404040;
  --neutral-700: #303030;
  --neutral-750: #202020;
  --neutral-800: #101010;
  --neutral-900: #000000;

  /* Functional Colors (Exceptions - Only for signals/charts) */

  /* Success / Protein / Bio-Positive */
  --emerald-50: #ecfdf5;
  --emerald-400: #34d399;
  --emerald-500: #10b981;
  --emerald-600: #059669;

  /* Info / Carbs / Chart Tendency */
  --sky-50: #ecfdf5;
  --sky-400: #38eff8;
  --sky-500: #0ee9e5;
  --sky-600: #00acb5;
  --sky-1000: #092c2e;

  /* Accent color */
  /* --purp-50: #f4ecfd;
  --purp-400: #c793ff;
  --purp-500: #7f0ee9;
  --purp-600: #6400b5; */

  /* Warning / Fat */
  --amber-50: #f2e9da;
  --amber-400: #fbbf24;
  --amber-500: #f59e0b;
  --amber-600: #d97706;
  --amber-1000: #27160b;

  /* Error / Danger */
  --rose-50: #fff1f2;
  --rose-400: #fb7185;
  --rose-500: #f43f5e;
  --rose-600: #e11d48;

  /* ============================================================
     Earthy / Parchment palette (active theme primitives)
     ============================================================ */

  /* Parchment / warm neutral scale (used by both light & dark) */
  --parch-0: #ffffff;
  --parch-50: #fbf8f3;
  --parch-100: #f5efe4;
  --parch-200: #ebe3d3;
  --parch-300: #d9cdb5;
  --parch-400: #b8a98a;
  --parch-500: #928876;
  --parch-600: #6e6557;
  --parch-700: #5a5249;
  --parch-800: #2e2922;
  --parch-900: #1c1a17;
  --parch-1000: #0f0d0a;

  /* Umber (inky dark surfaces, neutral) */
  --umber-900: #0c0c0c;
  --umber-800: #131313;
  --umber-750: #191919;
  --umber-700: #252525;
  --umber-600: #383838;

  /* Terracotta (accent / danger) */
  --terra-50: #fbeee6;
  --terra-100: #f4d8c6;
  --terra-400: #d98a64;
  --terra-500: #c4633c;
  --terra-600: #a14e2c;
  --terra-1000: #2a1308;

  /* Olive (success / lower-tendency) */
  --olive-50: #eef2e3;
  --olive-400: #8aaa68;
  --olive-500: #6b8a4e;
  --olive-600: #557040;
  --olive-1000: #1a2210;

  /* Ochre (warning) */
  --ochre-50: #f7ecd6;
  --ochre-400: #d4a05a;
  --ochre-500: #b8853a;
  --ochre-600: #946828;
  --ochre-1000: #261a09;
}
:root {
  /* Font Family - macOS System Font Stack */
  --font-sans:
    -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display",
    "Helvetica Neue", Arial, sans-serif;
  --font-mono: "Inconsolata", "Fira Mono", "Droid Sans Mono", monospace;

  /* Font Sizes */
  --size-xs: 0.75rem; /* 12px */
  --size-s: 0.875rem; /* 14px */
  --size-m: 1rem; /* 16px */
  --size-l: 1.125rem; /* 18px */
  --size-xl: 1.25rem; /* 20px */
  --size-2xl: 1.5rem; /* 24px */
  --size-3xl: 1.875rem; /* 30px */
  --size-4xl: 2.25rem; /* 36px */

  /* Font Weights */
  --weight-light: 300;
  --weight-normal: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* Line Heights */
  --leading-tight: 1.25;
  --leading-normal: 1.5;
  --leading-relaxed: 1.625;
}
.theme-light {
  color-scheme: light;

  /* Backgrounds */
  --color-bg-base: var(--parch-50);
  --color-bg-subtle: var(--parch-100);
  --color-bg-elevated: var(--parch-0);
  --color-bg-disabled: var(--parch-200);
  --color-bg-active: var(--parch-200);

  /* Text */
  --color-text-primary: var(--parch-900);
  --color-text-secondary: var(--parch-700);
  --color-text-muted: var(--parch-500);
  --color-text-inverted: var(--parch-50);
  --color-text-active: var(--terra-600);

  /* Numbers */
  --color-metric-primary: var(--terra-600);
  --color-metric-secondary: var(--parch-700);

  /* Borders / Dividers */
  --color-border-subtle: var(--parch-200);
  --color-border-default: var(--parch-300);
  --color-border-strong: var(--parch-400);
  --color-active: var(--terra-500);

  /* Shadows */
  --shadow-large: 3px 6px 15px rgba(40, 30, 20, 0.12);

  /* Semantic / Functional */
  --color-accent: var(--terra-500);
  --color-accent-hover: var(--terra-600);

  /* Biological Exceptions (Only for signals) */
  --color-success: var(--olive-500);
  --color-warning: var(--ochre-500);
  --color-danger: var(--terra-600);

  /* Legacy / Specific Macros */
  --color-macro-carbs: var(--terra-500);

  /* Chart Tendencies */
  --chart-line-higher: var(--terra-500);
  --chart-fill-higher: color-mix(in srgb, var(--terra-500), transparent 88%);
  --chart-grad-higher-0: var(--terra-400);
  --chart-grad-higher-1: var(--terra-600);

  --chart-line-lower: var(--olive-500);
  --chart-fill-lower: color-mix(in srgb, var(--olive-500), transparent 88%);
  --chart-grad-lower-0: var(--olive-400);
  --chart-grad-lower-1: var(--olive-600);

  --chart-line-neutral: var(--parch-400);
  --chart-fill-neutral: color-mix(in srgb, var(--parch-400), transparent 88%);
  --chart-grad-neutral-0: var(--parch-300);
  --chart-grad-neutral-1: var(--parch-500);
}
.theme-dark {
  color-scheme: dark;

  /* Backgrounds */
  --color-bg-base: var(--umber-900);
  --color-bg-subtle: var(--umber-800);
  --color-bg-elevated: var(--umber-750);
  --color-bg-active: var(--umber-700);
  --color-bg-disabled: var(--terra-1000);

  /* Text */
  --color-text-primary: var(--parch-100);
  --color-text-secondary: var(--parch-300);
  --color-text-muted: var(--parch-500);
  --color-text-inverted: var(--umber-900);
  --color-text-active: var(--terra-400);

  /* Numbers */
  --color-metric-primary: var(--terra-400);
  --color-metric-secondary: var(--parch-300);

  /* Borders / Dividers */
  --color-border-subtle: var(--umber-800);
  --color-border-default: var(--umber-700);
  --color-border-strong: var(--umber-600);
  --color-active: var(--terra-500);

  /* Shadows */
  --shadow-large: 3px 6px 10px rgba(0, 0, 0, 0.45);

  /* Semantic / Functional */
  --color-accent: var(--terra-500);
  --color-accent-hover: var(--terra-400);

  /* Biological Exceptions (Only for signals) */
  --color-success: var(--olive-400);
  --color-warning: var(--ochre-400);
  --color-danger: var(--terra-400);

  /* Legacy / Specific Macros */
  --color-macro-carbs: var(--terra-400);

  /* Chart Tendencies */
  --chart-line-higher: var(--terra-400);
  --chart-fill-higher: color-mix(in srgb, var(--terra-400), transparent 88%);
  --chart-grad-higher-0: var(--terra-400);
  --chart-grad-higher-1: var(--terra-600);

  --chart-line-lower: var(--olive-400);
  --chart-fill-lower: color-mix(in srgb, var(--olive-400), transparent 88%);
  --chart-grad-lower-0: var(--olive-600);
  --chart-grad-lower-1: var(--olive-400);

  --chart-line-neutral: var(--parch-500);
  --chart-fill-neutral: color-mix(in srgb, var(--umber-700), transparent 88%);
  --chart-grad-neutral-0: var(--parch-500);
  --chart-grad-neutral-1: var(--parch-500);
}
/* Global Base Styles */
:root {
  /* Default to dark theme if no class is present, or just use variables directly */
  /* For now, we expect .theme-dark or .theme-light on the root element */
}
body {
  font-family: var(--font-sans);
  background-color: var(--color-bg-subtle);
  color: var(--color-text-primary);
  margin: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  user-select: none;
  -webkit-user-select: none;
}
/* Allow text selection in inputs and text areas */
input, textarea, [contenteditable] {
  user-select: text;
  -webkit-user-select: text;
}
/* Utility to explicitly enable selection */
.selectable {
  user-select: text;
  -webkit-user-select: text;
}
* {
  box-sizing: border-box;
}
/* Accessibility: respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
/* Floating Vue Tooltip Overrides */
.v-popper--theme-tooltip .v-popper__inner {
  background: var(--color-bg-base) !important;
  color: var(--color-text-primary) !important;
  border: 1px solid var(--color-border-subtle) !important;
  font-family: inherit !important;
  font-weight: 600 !important;
  border-radius: 8px !important;
  padding: 8px 12px !important;
  font-size: 0.85rem !important;
  line-height: 1.4 !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4) !important;
  backdrop-filter: blur(8px) !important;
  max-width: 240px !important;
}
.v-popper--theme-tooltip .v-popper__arrow-outer,
.v-popper--theme-tooltip .v-popper__arrow-inner {
  visibility: hidden !important;
}
/* Splitpanes theme overrides */
.splitpanes__splitter {
  transition: background 0.15s ease;
}
.splitpanes__splitter:hover {
  background: var(--color-border-default);
}
.splitpanes--horizontal > .splitpanes__splitter {
  height: 6px;
  cursor: row-resize;
}
.splitpanes--vertical > .splitpanes__splitter {
  width: 6px;
  cursor: col-resize;
}
/* Unified Modal Styles */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
}
.modal-content {
  width: 100%;
  background: var(--color-bg-base);
  border: 1px solid var(--color-border-subtle);
  border-radius: 24px;
  box-shadow: var(--shadow-large);
  position: relative;
  display: flex;
  flex-direction: column;
  max-height: 90vh;
  overflow: hidden;
  color: var(--color-text-primary);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.modal-header {
  padding: 2.5rem 2.5rem 1rem 2.5rem;
  flex-shrink: 0;
}
.modal-title {
  font-size: 1.8rem;
  font-weight: 800;
  margin: 0;
  letter-spacing: -0.02em;
  color: var(--color-text-primary);
}
.modal-body {
  padding: 1rem 2.5rem 2.5rem 2.5rem;
  overflow-y: auto;
  flex: 1;
}
.modal-close-btn {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  background: var(--color-bg-subtle);
  border: none;
  color: var(--color-text-secondary);
  font-size: 1.1rem;
  cursor: pointer;
  padding: 0.5rem;
  border-radius: 50%;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  z-index: 10;
}
.modal-close-btn:hover {
  background: var(--color-bg-elevated);
  color: var(--color-text-primary);
  transform: rotate(90deg);
}
/* Transition: Fade */
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.3s ease;
}
.fade-enter-from, .fade-leave-to {
  opacity: 0;
}
@media (max-width: 640px) {
  .modal-overlay {
    padding: 0;
  }
  .modal-content {
    height: 100vh;
    max-height: 100vh;
    border-radius: 0;
  }
  .modal-header {
    padding: 1.5rem;
  }
  .modal-body {
    padding: 1.5rem;
  }
}