@import url(nav.css);
@import url(ui-structure.css);
@import url(ui-elements/button.css);
@import url(ui-elements/context-box.css);
@import url(ui-elements/dialog.css);
@import url(ui-elements/home.css);
@import url(ui-elements/input.css);
@import url(ui-elements/window-nav.css);
@import url(ui-elements/data-line.css);
@import url(ui-elements/md-elements.css);
@import url(ui-elements/tables.css);
/* @import url(theme/theme.css); */
@import url(ui-elements/theme-selector.css);
@import url(ui-elements/animations.css);
@import url(ui-elements/sub-section.css);
@import url(ui-elements/message.css);
@import url(ui-elements/image-selector.css);
@import url(ui-elements/windows.css);
@import url(ui-elements/menu.css);
@import url(ui-elements/select.css);
@import url(ui-elements/window-submenu.css);
@import url(ui-elements/view-transitions.css);
@import url(ui-elements/calorie-ai.css);
@import url(ui-elements/chat.css);
@import url(ui-elements/noise.css);

:root {
  --md-sys-color-neutral-background: 255,255,255;
  --md-sys-color-neutral-on-background: 0,0,0;
  --app-main-font: "Dm sans", sans-serif;
  --app-main-font-name: "Dm sans";
}

@media (prefers-color-scheme: dark) {
  :root {
    --md-sys-color-neutral-background: 0,0,0;
    --md-sys-color-neutral-on-background: 255,255,255;
  }
}
/* * {
  margin: 0;
  font-family: "DM Sans", sans-serif;
  scrollbar-width: none;
} */
body {
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  margin: 0;

  display: flex;
  justify-content: center;
  align-items: center;
  background: var(--md-sys-color-background);
  font-family: "Dm sans", sans-serif;
  font-optical-sizing: auto;
  -webkit-tap-highlight-color: transparent;
  -webkit-font-smoothing: antialiased;
  padding-bottom: env(safe-area-inset-bottom);

  font-family: var(--app-main-font);
}

a,
button {
  user-select: none;
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
  margin: 0;
}

.dm-sans-all *:not(md-icon, .material-symbols-rounded) {
  font-family: "DM Sans", sans-serif !important;
}

.background-pattern {
    position: relative;
    overflow: hidden;
}

.background-pattern > * {
  position: relative;
  z-index: 2;
}

.background-pattern::before {
  content: '';
  position: absolute;
  inset: 0;
  background-color: var(--md-sys-color-surface-container-low);
  background-image: linear-gradient(
      var(--md-sys-color-outline-variant) 1px,
      transparent 1px
    ),
    linear-gradient(
      to right,
      var(--md-sys-color-outline-variant) 1px,
      var(--md-sys-color-surface-container-low) 1px
    ) !important;
  pointer-events: none;
  background-size: 20px 20px !important;
  z-index: 0;
}

.background-pattern::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(50% 50% at 50% 50%, transparent 0%, var(--md-sys-color-background) 100%) !important;
    pointer-events: none;
    z-index: 1;

}

.primary-container {
  background: var(--md-sys-color-primary-container);
}

.on-primary-container-text {
  color: var(--md-sys-color-on-primary-container);
}

.surface-container {
    background: var(--md-sys-color-surface-container);
}

.surface-container-low {
  background: var(--md-sys-color-surface-container-low) !important;
}

.simple-container {
  display: flex;
}

.grow-0-1 {
  flex-grow: 0;
}

.grow-1 {
  flex-grow: 1;
}

.flex-wrap {
  flex-wrap: wrap;
}
.flex-nowrap {
  flex-wrap: nowrap !important;
}
@media only screen and (max-width: 680px) {
  .flex-nowrap {
    flex-wrap: wrap !important;
  }
}

.h-fit {
  height: fit-content;
}

.slim {
  max-width: 400px;
}

.hidden {
  display: none !important;
}

/* .semi-slim {
  max-width: 800px !important;
} */

.width-100 {
  width: 100%;
}

.width-auto {
  width: auto !important;
}

.max-width-400 {
  max-width: 400px;
}

.max-width-600 {
  max-width: 600px;
}

.max-width-800 {
  max-width: 800px;
}

.max-width-900 {
  max-width: 900px !important;
}
.max-width-1000 {
  max-width: 1000px;
}

.max-width-1200 {
  max-width: 1200px;
}

.max-width-1600 {
  max-width: 1600px;
}
.max-width-100 {
  max-width: 100%;
}

.height-auto {
  height: auto !important;
}

.gap-4 {
  gap: 4px;
}

.gap-0 {
  gap: 0px !important;
}
.gap-8 {
  gap: 8px;
}
.gap-12 {
    gap: 12px !important;
}
.gap-16 {
  gap: 16px !important;
}
.gap-24 {
  gap: 24px;
}
.gap-32 {
  gap: 32px;
}
.gap-42 {
  gap: 42px;
}
.gap-64 {
  gap: 64px;
}

.margin-0 {
  margin: 0 !important;
}

.left-margin-8 {
  margin-left: 8px !important;
}

.left-margin-16 {
  margin-left: 16px !important;
}
.left-margin-32 {
  margin-left: 32px !important;
}

.top-margin-8 {
  margin-top: 8px;
}

.top-man-8 {
  margin-top: 8px;
}

.top-man-24 {
  margin-top: 24px;
}

.top-margin-16 {
  margin-top: 16px;
}
.top-margin-24 {
  margin-top: 24px;
}

.top-margin-32 {
  margin-top: 32px;
}

.top-margin-48 {
  margin-top: 48px;
}

.top-margin-64 {
  margin-top: 64px;
}

.bottom-margin-8 {
  margin-bottom: 8px;
}

.bottom-margin-16 {
  margin-bottom: 16px;
}

.bottom-margin-32 {
  margin-bottom: 32px;
}

.bottom-margin-64 {
  margin-bottom: 64px;
}

.z-index-1 {
  z-index: 1;
}
.z-index-1001 {
  z-index: 1001;
}

.v-margin {
  margin: 8px 0;
}

.basis-small {
  flex-basis: 100px;
}
.basis-normal {
  flex-basis: 200px;
}
.basis-semi {
  flex-basis: 300px;
}
.basis-large {
  flex-basis: 400px;
}
.basis-large-2 {
  flex-basis: 600px;
}
.basis-large-3 {
  flex-basis: 800px;
}
.basis-large-4 {
  flex-basis: 1000px;
}

.overflow-hidden {
  overflow: hidden !important;
}
.overflow-x-hidden {
  overflow-x: hidden;
}
.overflow-x-auto {
  overflow-x: auto;
}
.overflow-auto {
  overflow: auto;
}

.align-center {
  align-items: center;
}

.align-center-left {
  align-items: center;
}
@media only screen and (max-width: 680px) {
  .align-center-left {
    align-items: flex-start;
  }
}

.align-baseline {
  align-items: baseline;
}

.direction-column {
  flex-direction: column;
}

.direction-row {
  flex-direction: row;
}

.direction-row-column {
  flex-direction: row !important;
}

@media only screen and (max-width: 680px) {
  .direction-row-column {
    flex-direction: column !important;
  }
}

.justify-left {
  justify-content: flex-start !important;
}
.justify-right {
  justify-content: flex-end;
}
.justify-end {
  justify-content: flex-end;
}
.justify-center {
  justify-content: center !important;
}

.border-radius-8 {
  border-radius: 8px;
}

.border-radius-12 {
  border-radius: 12px !important;
}

.border-radius-16 {
  border-radius: 16px !important;
}
.border-radius-20 {
  border-radius: 20px !important;
}
.border-radius-24 {
  border-radius: 24px !important;
}

.border-radius-32 {
  border-radius: 32px !important;
}
.border-radius-40 {
  border-radius: 40px !important;
}
.border-radius-48 {
  border-radius: 48px;
}
.border-radius-64 {
  border-radius: 64px !important;
}

.justify-between {
  justify-content: space-between;
  flex-wrap: wrap;
}

.justify-between-wide-screen {
  justify-content: space-between;
}

.label-normal {
  font-style: normal;
}

.outline-text {
  color: var(--md-sys-color-outline);
}

.outline-text-variant {
  color: var(--md-sys-color-outline-variant);
}

.outline-1 {
  box-shadow: 0px 0px 0px 1px var(--md-sys-color-outline-variant);
}

.outline-light-1 {
  box-shadow: 0px 0px 0px 1px var(--md-sys-color-surface-container-high) inset !important;
}
.outline-light-3 {
  box-shadow: 0 0 0 3px var(--md-sys-color-surface-container) inset;
}
.outline-shadow-small {
  box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.1),
    0 1px 2px rgba(0, 0, 0, 0.3), 0 2px 4px rgba(0, 0, 0, 0.15);
}
.outline-shadow-medium {
  box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.1),
    0 2px 4px rgba(0, 0, 0, 0.3), 0 4px 8px rgba(0, 0, 0, 0.15);
}
.outline-shadow-large {
  box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.1),
    0 4px 6px rgba(0, 0, 0, 0.3), 0 6px 10px rgba(0, 0, 0, 0.15);
}
.outline-shadow-variant-small {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 2px 4px rgba(0, 0, 0, 0.15);
}
.outline-shadow-variant-medium {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3), 0 4px 8px rgba(0, 0, 0, 0.15);
}
.outline-shadow-variant-large {
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3), 0 6px 10px rgba(0, 0, 0, 0.15);
}

.h-padding-16 {
  padding-left: 16px !important;
  padding-right: 16px !important;
}

.h-padding-24 {
  padding-left: 24px !important;
  padding-right: 24px !important;
}

.h-padding-8 {
  padding-left: 8px !important;
  padding-right: 8px !important;
}

.padding-0 {
  padding: 0px;
}

.padding-1 {
  padding: 1px;
}

.padding-8 {
  padding: 8px !important;
}

.padding-12 {
  padding: 12px !important;
}

.padding-16 {
  padding: 16px !important;
}

.padding-24 {
  padding: 24px;
}
.padding-32 {
  padding: 32px;
}

.padding-24-16 {
  padding: 24px 16px !important;
}

.b-padding-8 {
  padding-bottom: 8px !important;
}
.t-padding-8 {
  padding-top: 8px;
}
.t-padding-24 {
  padding-top: 24px;
}
.top-padding-32 {
  padding-top: 32px;
}
.top-padding-64 {
  padding-top: 64px;
}

.background {
  background: var(--md-sys-color-background);
}

.on-background-text {
  color: var(--md-sys-color-on-background);
}

md-icon {
  font-family: "Material Symbols Rounded";
}

md-icon.pretty-minimal {
  --md-icon-size: 64px;
}

md-icon.filled {
  font-variation-settings: "FILL" 1;
}

md-icon.dynamic {
  --md-icon-size: ;
  vertical-align: middle;
}

md-filled-tonal-button.delete {
  --md-sys-color-secondary-container: var(--md-sys-color-error);
  --md-sys-color-on-secondary-container: var(--md-sys-color-on-error);
}

/* Typography */
.weight-400 {
  font-weight: 400 !important;
}
.weight-500 {
  font-weight: 500 !important;
}

.weight-600 {
  font-weight: 600 !important;
}

.body-large {
  font-family: var(--md-sys-typescale-body-large-font-family-name);
  font-style: var(--md-sys-typescale-body-large-font-family-style);
  font-weight: var(--md-sys-typescale-body-large-font-weight);
  font-size: var(--md-sys-typescale-body-large-font-size);
  letter-spacing: var(--md-sys-typescale-body-large-tracking);
  line-height: var(--md-sys-typescale-body-large-height);
  text-transform: var(--md-sys-typescale-body-large-text-transform);
  text-decoration: var(--md-sys-typescale-body-large-text-decoration);
}

.healine-medium {
  font-family: var(--md-sys-typescale-headline-medium-font-family-name);
  font-style: var(--md-sys-typescale-headline-medium-font-family-style);
  font-weight: var(--md-sys-typescale-headline-medium-font-weight);
  font-size: var(--md-sys-typescale-headline-medium-font-size);
  letter-spacing: var(--md-sys-typescale-headline-medium-tracking);
  line-height: var(--md-sys-typescale-headline-medium-height);
  text-transform: var(--md-sys-typescale-headline-medium-text-transform);
  text-decoration: var(--md-sys-typescale-headline-medium-text-decoration);
}

.healine-large {
  font-family: var(--md-sys-typescale-headline-large-font-family-name);
  font-style: var(--md-sys-typescale-headline-large-font-family-style);
  font-weight: var(--md-sys-typescale-headline-large-font-weight);
  font-size: var(--md-sys-typescale-headline-large-font-size);
  letter-spacing: var(--md-sys-typescale-headline-large-tracking);
  line-height: var(--md-sys-typescale-headline-large-height);
  text-transform: var(--md-sys-typescale-headline-large-text-transform);
  text-decoration: var(--md-sys-typescale-headline-large-text-decoration);
}

.dm-sans {
  font-family: "DM Sans", sans-serif !important;
}

.bricolage {
  font-family: "Bricolage Grotesque", system-ui !important;
}

.hover-primary-container:hover {
  background: var(--md-sys-color-primary-container);
  color: var(--md-sys-color-on-primary-container);
  box-shadow: none;
}

.user-select-none {
  user-select: none;
}

.cursor-pointer {
  cursor: pointer;
}

.hover-outline {
  transition: box-shadow 0.3s cubic-bezier(0, 0, 0.5, 1) !important;
}

.hover-outline:hover {
  box-shadow: 0 0 0 1px var(--md-sys-color-outline-variant) inset !important;
}

.hover-border {
  transition: border 0.3s cubic-bezier(0, 0, 0.5, 1) !important;
}
.hover-border:hover {
  border: 1px solid var(--md-sys-color-outline-variant) !important;
}

.hover-scale-small:hover {
  transform: scale(1.03);
}

.hover-scale-small {
  transition: transform 0.3s cubic-bezier(0, 0, 0.5, 1);
}

.fit-content {
  width: fit-content !important;
}

.position-relative {
  position: relative;
}

.text-center {
  text-align: center;
}

.text-wrap-pretty {
  text-wrap-style: pretty;
}
.text-wrap-balance {
    text-wrap: balance;
}
.line-height-120 {
  line-height: 120% !important;
}
.line-height-1 {
  line-height: 1 !important;
}
.line-height-0-95 {
  line-height: 0.95 !important;
}
.surface-variant {
  background: var(--md-sys-color-surface-variant);
}
.absolute-centered {
  position: absolute;
  /* top: 50%;
  left: 50%; */
  transform: translate(-50%, -50%);
}
.padding-40 {
  padding: 40px;
}
.hover-shadow {
  transition: box-shadow 250ms cubic-bezier(0, 0, 0.5, 1) !important;
}
.hover-shadow:hover {
  box-shadow: 0px 0px 64px -10px var(--md-sys-color-on-surface-variant);
}
.position-absolute {
  position: absolute;
}
.height-100 {
  height: 100% !important;
  min-height: 100%;
}
.primary-text {
  color: var(--md-sys-color-primary) !important;
}
.box-sizing {
  box-sizing: border-box;
}

@media only screen and (max-width: 680px) {
  .grow-only-on-mobile {
    flex-grow: 1;
  }
  .space-evenly-on-mobile {
    justify-content: space-evenly !important;
  }
}

md-icon.pretty.small {
  --md-icon-size: 24px;
  padding: 8px;
  border-radius: 64px;
}

md-icon.pretty.medium {
  --md-icon-size: 40px;
  padding: 12px;
  background: var(--md-sys-color-surface-container-highest);
  color: var(--md-sys-color-on-background);
  border-radius: 64px;
  transition: font-variation-settings 500ms;
}

.pretty {
  --md-icon-size: 64px;
  padding: 24px;
  background: var(--md-sys-color-surface-container-highest);
  color: var(--md-sys-color-on-background);
  border-radius: 88px;
  transition: font-variation-settings 500ms;
}

.pretty.squared {
  border-radius: 16px !important;
}

.opacity-0-5 {
  opacity: 0.5;
}
.opacity-0-6 {
  opacity: 0.6;
}
.opacity-0-8 {
  opacity: 0.8;
}
.bottom-16 {
  bottom: 16px;
}
.right-16 {
  right: 16px;
}

.hover-magic-1 {
  overflow: hidden;
}

.hover-magic-1 > * {
  z-index: 1;
}

.hover-magic-1::before {
  content: "";
  position: absolute;
  background: linear-gradient(
    89.58deg,
    #3186ff 50.14%,
    #346bf0 72.225%,
    #4ea0ff 99.775%
  ) !important;
  top: 0;
  bottom: 0;
  left: 0;
  transform: translate(-50%);
  pointer-events: none;
  transition: all 0.5s cubic-bezier(0, 0, 0.5, 1);
}

.hover-magic-1:hover::before {
  transform: translate(0);
}

.hover-magic-2 {
  overflow: hidden;
}
.hover-magic-2 > * {
  z-index: 1;
}
.hover-magic-2::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--md-sys-color-secondary-container);
  opacity: 0;
  transform: translate3d(-30%, -30%, 0);
  border-radius: 200px;
  filter: blur(100px);
  transition: all 0.3s cubic-bezier(0, 0, 0.5, 1);
}
.hover-magic-2:hover::after {
  opacity: 1;
}

.hover-magic-2-small {
  overflow: hidden;
}
.hover-magic-2-small > * {
  z-index: 1;
}
.hover-magic-2-small::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--md-sys-color-primary-container);
  opacity: 0;
  transform: translate3d(-50%, -80%, 0);
  border-radius: 200px;
  filter: blur(50px);
  transition: all 0.3s cubic-bezier(0, 0, 0.5, 1);
}
.hover-magic-2-small:hover::after {
  opacity: 1;
}

.hover-magic-2-tiny {
  overflow: hidden;
}
.hover-magic-2-tiny > * {
  z-index: 1;
}
.hover-magic-2-tiny::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--md-sys-color-primary-container);
  opacity: 0;
  transform: translate3d(-50%, -50%, 0);
  border-radius: 200px;
  filter: blur(24px);
  transition: all 0.3s cubic-bezier(0, 0, 0.5, 1);
}
.hover-magic-2-tiny:hover::after {
  opacity: 1;
}

.hover-magic-cursor {
  position: relative;
  overflow: hidden;
}

.hover-magic-cursor > * {
  z-index: 1;
}

.hover-magic-cursor::after {
  content: "";
  position: absolute;

  left: var(--mouse-x, 50%);
  top: var(--mouse-y, 50%);

  width: 200px;
  height: 200px;

  opacity: 0;

  transform: translate(-50%, -50%);

  background: var(--md-sys-color-secondary-container);

  border-radius: 200px;
  filter: blur(100px);
  transition: opacity 0.3s cubic-bezier(0, 0, 0.5, 1),
    background 0.3s cubic-bezier(0, 0, 0.5, 1),
    filter 0.4s cubic-bezier(0, 0, 0.5, 1),
    transform 0.3s cubic-bezier(0, 0, 0.5, 1);
}

.hover-magic-cursor:hover::after {
  opacity: 1;
}

@media only screen and (max-width: 680px) {
  .width-100-on-mobile {
    width: 100% !important;
  }
}

.transparent {
  background: transparent !important;
}

.letter-spacing-0-3 {
  letter-spacing: 0.3px;
}
.letter-spacing-0-3-all * {
  letter-spacing: 0.3px;
}
.letter-spacing-0-22 {
  letter-spacing: -0.022em;
}
.letter-spacing-0-03 {
  letter-spacing: -0.03em !important;
}

.scrollbar-none {
  scrollbar-width: none;
}

@media (hover: hover) and (pointer: fine) {
  .scrollbar-pretty::-webkit-scrollbar {
    display: block;
    width: 4px;
    height: 4px;
  }

  .scrollbar-pretty::-webkit-scrollbar-track {
    background: var(--md-sys-color-background);
  }

  .scrollbar-pretty::-webkit-scrollbar-thumb {
    background: var(--md-sys-color-outline-variant);
    border-radius: 10px;
  }

  .scrollbar-pretty::-webkit-scrollbar-thumb:hover {
    background: var(--md-sys-color-outline);
  }
}

.text-gradient {
    background: linear-gradient(45deg, var(--md-sys-color-on-background) 0%, var(--md-sys-color-outline) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.pretty-text-gradient {
  background: linear-gradient(
    89.58deg,
    color-mix(
      in srgb,
      var(--md-sys-color-primary),
      var(--md-sys-color-primary-container) 100%
    ),
    color-mix(
        in srgb,
        var(--md-sys-color-surface-container-highest),
        var(--md-sys-color-primary-container) 44.45%
      )
      100%
  );
  background-clip: text;
  color: transparent !important;
}

.pretty-text-gradient-2 {
  background: radial-gradient(
    circle, color-mix(
      in srgb,
      var(--md-sys-color-primary),
      var(--md-sys-color-primary-container) 100%
    ),
    color-mix(
        in srgb,
        var(--md-sys-color-surface-container-highest),
        var(--md-sys-color-primary-container) 44.45%
      )
      100%
  );
  background-clip: text;
  color: transparent !important;
}

.pretty-text-gradient-3 {
  /* background:radial-gradient(circle,rgba(42, 123, 155, 1) 20%, rgba(237, 221, 83, 1) 100%); */

  background: radial-gradient(circle, color-mix(in srgb, var(--md-sys-color-primary), var(--md-sys-color-primary-container) 100%) 30%, color-mix(in srgb, var(--md-sys-color-surface-container-highest), var(--md-sys-color-primary-container) 44.45%) 100%);
  background-clip: text;
  color: transparent !important;
}

.pretty-text-gradient-4 {
  background: radial-gradient(circle, color-mix(in srgb, var(--md-sys-color-primary), var(--md-sys-color-primary-container) 100%) 25%, color-mix(in srgb, var(--md-sys-color-surface-container-highest), var(--md-sys-color-primary-container) 44.45%) 100%);
  background-clip: text;
  color: transparent !important;
}

.pretty-text-gradient-5 {
  background: linear-gradient(
    337deg,
    color-mix(
      in srgb,
      var(--md-sys-color-primary),
      var(--md-sys-color-primary-container) 100%
    ),
    color-mix(
        in srgb,
        var(--md-sys-color-surface-container-highest),
        var(--md-sys-color-primary-container) 29%
      )
      100%
  );
  background-clip: text;
  color: transparent !important;
}



.ui-sheet-navbar {
  position: absolute;
  z-index: 10;
  transition: all 0.2s;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  flex-direction: row;
}
.ui-sheet-navbar:before {
  content: "";
  background: color-mix(in srgb, var(--md-sys-color-background) 70%, transparent);
  z-index: -1;
  pointer-events: none;
  position: absolute;
  inset: 0 0 -12px;
  mask-image: linear-gradient(#000 33%, #00000080 66%, #0000);
}
.ui-sheet-navbar.floating-mode {
  padding: 16px;
  top: 0;
  left: 0;
  right: 0;
}