.haptic-pop {
  animation: haptic-pop 180ms cubic-bezier(.2, .86, .18, 1) both;
}
@keyframes haptic-pop {
  0% { transform: translateZ(0) scale(1); }
  45% { transform: translateZ(0) scale(.985); }
  100% { transform: translateZ(0) scale(1); }
}
.auth-screen {
  --auth-accent: #c6f04f;
  --auth-accent-ink: #14170d;
  --auth-accent-glow: rgba(198, 240, 79, 0.45);
  --auth-accent-ring: rgba(139, 176, 44, 0.5);

  --auth-bg: #f5f5f5;
  --auth-ink: #1d1d1f;
  --auth-muted: #5c5c60;

  --auth-card: rgba(255, 255, 255, 0.62);
  --auth-card-line: rgba(24, 26, 22, 0.1);
  --auth-card-shine: rgba(255, 255, 255, 0.95);
  --auth-card-shadow:
    0 2px 6px rgba(26, 28, 24, 0.06),
    0 40px 100px rgba(26, 28, 24, 0.22);
  --auth-input: color-mix(in srgb, var(--auth-ink) 5%, transparent);
  --auth-input-line: rgba(24, 26, 22, 0.14);
  --auth-google-bg: #ffffff;
  --auth-tile: rgba(255, 255, 255, 0.45);
  --auth-mosaic-opacity: 0.5;
  --auth-veil-strength: 1;
  --auth-error: #b0473c;

  --auth-gap: clamp(10px, 1.4vw, 20px);
  --auth-ease: cubic-bezier(0.2, 0.86, 0.18, 1);

  position: fixed;
  inset: 0;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  overflow-x: hidden;
  overflow-y: auto;
  background: var(--auth-bg);
  color: var(--auth-ink);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
}

:root[data-theme='dark'] .auth-screen {
  --auth-bg: #0a0b0d;
  --auth-ink: #f7f7f7;
  --auth-muted: #a8a8ab;

  --auth-card: rgba(23, 25, 27, 0.72);
  --auth-card-line: rgba(255, 255, 255, 0.1);
  --auth-card-shine: rgba(255, 255, 255, 0.22);
  --auth-card-shadow: 0 38px 100px rgba(0, 0, 0, 0.66);

  --auth-input: rgba(255, 255, 255, 0.06);
  --auth-input-line: rgba(255, 255, 255, 0.14);
  --auth-google-bg: rgba(255, 255, 255, 0.1);
  --auth-tile: rgba(255, 255, 255, 0.035);
  --auth-mosaic-opacity: 0.55;
  --auth-veil-strength: 0.8;
  --auth-accent-ring: rgba(198, 240, 79, 0.55);
  --auth-error: #e08a80;
}

.auth-visual {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
}

.auth-mosaic {
  position: absolute;
  inset: -8% -4%;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  column-gap: var(--auth-gap);
  opacity: var(--auth-mosaic-opacity);
  filter: saturate(0.82);
  -webkit-mask-image: linear-gradient(
    180deg,
    transparent 0%,
    #000 16%,
    #000 74%,
    transparent 100%
  );
  mask-image: linear-gradient(180deg, transparent 0%, #000 16%, #000 74%, transparent 100%);
}

.auth-mosaic-col {
  animation: auth-drift 60s linear infinite;
  will-change: transform;
}
.auth-mosaic-col:nth-child(1) {
  animation-duration: 58s;
}
.auth-mosaic-col:nth-child(2) {
  animation-duration: 44s;
}
.auth-mosaic-col:nth-child(3) {
  animation-duration: 68s;
}
.auth-mosaic-col:nth-child(4) {
  animation-duration: 51s;
}
.auth-mosaic-col:nth-child(5) {
  animation-duration: 63s;
}
.auth-mosaic-col:nth-child(6) {
  animation-duration: 47s;
}
.auth-tile {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  margin-bottom: var(--auth-gap);
  overflow: hidden;
}

.auth-tile img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 8%;
}

@keyframes auth-drift {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(0, -50%, 0);
  }
}

.auth-veil {
  position: absolute;
  inset: 0;
  opacity: var(--auth-veil-strength);
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--auth-bg) 62%, transparent) 0%,
    color-mix(in srgb, var(--auth-bg) 84%, transparent) 46%,
    color-mix(in srgb, var(--auth-bg) 96%, transparent) 100%
  );
}
.auth-brand {
  display: none;
  position: absolute;
  left: clamp(40px, 6vw, 96px);
  right: clamp(40px, 6vw, 96px);
  top: 50%;
  transform: translateY(-50%);
  flex-direction: column;
  gap: 16px;
  padding: 40px 44px;
  margin: -40px -44px;
}

.auth-brand::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    62% 78% at 30% 50%,
    var(--auth-bg) 0%,
    color-mix(in srgb, var(--auth-bg) 82%, transparent) 46%,
    transparent 100%
  );
  z-index: -1;
}

.auth-brand-word {
  font-size: clamp(52px, 6vw, 92px);
  font-weight: var(--type-weight-medium);
  line-height: 0.95;
  letter-spacing: -0.045em;
  text-shadow: 0 2px 40px var(--auth-bg);
}

.auth-brand-line {
  max-width: 20ch;
  color: var(--auth-ink);
  opacity: 0.72;
  font-size: clamp(16px, 1.3vw, 20px);
  line-height: 1.35;
  text-shadow: 0 2px 24px var(--auth-bg);
}

.auth-content {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  padding: calc(28px + env(safe-area-inset-top)) calc(20px + env(safe-area-inset-right))
    calc(28px + env(safe-area-inset-bottom)) calc(20px + env(safe-area-inset-left));
}

.auth-card {
  position: relative;
  width: min(100%, 408px);
  padding: 32px 28px 28px;
  border-radius: 30px;
  background: var(--auth-card);
  box-shadow:
    var(--auth-card-shadow),
    inset 0 0 0 1px var(--auth-card-line);
  backdrop-filter: blur(24px) saturate(140%);
  -webkit-backdrop-filter: blur(24px) saturate(140%);
  animation: auth-rise 420ms var(--auth-ease) both;
}
.auth-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(180deg, var(--auth-card-shine), transparent 62%);
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
}

.auth-card-mini {
  text-align: center;
}

.auth-card-mini .auth-mark {
  margin-inline: auto;
}

.auth-card-mini .auth-subtitle {
  margin-bottom: 0;
}

@keyframes auth-rise {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.auth-logo {
  display: flex;
  align-items: baseline;
  gap: 4px;
  margin-bottom: 26px;
}

.auth-logo-word {
  font-size: 21px;
  font-weight: var(--type-weight-medium);
  letter-spacing: -0.02em;
}

.auth-logo-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--auth-accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--auth-accent) 18%, transparent);
}
.auth-title {
  margin: 0;
  text-align: center;
  font-size: clamp(26px, 3.6vw, 30px);
  font-weight: var(--type-weight-medium);
  line-height: 1.02;
  letter-spacing: -0.03em;
}

.auth-subtitle {
  margin: 10px auto 26px;
  color: var(--auth-muted);
  font-size: 15px;
  line-height: 1.45;
  max-width: 32ch;
  text-align: center;
}
.auth-field {
  position: relative;
  margin-bottom: 12px;
}

.auth-label {
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--auth-muted);
  font-size: 16px;
  line-height: 1;
  pointer-events: none;
  transition:
    transform 150ms var(--auth-ease),
    font-size 150ms var(--auth-ease),
    color 150ms var(--auth-ease);
}

.auth-input {
  width: 100%;
  min-height: 62px;
  border: 0;
  outline: 0;
  border-radius: 18px;
  padding: 22px 18px 8px;
  color: var(--auth-ink);
  background: var(--auth-input);
  box-shadow: inset 0 0 0 1px var(--auth-input-line);
  font: inherit;
  font-size: 17px;
  transition:
    box-shadow 160ms var(--auth-ease),
    background-color 160ms var(--auth-ease);
}

.auth-input-password {
  padding-right: 56px;
}
.auth-field-with-icon {
  --auth-field-pad: 52px;
}

.auth-field-icon {
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  color: var(--auth-muted);
  pointer-events: none;
}

.auth-field-with-icon .auth-input {
  padding-left: var(--auth-field-pad);
}

.auth-field-with-icon .auth-label {
  left: var(--auth-field-pad);
}
.auth-field-with-icon .auth-input:focus ~ .auth-field-icon,
.auth-field-with-icon:focus-within .auth-field-icon {
  color: color-mix(in srgb, var(--auth-ink) 62%, transparent);
}

.auth-input:hover {
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--auth-input-line) 100%, var(--auth-ink) 12%);
}

.auth-input:focus-visible,
.auth-input:focus {
  background: color-mix(in srgb, var(--auth-input) 100%, var(--auth-ink) 2%);
  box-shadow:
    inset 0 0 0 1.5px var(--auth-accent-ring),
    0 0 0 4px color-mix(in srgb, var(--auth-accent) 22%, transparent);
}
.auth-input:not(:placeholder-shown) + .auth-label,
.auth-input:focus + .auth-label {
  transform: translateY(-22px);
  font-size: 11.5px;
  letter-spacing: 0.06em;
  color: var(--auth-muted);
}
.auth-peek {
  position: absolute;
  right: 10px;
  top: 50%;
  width: 40px;
  height: 40px;
  margin-top: -20px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 12px;
  color: var(--auth-muted);
  background: transparent;
  cursor: pointer;
  transition:
    color 140ms var(--auth-ease),
    background-color 140ms var(--auth-ease);
}

.auth-peek:hover {
  color: var(--auth-ink);
  background: color-mix(in srgb, var(--auth-ink) 6%, transparent);
}

.auth-peek:focus-visible {
  outline: 2px solid var(--auth-accent-ring);
  outline-offset: 2px;
}
.auth-input:-webkit-autofill,
.auth-input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--auth-ink);
  -webkit-box-shadow:
    inset 0 0 0 1px var(--auth-input-line),
    inset 0 0 0 100px color-mix(in srgb, var(--auth-bg) 92%, var(--auth-accent) 8%);
}

.auth-error-slot {
  min-height: 22px;
  margin: 4px 0 6px;
}

.auth-error {
  margin: 0;
  color: var(--auth-error);
  font-size: 14px;
  font-weight: var(--type-weight-medium);
  line-height: 1.3;
}

.auth-submit {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 60px;
  border: 0;
  border-radius: 18px;
  color: var(--auth-accent-ink);
  background: var(--auth-accent);
  font: inherit;
  font-size: 17px;
  font-weight: var(--type-weight-strong);
  letter-spacing: -0.01em;
  cursor: pointer;
  transition:
    transform 160ms var(--auth-ease),
    box-shadow 160ms var(--auth-ease);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.5) inset,
    0 8px 18px rgba(20, 22, 18, 0.16);
}

.auth-submit-arrow {
  flex: none;
  transition: transform 200ms var(--auth-ease);
}

.auth-submit:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.5) inset,
    0 14px 26px rgba(20, 22, 18, 0.22);
}

.auth-submit:hover:not(:disabled) .auth-submit-arrow {
  transform: translateX(3px);
}

.auth-submit[aria-busy='true'] .auth-submit-arrow {
  opacity: 0;
}

.auth-submit:active:not(:disabled) {
  transform: translateY(0);
}

.auth-submit:focus-visible {
  outline: 3px solid var(--auth-accent-ring);
  outline-offset: 3px;
}

.auth-submit:disabled {
  cursor: default;
}
.auth-submit[aria-busy='true'] .auth-submit-label {
  opacity: 0;
}

.auth-submit-spinner {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 20px;
  margin: -10px 0 0 -10px;
  border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--auth-accent-ink) 28%, transparent);
  border-top-color: var(--auth-accent-ink);
  opacity: 0;
  animation: auth-spin 700ms linear infinite;
}

.auth-submit[aria-busy='true'] .auth-submit-spinner {
  opacity: 1;
}

@keyframes auth-spin {
  to {
    transform: rotate(360deg);
  }
}
.auth-divider {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  margin: 22px 0 16px;
  color: var(--auth-muted);
  font-size: 13px;
}

.auth-divider::before,
.auth-divider::after {
  content: '';
  height: 1px;
  background: var(--auth-card-line);
}

.auth-google {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 60px;
  margin-bottom: 4px;
  border-radius: 18px;
  color: var(--auth-ink);
  background: var(--auth-google-bg);
  box-shadow:
    inset 0 0 0 1px var(--auth-input-line),
    0 4px 14px rgba(20, 22, 18, 0.06);
  font-size: 16px;
  font-weight: var(--type-weight-medium);
  text-decoration: none;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition:
    background-color 160ms var(--auth-ease),
    box-shadow 160ms var(--auth-ease),
    transform 160ms var(--auth-ease);
}

.auth-google:hover {
  transform: translateY(-1px);
}

.auth-google:hover {
  background: color-mix(in srgb, var(--auth-input) 100%, var(--auth-ink) 6%);
}

.auth-google:focus-visible {
  outline: 3px solid var(--auth-accent-ring);
  outline-offset: 3px;
}

.auth-google-mark {
  flex: none;
}
.auth-hint {
  margin: -4px 0 0;
  color: var(--auth-muted);
  font-size: 13px;
  line-height: 1.35;
}
.auth-terms {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 10px 0 0;
}
.auth-terms-box {
  width: 22px;
  height: 22px;
  margin: 1px 0 0;
  flex: none;
  accent-color: var(--auth-accent);
  cursor: pointer;
}

.auth-terms-box:focus-visible {
  outline: 3px solid var(--auth-accent-ring);
  outline-offset: 2px;
}
.auth-terms-text {
  margin: 0;
  min-width: 0;
  color: var(--auth-muted);
  font-size: 13px;
  line-height: 1.35;
}
.auth-terms-text .auth-link {
  padding: 0;
  color: inherit;
  font-weight: var(--type-weight-strong);
}
.auth-alt {
  margin-top: 14px;
  color: var(--auth-muted);
  font-size: 14px;
  line-height: 1.4;
  text-align: center;
}

.auth-alt-text {
  color: var(--auth-muted);
}
.auth-alt-row {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 2px;
  white-space: nowrap;
}

.auth-alt-row + .auth-alt-row {
  margin-top: 2px;
}
.auth-alt-row-split .auth-link {
  padding-inline: 2px;
}
.auth-alt-dot {
  margin-inline: 4px;
  color: var(--auth-muted);
}
.auth-link {
  padding: 2px 4px;
  border: 0;
  border-radius: 8px;
  color: var(--auth-ink);
  background: none;
  font: inherit;
  font-weight: var(--type-weight-medium);
  text-decoration: underline;
  text-decoration-color: var(--auth-accent-ring);
  text-underline-offset: 3px;
  cursor: pointer;
  transition: color 160ms var(--auth-ease);
}

.auth-link:hover {
  text-decoration-color: currentColor;
}

.auth-link:focus-visible {
  outline: 3px solid var(--auth-accent-ring);
  outline-offset: 2px;
}
.auth-sent {
  margin-bottom: 4px;
  font-size: 15px;
  line-height: 1.5;
}

.auth-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

@media (min-width: 900px) {
  .auth-screen {
    grid-template-columns: 55fr 45fr;
  }

  .auth-visual {
    position: relative;
    grid-column: 1;
    grid-row: 1;
  }

  .auth-content {
    grid-column: 2;
    grid-row: 1;
    padding-inline: clamp(24px, 4vw, 64px);
  }
  .auth-veil {
    background:
      radial-gradient(
        120% 100% at 12% 50%,
        transparent 0%,
        color-mix(in srgb, var(--auth-bg) 55%, transparent) 62%,
        var(--auth-bg) 100%
      ),
      linear-gradient(
        100deg,
        color-mix(in srgb, var(--auth-bg) 28%, transparent) 0%,
        color-mix(in srgb, var(--auth-bg) 52%, transparent) 58%,
        var(--auth-bg) 92%
      );
  }

  .auth-brand {
    display: flex;
  }
}
@media (max-width: 560px) {
  .auth-mosaic {
    grid-template-columns: repeat(4, 1fr);
  }

  .auth-mosaic-col:nth-child(5),
  .auth-mosaic-col:nth-child(6) {
    display: none;
  }

  .auth-card {
    padding: 28px 22px 24px;
    border-radius: 28px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .auth-mosaic-col,
  .auth-card,
  .auth-submit-spinner {
    animation: none;
  }

  .auth-submit,
  .auth-input,
  .auth-google,
  .auth-link {
    transition: none;
  }

  .auth-submit:hover:not(:disabled) {
    transform: none;
  }
}

.auth-code-input {
  text-align: center;
  letter-spacing: .38em;
  font-variant-numeric: tabular-nums;
}

.auth-alt-code { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.auth-apple-mark { width: 22px; font: 22px/1 -apple-system, BlinkMacSystemFont, sans-serif; }
.cheer-toast {
  position: fixed;
  z-index: 120;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  animation: cheer-life 1600ms linear both;
}
@keyframes cheer-life {
  0% { opacity: 0; }
  3% { opacity: 1; }
  78% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -52%) scale(0.88); }
}

.cheer-stage {
  position: relative;
  width: 96px;
  height: 118px;
  display: grid;
  place-items: center;
}

.cheer-bolt {
  width: 76px;
  height: 100px;
  overflow: visible;
  filter: drop-shadow(0 10px 22px rgba(255, 158, 28, 0.45));
  transform-origin: 50% 58%;
  animation: cheer-bolt-hit 1600ms both;
  animation-timing-function: cubic-bezier(0.3, 0.6, 0.7, 1);
}

@keyframes cheer-bolt-hit {
  0% { transform: scale(0.2) rotate(-10deg); }
  9% { transform: scale(1.22) rotate(1deg); }
  14% { transform: scale(1.16, 0.86) rotate(0.5deg); }
  19% { transform: scale(0.92, 1.1) rotate(-0.5deg); }
  23% { transform: scale(1.04, 0.95) rotate(0deg); }
  27% { transform: scale(0.97); }
  100% { transform: scale(0.97); }
}

.cheer-glint {
  transform: translateX(-30px) skewX(-24deg);
  opacity: 0;
  animation: cheer-glint-pass 1600ms linear both;
}
@keyframes cheer-glint-pass {
  0% { transform: translateX(-30px) skewX(-24deg); opacity: 0; }
  4% { opacity: 0.85; }
  22% { transform: translateX(96px) skewX(-24deg); opacity: 0.85; }
  30% { transform: translateX(120px) skewX(-24deg); opacity: 0; }
  33% { transform: translateX(-30px) skewX(-24deg); opacity: 0; }
  36% { opacity: 0.4; }
  50% { transform: translateX(120px) skewX(-24deg); opacity: 0; }
  100% { transform: translateX(120px) skewX(-24deg); opacity: 0; }
}

.cheer-spark {
  position: absolute;
  top: 34%;
  left: 50%;
  overflow: visible;
  opacity: 0;
  animation: cheer-spark-fly 640ms cubic-bezier(0.123, 0.5, 0.5, 1) both;
  animation-delay: calc(180ms + var(--delay));
}

@keyframes cheer-spark-fly {
  0% {
    transform: rotate(var(--angle)) translateX(6px) rotate(calc(-1 * var(--angle))) scale(0.4);
    opacity: 0;
  }
  18% { opacity: 1; }
  70% { opacity: 1; }
  100% {
    transform: rotate(var(--angle)) translateX(var(--dist)) rotate(calc(-1 * var(--angle))) scale(1);
    opacity: 0;
  }
}

.cheer-caption {
  position: relative;
  margin-top: -6px;
  color: #ff9d1c;
  font-size: 21px;
  font-weight: var(--type-weight-strong);
  letter-spacing: 0.01em;
  transform: rotate(-3deg);
  text-shadow: 0 2px 10px rgba(255, 157, 28, 0.35);
  animation: cheer-caption-pop 1600ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.cheer-caption::before {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  z-index: -1;
  -webkit-text-stroke: 7px #fff;
}

@keyframes cheer-caption-pop {
  0% { opacity: 0; transform: rotate(-3deg) scale(0.6) translateY(8px); }
  16% { opacity: 0; transform: rotate(-3deg) scale(0.6) translateY(8px); }
  28% { opacity: 1; transform: rotate(-3deg) scale(1) translateY(0); }
  100% { opacity: 1; transform: rotate(-3deg) scale(1) translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .cheer-toast { animation: cheer-fade 1600ms linear both; }
  .cheer-bolt,
  .cheer-glint,
  .cheer-caption { animation: none; }
  .cheer-spark { animation: none; opacity: 0; }

  @keyframes cheer-fade {
    0% { opacity: 0; }
    12% { opacity: 1; }
    78% { opacity: 1; }
    100% { opacity: 0; }
  }
}
.classic-round {
  min-height: 46px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--top) 88%, transparent);
  box-shadow: 0 14px 34px color-mix(in srgb, #000 10%, transparent);
}
:root[data-theme="dark"] .classic-round {
  background: color-mix(in srgb, var(--panel) 86%, transparent);
  box-shadow: none;
}
.classic-round {
  width: 46px;
  display: grid;
  place-items: center;
}
.home-classic-shell .classic-round {
  background: var(--top) !important;
}
:root[data-theme="dark"] .home-classic-shell .classic-round {
  background: var(--panel) !important;
}
.home-classic-shell {
  --classic-accent: #C6F04F !important;
  --classic-accent-soft: rgba(198, 240, 79, .16) !important;
}
.home-classic-shell .classic-round,
:root[data-theme="dark"] .home-classic-shell .classic-round {
  color: #ffffff !important;
  background: #0b0c0d !important;
  border: 1px solid rgba(255, 255, 255, .07) !important;
  box-shadow:
    0 12px 28px rgba(0, 0, 0, .16),
    inset 0 1px 0 rgba(255, 255, 255, .06) !important;
}
.flame-icon {
  width: 13px;
  height: 16px;
  display: inline-block;
  flex: 0 0 auto;
  color: currentColor;
}
.flame-icon svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}
.flame-outer {
  fill: currentColor;
}
.flame-inner {
  fill: currentColor;
}
.flame-icon.mini {
  width: 12px;
  height: 14px;
}
.classic-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 46px 46px 46px;
  align-items: center;
  gap: 8px;
  margin: 0 0 13px;
}
@media (max-width: 375px) {
  .classic-head {
    grid-template-columns: minmax(0, 1fr) 42px 42px 42px;
    gap: 6px;
  }

  .home-classic-shell .classic-round.head-circle {
    width: 42px !important;
    min-width: 42px;
  }
}
.head-profile {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 0;
  background: transparent;
  border: 0;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.head-avatar {
  width: 46px;
  height: 46px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--classic-accent, #C6F04F);
  background: #0b0c0d;
  border: 1px solid rgba(255, 255, 255, .07);
  box-shadow:
    0 12px 28px rgba(0, 0, 0, .16),
    inset 0 1px 0 rgba(255, 255, 255, .06);
  font-size: 16px;
  font-weight: var(--type-weight-strong);
  letter-spacing: .02em;
  line-height: 1;
}

.head-avatar svg {
  width: 22px;
  height: 22px;
}

.head-greeting {
  min-width: 0;
  display: grid;
  gap: 2px;
}
.head-greeting small {
  overflow: hidden;
  color: var(--muted);
  font-size: 12px;
  font-weight: var(--type-weight-medium);
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.head-greeting b {
  overflow: hidden;
  color: var(--text);
  font-size: 19px;
  font-weight: var(--type-weight-strong);
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.head-circle {
  width: 46px !important;
  min-width: 46px;
  padding: 0 !important;
  border-radius: 50% !important;
  display: grid !important;
  place-items: center !important;
}
.home-classic-shell .classic-round.head-circle {
  background: var(--head-circle-bg, #f2f2f4) !important;
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, #000 8%, transparent),
    0 6px 16px color-mix(in srgb, #000 6%, transparent) !important;
  color: #1d1d1f !important;
}

:root[data-theme='dark'] .home-classic-shell .classic-round.head-circle {
  --head-circle-bg: #2a2a2c;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .1),
    0 6px 16px rgba(0, 0, 0, .28) !important;
  color: #f4f4f5 !important;
}
.head-wellbeing svg {
  width: 20px;
  height: 20px;
  color: inherit;
}

.head-calendar svg {
  width: 20px;
  height: 20px;
  color: inherit;
}

.head-bell svg {
  width: 20px;
  height: 20px;
  color: inherit;
}
.head-bell {
  position: relative;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.head-bell svg {
  width: 20px;
  height: 20px;
}
.head-bell-badge {
  position: absolute;
  top: -2px;
  right: -2px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  border: 2px solid #0b0c0d;
  background: var(--classic-accent, #C6F04F);
  color: #16180f;
  font-size: 11px;
  font-weight: var(--type-weight-strong);
  line-height: 1;
}
.wb-tip {
  position: absolute;
  top: calc(100% + 16px);
  right: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  width: max-content;
  max-width: 100%;
  box-sizing: border-box;
  padding: 12px 14px;
  border-radius: 22px;
  background: color-mix(in srgb, var(--blue) 22%, var(--top));
  color: var(--text);
  box-shadow: 0 16px 36px rgba(0, 0, 0, .09);
  pointer-events: none;
  transform-origin: calc(100% - 77px) 0;
  animation: wb-tip-in 260ms cubic-bezier(.32, .72, .28, 1) both;
}
:root[data-theme="dark"] .wb-tip {
  background: color-mix(in srgb, var(--blue) 14%, var(--top));
}
.wb-tip::before {
  content: "";
  position: absolute;
  top: -8px;
  right: 68px;
  width: 18px;
  height: 8px;
  background: inherit;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}
@media (max-width: 375px) {
  .wb-tip {
    transform-origin: calc(100% - 69px) 0;
  }

  .wb-tip::before {
    right: 60px;
  }
}

.wb-tip.closing {
  animation: wb-tip-out 200ms cubic-bezier(.32, .72, .28, 1) both;
}

@keyframes wb-tip-in {
  from {
    opacity: 0;
    transform: scale(.92) translateY(-6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes wb-tip-out {
  from {
    opacity: 1;
    transform: none;
  }
  to {
    opacity: 0;
    transform: scale(.96) translateY(-4px);
  }
}

.wb-tip-title {
  font-size: 14px;
  font-weight: var(--type-weight-medium);
  line-height: 1.2;
  color: var(--text);
  white-space: nowrap;
}
.wb-tip-answer {
  pointer-events: auto;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #1d1d1f;
  background: var(--top);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, #000 8%, transparent);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
:root[data-theme="dark"] .wb-tip-answer {
  color: var(--text);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, #fff 10%, transparent);
}
.wb-tip-emoji {
  font-size: 20px;
  line-height: 1;
}
@media (prefers-reduced-motion: reduce) {
  .wb-tip,
  .wb-tip.closing {
    animation: none;
  }
}
.home-routines {
  margin: 2px 0 12px;
}
.home-routines-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 2px 8px;
}
.home-routines-head h2 {
  margin-right: auto;
}
.home-routines-new {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: #16180f;
  background: var(--classic-accent, #C6F04F);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.home-routines-new svg {
  width: 16px;
  height: 16px;
}

.home-routines-head h2 {
  margin: 0;
  color: var(--text);
  font-size: 17px;
  font-weight: var(--type-weight-strong);
  line-height: 1.15;
}

.home-routines-head span {
  color: var(--muted);
  font-size: 12.5px;
  font-weight: var(--type-weight-strong);
  letter-spacing: .02em;
}

.home-routines-list {
  display: grid;
  gap: 7px;
}
.home-routine-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 44px;
  align-items: stretch;
  gap: 6px;
}
.home-routine-row {
  min-height: 52px;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 28px;
  align-items: center;
  gap: 11px;
  padding: 8px 12px;
  border: 1px solid color-mix(in srgb, var(--line) 82%, transparent);
  border-radius: 18px;
  background: var(--top);
  box-shadow: 0 10px 24px color-mix(in srgb, #000 6%, transparent);
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

:root[data-theme="dark"] .home-routine-row {
  background: var(--panel);
  border-color: color-mix(in srgb, #ffffff 8%, transparent);
  box-shadow: none;
}

.home-routine-row:disabled {
  opacity: .6;
  cursor: default;
}
.home-routine-icon {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--text);
  background: color-mix(in srgb, var(--routine-color, #c6f04f) 22%, transparent);
}

.home-routine-icon svg {
  width: 17px;
  height: 17px;
}

.home-routine-title {
  overflow: hidden;
  color: var(--text);
  font-size: 14.5px;
  font-weight: var(--type-weight-strong);
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.home-routine-mark {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--line) 88%, transparent);
  color: transparent;
  background: transparent;
}

.home-routine-mark svg {
  width: 15px;
  height: 15px;
}
.home-routine-row.status-partial .home-routine-mark {
  border-color: var(--classic-accent, #C6F04F);
  background: linear-gradient(
    to top,
    color-mix(in srgb, var(--classic-accent, #C6F04F) 45%, transparent) 0 50%,
    transparent 50%
  );
}

.home-routine-row.status-completed .home-routine-mark {
  border-color: var(--classic-accent, #C6F04F);
  background: var(--classic-accent, #C6F04F);
  color: #16180f;
}
.home-routine-row.status-completed .home-routine-title {
  color: var(--muted);
}

.home-routine-row.status-completed .home-routine-icon {
  opacity: .72;
}
.home-routine-edit {
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--line) 82%, transparent);
  border-radius: 18px;
  color: var(--muted);
  background: var(--top);
  box-shadow: 0 10px 24px color-mix(in srgb, #000 6%, transparent);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

:root[data-theme="dark"] .home-routine-edit {
  background: var(--panel);
  border-color: color-mix(in srgb, #ffffff 8%, transparent);
  box-shadow: none;
}

.home-routine-edit svg {
  width: 17px;
  height: 17px;
}
.home-routines-empty {
  margin: 0 2px;
  color: var(--muted);
  font-size: 13px;
  font-weight: var(--type-weight-medium);
  line-height: 1.3;
}

.home-routines-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.home-routine-tile {
  position: relative;
  overflow: hidden;
  min-height: 76px;
  border-radius: 18px;
  background: var(--card, #fff);
  box-shadow: 0 10px 24px rgba(0, 0, 0, .07);
}
.home-routine-tile::before {
  content: '';
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: var(--routine-fill, 0%);
  background: color-mix(in srgb, #c6f04f 42%, transparent);
  transition: height 260ms cubic-bezier(.32, .72, 0, 1);
  pointer-events: none;
}

.home-routine-tile.status-completed::before {
  background: #c6f04f;
}

.home-routine-body {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
  width: 100%;
  min-height: 76px;
  padding: 10px 10px 9px;
  border: 0;
  background: none;
  text-align: left;
  cursor: pointer;
}

.home-routine-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  color: var(--routine-color, #4b5f2a);
}

.home-routine-icon svg {
  width: 20px;
  height: 20px;
}
.home-routine-title {
  overflow: hidden;
  color: #050505;
  font-size: 13px;
  font-weight: var(--type-weight-medium);
  line-height: 1.25;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.home-routine-amount {
  display: flex;
  align-items: baseline;
  gap: 3px;
  color: #050505;
  font-size: 15px;
  font-weight: var(--type-weight-strong);
  letter-spacing: -0.2px;
}

.home-routine-amount em {
  color: rgba(5, 5, 5, .55);
  font-size: 11px;
  font-style: normal;
  font-weight: var(--type-weight-medium);
}
.home-routine-check {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 1.5px solid rgba(5, 5, 5, .16);
  border-radius: 50%;
  background: rgba(255, 255, 255, .7);
  color: transparent;
  cursor: pointer;
}

.home-routine-check svg {
  width: 14px;
  height: 14px;
}

.home-routine-tile.status-completed .home-routine-check {
  border-color: #16180f;
  background: #16180f;
  color: #c6f04f;
}

.home-routine-tile.status-partial .home-routine-check {
  border-color: rgba(5, 5, 5, .32);
}

:root[data-theme="dark"] .home-routine-tile {
  background: #202021;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
}

:root[data-theme="dark"] .home-routine-title,
:root[data-theme="dark"] .home-routine-amount {
  color: #f7f7f7;
}

:root[data-theme="dark"] .home-routine-amount em {
  color: rgba(247, 247, 247, .55);
}

:root[data-theme="dark"] .home-routine-check {
  border-color: rgba(255, 255, 255, .22);
  background: rgba(0, 0, 0, .3);
}

:root[data-theme="dark"] .home-routine-tile.status-completed .home-routine-check {
  border-color: #16180f;
  background: #16180f;
}
.home-routine-tile.status-completed .home-routine-title,
.home-routine-tile.status-completed .home-routine-amount,
:root[data-theme="dark"] .home-routine-tile.status-completed .home-routine-title,
:root[data-theme="dark"] .home-routine-tile.status-completed .home-routine-amount {
  color: #16180f;
}

.home-routine-tile.status-completed .home-routine-icon {
  color: #16180f;
}

.routine-amount-backdrop {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: rgba(0, 0, 0, .42);
}

.routine-amount-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  max-width: 460px;
  padding: 16px 16px calc(env(safe-area-inset-bottom) + 18px);
  border-radius: 24px 24px 0 0;
  background: #fff;
}

.routine-amount-head {
  display: flex;
  align-items: center;
  gap: 10px;
}

.routine-amount-icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--routine-color, #c6f04f) 20%, transparent);
  color: #16180f;
}

.routine-amount-icon svg {
  width: 20px;
  height: 20px;
}

.routine-amount-title {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.routine-amount-title b {
  overflow: hidden;
  color: #050505;
  font-size: 16px;
  font-weight: var(--type-weight-strong);
  white-space: nowrap;
  text-overflow: ellipsis;
}

.routine-amount-title small {
  color: rgba(5, 5, 5, .55);
  font-size: 12px;
  font-weight: var(--type-weight-medium);
}

.routine-amount-close {
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #ececee;
  color: #1d1d1f;
  font-size: 19px;
  line-height: 1;
  cursor: pointer;
}
.routine-amount-value {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
}

.routine-amount-step {
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #f2f2f4;
  color: #1d1d1f;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

.routine-amount-number {
  display: flex;
  align-items: baseline;
  gap: 5px;
  min-width: 96px;
  padding: 0;
  border: 0;
  background: none;
  color: #050505;
  font-size: 34px;
  font-weight: var(--type-weight-medium);
  letter-spacing: -1px;
  justify-content: center;
  cursor: pointer;
}

.routine-amount-number em {
  color: rgba(5, 5, 5, .5);
  font-size: 14px;
  font-style: normal;
  font-weight: var(--type-weight-medium);
}

.routine-amount-input {
  width: 110px;
  border: 0;
  border-bottom: 2px solid #c6f04f;
  background: none;
  color: #050505;
  font-size: 32px;
  font-weight: var(--type-weight-medium);
  text-align: center;
}

.routine-amount-presets {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

.routine-amount-preset {
  min-height: 40px;
  border: 0;
  border-radius: 999px;
  background: #f2f2f4;
  color: #050505;
  font-size: 15px;
  font-weight: var(--type-weight-strong);
  cursor: pointer;
}

.routine-amount-primary {
  min-height: 48px;
  border: 0;
  border-radius: 999px;
  background: #c6f04f;
  color: #16180f;
  font-size: 16px;
  font-weight: var(--type-weight-strong);
  cursor: pointer;
}

.routine-amount-secondary {
  min-height: 40px;
  border: 0;
  border-radius: 999px;
  background: none;
  color: rgba(5, 5, 5, .55);
  font-size: 14px;
  font-weight: var(--type-weight-medium);
  cursor: pointer;
}

:root[data-theme="dark"] .routine-amount-card {
  background: #1b1b1c;
}

:root[data-theme="dark"] .routine-amount-title b,
:root[data-theme="dark"] .routine-amount-number,
:root[data-theme="dark"] .routine-amount-preset,
:root[data-theme="dark"] .routine-amount-input {
  color: #f7f7f7;
}

:root[data-theme="dark"] .routine-amount-title small,
:root[data-theme="dark"] .routine-amount-number em,
:root[data-theme="dark"] .routine-amount-secondary {
  color: rgba(247, 247, 247, .55);
}

:root[data-theme="dark"] .routine-amount-step,
:root[data-theme="dark"] .routine-amount-preset,
:root[data-theme="dark"] .routine-amount-close {
  background: #2c2c2e;
  color: #f7f7f7;
}

.home-routine-tile {
  min-height: 58px;
  border-radius: 16px;
}

.home-routine-body {
  gap: 2px;
  min-height: 58px;
  padding: 8px 9px 8px;
}

.home-routine-icon {
  width: 18px;
  height: 18px;
}

.home-routine-icon svg {
  width: 17px;
  height: 17px;
}

.home-routine-title {
  font-size: 12.5px;
  line-height: 1.2;
}

.home-routine-amount {
  font-size: 14px;
}

.home-routine-check {
  top: 6px;
  right: 6px;
  width: 21px;
  height: 21px;
}

.home-routine-check svg {
  width: 12px;
  height: 12px;
}

.home-routines-grid {
  grid-template-columns: 1fr;
  gap: 0;
}

.home-routine-tile {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

:root[data-theme="dark"] .home-routine-tile {
  background: transparent;
  box-shadow: none;
}
.home-routine-tile::before {
  top: auto;
  right: 8px;
  bottom: 2px;
  left: 30px;
  height: 2px;
  width: auto;
  border-radius: 2px;
  background: color-mix(in srgb, #050505 10%, transparent);
}

.home-routine-tile.status-completed::before,
.home-routine-tile.status-partial::before {
  background: linear-gradient(
    to right,
    #c6f04f 0 var(--routine-fill, 0%),
    color-mix(in srgb, #050505 10%, transparent) var(--routine-fill, 0%)
  );
}

:root[data-theme="dark"] .home-routine-tile::before {
  background: rgba(255, 255, 255, .14);
}

:root[data-theme="dark"] .home-routine-tile.status-completed::before,
:root[data-theme="dark"] .home-routine-tile.status-partial::before {
  background: linear-gradient(
    to right,
    #c6f04f 0 var(--routine-fill, 0%),
    rgba(255, 255, 255, .14) var(--routine-fill, 0%)
  );
}
.home-routine-body {
  flex: 1 1 auto;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  min-width: 0;
  min-height: 44px;
  padding: 0;
}
.home-routine-icon {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  background: none;
}

.home-routine-icon svg {
  width: 20px;
  height: 20px;
}

.home-routine-title {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 15px;
  font-weight: var(--type-weight-medium);
}
.home-routine-amount {
  flex: 0 0 auto;
  font-size: 13.5px;
  font-weight: var(--type-weight-strong);
}
.home-routine-check {
  position: static;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: color-mix(in srgb, #050505 22%, transparent);
}

.home-routine-check svg {
  width: 21px;
  height: 21px;
}

:root[data-theme="dark"] .home-routine-check {
  border: 0;
  background: transparent;
  color: rgba(255, 255, 255, .26);
}
.home-routine-tile.status-completed .home-routine-check,
:root[data-theme="dark"] .home-routine-tile.status-completed .home-routine-check {
  border: 0;
  background: transparent;
  color: #7cb518;
}

.home-routine-tile.status-partial .home-routine-check {
  color: color-mix(in srgb, #050505 38%, transparent);
}

.home-routine-tile.status-completed .home-routine-title {
  color: color-mix(in srgb, #050505 45%, transparent);
}

:root[data-theme="dark"] .home-routine-tile.status-completed .home-routine-title {
  color: rgba(247, 247, 247, .45);
}

.home-routine-tile.status-completed .home-routine-icon {
  color: var(--routine-color, #7cb518);
  opacity: .75;
}
.home-routine-tile.status-completed .home-routine-amount {
  color: color-mix(in srgb, #050505 45%, transparent);
}

:root[data-theme="dark"] .home-routine-tile.status-completed .home-routine-amount {
  color: rgba(247, 247, 247, .45);
}

.home-routine-tile.is-skeleton {
  min-height: 76px;
  height: 76px;
  background: var(--card, #fff);
  animation: home-routine-skeleton 1.1s ease-in-out infinite;
}

@keyframes home-routine-skeleton {
  0%, 100% { opacity: 1; }
  50% { opacity: .62; }
}

@media (prefers-reduced-motion: reduce) {
  .home-routine-tile.is-skeleton {
    animation: none;
  }
}

.home-routines-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  grid-template-columns: none;
}

.home-routine-tile {
  flex: 0 0 auto;
  gap: 2px;
  min-height: 38px;
  padding: 0 6px 0 10px;
  border-radius: 19px;
  background: var(--card, #fff);
  box-shadow: 0 8px 20px color-mix(in srgb, #000 7%, transparent);
}

:root[data-theme="dark"] .home-routine-tile {
  background: var(--card, #17181a);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
}
.home-routine-tile::before {
  right: 10px;
  bottom: 4px;
  left: 10px;
}

.home-routine-body {
  gap: 7px;
  min-height: 38px;
  flex: 0 1 auto;
}

.home-routine-title {
  flex: 0 1 auto;
  font-size: 14px;
  max-width: 46vw;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-routine-icon {
  width: 20px;
  height: 20px;
}

.home-routine-icon svg {
  width: 18px;
  height: 18px;
}

.home-routine-amount {
  font-size: 12.5px;
}

.home-routine-check {
  width: 30px;
  height: 30px;
}

.home-routine-check svg {
  width: 18px;
  height: 18px;
}
.home-routine-tile.is-skeleton {
  width: 132px;
  min-height: 38px;
  height: 38px;
  border-radius: 19px;
}
.home-routine-tile::before,
.home-routine-tile.status-completed::before,
.home-routine-tile.status-partial::before,
:root[data-theme="dark"] .home-routine-tile::before,
:root[data-theme="dark"] .home-routine-tile.status-completed::before,
:root[data-theme="dark"] .home-routine-tile.status-partial::before {
  content: none;
}
.home-routine-tile {
  min-height: 48px;
  padding: 0 8px 0 12px;
}

.home-routine-body {
  min-height: 48px;
  gap: 9px;
}

.home-routine-title {
  font-size: 14.5px;
}

.home-routine-icon,
.home-routine-icon svg {
  width: 22px;
  height: 22px;
}
.home-routine-tile.is-skeleton {
  min-height: 48px;
  height: 48px;
}
.home-routine-check {
  width: 32px;
  height: 32px;
  box-shadow: inset 0 0 0 2px color-mix(in srgb, #050505 16%, transparent);
  color: color-mix(in srgb, #050505 20%, transparent);
  transition: box-shadow 160ms ease, background-color 160ms ease, color 160ms ease;
}

.home-routine-check svg {
  width: 17px;
  height: 17px;
}

:root[data-theme="dark"] .home-routine-check {
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .18);
  color: rgba(255, 255, 255, .22);
}
.home-routine-tile.status-partial .home-routine-check {
  box-shadow: inset 0 0 0 2px color-mix(in srgb, #7cb518 55%, transparent);
  color: color-mix(in srgb, #7cb518 70%, transparent);
}

.home-routine-tile.status-completed .home-routine-check,
:root[data-theme="dark"] .home-routine-tile.status-completed .home-routine-check {
  box-shadow: none;
  background: #c6f04f;
  color: #0a0b0d;
}
.home-routine-tile.status-completed {
  box-shadow:
    0 8px 20px color-mix(in srgb, #000 7%, transparent),
    inset 0 0 0 1.5px color-mix(in srgb, #c6f04f 62%, transparent);
}

:root[data-theme="dark"] .home-routine-tile.status-completed {
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, #c6f04f 45%, transparent);
}

.home-routine-tile {
  box-shadow:
    0 8px 20px color-mix(in srgb, #000 7%, transparent),
    inset 0 0 0 1px color-mix(in srgb, #050505 55%, transparent);
}

:root[data-theme="dark"] .home-routine-tile {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .32);
}
.home-routine-tile.is-skeleton,
:root[data-theme="dark"] .home-routine-tile.is-skeleton {
  box-shadow: none;
}

.home-routine-check {
  width: 26px;
  height: 26px;
}

.home-routine-check svg {
  width: 15px;
  height: 15px;
}
.home-routine-tile {
  gap: 10px;
  padding: 0 9px;
}

.home-routine-body {
  gap: 10px;
}
.home-routine-icon {
  width: 30px;
  height: 30px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--routine-color, #c6f04f) 20%, transparent);
  color: #1d1d1f;
}

.home-routine-icon svg {
  width: 17px;
  height: 17px;
}

:root[data-theme="dark"] .home-routine-icon {
  background: color-mix(in srgb, var(--routine-color, #c6f04f) 24%, transparent);
  color: #f2f2f3;
}
.home-routine-title {
  font-size: 15px;
  font-weight: var(--type-weight-strong);
  letter-spacing: -0.1px;
}
.home-routine-check {
  width: 26px;
  height: 26px;
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, #1d1d1f 26%, transparent);
  color: color-mix(in srgb, #1d1d1f 45%, transparent);
}

.home-routine-check svg {
  width: 16px;
  height: 16px;
}

:root[data-theme="dark"] .home-routine-check {
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .26);
  color: rgba(255, 255, 255, .4);
}
.home-routine-tile.status-partial .home-routine-check {
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, #7cb518 60%, transparent);
  color: color-mix(in srgb, #7cb518 75%, transparent);
}
.home-routine-tile.status-completed .home-routine-icon {
  opacity: .5;
}
.day-off-modal {
  max-height: min(62vh, 520px);
}
.day-off-date {
  padding: 0 17px 2px;
  color: var(--muted);
  font-size: 10px;
  font-weight: var(--type-weight-medium);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.day-off-explain {
  padding: 0 17px 12px;
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.35;
}
.day-off-kinds {
  padding: 0 16px 12px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
.day-off-kind {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 8px;
  border-radius: 999px;
  color: var(--ink);
  background: var(--chip);
  border: 1px solid var(--line);
  font-size: 14px;
  font-weight: var(--type-weight-strong);
}
.day-off-kind.is-picked {
  color: var(--bg);
  background: var(--ink);
  border-color: var(--ink);
}

.day-off-error {
  padding: 0 17px 10px;
  margin: 0;
  color: var(--danger, #d33);
  font-size: 13px;
}
.calendar-day.has-day-off,
.day-pill.has-day-off {
  position: relative;
}
.day-off-mark {
  position: absolute;
  bottom: 5px;
  left: 50%;
  z-index: 1;
  width: 6px;
  height: 6px;
  transform: translateX(-50%);
  pointer-events: none;
}
.day-off-mark::before,
.day-off-mark::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 1.5px;
  border-radius: 999px;
  background: var(--classic-accent, var(--green));
}

.day-off-mark::before {
  transform: translateY(-50%) rotate(45deg);
}

.day-off-mark::after {
  transform: translateY(-50%) rotate(-45deg);
}
.calendar-day .day-off-mark {
  bottom: 2px;
}
.day-pill.selected .day-off-mark::before,
.day-pill.selected .day-off-mark::after,
.day-pill.focused .day-off-mark::before,
.day-pill.focused .day-off-mark::after,
.calendar-day.selected .day-off-mark::before,
.calendar-day.selected .day-off-mark::after {
  background: #111;
}
:root[data-theme="light"] .day-off-mark::before,
:root[data-theme="light"] .day-off-mark::after {
  background: #111;
}
.day-pill.today.has-day-off::after,
.calendar-day.today.has-day-off strong::after {
  content: none !important;
}
.calendar-day,
.day-pill {
  -webkit-touch-callout: none;
}
.calendar-focus-card .calendar-day-off-btn {
  min-width: 0;
  padding: 0 13px;
  color: var(--ink);
  background: color-mix(in srgb, var(--classic-accent, var(--green)) 14%, transparent);
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--classic-accent, var(--green)) 46%, transparent);
}

.calendar-focus-card .calendar-day-off-btn.is-on {
  color: var(--bg);
  background: var(--ink);
  box-shadow: none;
}
.calendar-day-off-hint {
  margin: -8px 16px 10px;
  padding: 0 2px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
}
.home-classic-shell .classic-summary .classic-summary-dayoff,
.home-classic-shell .classic-summary.classic-summary-light .classic-summary-dayoff {
  display: inline-block !important;
  margin-top: 8px !important;
  padding: 3px 11px !important;
  border-radius: 999px !important;
  color: #111 !important;
  background: var(--classic-accent) !important;
  font-size: 12px !important;
  font-weight: var(--type-weight-strong) !important;
  letter-spacing: 0 !important;
}
.home-classic-shell .calendar-focus-card .calendar-day-off-btn {
  background: color-mix(in srgb, var(--classic-accent, var(--green)) 14%, transparent) !important;
}

.home-classic-shell .calendar-focus-card .calendar-day-off-btn.is-on {
  background: var(--ink) !important;
}
.calendar-range {
  margin: 0 16px 12px;
  display: grid;
  gap: 8px;
}

.calendar-range-toggle,
.calendar-range-apply,
.calendar-range-clear,
.calendar-range-cancel {
  height: 38px;
  padding: 0 14px;
  border: 0;
  border-radius: 999px;
  color: var(--ink);
  background: color-mix(in srgb, var(--classic-accent, var(--green)) 14%, transparent);
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--classic-accent, var(--green)) 46%, transparent);
  font-size: 13px;
  font-weight: var(--type-weight-strong);
}
.calendar-range-apply {
  color: var(--top);
  background: var(--classic-accent, var(--green));
  box-shadow: none;
}
.calendar-range-apply[disabled],
.calendar-range-clear[disabled] {
  opacity: .45;
}
.calendar-range-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.calendar-range-apply {
  grid-column: 1 / -1;
}

.calendar-range-hint,
.calendar-range-error {
  margin: 0;
  padding: 0 2px;
  font-size: 11px;
  line-height: 1.35;
}

.calendar-range-hint {
  color: var(--muted);
}

.calendar-range-error {
  color: var(--danger, #d33);
}
.calendar-day.in-range,
.home-classic-shell .calendar-day.in-range {
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--classic-accent, var(--green)) 55%, transparent) !important;
}

.calendar-day.range-edge,
.home-classic-shell .calendar-day.range-edge {
  box-shadow: inset 0 0 0 2.5px var(--classic-accent, var(--green)) !important;
}
.day-pill {
  height: 64px;
  min-width: 36px;
  border: 2px solid var(--ring);
  border-radius: 34px;
  display: grid;
  place-items: center;
  color: var(--muted);
  background: transparent;
  position: relative;
  font-size: 13px;
  line-height: 1.05;
}
.day-pill span {
  display: block;
  text-align: center;
}
.day-pill strong {
  display: block;
  margin-top: 7px;
  color: var(--text);
  font-size: 16px;
  font-weight: var(--type-weight-regular);
}
.day-pill.focused,
.day-pill.selected {
  border-color: var(--blue);
}
.day-pill.selected {
  background: color-mix(in srgb, var(--text) 7%, transparent);
}
.day-pill.selected::after {
  content: "";
  width: 4px;
  height: 4px;
  border-radius: 999px;
  background: currentColor;
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
}
.design-week .day-pill {
  overflow: hidden;
}
.design-week .day-pill::before {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: max(0%, var(--day-pct));
  background: color-mix(in srgb, var(--blue) 22%, transparent);
  z-index: -1;
}
.design-week .day-pill.status-on_target,
.design-week .day-pill.status-under,
.design-week .day-pill.status-over,
.design-week .day-pill.status-high {
  border-color: color-mix(in srgb, var(--blue) 72%, var(--ring));
}
.design-week .day-pill.status-on_target::before { background: color-mix(in srgb, var(--carb) 32%, transparent); }
.design-week .day-pill.status-over::before { background: color-mix(in srgb, var(--fat) 34%, transparent); }
.design-week .day-pill.status-high::before { background: color-mix(in srgb, #ff5c5c 34%, transparent); }
@media (max-height: 760px) {
  .day-pill { height: 56px; }
}
.design-total-shell .day-pill {
  width: 38px;
  min-width: 0;
  height: 60px;
  justify-self: center;
}
.design-total-shell .day-pill {
  border: 0;
  display: grid;
  grid-template-rows: 16px 20px 7px;
  align-content: center;
  gap: 1px;
  color: var(--muted);
  background: conic-gradient(from 0deg, var(--blue) var(--day-pct), var(--ring) 0);
  overflow: hidden;
  isolation: isolate;
}
.design-total-shell .day-pill::before {
  content: "";
  position: absolute;
  inset: 2px;
  height: auto;
  border-radius: inherit;
  background: var(--top);
  z-index: -1;
}
.design-total-shell .day-pill.selected::before {
  background: color-mix(in srgb, var(--blue) 15%, var(--chip));
}
.design-total-shell .day-pill.focused,
.design-total-shell .day-pill.selected,
.design-total-shell .day-pill.status-on_target,
.design-total-shell .day-pill.status-under,
.design-total-shell .day-pill.status-over,
.design-total-shell .day-pill.status-high {
  border: 0;
}
.design-total-shell .day-pill span,
.design-total-shell .day-pill strong {
  position: relative;
  z-index: 1;
  margin: 0;
}
.design-total-shell .day-pill strong {
  font-size: 16px;
  line-height: 1;
}
.design-total-shell .day-pill.selected::after {
  bottom: 6px;
  z-index: 1;
}
.classic-week {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 8px;
  margin: 3px 0 18px;
}
@media (max-width: 380px) {
  .classic-week {
    gap: 6px;
  }
}
.home-classic-shell .classic-week {
  scroll-snap-type: none !important;
  scroll-padding-inline: 18px !important;
  overscroll-behavior-x: contain !important;
}
.home-classic-shell .classic-calendar-day {
  scroll-snap-align: none !important;
  scroll-snap-stop: normal !important;
}
.home-classic-shell .classic-week {
  display: flex !important;
  grid-template-columns: none !important;
  gap: 8px !important;
  align-items: center !important;
  margin: 2px -18px 12px !important;
  padding: 0 18px 4px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scrollbar-width: none !important;
  scroll-behavior: auto !important;
  scroll-snap-type: none !important;
  -webkit-overflow-scrolling: touch !important;
  touch-action: pan-x !important;
}
.home-classic-shell .classic-week::-webkit-scrollbar {
  display: none !important;
}
.home-classic-shell .classic-calendar-day {
  flex: 0 0 45px !important;
  width: 45px !important;
  min-width: 45px !important;
  height: 58px !important;
  scroll-snap-align: none !important;
  background: conic-gradient(from 0deg, var(--classic-accent) var(--day-pct), var(--ring) 0) !important;
}
.home-classic-shell .classic-calendar-day::before {
  inset: 2px !important;
  height: auto !important;
  border-radius: inherit !important;
  background: var(--top) !important;
}
.home-classic-shell .classic-calendar-day.selected::before {
  background: color-mix(in srgb, var(--classic-accent) 16%, var(--top)) !important;
}
:root[data-theme="dark"] .home-classic-shell .classic-calendar-day::before {
  background: var(--panel) !important;
}
:root[data-theme="dark"] .home-classic-shell .classic-calendar-day.selected::before {
  background: color-mix(in srgb, var(--classic-accent) 14%, var(--panel)) !important;
}
.home-classic-shell .classic-calendar-day.status-green,
.home-classic-shell .classic-calendar-day.status-on_target {
  background: conic-gradient(from 0deg, var(--classic-accent) var(--day-pct), var(--ring) 0) !important;
}
.home-classic-shell .classic-calendar-day.status-orange,
.home-classic-shell .classic-calendar-day.status-over {
  background: conic-gradient(from 0deg, var(--amber) var(--day-pct), var(--ring) 0) !important;
}
.home-classic-shell .classic-calendar-day.status-red,
.home-classic-shell .classic-calendar-day.status-high {
  background: conic-gradient(from 0deg, #ff5c5c var(--day-pct), var(--ring) 0) !important;
}
.home-classic-shell .classic-calendar-day {
  background: var(--top) !important;
}
:root[data-theme="dark"] .home-classic-shell .classic-calendar-day {
  background: var(--panel) !important;
}
.home-classic-shell .classic-calendar-day,
.home-classic-shell .classic-calendar-day.status-under,
.home-classic-shell .classic-calendar-day.status-green,
.home-classic-shell .classic-calendar-day.status-on_target {
  background: conic-gradient(from 0deg, var(--classic-accent) var(--day-pct), var(--ring) 0) !important;
}
.home-classic-shell .classic-calendar-day.status-none {
  background: var(--top) !important;
}
:root[data-theme="dark"] .home-classic-shell .classic-calendar-day.status-none {
  background: var(--panel) !important;
}
:root[data-theme="dark"] .home-classic-shell .classic-calendar-day {
  --classic-day-track: rgba(255,255,255,.14);
  --classic-day-status: #8fd9bb;
  isolation: isolate !important;
  border: 0 !important;
  background: conic-gradient(
    from -90deg,
    var(--classic-day-status) var(--day-pct),
    var(--classic-day-track) 0
  ) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.06),
    0 8px 18px rgba(0,0,0,.20) !important;
}
:root[data-theme="dark"] .home-classic-shell .classic-calendar-day.status-under {
  --classic-day-status: #7eb1e4;
}
:root[data-theme="dark"] .home-classic-shell .classic-calendar-day.status-green,
:root[data-theme="dark"] .home-classic-shell .classic-calendar-day.status-on_target {
  --classic-day-status: #8fd9bb;
}
:root[data-theme="dark"] .home-classic-shell .classic-calendar-day.status-orange,
:root[data-theme="dark"] .home-classic-shell .classic-calendar-day.status-over {
  --classic-day-status: #efbd63;
}
:root[data-theme="dark"] .home-classic-shell .classic-calendar-day.status-red,
:root[data-theme="dark"] .home-classic-shell .classic-calendar-day.status-high {
  --classic-day-status: #ff7d73;
}
:root[data-theme="dark"] .home-classic-shell .classic-calendar-day.status-none {
  background: rgba(255,255,255,.075) !important;
}
:root[data-theme="dark"] .home-classic-shell .classic-calendar-day::before {
  z-index: 0 !important;
  inset: 3px !important;
  background: rgba(30,31,34,.93) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.045) !important;
}
:root[data-theme="dark"] .home-classic-shell .classic-calendar-day.selected,
:root[data-theme="dark"] .home-classic-shell .classic-calendar-day.focused {
  box-shadow:
    inset 0 0 0 1px rgba(143,217,187,.26),
    0 0 0 1px rgba(143,217,187,.14),
    0 10px 20px rgba(0,0,0,.24) !important;
}
:root[data-theme="dark"] .home-classic-shell .classic-calendar-day.selected::before,
:root[data-theme="dark"] .home-classic-shell .classic-calendar-day.focused::before {
  background:
    linear-gradient(180deg, rgba(92,151,130,.28), rgba(30,31,34,.92)) !important;
}
:root[data-theme="dark"] .home-classic-shell .classic-calendar-day span,
:root[data-theme="dark"] .home-classic-shell .classic-calendar-day strong {
  position: relative;
  z-index: 1;
}
.home-classic-shell .classic-calendar-day.selected,
.home-classic-shell .classic-calendar-day.focused {
  background: #91ad2f !important;
}
.home-classic-shell .classic-calendar-day.selected::before,
.home-classic-shell .classic-calendar-day.focused::before,
:root[data-theme="dark"] .home-classic-shell .classic-calendar-day.selected::before,
:root[data-theme="dark"] .home-classic-shell .classic-calendar-day.focused::before {
  background: #9fbd37 !important;
}
.home-classic-shell .classic-calendar-day.selected span,
.home-classic-shell .classic-calendar-day.selected strong,
.home-classic-shell .classic-calendar-day.focused span,
.home-classic-shell .classic-calendar-day.focused strong {
  color: #111 !important;
}
.home-classic-shell .classic-calendar-day[class]::before,
:root[data-theme="dark"] .home-classic-shell .classic-calendar-day[class]::before {
  inset: 0 !important;
}

.day-pill.selected::after {
  content: none;
}

.day-pill.today::after,
.design-total-shell .day-pill.today::after {
  content: "";
  position: absolute;
  bottom: 6px;
  left: 50%;
  z-index: 1;
  width: 4px;
  height: 4px;
  border-radius: 999px;
  background: currentColor;
  transform: translateX(-50%);
}
.day-pill.today.selected::after,
.day-pill.today.focused::after {
  background: #111;
}
.home-classic-shell .classic-calendar-day:not(.selected),
.home-classic-shell .classic-calendar-day.status-none:not(.selected),
.home-classic-shell .classic-calendar-day.status-under:not(.selected),
.home-classic-shell .classic-calendar-day.status-green:not(.selected),
.home-classic-shell .classic-calendar-day.status-on_target:not(.selected),
.home-classic-shell .classic-calendar-day.status-orange:not(.selected),
.home-classic-shell .classic-calendar-day.status-over:not(.selected),
.home-classic-shell .classic-calendar-day.status-red:not(.selected),
.home-classic-shell .classic-calendar-day.status-high:not(.selected) {
  background: var(--top) !important;
}

:root[data-theme="dark"] .home-classic-shell .classic-calendar-day:not(.selected),
:root[data-theme="dark"] .home-classic-shell .classic-calendar-day.status-none:not(.selected),
:root[data-theme="dark"] .home-classic-shell .classic-calendar-day.status-under:not(.selected),
:root[data-theme="dark"] .home-classic-shell .classic-calendar-day.status-green:not(.selected),
:root[data-theme="dark"] .home-classic-shell .classic-calendar-day.status-on_target:not(.selected),
:root[data-theme="dark"] .home-classic-shell .classic-calendar-day.status-orange:not(.selected),
:root[data-theme="dark"] .home-classic-shell .classic-calendar-day.status-over:not(.selected),
:root[data-theme="dark"] .home-classic-shell .classic-calendar-day.status-red:not(.selected),
:root[data-theme="dark"] .home-classic-shell .classic-calendar-day.status-high:not(.selected) {
  background: var(--panel) !important;
}
.home-classic-shell .classic-calendar-day.today:not(.selected),
.home-classic-shell .classic-calendar-day.today:not(.selected) span,
.home-classic-shell .classic-calendar-day.today:not(.selected) strong {
  color: var(--classic-accent) !important;
}
.classic-week-today {
  position: sticky;
  right: 0;
  z-index: 3;
  flex: 0 0 auto;
  align-self: center;
  height: 34px;
  padding: 0 14px;
  border: 0;
  border-radius: 999px;
  color: var(--top);
  background: var(--classic-accent, var(--green));
  font-size: 13px;
  font-weight: var(--type-weight-strong);
  line-height: 1;
  white-space: nowrap;
  box-shadow: 0 2px 10px color-mix(in srgb, var(--classic-accent) 34%, transparent);
}
.home-classic-shell .home-classic .classic-week {
  margin-bottom: 0 !important;
  padding-bottom: 16px !important;
  background: var(--bg);
}
.nutrition-privacy-toggle {
  width: 36px;
  height: 36px;
  display: grid;
  flex: 0 0 36px;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--line) 72%, transparent);
  border-radius: 50%;
  color: var(--text);
  background: color-mix(in srgb, var(--top) 86%, transparent);
  box-shadow: 0 8px 20px color-mix(in srgb, #000 9%, transparent);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.nutrition-privacy-toggle svg {
  width: 19px;
  height: 19px;
  pointer-events: none;
}
.nutrition-values-hidden .nutrition-privacy-toggle {
  color: var(--classic-accent, var(--blue));
  background: color-mix(in srgb, var(--classic-accent, var(--blue)) 14%, var(--top));
}
.nutrition-values-hidden .classic-macro i {
  opacity: .45;
}
.nutrition-masked {
  font-variant-numeric: normal;
  letter-spacing: .08em;
}
.home-classic-shell .classic-macro > strong.nutrition-masked {
  min-height: 20px !important;
}
.classic-summary {
  background: color-mix(in srgb, var(--top) 90%, transparent);
  box-shadow: 0 18px 42px color-mix(in srgb, #000 11%, transparent);
  border: 1px solid color-mix(in srgb, var(--line) 72%, transparent);
}
:root[data-theme="dark"] .classic-summary {
  background: color-mix(in srgb, var(--panel) 90%, transparent);
  box-shadow: none;
}
.classic-summary {
  min-height: 215px;
  border-radius: 24px;
  padding: 18px 17px 16px;
  margin-bottom: 18px;
}
.classic-summary-heading {
  min-height: 36px;
  display: flex;
  align-items: center;
  gap: 9px;
}
.classic-summary .classic-summary-heading p {
  min-width: 0;
  margin: 0;
}
.nutrition-privacy-toggle-classic {
  box-shadow: none;
}
.classic-summary-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 78px;
  align-items: center;
  gap: 14px;
}
.classic-summary p {
  margin: 0 0 4px;
  color: var(--muted);
  font-size: 11px;
  font-weight: var(--type-weight-strong);
  letter-spacing: .18em;
}
.classic-summary h1 {
  margin: 0;
  font-size: 49px;
  font-weight: var(--type-weight-medium);
  line-height: .9;
}
.classic-summary h1 span {
  margin-left: 6px;
  color: var(--muted);
  font-size: 19px;
  font-weight: var(--type-weight-strong);
}
.classic-summary small {
  display: block;
  margin-top: 8px;
  color: var(--muted);
  font-size: 14px;
  font-weight: var(--type-weight-strong);
}
.classic-summary small b {
  color: var(--classic-accent);
}
.classic-ring {
  width: 74px;
  height: 74px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: conic-gradient(var(--classic-accent) var(--p), color-mix(in srgb, var(--ring) 75%, transparent) 0);
}
.classic-ring strong {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--top);
  font-size: 17px;
  font-weight: var(--type-weight-strong);
}
:root[data-theme="dark"] .classic-ring strong {
  background: var(--panel);
}
.classic-macros {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 9px;
  margin-top: 17px;
}
.classic-macro {
  min-width: 0;
}
.classic-macro span {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  color: var(--macro);
  font-size: 8.5px;
  font-weight: var(--type-weight-strong);
  letter-spacing: .08em;
  white-space: nowrap;
}
.classic-macro i {
  display: block;
  height: 5px;
  overflow: hidden;
  margin: 6px 0 5px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ring) 72%, transparent);
}
.classic-macro em {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--macro);
}
.classic-macro strong {
  display: block;
  min-height: 16px;
  color: var(--text);
  font-size: 11px;
  font-weight: var(--type-weight-strong);
  line-height: 16px;
}
.classic-macro small {
  color: var(--muted);
  font-size: 10px;
  font-weight: var(--type-weight-strong);
}
@media (max-width: 380px) {
  .classic-summary h1 {
    font-size: 43px;
  }

  .classic-macros {
    gap: 6px;
  }

  .classic-macro span {
    font-size: 7.6px;
  }
}
.home-classic-shell .classic-summary p,
.home-classic-shell .classic-macro span {
  letter-spacing: 0 !important;
}
.home-classic-shell .classic-summary {
  padding: 20px 19px 18px !important;
  margin-bottom: 14px !important;
}
.home-classic-shell .classic-summary-main {
  grid-template-columns: minmax(0, 1fr) 76px !important;
  gap: 14px !important;
}
.home-classic-shell .classic-summary p {
  margin-bottom: 5px !important;
  color: var(--classic-ink-soft) !important;
  font-size: 11px !important;
  font-weight: var(--type-weight-strong) !important;
}
.home-classic-shell .classic-summary h1 {
  font-size: 50px !important;
  font-weight: var(--type-weight-medium) !important;
  line-height: .92 !important;
}
.home-classic-shell .classic-summary h1 span {
  margin-left: 5px !important;
  color: var(--classic-ink-soft) !important;
  font-size: 18px !important;
  font-weight: var(--type-weight-medium) !important;
}
.home-classic-shell .classic-summary small {
  margin-top: 8px !important;
  color: var(--classic-ink-soft) !important;
  font-size: 14.5px !important;
  font-weight: var(--type-weight-medium) !important;
}
.home-classic-shell .classic-summary small b {
  color: var(--classic-accent) !important;
  font-weight: var(--type-weight-strong) !important;
}
.home-classic-shell .classic-ring {
  width: 72px !important;
  height: 72px !important;
  background:
    conic-gradient(var(--classic-accent) var(--p), color-mix(in srgb, var(--ring) 64%, transparent) 0) !important;
  box-shadow: inset 0 0 0 1px var(--classic-hairline) !important;
}
.home-classic-shell .classic-ring strong {
  width: 56px !important;
  height: 56px !important;
  font-size: 17px !important;
  font-weight: var(--type-weight-strong) !important;
}
.home-classic-shell .classic-macros {
  gap: 10px !important;
  margin-top: 18px !important;
}
.home-classic-shell .classic-macro span {
  display: block !important;
  overflow: hidden;
  color: var(--macro) !important;
  font-size: 10px !important;
  font-weight: var(--type-weight-strong) !important;
  line-height: 1.05 !important;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.home-classic-shell .classic-macro i {
  height: 4px !important;
  margin: 7px 0 6px !important;
  background: color-mix(in srgb, var(--ring) 66%, transparent) !important;
}
.home-classic-shell .classic-macro strong {
  display: inline-flex !important;
  align-items: baseline !important;
  gap: 3px !important;
  min-width: 0 !important;
  color: var(--text) !important;
  font-size: 13px !important;
  font-weight: var(--type-weight-strong) !important;
  white-space: nowrap !important;
}
.home-classic-shell .classic-macro strong b {
  font: inherit;
}
.home-classic-shell .classic-macro small {
  margin-left: 0 !important;
  color: var(--classic-ink-soft) !important;
  font-size: 11.5px !important;
  font-weight: var(--type-weight-medium) !important;
}
.home-classic-shell .classic-summary p {
  font-size: 10.5px !important;
  font-weight: var(--type-weight-medium) !important;
}
.home-classic-shell .classic-summary h1 {
  font-size: 46px !important;
  font-weight: var(--type-weight-medium) !important;
  letter-spacing: 0 !important;
}
.home-classic-shell .classic-summary h1 span {
  font-size: 17px !important;
  font-weight: var(--type-weight-medium) !important;
}
.home-classic-shell .classic-summary small {
  font-size: 14px !important;
  font-weight: var(--type-weight-medium) !important;
}
.home-classic-shell .classic-ring strong {
  font-size: 16px !important;
  font-weight: var(--type-weight-medium) !important;
}
.home-classic-shell .classic-macro span {
  font-size: 9.4px !important;
  font-weight: var(--type-weight-medium) !important;
}
.home-classic-shell .classic-macro strong {
  font-size: 12.5px !important;
  font-weight: var(--type-weight-medium) !important;
}
.home-classic-shell .classic-macro small {
  font-size: 11px !important;
  font-weight: var(--type-weight-medium) !important;
}
.summary[data-open-day-summary],
.classic-summary[data-open-day-summary] {
  cursor: pointer;
  touch-action: manipulation;
}
.summary[data-open-day-summary]:active,
.classic-summary[data-open-day-summary]:active {
  transform: translateY(1px) scale(.998);
}
.home-classic-shell .classic-summary {
  background: var(--top) !important;
}
:root[data-theme="dark"] .home-classic-shell .classic-summary {
  background: var(--panel) !important;
}
.home-classic-shell .classic-summary {
  color: #f8f9fb !important;
  background:
    radial-gradient(circle at 78% 20%, rgba(105, 170, 150, .18) 0%, rgba(105, 170, 150, .10) 18%, transparent 36%),
    radial-gradient(circle at 10% 8%, rgba(255, 255, 255, .10) 0%, rgba(255, 255, 255, .045) 26%, transparent 48%),
    linear-gradient(145deg, #22262b 0%, #171b20 48%, #101316 100%) !important;
  border-color: rgba(255, 255, 255, .075) !important;
  box-shadow:
    0 24px 48px rgba(10, 12, 14, .22),
    inset 0 1px 0 rgba(255, 255, 255, .075) !important;
}
:root[data-theme="dark"] .home-classic-shell .classic-summary {
  background:
    radial-gradient(circle at 78% 20%, rgba(86, 158, 137, .15) 0%, rgba(86, 158, 137, .08) 18%, transparent 38%),
    radial-gradient(circle at 10% 8%, rgba(255, 255, 255, .07) 0%, rgba(255, 255, 255, .028) 28%, transparent 50%),
    linear-gradient(145deg, #1c2025 0%, #12161a 52%, #0b0e11 100%) !important;
  box-shadow:
    0 20px 44px rgba(0, 0, 0, .36),
    inset 0 1px 0 rgba(255, 255, 255, .055) !important;
}
.home-classic-shell .classic-summary p,
.home-classic-shell .classic-summary h1 span,
.home-classic-shell .classic-summary small,
.home-classic-shell .classic-macro small {
  color: rgba(248, 249, 251, .64) !important;
}
.home-classic-shell .classic-summary h1,
.home-classic-shell .classic-macro strong {
  color: #ffffff !important;
}
.home-classic-shell .classic-summary small b {
  color: #6fb49f !important;
}
.home-classic-shell .classic-ring {
  background:
    conic-gradient(#6fb49f var(--p), rgba(255, 255, 255, .14) 0) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .035),
    0 8px 24px rgba(0, 0, 0, .22) !important;
}
.home-classic-shell .classic-ring strong,
:root[data-theme="dark"] .home-classic-shell .classic-ring strong {
  color: #ffffff !important;
  background:
    radial-gradient(circle at 50% 38%, rgba(255, 255, 255, .08), transparent 44%),
    #1b1f24 !important;
}
.home-classic-shell .classic-macro i {
  background: rgba(255, 255, 255, .15) !important;
}
.home-classic-shell {
  --classic-accent: #C6F04F !important;
  --classic-accent-soft: rgba(198, 240, 79, .16) !important;
}
.home-classic-shell .classic-summary {
  color: #ffffff !important;
  background-image:
    radial-gradient(circle at 84% 47%, rgba(198, 240, 79, .23) 0%, rgba(198, 240, 79, .12) 18%, rgba(198, 240, 79, 0) 42%),
    radial-gradient(circle, rgba(198, 240, 79, .42) 1px, transparent 1.5px),
    radial-gradient(circle at 18% 18%, rgba(255, 255, 255, .08), transparent 46%),
    linear-gradient(145deg, #191c20 0%, #111315 52%, #08090a 100%) !important;
  background-position: center, calc(100% - 135px) 22px, center, center !important;
  background-size: auto, 7px 7px, auto, auto !important;
  border-color: rgba(255, 255, 255, .08) !important;
  box-shadow:
    0 22px 44px rgba(0, 0, 0, .20),
    inset 0 1px 0 rgba(255, 255, 255, .07) !important;
}
:root[data-theme="dark"] .home-classic-shell .classic-summary {
  background-image:
    radial-gradient(circle at 84% 47%, rgba(198, 240, 79, .20) 0%, rgba(198, 240, 79, .10) 18%, rgba(198, 240, 79, 0) 42%),
    radial-gradient(circle, rgba(198, 240, 79, .36) 1px, transparent 1.5px),
    radial-gradient(circle at 18% 18%, rgba(255, 255, 255, .055), transparent 46%),
    linear-gradient(145deg, #171a1e 0%, #101214 55%, #070808 100%) !important;
  background-position: center, calc(100% - 135px) 22px, center, center !important;
  background-size: auto, 7px 7px, auto, auto !important;
}
.home-classic-shell .classic-summary small b,
.home-classic-shell .classic-ring,
.home-classic-shell .classic-macro:nth-child(3) span,
.home-classic-shell .classic-macro:nth-child(4) span {
  color: #C6F04F !important;
}
.home-classic-shell .classic-ring {
  background:
    conic-gradient(#C6F04F var(--p), rgba(255, 255, 255, .20) 0) !important;
}
.home-classic-shell .classic-ring strong,
:root[data-theme="dark"] .home-classic-shell .classic-ring strong {
  background: #202327 !important;
}
.home-classic-shell .classic-summary,
:root[data-theme="dark"] .home-classic-shell .classic-summary {
  position: relative !important;
  isolation: isolate !important;
  overflow: hidden !important;
  background-color: #101112 !important;
  background-image:
    linear-gradient(145deg, #141617 0%, #101112 52%, #0b0c0d 100%) !important;
  background-position: center !important;
  background-size: auto !important;
  border-color: rgba(198, 240, 79, .16) !important;
}
.home-classic-shell .classic-summary::before,
.home-classic-shell .classic-summary::after {
  content: none !important;
  display: none !important;
}
.home-classic-shell .classic-summary > * {
  position: relative !important;
  z-index: 2 !important;
}
.ring[data-calories-card-light-toggle],
.classic-ring[data-calories-card-light-toggle],
.macro.design-macro[data-calories-card-light-toggle] {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.home-classic-shell .classic-summary.classic-summary-light,
:root[data-theme="dark"] .home-classic-shell .classic-summary.classic-summary-light {
  color: #191a1f !important;
  background-color: rgba(255, 255, 255, .93) !important;
  background-image:
    radial-gradient(circle at 84% 47%, rgba(198, 240, 79, .16) 0%, rgba(198, 240, 79, .08) 18%, rgba(198, 240, 79, 0) 42%),
    radial-gradient(circle, rgba(198, 240, 79, .22) 1px, transparent 1.5px),
    radial-gradient(circle at 18% 18%, rgba(255, 255, 255, .70), transparent 46%),
    linear-gradient(145deg, rgba(255, 255, 255, .96) 0%, rgba(248, 250, 247, .92) 52%, rgba(239, 246, 229, .88) 100%) !important;
  border-color: rgba(198, 240, 79, .30) !important;
  box-shadow:
    0 20px 42px rgba(31, 35, 38, .12),
    inset 0 1px 0 rgba(255, 255, 255, .88) !important;
}
.home-classic-shell .classic-summary.classic-summary-light p,
.home-classic-shell .classic-summary.classic-summary-light h1 span,
.home-classic-shell .classic-summary.classic-summary-light small,
.home-classic-shell .classic-summary.classic-summary-light .classic-macro small,
:root[data-theme="dark"] .home-classic-shell .classic-summary.classic-summary-light p,
:root[data-theme="dark"] .home-classic-shell .classic-summary.classic-summary-light h1 span,
:root[data-theme="dark"] .home-classic-shell .classic-summary.classic-summary-light small,
:root[data-theme="dark"] .home-classic-shell .classic-summary.classic-summary-light .classic-macro small {
  color: rgba(25, 26, 31, .58) !important;
}
.home-classic-shell .classic-summary.classic-summary-light h1,
.home-classic-shell .classic-summary.classic-summary-light .classic-macro strong,
:root[data-theme="dark"] .home-classic-shell .classic-summary.classic-summary-light h1,
:root[data-theme="dark"] .home-classic-shell .classic-summary.classic-summary-light .classic-macro strong {
  color: #191a1f !important;
}
.home-classic-shell .classic-summary.classic-summary-light .classic-ring strong,
:root[data-theme="dark"] .home-classic-shell .classic-summary.classic-summary-light .classic-ring strong {
  color: #191a1f !important;
  background: rgba(255, 255, 255, .96) !important;
}
.home-classic-shell .nutrition-privacy-toggle-classic {
  width: 32px !important;
  height: 32px !important;
  flex: 0 0 32px !important;
  border: 1px solid rgba(255, 255, 255, .14) !important;
  background: rgba(255, 255, 255, .07) !important;
  color: rgba(248, 249, 251, .68) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07) !important;
}

.home-classic-shell .nutrition-privacy-toggle-classic svg {
  width: 17px !important;
  height: 17px !important;
  stroke-width: 1.7 !important;
}
.home-classic-shell .nutrition-values-hidden .nutrition-privacy-toggle-classic {
  color: var(--classic-accent) !important;
  background: color-mix(in srgb, var(--classic-accent) 16%, transparent) !important;
  border-color: color-mix(in srgb, var(--classic-accent) 38%, transparent) !important;
}
.home-classic-shell .classic-summary.classic-summary-light .nutrition-privacy-toggle-classic {
  color: rgba(25, 26, 31, .62) !important;
}
.classic-summary-heading .nutrition-privacy-toggle .app-icon {
  width: 20px !important;
  height: 20px !important;
}
.classic-summary .classic-summary-heading .nutrition-privacy-toggle,
.classic-summary .classic-summary-heading .nutrition-privacy-toggle-classic {
  width: 20px !important;
  height: 20px !important;
  flex: 0 0 20px !important;
  align-self: center !important;
  transform: translateY(-0.5px);
  position: relative;
  border: 0 !important;
  background: none !important;
  box-shadow: none !important;
  min-height: 0 !important;
}

.classic-summary .classic-summary-heading .nutrition-privacy-toggle::after {
  content: '';
  position: absolute;
  inset: -9px;
}
.classic-macros {
  grid-template-rows: minmax(0, 1fr);
  overflow: hidden;
  opacity: 1;
  transition:
    grid-template-rows 360ms cubic-bezier(.32, .72, 0, 1),
    margin-top 360ms cubic-bezier(.32, .72, 0, 1),
    opacity 240ms ease 90ms;
}

:root[data-macros='off'] .classic-macros {
  grid-template-rows: minmax(0, 0fr);
  margin-top: 0 !important;
  opacity: 0;
  transition:
    grid-template-rows 300ms cubic-bezier(.22, .61, .36, 1),
    margin-top 300ms cubic-bezier(.22, .61, .36, 1),
    opacity 130ms ease;
}
:root[data-macros='off'] .home-classic-shell .classic-summary {
  min-height: 0;
}
.home-classic-shell .classic-summary {
  transition: min-height 360ms cubic-bezier(.32, .72, 0, 1);
}

:root[data-macros='off'] .home-classic-shell .classic-summary {
  transition: min-height 300ms cubic-bezier(.22, .61, .36, 1);
}

@media (prefers-reduced-motion: reduce) {
  .home-classic-shell .classic-summary {
    transition: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .classic-macros {
    transition: none !important;
  }
}
.home-classic-shell .classic-summary {
  padding: 16px 16px 12px !important;
  margin-bottom: 10px !important;
}

.home-classic-shell .classic-summary p {
  font-size: 10px !important;
  font-weight: var(--type-weight-medium) !important;
  letter-spacing: .06em !important;
}

.home-classic-shell .classic-summary h1 {
  font-size: 40px !important;
  font-weight: var(--type-weight-medium) !important;
  line-height: 1 !important;
  letter-spacing: -0.02em !important;
}

.home-classic-shell .classic-summary h1 span {
  font-size: 14px !important;
  font-weight: var(--type-weight-medium) !important;
  letter-spacing: 0 !important;
}

.home-classic-shell .classic-summary small {
  font-size: 12px !important;
  font-weight: var(--type-weight-medium) !important;
  margin-top: 6px !important;
}

.home-classic-shell .classic-summary small b {
  font-size: 12px !important;
  font-weight: var(--type-weight-strong) !important;
}

.home-classic-shell .classic-ring strong {
  font-size: 16px !important;
  font-weight: var(--type-weight-medium) !important;
}

.home-classic-shell .classic-macros {
  margin-top: 10px !important;
}

.home-classic-shell .classic-macro span {
  font-size: 10px !important;
  font-weight: var(--type-weight-medium) !important;
  letter-spacing: .06em !important;
}

.home-classic-shell .classic-macro b {
  font-size: 14px !important;
  font-weight: var(--type-weight-medium) !important;
  line-height: 18px !important;
}

.home-classic-shell .classic-macro small {
  font-size: 12px !important;
  font-weight: var(--type-weight-medium) !important;
  line-height: 18px !important;
}

.home-classic-shell .classic-summary {
  min-height: 0 !important;
  padding-bottom: 16px !important;
}
.home-classic-shell .classic-summary-main {
  align-items: center;
}
.home-classic-shell .classic-summary {
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
}
.home-classic-shell .classic-summary:not(.classic-summary-light) {
  background-color: #101112 !important;
  background-image:
    linear-gradient(145deg, #141617 0%, #101112 52%, #0b0c0d 100%) !important;
  border-color: rgba(198, 240, 79, .16) !important;
}
.empty-state {
  display: grid;
  gap: 6px;
  place-items: center;
  text-align: center;
}

.empty-state-card {
  margin: 0 0 12px;
  padding: 22px 18px;
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 16px 36px rgba(0, 0, 0, .09);
}

.empty-state-start {
  place-items: start;
  text-align: left;
}

.empty-state-icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  margin-bottom: 4px;
  border-radius: 18px;
  background: #e7f5c7;
  color: #16180f;
}

.empty-state-icon svg {
  width: 26px;
  height: 26px;
}

.empty-state-title {
  color: #050505;
  font-size: 17px;
  font-weight: var(--type-weight-strong);
  letter-spacing: -0.2px;
}
.empty-state-hint {
  max-width: 280px;
  color: rgba(5, 5, 5, .52);
  font-size: 14px;
  font-weight: var(--type-weight-medium);
  line-height: 1.35;
}

.empty-state-action {
  min-height: 44px;
  margin-top: 10px;
  padding: 0 20px;
  border: 0;
  border-radius: 999px;
  background: #c6f04f;
  color: #16180f;
  font-size: 15px;
  font-weight: var(--type-weight-strong);
  cursor: pointer;
}
.empty-state-line {
  margin: 0 2px;
  color: var(--muted);
  font-size: 13px;
  font-weight: var(--type-weight-medium);
  line-height: 1.3;
}

:root[data-theme="dark"] .empty-state-card {
  background: #202021;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
}

:root[data-theme="dark"] .empty-state-title {
  color: #f7f7f7;
}

:root[data-theme="dark"] .empty-state-hint {
  color: rgba(247, 247, 247, .52);
}
.nutrition-values-hidden .classic-meal-progress {
  opacity: .45;
}
.nutrition-masked {
  font-variant-numeric: normal;
  letter-spacing: .08em;
}
.classic-meal-card {
  background: color-mix(in srgb, var(--top) 90%, transparent);
  box-shadow: 0 18px 42px color-mix(in srgb, #000 11%, transparent);
  border: 1px solid color-mix(in srgb, var(--line) 72%, transparent);
}
:root[data-theme="dark"] .classic-meal-card {
  background: color-mix(in srgb, var(--panel) 90%, transparent);
  box-shadow: none;
}
.classic-meal-card {
  position: relative;
  min-height: 105px;
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) 50px;
  gap: 13px;
  align-items: center;
  overflow: hidden;
  border-radius: 24px;
  padding: 14px 14px 18px;
}
.classic-meal-icon {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border: 0;
  background: transparent;
  box-shadow: none;
}
.classic-meal-icon img {
  width: 50px;
  height: 50px;
  display: block;
  object-fit: contain;
  border: 0;
  background: transparent;
  box-shadow: none;
}
.classic-meal-title {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}
.classic-meal-title strong {
  min-width: 0;
  overflow: hidden;
  font-size: 18px;
  font-weight: var(--type-weight-strong);
  line-height: 1.05;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.classic-meal-title span {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 12px;
  font-weight: var(--type-weight-strong);
}
.classic-meal-kcal {
  margin-top: 3px;
  font-size: 27px;
  font-weight: var(--type-weight-medium);
  line-height: 1;
}
.classic-meal-kcal span {
  margin-left: 5px;
  color: var(--muted);
  font-size: 14px;
  font-weight: var(--type-weight-strong);
}
.classic-meal-kcal > .nutrition-masked {
  margin-left: 0;
  font-size: 25px;
  font-weight: var(--type-weight-medium);
}
.classic-add {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: var(--classic-accent);
  box-shadow: 0 10px 26px color-mix(in srgb, var(--classic-accent) 34%, transparent);
}
.classic-add svg {
  width: 25px;
  height: 25px;
}
.classic-meal-progress {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 10px;
  height: 5px;
  overflow: hidden;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ring) 74%, transparent);
}
.classic-meal-progress i {
  display: block;
  width: var(--pct);
  height: 100%;
  border-radius: inherit;
  background: var(--classic-accent);
}
.home-classic-shell .classic-meal-icon,
.home-classic-shell .classic-meal-icon img {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
.home-classic-shell .classic-meal-card {
  min-height: 76px !important;
  grid-template-columns: 44px minmax(0, 1fr) 42px !important;
  gap: 10px !important;
  border-radius: 20px !important;
  padding: 10px 12px 14px !important;
}
.home-classic-shell .classic-meal-icon {
  width: 42px !important;
  height: 42px !important;
}
.home-classic-shell .classic-meal-icon img {
  width: 40px !important;
  height: 40px !important;
}
.home-classic-shell .classic-meal-title strong {
  font-size: 17px !important;
  font-weight: var(--type-weight-strong) !important;
}
.home-classic-shell .classic-meal-title span {
  font-size: 11.5px !important;
}
.home-classic-shell .classic-meal-kcal {
  margin-top: 2px !important;
  font-size: 24px !important;
  font-weight: var(--type-weight-medium) !important;
}
.home-classic-shell .classic-meal-kcal span {
  font-size: 13px !important;
}
.home-classic-shell .classic-add {
  width: 42px !important;
  height: 42px !important;
}
.home-classic-shell .classic-add svg {
  width: 22px !important;
  height: 22px !important;
}
.home-classic-shell .classic-meal-progress {
  left: 12px !important;
  right: 12px !important;
  bottom: 7px !important;
  height: 4px !important;
}
.meal-png-icon,
.meal-choice-icon {
  display: block;
  object-fit: contain;
  background: transparent !important;
  border: 0 !important;
  user-select: none;
  -webkit-user-drag: none;
}
.classic-meal-icon {
  overflow: visible !important;
  background: transparent !important;
}
.classic-meal-icon .meal-png-icon,
.home-classic-shell .classic-meal-icon .meal-png-icon {
  width: 58px !important;
  height: 58px !important;
  transform: translateX(-3px);
  filter: drop-shadow(0 9px 13px rgba(0,0,0,.13));
}
.home-classic-shell .classic-meal-card {
  grid-template-columns: 58px minmax(0, 1fr) 42px !important;
}
:root[data-theme="dark"] .meal-icon.meal-png-holder .meal-png-icon,
:root[data-theme="dark"] .classic-meal-icon .meal-png-icon,
:root[data-theme="dark"] .home-classic-shell .classic-meal-icon .meal-png-icon,
:root[data-theme="dark"] .template-tab-panel .template-meal-grid .meal-choice-icon,
:root[data-theme="dark"] .plate-save-meals .meal-choice-icon {
  filter:
    drop-shadow(0 9px 13px rgba(0,0,0,.36))
    drop-shadow(0 0 8px rgba(255,255,255,.08));
}
.home-classic-shell .classic-add {
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--classic-accent) 94%, #ffffff), color-mix(in srgb, var(--classic-accent) 78%, #1c1d1a)) !important;
  box-shadow: 0 12px 28px color-mix(in srgb, var(--classic-accent) 23%, transparent) !important;
}
.home-classic-shell .classic-meal-card {
  min-height: 88px !important;
  grid-template-columns: 62px minmax(0, 1fr) 44px !important;
  gap: 12px !important;
  border-radius: 22px !important;
  padding: 12px 14px 16px !important;
  box-shadow: 0 16px 36px color-mix(in srgb, #000 9%, transparent) !important;
}
:root[data-theme="dark"] .home-classic-shell .classic-meal-card {
  box-shadow: inset 0 0 0 1px var(--classic-hairline) !important;
}
.home-classic-shell .classic-meal-icon {
  width: 58px !important;
  height: 58px !important;
}
.home-classic-shell .classic-meal-icon .meal-png-icon {
  width: 64px !important;
  height: 64px !important;
  transform: translateX(-4px) translateY(1px) !important;
}
.home-classic-shell .classic-meal-title {
  align-items: center !important;
  gap: 7px !important;
}
.home-classic-shell .classic-meal-title strong {
  font-size: 18px !important;
  font-weight: var(--type-weight-strong) !important;
  line-height: 1.06 !important;
}
.home-classic-shell .classic-meal-title span {
  color: var(--classic-ink-soft) !important;
  font-size: 12px !important;
  font-weight: var(--type-weight-medium) !important;
}
.home-classic-shell .classic-meal-kcal {
  margin-top: 3px !important;
  font-size: 29px !important;
  font-weight: var(--type-weight-medium) !important;
}
.home-classic-shell .classic-meal-kcal span {
  color: var(--classic-ink-soft) !important;
  font-size: 14px !important;
  font-weight: var(--type-weight-medium) !important;
}
.home-classic-shell .classic-add {
  width: 44px !important;
  height: 44px !important;
}
.home-classic-shell .classic-meal-progress {
  left: 88px !important;
  right: 18px !important;
  bottom: 9px !important;
  height: 3px !important;
  background: color-mix(in srgb, var(--ring) 63%, transparent) !important;
}
.home-classic-shell .classic-meal-progress i {
  background: linear-gradient(90deg, color-mix(in srgb, var(--classic-accent) 72%, #ffffff), var(--classic-accent)) !important;
}
.home-classic-shell .classic-meal-title strong {
  font-size: 17px !important;
  font-weight: var(--type-weight-medium) !important;
}
.home-classic-shell .classic-meal-title span {
  font-size: 11.5px !important;
  font-weight: var(--type-weight-medium) !important;
}
.home-classic-shell .classic-meal-kcal {
  font-size: 27px !important;
  font-weight: var(--type-weight-medium) !important;
}
.home-classic-shell .classic-meal-kcal span {
  font-size: 13.5px !important;
  font-weight: var(--type-weight-medium) !important;
}
.home-classic-shell .classic-meal-card {
  background: var(--top) !important;
}
.home-classic-shell .classic-add {
  background: linear-gradient(145deg, #5d8a7c, #416a5f) !important;
}
:root[data-theme="dark"] .home-classic-shell .classic-meal-card {
  background: var(--panel) !important;
}
.home-classic-shell .classic-meal-icon .meal-png-icon {
  width: 68px !important;
  height: 68px !important;
  object-fit: contain;
  transform: translateX(-5px) translateY(-1px) !important;
  filter:
    drop-shadow(0 10px 13px rgba(0,0,0,.12))
    drop-shadow(0 1px 0 rgba(255,255,255,.42)) !important;
}
:root[data-theme="dark"] .home-classic-shell .classic-meal-icon .meal-png-icon {
  filter:
    drop-shadow(0 10px 14px rgba(0,0,0,.38))
    drop-shadow(0 0 8px rgba(255,255,255,.10)) !important;
}
:root[data-theme="dark"] img.meal-png-icon[src*="cafe_da_manha.png"],
:root[data-theme="dark"] img.meal-choice-icon[src*="cafe_da_manha.png"] {
  content: url("/assets/meal-icons-dark/cafe_da_manha.png?v=20260521-darkmeal1");
}
:root[data-theme="dark"] img.meal-png-icon[src*="almoco.png"],
:root[data-theme="dark"] img.meal-choice-icon[src*="almoco.png"] {
  content: url("/assets/meal-icons-dark/almoco.png?v=20260521-darkmeal1");
}
:root[data-theme="dark"] img.meal-png-icon[src*="lanche.png"],
:root[data-theme="dark"] img.meal-choice-icon[src*="lanche.png"] {
  content: url("/assets/meal-icons-dark/lanche.png?v=20260521-darkmeal1");
}
:root[data-theme="dark"] img.meal-png-icon[src*="jantar.png"],
:root[data-theme="dark"] img.meal-choice-icon[src*="jantar.png"] {
  content: url("/assets/meal-icons-dark/jantar.png?v=20260521-darkmeal1");
}
:root[data-theme="dark"] .home-classic-shell .classic-meal-icon {
  position: relative;
  isolation: isolate;
}
:root[data-theme="dark"] .home-classic-shell .classic-meal-icon::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 8px 2px 5px -6px;
  border-radius: 999px;
  background:
    radial-gradient(circle at 42% 48%,
      rgba(255, 251, 239, .16) 0%,
      rgba(138, 184, 165, .10) 45%,
      rgba(138, 184, 165, 0) 72%);
  filter: blur(2px);
  pointer-events: none;
}
:root[data-theme="dark"] .home-classic-shell .classic-meal-icon .meal-png-icon {
  opacity: .98;
  filter:
    brightness(1.08)
    contrast(1.06)
    saturate(1.08)
    drop-shadow(0 0 1.6px rgba(255, 252, 243, .62))
    drop-shadow(0 8px 14px rgba(0, 0, 0, .42)) !important;
}
.home-classic-shell .classic-add {
  background: linear-gradient(145deg, #5d8a7c, #416a5f) !important;
  box-shadow: 0 12px 28px color-mix(in srgb, var(--classic-accent) 23%, transparent) !important;
}
.home-classic-shell .classic-meal-icon,
.home-classic-shell .classic-meal-icon::before {
  background: transparent !important;
  box-shadow: none !important;
}
.home-classic-shell .classic-meal-icon::before,
:root[data-theme="dark"] .home-classic-shell .classic-meal-icon::before {
  content: none !important;
}
.home-classic-shell .classic-meal-icon .classica-main-meal-icon {
  width: 64px !important;
  height: 64px !important;
  object-fit: contain;
  transform: translateX(-3px) translateY(-1px) !important;
  filter:
    drop-shadow(0 10px 13px rgba(0, 0, 0, .12))
    drop-shadow(0 1px 0 rgba(255, 255, 255, .36)) !important;
}
:root[data-theme="dark"] .home-classic-shell .classic-meal-icon .classica-main-meal-icon {
  opacity: .98;
  filter:
    brightness(1.06)
    contrast(1.04)
    saturate(1.04)
    drop-shadow(0 8px 14px rgba(0, 0, 0, .42)) !important;
}
.home-classic-shell {
  --classic-accent: #C6F04F !important;
  --classic-accent-soft: rgba(198, 240, 79, .16) !important;
}
.home-classic-shell .classic-add,
:root[data-theme="dark"] .home-classic-shell .classic-add {
  color: #C6F04F !important;
  background: #0b0c0d !important;
  box-shadow:
    0 12px 24px rgba(0, 0, 0, .16),
    inset 0 1px 0 rgba(255, 255, 255, .07) !important;
}
.home-classic-shell .classic-meal-progress i {
  background: #C6F04F !important;
}
.home-classic-shell .classic-meal-icon,
.home-classic-shell .classic-meal-icon .classica-main-meal-icon {
  aspect-ratio: 1055 / 1065;
  contain: layout paint;
}
.home-classic-shell .classic-meal-icon {
  background: radial-gradient(circle, rgba(196, 251, 109, .08), transparent 68%) !important;
}
.home-classic-shell .classic-meal-icon .classica-main-meal-icon {
  color: transparent;
}
.home-classic-shell .classic-meal-icon {
  width: 56px !important;
  height: 56px !important;
  overflow: visible !important;
}

.home-classic-shell .classic-meal-icon .classica-main-meal-icon,
.home-classic-shell .classic-meal-icon .meal-png-icon {
  width: 56px !important;
  height: 56px !important;
  transform: none !important;
  object-fit: contain;
}
.home-classic-shell .classic-meal-card .classic-add,
:root[data-theme="dark"] .home-classic-shell .classic-meal-card .classic-add {
  color: #1d1d1f !important;
  background: #f2f2f4 !important;
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, #000 8%, transparent),
    0 6px 16px color-mix(in srgb, #000 6%, transparent) !important;
}

:root[data-theme="dark"] .home-classic-shell .classic-meal-card .classic-add {
  color: #f4f4f5 !important;
  background: #2a2a2c !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .1),
    0 6px 16px rgba(0, 0, 0, .28) !important;
}
.home-classic-shell .classic-meal-card .classic-add svg {
  width: 27px !important;
  height: 27px !important;
}
.home-classic-shell .classic-meal-card {
  min-height: 74px !important;
  padding: 10px 12px 10px !important;
}

.home-classic-shell .classic-meal-title strong {
  font-size: 16px !important;
  font-weight: var(--type-weight-medium) !important;
  line-height: 1.25 !important;
  letter-spacing: -0.01em !important;
}

.home-classic-shell .classic-meal-title span {
  font-size: 12px !important;
  font-weight: var(--type-weight-medium) !important;
}

.home-classic-shell .classic-meal-kcal {
  font-size: 17px !important;
  font-weight: var(--type-weight-medium) !important;
  line-height: 1.1 !important;
  letter-spacing: -0.01em !important;
}

.home-classic-shell .classic-meal-kcal span {
  font-size: 14px !important;
  font-weight: var(--type-weight-medium) !important;
  letter-spacing: 0 !important;
}
.home-classic-shell .classic-meal-kcal > .nutrition-masked {
  font-size: 17px !important;
  font-weight: var(--type-weight-strong) !important;
  letter-spacing: .08em !important;
}

.home-classic-shell .classic-meal-card,
:root[data-theme="dark"] .home-classic-shell .classic-meal-card {
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.home-classic-shell .classic-meal-card {
  padding: 10px 0 !important;
}

.home-classic-shell .classic-meal-card .classic-add,
:root[data-theme="dark"] .home-classic-shell .classic-meal-card .classic-add {
  background: transparent !important;
  box-shadow: none !important;
}
.home-classic-shell .classic-meal-progress {
  background: color-mix(in srgb, #050505 10%, transparent) !important;
}

:root[data-theme="dark"] .home-classic-shell .classic-meal-progress {
  background: rgba(255, 255, 255, .14) !important;
}

.home-classic-shell .classic-meal-card .classic-meal-icon {
  width: 74px !important;
  justify-items: center;
}
.home-classic-shell .classic-meal-card {
  padding-bottom: 8px !important;
}
.account-layer {
  position: fixed;
  inset: 0;
  z-index: 62;
  overflow-y: auto;
  overscroll-behavior-y: none;
  -webkit-overflow-scrolling: touch;
  animation: notif-in 320ms cubic-bezier(0.32, 0.72, 0.28, 1) both;
}

.account-layer.closing {
  animation: notif-out 280ms cubic-bezier(0.55, 0, 0.55, 0.2) both;
  pointer-events: none;
}

.account-sheet {
  min-height: 100%;
  padding: max(10px, env(safe-area-inset-top)) 14px max(20px, calc(env(safe-area-inset-bottom) + 8px));
  color: var(--text);
  background: var(--sheet);
}

.account-head {
  display: grid;
  grid-template-columns: 34px 1fr 34px;
  align-items: center;
  padding: 6px 0 10px;
}
.account-head h2 {
  margin: 0;
  text-align: center;
  font-size: 21px;
  font-weight: var(--type-weight-strong);
}

.account-close,
.account-gear {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: inherit;
  cursor: pointer;
}

.account-close {
  font-size: 20px;
  line-height: 1;
  border-radius: 50%;
  background: color-mix(in srgb, var(--ink, #f4f4f5) 8%, transparent);
}

.account-gear:active,
.account-close:active {
  background: var(--press-fill);
}
.account-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--top);
}

.account-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 52px;
  height: 52px;
  border-radius: 999px;
  background: var(--chip);
  color: var(--text);
  font-size: 18px;
  font-weight: var(--type-weight-strong);
  letter-spacing: 0.5px;
}

.account-who {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.account-who strong {
  font-size: 16px;
  font-weight: var(--type-weight-strong);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-who small {
  font-size: 12px;
  color: var(--faint);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-section {
  margin: 18px 2px 8px;
  font-size: 12px;
  font-weight: var(--type-weight-medium);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--faint);
}
.account-row {
  display: flex;
  align-items: center;
  gap: 13px;
  width: 100%;
  margin: 0 0 10px;
  padding: 15px 16px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--top);
  color: inherit;
  text-align: left;
  cursor: pointer;
  text-decoration: none;
}

.account-row:active {
  background: var(--press-fill);
}
.account-link {
  display: block;
  margin: 14px 0 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: var(--type-weight-medium);
  text-align: center;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.account-row-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 13px;
  background: var(--chip);
  color: var(--text);
}

.account-row-icon svg {
  width: 22px;
  height: 22px;
}

.account-row-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1 1 auto;
  min-width: 0;
}

.account-row-text b {
  font-size: 16px;
  font-weight: var(--type-weight-strong);
}

.account-row-text small {
  font-size: 12.5px;
  color: var(--faint);
}

.account-row-chevron {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  color: var(--faint);
}
.account-row-count {
  flex: 0 0 auto;
  min-width: 20px;
  padding: 1px 7px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--classic-accent, #c6f04f);
  color: #16180f;
  font-size: 11px;
  font-weight: var(--type-weight-strong);
}
.account-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0 0 10px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--top);
}

.account-form input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--sheet);
  color: var(--text);
  font: inherit;
}

.account-primary {
  padding: 11px 14px;
  border: 0;
  border-radius: 12px;
  background: var(--green);
  color: #fff;
  font-size: 14px;
  font-weight: var(--type-weight-strong);
  cursor: pointer;
}

.account-primary:disabled {
  opacity: 0.55;
  cursor: default;
}

.account-error,
.account-ok {
  margin: 0;
  font-size: 12px;
}

.account-error {
  color: var(--pink);
}

.account-ok {
  color: var(--green);
}
.account-logout {
  margin-top: 10px;
}

.account-logout .account-row-text b {
  color: var(--pink);
}

.account-logout .account-row-icon {
  color: var(--pink);
}

.avatar-editor-overlay {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(0, 0, 0, .55);
}

.avatar-editor-card {
  width: min(360px, 100%);
  padding: 18px;
  border-radius: 22px;
  background: var(--card, #fff);
  color: var(--ink, #1d1d1f);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .28);
}

.avatar-editor-title {
  margin: 0 0 12px;
  font-size: 18px;
  font-weight: var(--type-weight-strong);
}
.avatar-editor-frame {
  aspect-ratio: 1 / 1;
  width: 100%;
  border-radius: 50%;
  background-repeat: no-repeat;
  box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .12);
  touch-action: none;
  cursor: grab;
}

.avatar-editor-hint {
  margin: 12px 0 6px;
  color: var(--muted, #6b6b70);
  font-size: 13px;
  text-align: center;
}

.avatar-editor-zoom input {
  width: 100%;
}

.avatar-editor-error {
  margin: 8px 0 0;
  color: #b0473c;
  font-size: 13px;
}

.avatar-editor-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 14px;
}
.head-avatar img,
.account-avatar img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}
.account-avatar-button {
  padding: 0;
  border: 0;
  overflow: hidden;
  cursor: pointer;
}

.account-avatar-remove {
  align-self: start;
  width: 22px;
  height: 22px;
  margin-left: -14px;
  border: 0;
  border-radius: 50%;
  background: color-mix(in srgb, var(--ink, #1d1d1f) 72%, transparent);
  color: #fff;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
}
.account-row.account-danger b {
  color: #d8503f;
}

:root[data-theme='dark'] .account-row.account-danger b {
  color: #ff7a68;
}

.account-danger-note {
  margin: 0 0 10px;
  font-size: 12px;
  line-height: 1.45;
  color: rgba(120, 40, 30, .92);
  background: rgba(216, 80, 63, .09);
  border-radius: 12px;
  padding: 10px 12px;
}

:root[data-theme='dark'] .account-danger-note {
  color: rgba(255, 190, 180, .92);
  background: rgba(255, 122, 104, .12);
}

.account-primary.account-primary-danger {
  background: #d8503f;
  color: #fff;
}

.account-primary.account-primary-danger:disabled {
  opacity: .6;
}
.settings-layer {
  z-index: 70;
}
.account-sheet {
  overscroll-behavior-y: none;
}
.account-access {
  margin: 0 16px 12px;
  padding: 14px 16px;
  border: 1px solid color-mix(in srgb, var(--ink, #1d1d1f) 12%, transparent);
  border-radius: 18px;
  background: color-mix(in srgb, var(--sheet, #fff) 92%, transparent);
}

.account-access h3 {
  margin: 0 0 6px;
  font-size: 14px;
}

.account-access-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 52px;
  border-top: 1px solid color-mix(in srgb, var(--ink, #1d1d1f) 9%, transparent);
}

.account-access-row > span { display: grid; gap: 2px; }
.account-access-row small { color: var(--muted, #717171); }
.account-access-action { color: var(--accent, #45845d); }
.account-access-action,
.account-access-form button {
  border: 0;
  background: transparent;
  font: inherit;
  font-weight: var(--type-weight-strong);
  cursor: pointer;
}

.account-access-form {
  display: grid;
  gap: 9px;
  padding: 12px 0;
}

.account-access-form p { margin: 0; font-size: 13px; line-height: 1.4; }
.account-access-form input {
  min-height: 42px;
  padding: 0 12px;
  border: 1px solid color-mix(in srgb, var(--ink, #1d1d1f) 18%, transparent);
  border-radius: 12px;
  color: inherit;
  background: transparent;
}

.account-reauth {
  margin: 6px 0 10px;
  padding: 16px;
  border: 1px solid color-mix(in srgb, var(--accent, #45845d) 30%, transparent);
  border-radius: 15px;
  background: color-mix(in srgb, var(--accent, #45845d) 7%, var(--sheet, #fff));
}

.account-reauth h4 {
  margin: 0;
  font-size: 16px;
  line-height: 1.25;
}

.account-reauth-label {
  margin-top: 3px;
  font-size: 12px;
  font-weight: var(--type-weight-strong);
}

.account-reauth-field {
  position: relative;
}

.account-reauth-field input {
  width: 100%;
  padding-right: 48px;
  background: var(--sheet, #fff);
}

.account-password-toggle {
  position: absolute;
  inset: 0 0 0 auto;
  width: 44px;
  padding: 0;
  color: var(--muted, #717171);
}

.account-reauth-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 3px;
}

.account-reauth-actions button {
  min-height: 42px;
  padding: 0 12px;
  border-radius: 12px;
}

.account-reauth-actions .account-reauth-cancel {
  color: var(--text, #1d1d1f);
  background: color-mix(in srgb, var(--ink, #1d1d1f) 8%, transparent);
}

.account-reauth-actions .account-reauth-continue {
  color: #fff;
  background: var(--accent, #45845d);
}

.account-reauth-actions button:disabled { opacity: .55; cursor: default; }

:root[data-theme='dark'] .account-reauth {
  background: color-mix(in srgb, var(--accent, #45845d) 13%, var(--sheet, #171816));
}

:root[data-theme='dark'] .account-reauth-field input {
  background: color-mix(in srgb, var(--sheet, #171816) 86%, #000);
}

.account-biometry input { width: 22px; height: 22px; accent-color: var(--accent, #45845d); }
.account-error { margin: 8px 0 0; color: #d8503f; font-size: 13px; }
.sheet {
  position: fixed;
  z-index: 51;
  left: 50%;
  bottom: 0;
  width: min(440px, 100vw);
  transform: translateX(-50%);
  color: var(--text);
  background: var(--sheet);
  border-radius: 14px 14px 0 0;
  padding-bottom: max(18px, calc(env(safe-area-inset-bottom) - 6px));
  box-shadow: var(--shadow);
  animation: sheet-up 580ms cubic-bezier(.22, .78, .18, 1) both;
}
.sheet.closing {
  animation: sheet-down 520ms cubic-bezier(.32, .72, .28, 1) both;
}
.sheet::before,
.plate-view::before,
.time-modal::before {
  content: "";
  position: absolute;
  top: 8px;
  left: 50%;
  width: 36px;
  height: 4px;
  border-radius: 999px;
  background: var(--line);
  transform: translateX(-50%);
}
.sheet-head {
  height: 60px;
  display: grid;
  grid-template-columns: 48px 1fr 48px;
  align-items: center;
  border-bottom: 1px solid var(--line);
  padding-top: 8px;
}
.sheet-head h2 {
  margin: 0;
  text-align: center;
  font-size: 22px;
  line-height: 1;
  font-weight: var(--type-weight-strong);
}
.sheet-x {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  font-size: 30px;
  font-weight: var(--type-weight-light);
}
.sheet-row {
  width: 100%;
  min-height: 52px;
  display: grid;
  grid-template-columns: 38px 1fr auto;
  gap: 12px;
  align-items: center;
  justify-items: start;
  padding: 0 18px;
  border-bottom: 1px solid var(--line);
  font-size: 18px;
}
.sheet-row .row-icon {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  background: #000;
  font-size: 16px;
  font-weight: var(--type-weight-strong);
}
:root[data-theme="dark"] .sheet-row .row-icon {
  color: #000;
  background: #fff;
}
.switch {
  justify-self: end;
  width: 46px;
  height: 26px;
  border-radius: 999px;
  padding: 2px;
  background: #000;
  position: relative;
}
.switch i {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff;
  display: block;
  transform: translateX(20px);
}
.switch.off {
  background: #d6d6d8;
}
.switch.off i {
  transform: translateX(0);
}
.settings-sheet {
  animation: sheet-up 720ms cubic-bezier(.18, .82, .16, 1) both;
  max-height: min(760px, calc(var(--visual-vh, 100dvh) - max(14px, env(safe-area-inset-top)) - 8px));
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-bottom: max(18px, calc(env(safe-area-inset-bottom) + 14px));
  -webkit-overflow-scrolling: touch;
}
.settings-sheet.closing {
  animation: sheet-down 640ms cubic-bezier(.32, .72, .28, 1) both;
}
.settings-sheet .sheet-head h2 {
  font-size: 20px;
}
.settings-sheet .sheet-head {
  position: sticky;
  top: 0;
  z-index: 3;
  background: var(--sheet);
}
.settings-sheet .sheet-row {
  min-height: 46px;
  font-size: 15.5px;
}
.settings-sheet,
.settings-sheet .sheet-row,
.settings-sheet .switch {
  transform: translateZ(0);
}
.settings-sheet {
  transform: translateX(-50%) translateZ(0);
}
.settings-language,
.settings-skins {
  margin: 10px 22px 0;
}
.settings-language {
  min-height: 46px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid var(--line);
  padding-top: 10px;
  color: var(--text);
  font-size: 16px;
  font-weight: var(--type-weight-strong);
}
.settings-language div {
  display: inline-flex;
  gap: 4px;
  border-radius: 999px;
  padding: 4px;
  background: var(--chip);
}
.settings-language button {
  min-width: 44px;
  height: 31px;
  border-radius: 999px;
  color: var(--muted);
  font-size: 13px;
  font-weight: var(--type-weight-medium);
}
.settings-language button.active {
  color: var(--top);
  background: var(--text);
}
.settings-section-label {
  display: block;
  margin: 0 0 8px;
  color: var(--muted);
  font-size: 12px;
  font-weight: var(--type-weight-medium);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.skin-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.skin-card {
  min-width: 0;
  display: grid;
  gap: 7px;
  justify-items: center;
  border-radius: 18px;
  padding: 10px 9px 9px;
  color: var(--text);
  background: color-mix(in srgb, var(--chip) 72%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--line) 90%, transparent);
}
.skin-card.active {
  box-shadow: inset 0 0 0 2px var(--blue);
}
.skin-card strong {
  font-size: 13px;
  font-weight: var(--type-weight-strong);
}
.skin-card em {
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: var(--blue);
  font-style: normal;
  font-size: 12px;
  font-weight: var(--type-weight-strong);
  opacity: 0;
}
.skin-card.active em {
  opacity: 1;
}
.skin-preview {
  width: 100%;
  height: 76px;
  position: relative;
  overflow: hidden;
  border-radius: 14px;
  background: var(--top);
}
:root[data-theme="dark"] .skin-preview {
  background: #111112;
}
.timeline-preview i,
.classic-preview i,
.timeline-preview b,
.classic-preview b {
  position: absolute;
  display: block;
  border-radius: 999px;
}
.timeline-preview i {
  left: 11px;
  right: 11px;
  height: 8px;
  background: color-mix(in srgb, var(--text) 12%, transparent);
}
.timeline-preview i:nth-child(1) { top: 14px; }
.timeline-preview i:nth-child(2) { top: 31px; width: 62%; }
.timeline-preview i:nth-child(3) { top: 48px; width: 78%; }
.timeline-preview b {
  left: 12px;
  bottom: 9px;
  width: 62px;
  height: 5px;
  background: var(--blue);
}
.classic-preview i {
  left: 12px;
  right: 12px;
  height: 15px;
  background: color-mix(in srgb, var(--classic-accent) 18%, var(--top));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--classic-accent) 18%, transparent);
}
.classic-preview i:nth-child(1) { top: 10px; }
.classic-preview i:nth-child(2) { top: 31px; }
.classic-preview i:nth-child(3) { top: 52px; }
.classic-preview b {
  right: 14px;
  top: 13px;
  width: 18px;
  height: 48px;
  border-radius: 10px;
  background: var(--classic-accent);
}
.settings-user-head span,
.settings-section-label {
  color: var(--muted);
  font-size: 11px;
  font-weight: var(--type-weight-medium);
  letter-spacing: .12em;
  text-transform: uppercase;
}
.settings-password input {
  width: 100%;
  min-height: 52px;
  border: 0;
  outline: 0;
  border-radius: 17px;
  padding: 0 15px;
  color: var(--ink);
  background: var(--soft);
  font: inherit;
  font-size: 17px;
  box-shadow: inset 0 0 0 1px var(--line);
}
.settings-password button,
.settings-logout,
.settings-secondary {
  width: 100%;
  min-height: 52px;
  border-radius: 18px;
  margin-top: 16px;
  color: #fff;
  background: #050505;
  font-weight: var(--type-weight-strong);
}
:root[data-theme="dark"] .settings-password button,
:root[data-theme="dark"] .settings-logout {
  color: #050505;
  background: #f5f5f5;
}
.settings-secondary {
  color: var(--ink);
  background: var(--card);
  box-shadow: inset 0 0 0 1px var(--line);
}
.settings-error {
  color: #c97066 !important;
  font-weight: var(--type-weight-strong);
}
.settings-ok {
  color: var(--green) !important;
  font-weight: var(--type-weight-strong);
}
.settings-user {
  margin: 12px 0;
  padding: 12px;
  border-radius: 19px;
  background: var(--soft);
  box-shadow: inset 0 0 0 1px var(--line);
}
.settings-user-head {
  display: grid;
  gap: 3px;
}
.settings-user-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 12px;
}
.settings-user-head strong {
  font-size: 18px;
  letter-spacing: 0;
}
.settings-user-head small {
  color: var(--muted);
  font-size: 13px;
}
.settings-password {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}
.settings-password button,
.settings-logout,
.settings-secondary {
  margin-top: 2px;
  min-height: 42px;
  border-radius: 14px;
  font-size: 15px;
}
.settings-password input {
  min-height: 46px;
  border-radius: 15px;
  font-size: 16px;
}
.settings-token {
  margin-top: 12px;
  padding: 12px;
  border-radius: 18px;
  background: color-mix(in srgb, var(--panel) 92%, var(--bg));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--line) 88%, transparent);
}
.settings-token-head {
  display: grid;
  gap: 3px;
}
.settings-token-head span {
  font-size: 16px;
  font-weight: var(--type-weight-strong);
  letter-spacing: 0;
}
.settings-token-head small,
.settings-token p,
.settings-token-value small {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.3;
  font-weight: var(--type-weight-medium);
}
.settings-token p {
  margin: 8px 0 0;
}
.settings-token-value {
  display: grid;
  gap: 6px;
  margin-top: 10px;
}
.settings-token-value textarea {
  width: 100%;
  min-height: 74px;
  resize: none;
  border: 0;
  border-radius: 14px;
  padding: 10px 11px;
  color: var(--text);
  background: var(--soft);
  box-shadow: inset 0 0 0 1px var(--line);
  font-size: 12px;
  line-height: 1.35;
  font-weight: var(--type-weight-strong);
}
.settings-token-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 10px;
}
.settings-token-actions .danger {
  color: #c97066;
}
.settings-profile-card {
  width: 100%;
  margin: 12px 0 14px;
  border-radius: 22px;
  border: 1px solid color-mix(in srgb, var(--line) 82%, transparent);
  padding: 15px 16px;
  display: grid;
  gap: 5px;
  color: var(--text);
  background: color-mix(in srgb, var(--panel) 94%, var(--bg));
  text-align: left;
}
.settings-profile-card span {
  font-size: 17px;
  font-weight: var(--type-weight-strong);
}
.settings-profile-card small {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.25;
  font-weight: var(--type-weight-medium);
}
.settings-profile-card.needs-onboarding {
  border-color: color-mix(in srgb, #5a9f86 62%, var(--line));
  background: color-mix(in srgb, #eff8f4 72%, var(--panel));
}
:root[data-theme="dark"] .settings-profile-card.needs-onboarding {
  background: color-mix(in srgb, #1f3a32 42%, var(--panel));
}
.settings-sheet.stable {
  animation: none !important;
}
.settings-sheet {
  will-change: transform;
  contain: layout paint;
}
.settings-sheet .sheet-row > span:nth-child(2) b,
.settings-sheet .sheet-row > span:nth-child(2) small {
  display: block;
}
.settings-sheet .sheet-row > span:nth-child(2) small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.15;
  font-weight: var(--type-weight-medium);
}
.settings-token-hint {
  color: #767676;
  font-size: 12px;
}
.settings-sheet {
  overscroll-behavior-y: none;
}
.settings-sync {
  display: block;
  margin-top: 12px;
  padding: 12px;
  border-radius: 18px;
  background: color-mix(in srgb, var(--panel) 92%, var(--bg));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--line) 88%, transparent);
}
.settings-sync-head {
  display: grid;
  gap: 3px;
}

.settings-sync-head span {
  font-size: 16px;
  font-weight: var(--type-weight-strong);
  letter-spacing: 0;
}
.settings-sync-state {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 10px 0 0;
  color: var(--text);
  font-size: 17px;
  font-weight: var(--type-weight-strong);
  line-height: 1.2;
}

.settings-sync-dot {
  flex: 0 0 auto;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--faint);
}

.settings-sync.state-active .settings-sync-dot,
.settings-sync.state-done .settings-sync-dot { background: var(--green); }
.settings-sync.state-running .settings-sync-dot { background: var(--accent); }
.settings-sync.state-error .settings-sync-dot { background: #c97066; }
.settings-sync-when {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.3;
  font-weight: var(--type-weight-medium);
}

.settings-sync-chips {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
}
.settings-sync-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  padding: 8px 9px;
  border-radius: 12px;
  background: var(--soft);
  color: var(--text);
  font-size: 12px;
  font-weight: var(--type-weight-medium);
  line-height: 1.2;
}

.settings-sync-chip span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.settings-sync-mark {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  color: var(--panel);
  background: var(--faint);
  font-size: 9px;
  font-style: normal;
  font-weight: var(--type-weight-strong);
  line-height: 1;
}

.settings-sync-chip.chip-today .settings-sync-mark { background: var(--green); }
.settings-sync-chip.chip-yesterday .settings-sync-mark { background: var(--amber); }

.settings-sync-chip small {
  flex: 0 0 auto;
  margin-left: auto;
  color: var(--muted);
  font-size: 11px;
  font-weight: var(--type-weight-medium);
}
.settings-sync-hint {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.3;
  font-weight: var(--type-weight-medium);
}
.settings-sync-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  margin-top: 10px;
}
.settings-sync-scope {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
  font-weight: var(--type-weight-medium);
}

.settings-sync-scope b {
  display: block;
  color: var(--text);
  font-weight: var(--type-weight-strong);
}

.settings-sync-scope span {
  display: block;
}
.settings-sync-spin,
.settings-sync-tick {
  display: inline-block;
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  margin-right: 7px;
  vertical-align: -2px;
}

.settings-sync-spin {
  border: 2px solid var(--faint);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: settings-sync-spin 0.8s linear infinite;
}
.settings-sync-tick {
  width: 8px;
  height: 13px;
  margin: 0 9px 0 2px;
  border: solid var(--green);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  animation: settings-sync-tick 0.28s ease-out;
}

@keyframes settings-sync-spin {
  to { transform: rotate(360deg); }
}

@keyframes settings-sync-tick {
  from { opacity: 0; transform: rotate(45deg) scale(0.4); }
  to { opacity: 1; transform: rotate(45deg) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .settings-sync-spin { animation: none; }
  .settings-sync-tick { animation: none; }
}
.settings-sync-failed {
  margin: 10px 0 0;
  color: #c97066;
  font-size: 12px;
  line-height: 1.3;
  font-weight: var(--type-weight-medium);
}
.settings-sync-browser {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 12px;
  font-style: italic;
  line-height: 1.3;
  font-weight: var(--type-weight-medium);
}
.settings-advanced-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin-top: 14px;
  padding: 6px 2px;
  border: 0;
  background: none;
  color: var(--muted);
  font: inherit;
  font-size: 11px;
  font-weight: var(--type-weight-medium);
  letter-spacing: .12em;
  text-transform: uppercase;
}

.settings-advanced-toggle i {
  font-size: 13px;
  font-style: normal;
  letter-spacing: 0;
}
.settings-layer {
  position: fixed;
  inset: var(--visual-offset-top, 0px) 0 auto 0;
  height: var(--visual-vh, 100dvh);
  max-height: var(--visual-vh, 100dvh);
  animation: settings-screen-in 320ms cubic-bezier(.32, .72, .28, 1) both;
}
.settings-layer.closing {
  animation: settings-screen-out 280ms cubic-bezier(.55, 0, .55, .2) both;
  pointer-events: none;
}
.settings-layer.stable {
  animation: none;
}

@keyframes settings-screen-in {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}

@keyframes settings-screen-out {
  from { transform: translateX(0); }
  to { transform: translateX(100%); }
}

.settings-layer .settings-screen {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  max-height: none;
  width: auto;
  left: 0;
  border-radius: 0;
  box-shadow: none;
  transform: none;
  animation: none;
  padding: max(10px, env(safe-area-inset-top)) 0 0;
  background: var(--top);
  color: var(--text);
}

.settings-layer .settings-screen-head {
  position: static;
  flex: 0 0 auto;
  padding: 0 4px;
  background: var(--top);
}

.settings-layer .settings-back {
  font-size: 34px;
  line-height: 0.8;
}

.settings-layer .settings-screen-body {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior-y: none;
  -webkit-overflow-scrolling: touch;
  padding-bottom: max(18px, calc(env(safe-area-inset-bottom) + 14px));
}
.wiz-layer {
  position: fixed;
  inset: var(--visual-offset-top, 0px) 0 auto 0;
  height: var(--visual-vh, 100dvh);
  z-index: 64;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  padding: max(10px, env(safe-area-inset-top)) var(--wiz-gutter, 20px) 0;
  background: var(--top);
  color: var(--text);
  overscroll-behavior-y: none;
  animation: notif-in 320ms cubic-bezier(0.32, 0.72, 0.28, 1) both;
}

.wiz-layer.closing {
  animation: notif-out 280ms cubic-bezier(0.55, 0, 0.55, 0.2) both;
  pointer-events: none;
}
.wiz-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 0 10px;
}

.wiz-chip {
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--chip);
  font-size: 12px;
  font-weight: var(--type-weight-medium);
}

.wiz-close {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  background: color-mix(in srgb, var(--ink, #f4f4f5) 8%, transparent);
  color: inherit;
  display: grid;
  place-items: center;
  cursor: pointer;
}
.wiz-progress {
  display: flex;
  gap: 4px;
  padding: 2px 0 14px;
}

.wiz-progress i {
  flex: 1 1 0;
  height: 4px;
  border-radius: 4px;
  background: var(--line);
  transition: background 200ms ease;
}

.wiz-progress i.is-done {
  background: var(--green);
}
.wiz-title {
  margin: 24px 0 0;
  font-size: 27px;
  line-height: 1.2;
  font-weight: var(--type-weight-strong);
}
.wiz-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: none;
  display: flex;
  flex-direction: column;
  justify-content: safe center;
  padding-top: 18px;
  gap: 16px;
}
.wiz-body > .wiz-wheel,
.wiz-body > .wiz-weight-wheels {
  flex: 1 0 auto;
}
.wiz-body > .wiz-plaque:last-child {
  margin-top: auto;
}
.wiz-body > .wiz-stops:not(:last-child) {
  margin-top: auto;
}
.wiz-foot {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 20px 0 max(12px, env(safe-area-inset-bottom));
  background: var(--top);
}

.wiz-back {
  flex: 0 0 auto;
  width: 66px;
  height: 66px;
  border: 0;
  border-radius: 50%;
  background: var(--chip);
  color: inherit;
  font-size: 26px;
  line-height: 1;
  display: grid;
  place-items: center;
  cursor: pointer;
}

.wiz-back:disabled {
  opacity: 0.35;
  cursor: default;
}

.wiz-next {
  flex: 1 1 auto;
  height: 66px;
  border: 0;
  border-radius: 999px;
  background: var(--text);
  color: var(--top);
  font-size: 18px;
  font-weight: var(--type-weight-strong);
  cursor: pointer;
}

.wiz-next:disabled {
  opacity: 0.4;
  cursor: default;
}

.wiz-error {
  margin: 0 0 8px;
  font-size: 13px;
  color: var(--pink);
}
.wiz-wheel {
  --wheel-row: 44px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.wiz-wheel-list {
  height: calc(var(--wheel-row) * 5);
  overflow-y: auto;
  overscroll-behavior-y: none;
  scroll-snap-type: y mandatory;
  scrollbar-width: none;
  text-align: center;
  outline: none;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 26%, #000 74%, transparent);
  mask-image: linear-gradient(180deg, transparent, #000 26%, #000 74%, transparent);
}

.wiz-wheel-list::-webkit-scrollbar {
  display: none;
}

.wiz-wheel-list:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 4px;
  border-radius: 12px;
}
.wiz-wheel-pad {
  display: block;
  height: calc(var(--wheel-row) * 2);
}

.wiz-wheel-row {
  height: var(--wheel-row);
  line-height: var(--wheel-row);
  scroll-snap-align: center;
  font-size: 20px;
  font-weight: var(--type-weight-regular);
  font-variant-numeric: tabular-nums;
  color: var(--faint);
  transition: color 160ms ease;
}
.wiz-wheel.is-spinning .wiz-wheel-row {
  transition: none;
}

.wiz-wheel-row.is-current {
  font-size: 32px;
  font-weight: var(--type-weight-strong);
  color: var(--text);
}
.wiz-wheel.is-big .wiz-wheel-row {
  font-size: 44px;
  font-weight: var(--type-weight-regular);
  color: var(--faint);
}

.wiz-wheel.is-big .wiz-wheel-row.is-current {
  font-size: 56px;
  font-weight: var(--type-weight-strong);
  color: var(--text);
}
.wiz-wheel.is-big .wiz-wheel-row[data-dist='2'] {
  font-size: 32px;
  opacity: 0.5;
}

.wiz-wheel.is-big .wiz-wheel-row[data-dist='3'] {
  opacity: 0;
}
.wiz-wheel-unit {
  align-self: center;
  margin-left: 14px;
  font-size: 28px;
  font-weight: var(--type-weight-strong);
  color: var(--text);
}

.wiz-weight-wheels {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
}
.wiz-weight-dot {
  align-self: center;
  font-size: 56px;
  font-weight: var(--type-weight-strong);
}
.wiz-choice {
  display: grid;
  gap: 12px;
}

.wiz-choice-card {
  display: grid;
  gap: 3px;
  justify-items: start;
  text-align: left;
  width: 100%;
  padding: 20px 18px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--panel);
  color: inherit;
  cursor: pointer;
  transition: border-color 160ms ease, background 160ms ease;
}

.wiz-choice-card b {
  font-size: 19px;
  font-weight: var(--type-weight-medium);
}

.wiz-choice-card small {
  font-size: 14px;
  color: var(--faint);
}

.wiz-choice-card.is-active {
  border-color: var(--green);
  background: color-mix(in srgb, var(--green) 10%, var(--panel));
}
.wiz-plaque {
  --plaque-tone: var(--text);
  display: grid;
  gap: 6px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--panel);
}
.wiz-plaque.is-tone-neutral {
  --plaque-tone: var(--text);
}

.wiz-plaque.is-tone-neutral .wiz-plaque-chip {
  background: var(--chip);
}

.wiz-plaque.is-tone-info {
  --plaque-tone: var(--blue);
}

.wiz-plaque.is-tone-good {
  --plaque-tone: var(--green);
}

.wiz-plaque.is-tone-warn {
  --plaque-tone: var(--amber);
}

.wiz-plaque.is-tone-bad {
  --plaque-tone: var(--pink);
}

.wiz-plaque-head {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 17px;
  font-weight: var(--type-weight-medium);
}

.wiz-plaque-head strong,
.wiz-plaque-chip {
  color: var(--plaque-tone);
}

.wiz-plaque-head strong {
  font-weight: var(--type-weight-strong);
  font-variant-numeric: tabular-nums;
}
.wiz-plaque-chip {
  margin-left: auto;
  padding: 7px 12px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--plaque-tone) 18%, transparent);
  font-size: 13px;
  font-style: normal;
  font-weight: var(--type-weight-medium);
  white-space: nowrap;
}

.wiz-plaque-note {
  margin: 0;
  font-size: 14px;
  line-height: 1.35;
  color: var(--faint);
}
.wiz-stops {
  position: relative;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 16px;
  width: min(100%, 294px);
  margin-inline: auto;
  --wiz-stop-size: 44px;
  --wiz-stop-gap: 40px;
  min-height: calc(
    var(--wiz-stops, 5) * var(--wiz-stop-size) + (var(--wiz-stops, 5) - 1) * var(--wiz-stop-gap)
  );
}

.wiz-stops-list {
  display: grid;
  align-content: space-between;
  gap: 10px;
  min-width: 0;
}
.wiz-stop {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  align-items: center;
  gap: 16px;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: var(--faint);
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: color 220ms cubic-bezier(0.32, 0.72, 0.28, 1);
}
.wiz-stop-icon {
  --stop-ink: #1c274c;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  opacity: 0.38;
  transition: opacity 220ms cubic-bezier(0.32, 0.72, 0.28, 1),
    transform 220ms cubic-bezier(0.32, 0.72, 0.28, 1);
}

:root[data-theme='dark'] .wiz-stop-icon {
  --stop-ink: #c8d2e8;
}
.wiz-stop-icon svg {
  width: 44px;
  height: 44px;
}

.wiz-stop-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
}

.wiz-stop-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.wiz-stop-copy b {
  font-size: 17px;
  line-height: 1.2;
  font-weight: var(--type-weight-medium);
  color: inherit;
}
.wiz-stop-copy small {
  font-size: 13px;
  line-height: 1.3;
  color: var(--muted);
  opacity: 0;
  transition: opacity 220ms ease;
}

.wiz-stop.is-active .wiz-stop-copy small {
  opacity: 1;
}
.wiz-stop.is-filled {
  color: var(--green);
}

.wiz-stop.is-active {
  color: var(--text);
}

.wiz-stop.is-filled .wiz-stop-icon,
.wiz-stop.is-active .wiz-stop-icon {
  opacity: 1;
}
.wiz-stop.is-active .wiz-stop-icon {
  transform: scale(1.08);
}
.wiz-stops-range {
  writing-mode: vertical-lr;
  box-sizing: border-box;
  width: 34px;
  height: 100%;
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  border-left: 11px solid transparent;
  border-right: 11px solid transparent;
  background-clip: padding-box;
  border-radius: 17px / 6px;
  background-image: linear-gradient(
    180deg,
    var(--green2) 0,
    var(--green) var(--fill),
    var(--line) var(--fill),
    var(--line) 100%
  );
  transition: background 220ms cubic-bezier(0.32, 0.72, 0.28, 1);
  cursor: pointer;
}
.wiz-stops-range::-webkit-slider-thumb {
  appearance: none;
  -webkit-appearance: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: transparent;
  border: 0;
}
.wiz-stops-knob {
  position: absolute;
  left: -1px;
  top: var(--fill);
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  margin-top: -18px;
  border-radius: 50%;
  background: var(--top);
  border: 2px solid var(--green);
  box-shadow: 0 6px 16px color-mix(in srgb, var(--green) 30%, transparent),
    0 1px 2px rgba(0, 0, 0, 0.12);
  color: var(--green);
  box-sizing: border-box;
  pointer-events: none;
  transition: top 220ms cubic-bezier(0.32, 0.72, 0.28, 1);
}
.wiz-stops-knob::before {
  content: '';
  width: 15px;
  height: 2.5px;
  border-radius: 2px;
  background: currentColor;
  box-shadow: 0 -5.5px 0 currentColor, 0 5.5px 0 currentColor;
}
.wiz-name {
  display: grid;
}

.wiz-name-input {
  width: 100%;
  box-sizing: border-box;
  height: 66px;
  padding: 0 18px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--panel);
  color: var(--text);
  font-size: 27px;
  font-family: inherit;
  outline: none;
  transition: border-color 200ms ease;
}

.wiz-name-input:focus {
  border-color: var(--green);
}
.rem-layer {
  position: fixed;
  inset: 0;
  z-index: 61;
  animation: notif-in 320ms cubic-bezier(0.32, 0.72, 0.28, 1) both;
}

.rem-layer.closing {
  animation: notif-out 280ms cubic-bezier(0.55, 0, 0.55, 0.2) both;
  pointer-events: none;
}
.rem-screen {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: max(10px, env(safe-area-inset-top)) 0 0;
  background: var(--bg);
  color: var(--text);
}

.rem-head {
  flex: 0 0 auto;
  background: var(--bg);
  display: flex;
  align-items: center;
  gap: 10px;
  flex-direction: row-reverse;
  justify-content: flex-end;
  padding: 10px 16px 8px;
}

.rem-head h2 {
  margin: 0;
  font-size: 22px;
  font-weight: var(--type-weight-strong);
}
.rem-close {
  flex: 0 0 auto;
  min-width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  background: color-mix(in srgb, var(--ink, #f4f4f5) 8%, transparent);
  color: inherit;
  line-height: 1;
  padding: 0;
  display: grid;
  place-items: center;
  cursor: pointer;
}

.rem-groups {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 6px 16px 0;
}
.rem-screen > .rem-groups {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior-y: none;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 12px;
}

.rem-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.rem-group-title {
  margin: 0;
  padding: 0 12px;
  font-size: 12.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.6;
  font-weight: var(--type-weight-strong);
}

.rem-group-hint {
  margin: -6px 0 0;
  padding: 0 12px;
  font-size: 12.5px;
  opacity: 0.6;
}

.rem-group {
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--line) 72%, transparent);
  background: var(--card);
  overflow: hidden;
}

.rem-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.rem-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 46px;
  padding: 7px 14px 7px 16px;
  color: inherit;
}
.rem-row + .rem-row::before,
.rem-row + .rem-note::before,
.rem-note + .rem-row::before,
.rem-row + .rem-options::before,
.rem-options + .rem-row::before,
li + li > .rem-row::before,
li + li.rem-row::before {
  content: '';
  position: absolute;
  left: 16px;
  right: 0;
  top: 0;
  border-top: 1px solid var(--line);
}

.rem-row.paused .rem-row-label,
.rem-row.paused .rem-row-main {
  opacity: 0.55;
}

.rem-row-btn {
  width: 100%;
  border: 0;
  background: transparent;
  text-align: left;
  font: inherit;
  cursor: pointer;
}

.rem-row-btn:active {
  background: color-mix(in srgb, var(--ink, #000) 6%, transparent);
}

.rem-row-link {
  color: inherit;
}

.rem-row-danger {
  justify-content: center;
  color: #d64545;
  font-weight: var(--type-weight-strong);
}

.rem-row-label {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.rem-row-label b {
  font-size: 15px;
  font-weight: var(--type-weight-strong);
  overflow-wrap: anywhere;
}

.rem-row-label small {
  font-size: 12.5px;
  opacity: 0.65;
}

.rem-row-value {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 15px;
  font-variant-numeric: tabular-nums;
  opacity: 0.6;
  white-space: nowrap;
}

.rem-row-value.rem-ok {
  opacity: 1;
  color: #34c759;
  font-weight: var(--type-weight-strong);
}

.rem-chevron {
  opacity: 0.5;
}
.rem-row-main {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  padding: 2px 0;
  font: inherit;
  cursor: pointer;
}

.rem-row-main strong {
  font-size: 15px;
  font-weight: var(--type-weight-strong);
  overflow-wrap: anywhere;
}

.rem-row-main span {
  font-size: 12.5px;
  opacity: 0.65;
  font-variant-numeric: tabular-nums;
}
.rem-row-icon {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border-radius: 7px;
  display: grid;
  place-items: center;
  color: #fff;
}

.rem-ico-date {
  background: #ff3b30;
}

.rem-ico-time {
  background: #007aff;
}

.rem-ico-repeat,
.rem-ico-end {
  background: #8e8e93;
}

.rem-ico-quiet {
  background: #5856d6;
}

.rem-switch {
  flex: 0 0 auto;
  width: 46px;
  height: 26px;
  border: 0;
  border-radius: 999px;
  padding: 2px;
  background: #000;
  position: relative;
  cursor: pointer;
  transition: background 160ms ease;
}

.rem-switch i {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff;
  display: block;
  transform: translateX(20px);
  transition: transform 160ms ease;
}

.rem-switch.off {
  background: #d6d6d8;
}

.rem-switch.off i {
  transform: translateX(0);
}

.rem-switch:disabled {
  opacity: 0.55;
  cursor: default;
}

:root[data-theme='dark'] .rem-switch {
  background: var(--classic-accent, #c6f04f);
}

:root[data-theme='dark'] .rem-switch i {
  background: #16180f;
}

:root[data-theme='dark'] .rem-switch.off {
  background: #3b3b3d;
}

:root[data-theme='dark'] .rem-switch.off i {
  background: #a8a8ab;
}

.rem-note {
  position: relative;
  margin: 0;
  padding: 11px 16px;
  font-size: 13px;
  opacity: 0.7;
}

.rem-note-error {
  opacity: 1;
  color: #d64545;
}

.rem-row-picker {
  justify-content: center;
  padding-top: 10px;
  padding-bottom: 12px;
}

.rem-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
}

.rem-chip {
  border: 1px solid var(--line);
  background: transparent;
  color: inherit;
  border-radius: 999px;
  font-size: 12.5px;
  padding: 6px 11px;
  cursor: pointer;
}
.rem-chip.on {
  background: var(--classic-accent, #c6f04f);
  border-color: var(--classic-accent, #c6f04f);
  color: #16180f;
  font-weight: var(--type-weight-strong);
}

.rem-time-chip {
  flex: 0 0 auto;
  border: 1px solid var(--line);
  background: transparent;
  color: inherit;
  border-radius: 999px;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  padding: 4px 10px;
  cursor: pointer;
}

.rem-time-chip.on {
  background: var(--classic-accent, #c6f04f);
  border-color: var(--classic-accent, #c6f04f);
  color: #16180f;
  font-weight: var(--type-weight-strong);
}

.rem-stepper {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
}

.rem-stepper button {
  width: 34px;
  height: 32px;
  border: 0;
  background: transparent;
  color: inherit;
  font-size: 18px;
  cursor: pointer;
}
.rem-stepper input,
.rem-number {
  width: 52px;
  height: 34px;
  border: 0;
  border-left: 1px solid var(--line);
  border-right: 1px solid var(--line);
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 16px;
  text-align: center;
  font-variant-numeric: tabular-nums;
  -moz-appearance: textfield;
}

.rem-number {
  border: 1px solid var(--line);
  border-radius: 10px;
}

.rem-stepper input::-webkit-outer-spin-button,
.rem-stepper input::-webkit-inner-spin-button,
.rem-number::-webkit-outer-spin-button,
.rem-number::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.rem-date-input {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 15px;
  padding: 7px 10px;
  min-width: 170px;
  text-align: center;
}

.rem-time-wheel {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  width: 100%;
}

.rem-time-wheel .wiz-wheel {
  flex: 0 0 72px;
}

.rem-time-colon {
  font-size: 28px;
  font-weight: var(--type-weight-strong);
  opacity: 0.6;
  padding: 0 4px 4px;
}

.rem-options {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0;
  background: color-mix(in srgb, var(--ink, #000) 3%, transparent);
}

.rem-option {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 42px;
  padding: 6px 16px 6px 56px;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 15px;
  text-align: left;
  cursor: pointer;
}

.rem-option.on {
  font-weight: var(--type-weight-strong);
}

.rem-check {
  color: var(--classic-accent, #c6f04f);
  filter: brightness(0.75);
}

:root[data-theme='dark'] .rem-check {
  filter: none;
}

.rem-group-text {
  display: flex;
  flex-direction: column;
}

.rem-input {
  width: 100%;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 16px;
  padding: 12px 16px;
  outline: none;
}

.rem-input + .rem-input {
  border-top: 1px solid var(--line);
}
.rem-textarea {
  resize: none;
  min-height: 58px;
  font-size: 16px;
  font-weight: var(--type-weight-regular);
}

.rem-error {
  margin: 0;
  padding: 0 12px;
  font-size: 12.5px;
  color: #d64545;
}

.rem-add-bar {
  flex: 0 0 auto;
  background: var(--bg);
  padding: 10px 16px max(12px, env(safe-area-inset-bottom));
}

.rem-add {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 16px;
  font-weight: var(--type-weight-strong);
  padding: 6px 8px 6px 0;
  cursor: pointer;
}

.rem-add:active {
  opacity: 0.6;
}

.rem-add-plus {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--classic-accent, #c6f04f);
  color: #16180f;
  font-size: 22px;
  line-height: 1;
}

.rem-detail-layer {
  position: absolute;
  inset: 0;
  z-index: 3;
  animation: notif-in 320ms cubic-bezier(0.32, 0.72, 0.28, 1) both;
}

.rem-detail {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  overscroll-behavior-y: none;
  -webkit-overflow-scrolling: touch;
  padding: max(10px, env(safe-area-inset-top)) 0 max(24px, env(safe-area-inset-bottom));
  background: var(--bg);
  color: var(--text);
}

.rem-detail-head {
  position: sticky;
  top: 0;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 8px 16px 10px;
  background: var(--bg);
}

.rem-detail-head h3 {
  margin: 0;
  font-size: 17px;
  font-weight: var(--type-weight-strong);
  text-align: center;
}

.rem-detail-cancel,
.rem-detail-done {
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 16px;
  padding: 6px 0;
  cursor: pointer;
}

.rem-detail-cancel {
  justify-self: start;
}

.rem-detail-done {
  justify-self: end;
  font-weight: var(--type-weight-strong);
}

.rem-detail-done:disabled {
  opacity: 0.35;
  cursor: default;
}

@media (prefers-reduced-motion: reduce) {
  .rem-detail-layer {
    animation: notif-fade-in 200ms ease-out both;
  }
}
.notif-layer {
  position: fixed;
  inset: 0;
  z-index: 60;
  animation: notif-in 320ms cubic-bezier(0.32, 0.72, 0.28, 1) both;
}

.notif-layer.closing {
  animation: notif-out 280ms cubic-bezier(0.55, 0, 0.55, 0.2) both;
  pointer-events: none;
}

@keyframes notif-in {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}

@keyframes notif-out {
  from { transform: translateX(0); }
  to { transform: translateX(100%); }
}

.notif-panel {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: max(10px, env(safe-area-inset-top)) 0 0;
  background: var(--top);
  color: var(--text);
}

.notif-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--line);
}
.notif-head h2 {
  margin: 0;
  font-size: 21px;
  font-weight: var(--type-weight-strong);
}
.notif-back {
  flex: 0 0 auto;
  min-width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  background: color-mix(in srgb, var(--ink, #f4f4f5) 8%, transparent);
  color: inherit;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
}
.notif-list {
  list-style: none;
  margin: 0;
  padding: 0 0 max(16px, env(safe-area-inset-bottom));
  flex: 1;
  overflow-y: auto;
  overscroll-behavior-y: none;
  -webkit-overflow-scrolling: touch;
}
.notif-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
  padding: 15px 18px;
  border: 0;
  border-top: 1px solid var(--line);
  background: transparent;
  color: inherit;
  text-align: left;
}

.notif-texts {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  flex: 1;
}
.notif-texts strong {
  font-size: 16px;
  font-weight: var(--type-weight-strong);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.notif-texts span {
  font-size: 13.5px;
  line-height: 1.32;
  opacity: 0.78;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.notif-empty {
  margin: 0;
  padding: 14px 16px;
  font-size: 13px;
  opacity: 0.7;
}
.notif-admin {
  cursor: pointer;
  font-weight: var(--type-weight-strong);
}
.notif-rules {
  margin-left: auto;
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border: 1px solid var(--line);
  background: transparent;
  color: inherit;
  border-radius: 50%;
  padding: 0;
  display: grid;
  place-items: center;
  cursor: pointer;
}
.notif-push {
  cursor: pointer;
  font-weight: var(--type-weight-strong);
}

.notif-push[aria-pressed='true'] {
  box-shadow: inset 3px 0 0 var(--classic-accent, #c6f04f);
}

.notif-push:disabled {
  opacity: 0.6;
  cursor: default;
}

.notif-count {
  margin-left: auto;
  min-width: 20px;
  padding: 1px 7px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--classic-accent, #c6f04f);
  color: #16180f;
  font-size: 11px;
  font-weight: var(--type-weight-strong);
}

.notif-readall {
  margin-left: auto;
  padding: 0;
  border: 0;
  background: none;
  color: var(--muted);
  font-size: 12.5px;
  font-weight: var(--type-weight-medium);
  cursor: pointer;
}

.notif-row.skeleton {
  min-height: 52px;
  background: linear-gradient(90deg, rgba(128, 128, 128, .10), rgba(128, 128, 128, .16), rgba(128, 128, 128, .10));
  background-size: 200% 100%;
  animation: notif-skeleton 1.1s linear infinite;
  border-radius: 12px;
  margin: 6px 16px;
}

@keyframes notif-skeleton {
  from { background-position: 200% 0; }
  to { background-position: -200% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .notif-row.skeleton {
    animation: none;
  }
}

.rem-auto {
  margin-top: 18px;
  padding-top: 2px;
}

.rem-auto-title {
  margin: 0;
  padding: 0 16px;
  font-size: 12px;
  font-weight: var(--type-weight-medium);
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: .6;
}

.rem-auto-hint {
  margin: 4px 0 6px;
  padding: 0 16px;
  font-size: 12px;
  line-height: 1.35;
  opacity: .65;
}

.rem-auto-main {
  cursor: default;
}
.notif-panel {
  overscroll-behavior-y: none;
}
@media (prefers-reduced-motion: reduce) {
  .notif-layer,
  .rem-layer {
    animation: notif-fade-in 200ms ease-out both;
  }

  .notif-layer.closing,
  .rem-layer.closing {
    animation: notif-fade-out 180ms ease-in both;
  }

  @keyframes notif-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
  }

  @keyframes notif-fade-out {
    from { opacity: 1; }
    to { opacity: 0; }
  }
}

.notif-sd {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
}
.notif-sd + .notif-sd::before {
  content: '';
  position: absolute;
  top: 0;
  left: 70px;
  right: 0;
  height: 1px;
  background: var(--line);
  opacity: 0.7;
  z-index: 2;
  pointer-events: none;
}

.notif-sd .swipe-row {
  position: relative;
  z-index: 1;
  width: 100%;
  border: 0;
  background: var(--top);
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition: transform 360ms cubic-bezier(0.22, 0.9, 0.28, 1);
  touch-action: pan-y;
  will-change: transform;
  min-height: 76px;
  align-items: center;
  padding: 10px 18px;
}

.notif-sd.dragging .swipe-row {
  transition: none;
}

.notif-sd.revealed .swipe-row {
  transform: translateX(-62px);
}
.notif-sd .swipe-row:disabled {
  opacity: 1;
  cursor: default;
}
.notif-sd .swipe-delete {
  position: absolute;
  z-index: 0;
  right: 12px;
  top: 50%;
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  background: #d73636;
  transform: translateY(-50%);
  cursor: pointer;
  opacity: 0;
}

.notif-sd.revealed .swipe-delete {
  opacity: 1;
}

.notif-sd .swipe-delete svg {
  width: 20px;
  height: 20px;
}
.notif-sd.sd-armed .swipe-delete {
  background: #c22525;
}
.notif-ico {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--chip);
  color: var(--text);
  display: grid;
  place-items: center;
}

.notif-ico .app-icon {
  width: 21px;
  height: 21px;
}
.notif-dot {
  flex: 0 0 auto;
  width: 11px;
  height: 11px;
  margin-left: auto;
  border-radius: 50%;
  background: #f2b90d;
}
.wb-layer {
  position: fixed;
  inset: 0;
  z-index: 60;
  animation: wb-in 320ms cubic-bezier(0.32, 0.72, 0.28, 1) both;
}

.wb-layer.closing {
  animation: wb-out 280ms cubic-bezier(0.55, 0, 0.55, 0.2) both;
  pointer-events: none;
}

@keyframes wb-in {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}

@keyframes wb-out {
  from { transform: translateX(0); }
  to { transform: translateX(100%); }
}
.wb-panel,
.wb-sheet,
.wb-tags-layer {
  --wb-warm: #f2b90d;
  --wb-warm-fill: color-mix(in srgb, #f2b90d 18%, transparent);
}

.wb-panel {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: max(10px, env(safe-area-inset-top)) 0 0;
  background: var(--top);
  color: var(--text);
}

.wb-head {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 34px;
  gap: 10px;
  align-items: center;
  padding: 10px 16px;
  border-bottom: 1px solid var(--line);
}

.wb-head h2 {
  margin: 0;
  font-size: 21px;
  font-weight: var(--type-weight-strong);
}
.wb-round {
  flex: 0 0 auto;
  min-width: 34px;
  height: 34px;
  padding: 0;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: color-mix(in srgb, var(--ink, #f4f4f5) 8%, transparent);
  color: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.wb-round svg {
  width: 18px;
  height: 18px;
}
.wb-scroll {
  flex: 1 1 auto;
  overflow-y: auto;
  overscroll-behavior-y: none;
  padding: 14px 16px max(24px, env(safe-area-inset-bottom));
}

.wb-monthbar {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 34px;
  gap: 10px;
  align-items: center;
  margin-bottom: 12px;
}

.wb-monthbar b {
  overflow: hidden;
  text-align: center;
  font-size: 17px;
  font-weight: var(--type-weight-medium);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wb-weekdays,
.wb-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
}

.wb-weekdays {
  margin-bottom: 6px;
}

.wb-weekdays span {
  text-align: center;
  color: var(--muted);
  font-size: 11px;
  font-weight: var(--type-weight-medium);
}
.wb-blank {
  aspect-ratio: 1;
}

.wb-day {
  position: relative;
  box-sizing: border-box;
  aspect-ratio: 1;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 2px;
  padding: 0;
  border: 1.5px solid transparent;
  border-radius: 50%;
  background: transparent;
  color: var(--text);
  font-family: inherit;
  font-size: 15px;
  font-weight: var(--type-weight-regular);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.wb-day.bad {
  border-color: var(--wb-warm);
  background: var(--wb-warm-fill);
  font-weight: var(--type-weight-medium);
}
.wb-day.today {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--text) 34%, transparent);
}
.wb-day.future {
  opacity: 0.28;
  pointer-events: none;
}
.wb-dots {
  display: flex;
  gap: 2px;
  height: 4px;
  align-items: center;
}

.wb-dots i {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--text) 55%, transparent);
}
.wb-note-mark {
  width: 8px;
  height: 2px;
  border-radius: 1px;
  background: color-mix(in srgb, var(--text) 55%, transparent);
}

.wb-year {
  margin-top: 22px;
}

.wb-year h3 {
  margin: 0 0 10px;
  color: var(--muted);
  font-size: 12px;
  font-weight: var(--type-weight-medium);
}

.wb-year-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.wb-mini {
  display: grid;
  gap: 5px;
  padding: 8px 7px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: inherit;
  font-family: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.wb-mini.current {
  background: color-mix(in srgb, var(--text) 6%, transparent);
}

.wb-mini-name {
  text-align: left;
  color: var(--muted);
  font-size: 11px;
  font-weight: var(--type-weight-medium);
}

.wb-mini.current .wb-mini-name {
  color: var(--text);
}

.wb-mini-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 2px;
  justify-items: center;
}

.wb-mini-dot,
.wb-mini-lead {
  width: 5px;
  height: 5px;
  border-radius: 50%;
}

.wb-mini-dot {
  background: color-mix(in srgb, var(--text) 13%, transparent);
}
.wb-mini-lead {
  background: transparent;
}

.wb-mini-dot.bad {
  background: var(--wb-warm);
}

.wb-sheet-scrim {
  position: fixed;
  inset: 0;
  z-index: 61;
  background: var(--scrim);
  animation: wb-fade-in 260ms ease both;
}

.wb-sheet-scrim.closing {
  animation: wb-fade-out 240ms ease both;
  pointer-events: none;
}

@keyframes wb-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes wb-fade-out {
  from { opacity: 1; }
  to { opacity: 0; }
}

.wb-sheet {
  position: fixed;
  left: 50%;
  bottom: 0;
  z-index: 62;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  width: min(440px, 100vw);
  max-height: min(86svh, calc(100svh - 56px));
  overflow: hidden;
  border-radius: 14px 14px 0 0;
  padding: 18px 14px max(12px, env(safe-area-inset-bottom));
  background: var(--bg);
  color: var(--text);
  box-shadow: var(--shadow);
  transform: translateX(-50%);
  animation: wb-sheet-up 360ms cubic-bezier(.22, .78, .18, 1) both;
}
.wb-sheet.settled {
  animation: none;
}

.wb-sheet.closing {
  animation: wb-sheet-down 260ms cubic-bezier(.32, .72, .28, 1) both;
  pointer-events: none;
}
.wb-sheet::before {
  position: absolute;
  top: 8px;
  left: 50%;
  width: 36px;
  height: 4px;
  border-radius: 999px;
  background: var(--line);
  transform: translateX(-50%);
  content: "";
}

@keyframes wb-sheet-up {
  from { transform: translate(-50%, 100%); }
  to { transform: translate(-50%, 0); }
}

@keyframes wb-sheet-down {
  from { transform: translate(-50%, 0); }
  to { transform: translate(-50%, 100%); }
}

.wb-sheet h3 {
  margin: 4px 0 12px;
  font-size: 18px;
  font-weight: var(--type-weight-strong);
}

.wb-sheet-body {
  flex: 1 1 auto;
  overflow-y: auto;
  overscroll-behavior-y: none;
}
.wb-bad {
  display: grid;
  gap: 2px;
  width: 100%;
  box-sizing: border-box;
  padding: 13px 16px;
  border: 1.5px solid var(--line);
  border-radius: 14px;
  background: var(--top);
  color: var(--text);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.wb-bad b {
  font-size: 16px;
  font-weight: var(--type-weight-strong);
}

.wb-bad small {
  color: var(--muted);
  font-size: 12px;
  font-weight: var(--type-weight-regular);
}

.wb-bad.on {
  border-color: var(--wb-warm);
  background: var(--wb-warm-fill);
}

.wb-section {
  margin: 16px 0 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: var(--type-weight-medium);
}

.wb-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

.wb-tag {
  display: flex;
  align-items: center;
  gap: 6px;
  box-sizing: border-box;
  padding: 8px 12px;
  border: 1.5px solid var(--line);
  border-radius: 999px;
  background: var(--top);
  color: var(--text);
  font-family: inherit;
  font-size: 14px;
  font-weight: var(--type-weight-regular);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.wb-tag.on {
  border-color: var(--wb-warm);
  background: var(--wb-warm-fill);
  font-weight: var(--type-weight-medium);
}

.wb-tag-emoji {
  font-size: 16px;
  line-height: 1;
}

.wb-note {
  box-sizing: border-box;
  width: 100%;
  margin-top: 8px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--top);
  color: var(--text);
  font-family: inherit;
  font-size: 15px;
  font-weight: var(--type-weight-regular);
}
.wb-done {
  flex: 0 0 auto;
  display: block;
  width: 100%;
  margin-top: 12px;
  border: 0;
  border-radius: 16px;
  padding: 15px 18px;
  background: var(--classic-accent, #c6f04f);
  color: #16180f;
  font-family: inherit;
  font-size: 15.5px;
  font-weight: var(--type-weight-strong);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.wb-tags-layer {
  position: fixed;
  inset: 0;
  z-index: 61;
  background: var(--top);
  color: var(--text);
  display: flex;
  flex-direction: column;
  padding: max(10px, env(safe-area-inset-top)) 0 0;
  animation: wb-in 280ms cubic-bezier(0.32, 0.72, 0.28, 1) both;
}

.wb-tag-rows {
  flex: 1 1 auto;
  overflow-y: auto;
  overscroll-behavior-y: none;
  padding: 8px 16px max(24px, env(safe-area-inset-bottom));
}

.wb-tag-row {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
  padding: 13px 2px;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  color: inherit;
  font-family: inherit;
  font-size: 15px;
  font-weight: var(--type-weight-regular);
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.wb-tag-row .wb-tag-emoji {
  font-size: 18px;
}
.wb-switch {
  width: 42px;
  height: 25px;
  flex: 0 0 auto;
  border-radius: 999px;
  background: color-mix(in srgb, var(--text) 14%, transparent);
  position: relative;
}

.wb-switch::after {
  position: absolute;
  top: 2.5px;
  left: 2.5px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
  transition: transform 160ms ease;
  content: "";
}

.wb-tag-row.on .wb-switch {
  background: var(--classic-accent, #c6f04f);
}

.wb-tag-row.on .wb-switch::after {
  transform: translateX(17px);
}

.wb-tag-row.off .wb-tag-name {
  color: var(--muted);
}

.wb-tag-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wb-add {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  margin-top: 18px;
}

.wb-add input {
  box-sizing: border-box;
  width: 100%;
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--top);
  color: var(--text);
  font-family: inherit;
  font-size: 15px;
  font-weight: var(--type-weight-regular);
}

.wb-add button {
  padding: 11px 14px;
  border: 0;
  border-radius: 12px;
  background: var(--classic-accent, #c6f04f);
  color: #16180f;
  font-family: inherit;
  font-size: 14px;
  font-weight: var(--type-weight-strong);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.wb-add button:disabled {
  opacity: 0.55;
  cursor: default;
}

@media (prefers-reduced-motion: reduce) {
  .wb-layer,
  .wb-tags-layer {
    animation: wb-fade-in 220ms ease both;
  }

  .wb-layer.closing {
    animation: wb-fade-out 200ms ease both;
  }

  .wb-sheet {
    animation: wb-fade-in 200ms ease both;
  }

  .wb-sheet.closing {
    animation: wb-fade-out 180ms ease both;
  }

  .wb-switch::after {
    transition: none;
  }
}
.meal-detail-panel .detail-add.detail-share {
  right: 62px;
}

.meal-share-backdrop {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: rgba(0, 0, 0, .42);
}

.meal-share-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  max-width: 460px;
  max-height: 86dvh;
  overflow-y: auto;
  padding: 16px 16px calc(env(safe-area-inset-bottom) + 18px);
  border-radius: 24px 24px 0 0;
  background: #fff;
}

.meal-share-head {
  display: flex;
  align-items: center;
  gap: 10px;
}

.meal-share-title {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.meal-share-title b {
  color: #050505;
  font-size: 16px;
  font-weight: var(--type-weight-strong);
}

.meal-share-title small {
  color: rgba(5, 5, 5, .55);
  font-size: 12px;
  font-weight: var(--type-weight-medium);
}

.meal-share-close {
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #ececee;
  color: #1d1d1f;
  font-size: 19px;
  line-height: 1;
  cursor: pointer;
}

.meal-share-note,
.meal-share-empty {
  margin: 0;
  color: rgba(5, 5, 5, .55);
  font-size: 13px;
  font-weight: var(--type-weight-medium);
}
.meal-share-warning {
  margin: 0;
  padding: 10px 12px;
  border-radius: 14px;
  background: #fff5d6;
  color: #5a4300;
  font-size: 13px;
  font-weight: var(--type-weight-medium);
}

.meal-share-error {
  margin: 0;
  padding: 10px 12px;
  border-radius: 14px;
  background: #ffe9e6;
  color: #8b2412;
  font-size: 13px;
  font-weight: var(--type-weight-medium);
}
.meal-share-retry {
  border: 0;
  border-radius: 999px;
  padding: 4px 10px;
  background: #ececee;
  color: #1d1d1f;
  font-size: 12px;
  font-weight: var(--type-weight-strong);
  cursor: pointer;
}

.meal-share-done {
  margin: 0;
  padding: 12px;
  border-radius: 14px;
  background: #f2f2f4;
  color: #050505;
  font-size: 14px;
  font-weight: var(--type-weight-medium);
  text-align: center;
}

.meal-share-people {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.meal-share-person {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 6px 0 12px;
  border-radius: 16px;
  background: #f2f2f4;
}

.meal-share-person-name {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.meal-share-person-name b {
  overflow: hidden;
  color: #050505;
  font-size: 15px;
  font-weight: var(--type-weight-strong);
  white-space: nowrap;
  text-overflow: ellipsis;
}

.meal-share-person-name small {
  color: rgba(5, 5, 5, .55);
  font-size: 12px;
  font-weight: var(--type-weight-medium);
}

.meal-share-send {
  min-width: 104px;
  min-height: 36px;
  padding: 0 14px;
  border: 0;
  border-radius: 999px;
  background: #c6f04f;
  color: #16180f;
  font-size: 14px;
  font-weight: var(--type-weight-strong);
  cursor: pointer;
}

.meal-share-send:disabled {
  opacity: .5;
}

.meal-share-items {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.meal-share-item {
  display: flex;
  align-items: baseline;
  gap: 10px;
  justify-content: space-between;
}

.meal-share-item-name {
  overflow: hidden;
  color: #050505;
  font-size: 14px;
  font-weight: var(--type-weight-medium);
  white-space: nowrap;
  text-overflow: ellipsis;
}

.meal-share-item-num {
  flex: 0 0 auto;
  color: rgba(5, 5, 5, .55);
  font-size: 12px;
  font-weight: var(--type-weight-medium);
}

.meal-share-primary {
  min-height: 48px;
  border: 0;
  border-radius: 999px;
  background: #c6f04f;
  color: #16180f;
  font-size: 16px;
  font-weight: var(--type-weight-strong);
  cursor: pointer;
}

.meal-share-secondary {
  min-height: 40px;
  border: 0;
  border-radius: 999px;
  background: none;
  color: rgba(5, 5, 5, .55);
  font-size: 14px;
  font-weight: var(--type-weight-medium);
  cursor: pointer;
}

.meal-share-primary:disabled,
.meal-share-secondary:disabled {
  opacity: .5;
}

:root[data-theme="dark"] .meal-share-card {
  background: #1b1b1c;
}

:root[data-theme="dark"] .meal-share-title b,
:root[data-theme="dark"] .meal-share-person-name b,
:root[data-theme="dark"] .meal-share-item-name,
:root[data-theme="dark"] .meal-share-done {
  color: #f7f7f7;
}

:root[data-theme="dark"] .meal-share-title small,
:root[data-theme="dark"] .meal-share-person-name small,
:root[data-theme="dark"] .meal-share-item-num,
:root[data-theme="dark"] .meal-share-note,
:root[data-theme="dark"] .meal-share-empty,
:root[data-theme="dark"] .meal-share-secondary {
  color: rgba(247, 247, 247, .55);
}

:root[data-theme="dark"] .meal-share-close,
:root[data-theme="dark"] .meal-share-person,
:root[data-theme="dark"] .meal-share-retry,
:root[data-theme="dark"] .meal-share-done {
  background: #2c2c2e;
  color: #f7f7f7;
}
:root[data-theme="dark"] .meal-share-warning {
  background: #3a3210;
  color: #f2dfa0;
}

:root[data-theme="dark"] .meal-share-error {
  background: #3a1a14;
  color: #f5b4a6;
}
.home-classic {
  height: calc(100svh - 96px);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
  padding: max(18px, calc(env(safe-area-inset-top) + 10px)) 18px 26px;
}
.home-classic {
  height: calc(100svh - var(--nav-h));
  padding-bottom: 10px;
}
.home-classic::-webkit-scrollbar {
  display: none;
}
.classic-section-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  margin: 4px 2px 12px;
}
.classic-section-head h2 {
  margin: 0;
  font-size: 21px;
  font-weight: var(--type-weight-strong);
}
.classic-section-head span {
  color: var(--muted);
  font-size: 13px;
  font-weight: var(--type-weight-strong);
}
.classic-meal-list {
  display: grid;
  gap: 14px;
}
@media (max-width: 380px) {
  .home-classic {
    padding-left: 14px;
    padding-right: 14px;
  }
}
.home-classic {
  height: 100% !important;
  min-height: 100% !important;
  padding-bottom: 0 !important;
}
.home-classic {
  padding-top: max(8px, calc(env(safe-area-inset-top) - 2px)) !important;
}
.home-classic-shell .home-classic {
  position: absolute !important;
  inset: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior: contain !important;
  touch-action: pan-y !important;
  padding: max(8px, calc(env(safe-area-inset-top) - 2px)) 18px 126px !important;
  scroll-padding-bottom: 126px;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", sans-serif !important;
}
.home-classic-shell .classic-section-head {
  margin: 0 2px 8px !important;
}
.home-classic-shell .classic-meal-list {
  gap: 8px !important;
}
.home-classic-shell .home-classic {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Inter", "Segoe UI", sans-serif;
  font-variant-numeric: tabular-nums;
  color: color-mix(in srgb, var(--text) 96%, #1c1d1a);
}
.home-classic-shell .classic-section-head {
  margin: 0 2px 10px !important;
}
.home-classic-shell .classic-section-head h2 {
  font-size: 27px !important;
  font-weight: var(--type-weight-strong) !important;
}
.home-classic-shell .classic-section-head span {
  color: var(--classic-ink-soft) !important;
  font-size: 13px !important;
  font-weight: var(--type-weight-medium) !important;
}
.home-classic-shell .classic-meal-list {
  gap: 10px !important;
}
.home-classic-shell .home-classic {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}
.home-classic-shell .classic-section-head h2 {
  font-size: 25px !important;
  font-weight: var(--type-weight-strong) !important;
}
.home-classic-shell .classic-section-head span {
  font-weight: var(--type-weight-medium) !important;
}
.home-classic-shell .classic-section-head {
  margin: 4px 2px 8px !important;
}

.home-classic-shell .classic-section-head h2 {
  font-size: 20px !important;
  font-weight: var(--type-weight-strong) !important;
  line-height: 1.2 !important;
  letter-spacing: -0.01em !important;
}

.home-classic-shell .classic-section-head span {
  font-size: 12px !important;
  font-weight: var(--type-weight-medium) !important;
  letter-spacing: 0 !important;
}
.home-classic-shell .home-classic {
  overscroll-behavior-y: none !important;
}
.home-classic-shell .classic-meal-list {
  gap: 6px !important;
}

.home-classic-shell .classic-section-head {
  margin-bottom: 4px !important;
}
:root[data-day-flip] .home-classic-shell .classic-summary,
:root[data-day-flip] .home-classic-shell .classic-meal-list {
  animation: home-day-flip 300ms cubic-bezier(.22, .68, .18, 1) both;
}

@keyframes home-day-flip {
  from {
    opacity: .35;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root[data-day-flip] .home-classic-shell .classic-summary,
  :root[data-day-flip] .home-classic-shell .classic-meal-list {
    animation: home-day-fade 300ms ease-out both;
  }

  @keyframes home-day-fade {
    from { opacity: .5; }
    to { opacity: 1; }
  }
}
.home-classic-shell .home-classic {
  padding-top: 0 !important;
}

.home-classic-shell .home-classic .classic-head {
  position: sticky;
  top: 0;
  z-index: 3;
  padding-top: max(8px, calc(env(safe-area-inset-top) - 2px)) !important;
}

.home-classic-shell .home-classic .classic-head::before {
  content: "";
  position: absolute;
  left: -18px;
  right: -18px;
  top: -120px;
  bottom: -13px;
  background: var(--bg);
  z-index: -1;
}

.home-classic-shell .home-classic .classic-week {
  position: sticky;
  top: calc(max(8px, calc(env(safe-area-inset-top) - 2px)) + 59px);
  z-index: 2;
}

.home-classic-shell .home-classic .classic-week::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -2px;
  bottom: 0;
  background: var(--bg);
  z-index: -1;
}
.corpo-page {
  display: block;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  padding: max(14px, calc(env(safe-area-inset-top) + 3px)) 16px calc(var(--nav-h) + env(safe-area-inset-bottom) + 10px);
  color: var(--text);
  -webkit-overflow-scrolling: touch;
}

.corpo-view {
  display: grid;
  gap: 14px;
}
.corpo-head {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 46px;
  margin: 0 0 4px;
}

.corpo-title {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  color: var(--text);
  font-size: 22px;
  font-weight: var(--type-weight-strong);
  line-height: 1.1;
}
.corpo-btn {
  min-height: 42px;
  padding: 0 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid color-mix(in srgb, var(--line) 72%, transparent);
  border-radius: 999px;
  color: var(--text);
  background: color-mix(in srgb, var(--top) 88%, transparent);
  box-shadow: 0 10px 24px color-mix(in srgb, #000 8%, transparent);
  font-size: 14px;
  font-weight: var(--type-weight-strong);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

:root[data-theme="dark"] .corpo-btn {
  background: color-mix(in srgb, var(--panel) 86%, transparent);
  box-shadow: none;
}

.corpo-btn-primary {
  color: #0b0c0d;
  border-color: transparent;
  background: var(--classic-accent, #c6f04f);
}

.corpo-btn:disabled {
  opacity: .55;
  cursor: default;
}

.corpo-head-add {
  flex: 0 0 auto;
}

.corpo-back {
  flex: 0 0 auto;
  min-height: 38px;
  padding: 0 14px;
  border: 1px solid color-mix(in srgb, var(--line) 72%, transparent);
  border-radius: 999px;
  color: var(--muted);
  background: transparent;
  font-size: 13px;
  font-weight: var(--type-weight-strong);
  cursor: pointer;
}
.corpo-state {
  display: grid;
  justify-items: center;
  gap: 10px;
  margin: 0;
  padding: 26px 16px;
  color: var(--muted);
  font-size: 14px;
  text-align: center;
}

.corpo-state-error {
  color: var(--orange);
}
.corpo-empty {
  display: grid;
  justify-items: center;
  gap: 14px;
  padding: 34px 16px;
}

.corpo-empty-text {
  margin: 0;
  color: var(--muted);
  font-size: 15px;
  text-align: center;
}

.corpo-summary {
  border: 1px solid color-mix(in srgb, var(--line) 72%, transparent);
  border-radius: 24px;
  padding: 18px 17px 16px;
  background: color-mix(in srgb, var(--top) 90%, transparent);
  box-shadow: 0 18px 42px color-mix(in srgb, #000 11%, transparent);
}

:root[data-theme="dark"] .corpo-summary {
  background: color-mix(in srgb, var(--panel) 90%, transparent);
  box-shadow: none;
}

.corpo-summary-head {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 36px;
}

.corpo-summary-date {
  color: var(--text);
  font-size: 16px;
  font-weight: var(--type-weight-strong);
  font-variant-numeric: tabular-nums;
}

.corpo-summary-link {
  margin-left: auto;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--classic-accent, var(--blue));
  font-size: 12px;
  font-weight: var(--type-weight-strong);
  cursor: pointer;
}

.corpo-summary-note {
  margin: 12px 0 0;
  color: var(--faint);
  font-size: 11.5px;
  line-height: 1.35;
}
.corpo-source {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--classic-accent, var(--blue)) 16%, transparent);
  color: var(--text);
  font-size: 9.5px;
  font-weight: var(--type-weight-medium);
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
}

.corpo-summary-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 14px;
}

.corpo-metric {
  display: grid;
  gap: 2px;
  justify-items: start;
  min-width: 0;
  padding: 12px 12px 10px;
  border: 0;
  border-radius: 18px;
  background: color-mix(in srgb, var(--panel-2) 42%, transparent);
  text-align: left;
  cursor: pointer;
}

.corpo-metric small {
  min-width: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: 10.5px;
  font-weight: var(--type-weight-medium);
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

.corpo-metric strong {
  color: var(--text);
  font-size: 20px;
  font-weight: var(--type-weight-strong);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.corpo-metric strong em {
  margin-left: 3px;
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
  font-weight: var(--type-weight-strong);
}
.corpo-delta {
  margin-top: 2px;
  font-size: 11.5px;
  font-weight: var(--type-weight-strong);
  font-variant-numeric: tabular-nums;
}

.corpo-delta.up {
  color: var(--orange);
}

.corpo-delta.down {
  color: var(--green);
}

.corpo-delta.same {
  color: var(--faint);
}

.corpo-history-title {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: var(--type-weight-medium);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.corpo-history-more {
  width: 100%;
  margin-top: 10px;
}

.corpo-history-more:disabled {
  opacity: .6;
}

.corpo-list {
  display: grid;
  gap: 8px;
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
}

.corpo-row {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 54px;
  padding: 0 14px;
  border: 1px solid color-mix(in srgb, var(--line) 72%, transparent);
  border-radius: 20px;
  background: color-mix(in srgb, var(--top) 90%, transparent);
}

:root[data-theme="dark"] .corpo-row {
  background: color-mix(in srgb, var(--panel) 90%, transparent);
}

.corpo-row-date {
  color: var(--text);
  font-size: 14.5px;
  font-weight: var(--type-weight-strong);
  font-variant-numeric: tabular-nums;
}

.corpo-row-count {
  margin-left: auto;
  color: var(--muted);
  font-size: 12px;
  font-weight: var(--type-weight-medium);
  white-space: nowrap;
}

.corpo-form {
  display: grid;
  gap: 14px;
}

.corpo-group {
  display: grid;
  gap: 12px;
  padding: 14px 14px 16px;
  border: 1px solid color-mix(in srgb, var(--line) 72%, transparent);
  border-radius: 22px;
  background: color-mix(in srgb, var(--top) 90%, transparent);
}

:root[data-theme="dark"] .corpo-group {
  background: color-mix(in srgb, var(--panel) 90%, transparent);
}

.corpo-group-title {
  margin: 0;
  color: var(--text);
  font-size: 14px;
  font-weight: var(--type-weight-strong);
}

.corpo-field {
  display: grid;
  gap: 6px;
}

.corpo-field-name {
  color: var(--muted);
  font-size: 12.5px;
  font-weight: var(--type-weight-strong);
}

.corpo-field-unit {
  margin-left: 5px;
  color: var(--faint);
  font-size: 11px;
  font-style: normal;
  font-weight: var(--type-weight-medium);
}

.corpo-field-note {
  color: var(--faint);
  font-size: 11px;
  line-height: 1.35;
}

.corpo-input {
  width: 100%;
  min-height: 44px;
  padding: 0 13px;
  border: 1px solid color-mix(in srgb, var(--line) 82%, transparent);
  border-radius: 14px;
  color: var(--text);
  background: color-mix(in srgb, var(--panel-2) 38%, transparent);
  font-size: 16px;
  font-weight: var(--type-weight-strong);
  font-variant-numeric: tabular-nums;
}

.corpo-select {
  padding-right: 8px;
}

.corpo-toggle-all {
  justify-self: start;
  padding: 8px 14px;
  border: 1px dashed color-mix(in srgb, var(--line) 90%, transparent);
  border-radius: 999px;
  color: var(--classic-accent, var(--blue));
  background: transparent;
  font-size: 12.5px;
  font-weight: var(--type-weight-strong);
  cursor: pointer;
}

.corpo-sources {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.corpo-source-pill {
  min-height: 36px;
  padding: 0 14px;
  border: 1px solid color-mix(in srgb, var(--line) 82%, transparent);
  border-radius: 999px;
  color: var(--muted);
  background: transparent;
  font-size: 13px;
  font-weight: var(--type-weight-strong);
  cursor: pointer;
}

.corpo-source-pill.active {
  color: #0b0c0d;
  border-color: transparent;
  background: var(--classic-accent, #c6f04f);
}

.corpo-error {
  margin: 0;
  color: var(--orange);
  font-size: 13px;
  line-height: 1.35;
}

.corpo-submit {
  justify-self: stretch;
  min-height: 50px;
  font-size: 15px;
}

.corpo-chart-panel {
  display: grid;
  gap: 8px;
  padding: 16px 14px 12px;
  border: 1px solid color-mix(in srgb, var(--line) 72%, transparent);
  border-radius: 22px;
  background: color-mix(in srgb, var(--top) 90%, transparent);
}

:root[data-theme="dark"] .corpo-chart-panel {
  background: color-mix(in srgb, var(--panel) 90%, transparent);
}

.corpo-chart {
  position: relative;
  height: 196px;
  overflow: hidden;
}

.corpo-chart-bars {
  height: 100%;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(30px, 1fr);
  align-items: end;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
}

.corpo-chart-bars::-webkit-scrollbar {
  display: none;
}

.corpo-bar-col {
  position: relative;
  height: 100%;
  min-width: 0;
  display: grid;
  grid-template-rows: 18px 1fr 28px;
  align-items: end;
  justify-items: center;
  gap: 5px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.corpo-bar-col b {
  min-height: 14px;
  color: color-mix(in srgb, var(--text) 70%, transparent);
  font-size: 10px;
  font-weight: var(--type-weight-medium);
  line-height: 1;
  white-space: nowrap;
}

.corpo-bar-col i {
  width: min(100%, 24px);
  height: var(--h);
  min-height: 4px;
  border-radius: 9px 9px 3px 3px;
  background: color-mix(in srgb, var(--text) 16%, transparent);
}

.corpo-bar-col.active i {
  background: var(--classic-accent, #c6f04f);
}

.corpo-bar-col small {
  color: var(--muted);
  font-size: 10.5px;
  font-weight: var(--type-weight-medium);
  line-height: 1;
  white-space: nowrap;
}
.corpo-chart-scale {
  margin: 0;
  color: var(--faint);
  font-size: 11px;
  font-weight: var(--type-weight-medium);
  font-variant-numeric: tabular-nums;
}

.corpo-chart-hint {
  margin: 0;
  color: var(--faint);
  font-size: 11px;
}

.corpo-page-head {
  gap: 10px;
}
.corpo-round {
  position: relative;
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid color-mix(in srgb, var(--line) 72%, transparent);
  border-radius: 999px;
  color: var(--text);
  background: color-mix(in srgb, var(--top) 88%, transparent);
  box-shadow: 0 10px 24px color-mix(in srgb, #000 8%, transparent);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

:root[data-theme="dark"] .corpo-round {
  background: color-mix(in srgb, var(--panel) 86%, transparent);
  box-shadow: none;
}
.corpo-bell-badge {
  position: absolute;
  top: -2px;
  right: -2px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  color: #0b0c0d;
  background: var(--classic-accent, #c6f04f);
  font-size: 10px;
  font-weight: var(--type-weight-strong);
  font-variant-numeric: tabular-nums;
}
.corpo-section-row {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 34px;
}

.corpo-section-title {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  color: var(--text);
  font-size: 15px;
  font-weight: var(--type-weight-strong);
}

.corpo-section-link {
  flex: 0 0 auto;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--classic-accent, var(--blue));
  font-size: 12.5px;
  font-weight: var(--type-weight-strong);
  cursor: pointer;
}
.corpo-card {
  border: 1px solid color-mix(in srgb, var(--line) 72%, transparent);
  border-radius: 24px;
  padding: 16px 17px 14px;
  background: color-mix(in srgb, var(--top) 90%, transparent);
  box-shadow: 0 18px 42px color-mix(in srgb, #000 11%, transparent);
}

:root[data-theme="dark"] .corpo-card {
  background: color-mix(in srgb, var(--panel) 90%, transparent);
  box-shadow: none;
}

.corpo-card-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.corpo-card-title {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  font-weight: var(--type-weight-medium);
  letter-spacing: .1em;
  text-transform: uppercase;
}

.corpo-card-sub {
  margin-left: auto;
  color: var(--faint);
  font-size: 11px;
  font-weight: var(--type-weight-strong);
}

.corpo-card-note {
  margin: 10px 0 0;
  color: var(--faint);
  font-size: 11.5px;
  line-height: 1.35;
}

.corpo-body-main {
  display: grid;
  grid-template-columns: minmax(72px, 96px) minmax(0, 1fr);
  align-items: center;
  gap: 16px;
  margin-top: 12px;
}
.corpo-body-img {
  width: 100%;
  height: auto;
  max-height: 300px;
  object-fit: contain;
  align-self: center;
  filter: drop-shadow(0 8px 20px rgba(0, 0, 0, 0.16));
}

.corpo-body-stats {
  display: grid;
  gap: 10px;
  margin: 0;
}

.corpo-body-img,
.corpo-fat-figure {
  grid-column: 1;
  grid-row: 1;
}
.corpo-body-stats {
  grid-column: 2;
  grid-row: 1 / -1;
}
.corpo-fat-figure {
  width: 100%;
  height: auto;
  max-height: 300px;
  align-self: center;
  color: var(--fat);
  opacity: 0.38;
  pointer-events: none;
}
.corpo-fat-blob {
  transform-box: fill-box;
  transform-origin: center;
}
@media (prefers-reduced-motion: no-preference) {
  .corpo-fat-blob {
    transition:
      transform 420ms cubic-bezier(0.32, 0.72, 0, 1),
      opacity 420ms cubic-bezier(0.32, 0.72, 0, 1);
  }
}
.corpo-fat-figure-note {
  grid-column: 1;
  grid-row: 2;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 5px;
  margin: 6px 0 0;
  color: var(--faint);
  font-size: 10.5px;
  font-weight: var(--type-weight-medium);
  line-height: 1.2;
  white-space: nowrap;
}

.corpo-fat-figure-swatch {
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: color-mix(in srgb, var(--fat) 38%, transparent);
  flex: none;
}
.corpo-fat-toggle {
  grid-column: 1;
  grid-row: 1;
  align-self: stretch;
  position: relative;
  z-index: 1;
  appearance: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.corpo-fat-toggle:focus-visible {
  outline: 2px solid var(--classic-accent);
  outline-offset: 2px;
  border-radius: 12px;
}
.corpo-fat-figure-hint {
  grid-column: 1;
  grid-row: 2;
  margin: 6px 0 0;
  color: var(--faint);
  font-size: 10.5px;
  font-weight: var(--type-weight-medium);
  line-height: 1.2;
  white-space: nowrap;
}
.corpo-fat-est {
  margin: 3px 0 0;
  color: var(--faint);
  font-size: 10.5px;
  font-weight: var(--type-weight-medium);
  letter-spacing: .04em;
  line-height: 1.2;
}
.corpo-stat {
  display: grid;
  gap: 1px;
  min-width: 0;
}

.corpo-stat dt {
  color: var(--muted);
  font-size: 10.5px;
  font-weight: var(--type-weight-medium);
  letter-spacing: .04em;
  line-height: 1.15;
}

.corpo-stat dd {
  margin: 0;
  color: var(--text);
  font-size: 21px;
  font-weight: var(--type-weight-strong);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.corpo-stat dd em {
  margin-left: 3px;
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
  font-weight: var(--type-weight-strong);
}
.corpo-stat dd.corpo-body-none {
  color: var(--faint);
  font-size: 13px;
  font-weight: var(--type-weight-strong);
}
.corpo-stat-delta {
  display: flex;
  align-items: baseline;
  gap: 3px;
  margin: 2px 0 0;
  color: var(--muted);
  font-size: 11.5px;
  font-weight: var(--type-weight-medium);
  font-variant-numeric: tabular-nums;
}

.corpo-stat-delta em {
  color: var(--faint);
  font-size: 10.5px;
  font-style: normal;
  font-weight: var(--type-weight-medium);
}
.corpo-stat-note {
  margin: 1px 0 0;
  color: var(--faint);
  font-size: 10px;
  font-weight: var(--type-weight-medium);
  letter-spacing: .02em;
}

.corpo-fat-value {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 12px 0 0;
  color: var(--text);
  font-size: 30px;
  font-weight: var(--type-weight-medium);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.corpo-fat-value em {
  margin-left: -5px;
  color: var(--muted);
  font-size: 14px;
  font-style: normal;
  font-weight: var(--type-weight-medium);
}
.corpo-fat-chip {
  margin-left: auto;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: var(--type-weight-strong);
  letter-spacing: .01em;
  white-space: nowrap;
}

.corpo-fat-chip.is-essential {
  color: var(--blue);
  background: color-mix(in srgb, var(--blue) 16%, transparent);
}

.corpo-fat-chip.is-athlete {
  color: var(--green);
  background: color-mix(in srgb, var(--green) 16%, transparent);
}

.corpo-fat-chip.is-fitness {
  color: var(--green2);
  background: color-mix(in srgb, var(--green2) 20%, transparent);
}

.corpo-fat-chip.is-average {
  color: var(--amber);
  background: color-mix(in srgb, var(--amber) 18%, transparent);
}

.corpo-fat-chip.is-obese {
  color: var(--orange);
  background: color-mix(in srgb, var(--orange) 16%, transparent);
}
.corpo-fat-bar {
  position: relative;
  display: flex;
  height: 10px;
  margin-top: 14px;
  border-radius: 999px;
  overflow: visible;
}

.corpo-fat-seg {
  height: 100%;
}

.corpo-fat-seg:first-child {
  border-radius: 999px 0 0 999px;
}

.corpo-fat-seg:last-child {
  border-radius: 0 999px 999px 0;
}

.corpo-fat-seg.is-essential {
  background: color-mix(in srgb, var(--blue) 70%, transparent);
}

.corpo-fat-seg.is-athlete {
  background: color-mix(in srgb, var(--green) 70%, transparent);
}

.corpo-fat-seg.is-fitness {
  background: color-mix(in srgb, var(--green2) 75%, transparent);
}

.corpo-fat-seg.is-average {
  background: color-mix(in srgb, var(--amber) 70%, transparent);
}

.corpo-fat-seg.is-obese {
  background: color-mix(in srgb, var(--orange) 70%, transparent);
}
.corpo-fat-mark {
  position: absolute;
  top: 50%;
  width: 6px;
  height: 20px;
  border-radius: 999px;
  border: 2px solid var(--top);
  background: var(--text);
  transform: translate(-50%, -50%);
  box-shadow: 0 2px 6px color-mix(in srgb, #000 22%, transparent);
}

:root[data-theme="dark"] .corpo-fat-mark {
  border-color: var(--panel);
}
.corpo-fat-scale {
  display: flex;
  justify-content: space-between;
  margin: 8px 0 0;
  color: var(--faint);
  font-size: 10.5px;
  font-weight: var(--type-weight-medium);
  font-variant-numeric: tabular-nums;
}
.corpo-risk-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(88px, 1fr));
  gap: 8px;
  margin-top: 12px;
}

.corpo-risk-tile {
  display: grid;
  gap: 2px;
  padding: 10px 11px;
  border-radius: 16px;
  background: color-mix(in srgb, var(--soft) 70%, transparent);
  min-width: 0;
}
.corpo-risk-name {
  min-height: 24px;
  color: var(--muted);
  font-size: 10px;
  font-weight: var(--type-weight-medium);
  line-height: 1.2;
}

.corpo-risk-value {
  color: var(--text);
  font-size: 17px;
  font-weight: var(--type-weight-strong);
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
}

.corpo-risk-value em {
  margin-left: 2px;
  color: var(--muted);
  font-size: 10px;
  font-style: normal;
  font-weight: var(--type-weight-strong);
}

.corpo-risk-zone {
  font-size: 11px;
  font-weight: var(--type-weight-strong);
  line-height: 1.2;
}

.corpo-risk-zone.is-normal {
  color: var(--green);
}
.corpo-risk-zone.is-elevated,
.corpo-risk-zone.is-soft {
  color: var(--amber);
}

.corpo-risk-zone.is-high {
  color: var(--orange);
}
.corpo-risk-note {
  color: var(--faint);
  font-size: 9.5px;
  font-weight: var(--type-weight-medium);
  font-variant-numeric: tabular-nums;
}

.corpo-trend-legend {
  display: flex;
  gap: 10px;
}
.corpo-trend-legend b {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--faint);
  font-weight: var(--type-weight-strong);
}

.corpo-trend-legend b::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 999px;
}

.corpo-trend-legend b.is-weight::before {
  background: var(--classic-accent, var(--blue));
}

.corpo-trend-legend b.is-fat::before {
  background: var(--amber);
}

.corpo-trend-chart {
  position: relative;
  height: 96px;
  margin-top: 14px;
}

.corpo-trend-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.corpo-trend-line.is-weight {
  color: var(--classic-accent, var(--blue));
}

.corpo-trend-line.is-fat {
  color: var(--amber);
  stroke-dasharray: 3 3;
}
.corpo-trend-dot {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--classic-accent, var(--blue)) 34%, transparent);
  transform: translate(-50%, -50%);
}
.corpo-dxa-toggle {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  margin-top: 14px;
  padding: 11px 0 0;
  border: 0;
  border-top: 1px solid color-mix(in srgb, var(--line) 60%, transparent);
  background: transparent;
  color: var(--classic-accent, var(--blue));
  font-size: 13px;
  font-weight: var(--type-weight-strong);
  text-align: left;
  cursor: pointer;
}

.corpo-dxa-toggle em {
  color: var(--faint);
  font-size: 11px;
  font-style: normal;
  font-weight: var(--type-weight-medium);
}

.corpo-dxa {
  display: grid;
  gap: 14px;
  margin-top: 12px;
}

.corpo-dxa-group-title {
  margin: 0 0 6px;
  color: var(--muted);
  font-size: 10.5px;
  font-weight: var(--type-weight-medium);
  letter-spacing: .1em;
  text-transform: uppercase;
}

.corpo-dxa-list {
  display: grid;
  gap: 7px;
  margin: 0;
}
.corpo-dxa-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 10px;
  min-width: 0;
}

.corpo-dxa-row dt {
  color: var(--text);
  font-size: 12.5px;
  font-weight: var(--type-weight-medium);
  line-height: 1.25;
  min-width: 0;
}
.corpo-dxa-row dt em {
  display: block;
  color: var(--faint);
  font-size: 10.5px;
  font-style: normal;
  font-weight: var(--type-weight-medium);
  line-height: 1.3;
}

.corpo-dxa-row dd {
  margin: 0;
  color: var(--text);
  font-size: 13.5px;
  font-weight: var(--type-weight-strong);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.corpo-dxa-row dd em {
  margin-left: 3px;
  color: var(--muted);
  font-size: 10px;
  font-style: normal;
  font-weight: var(--type-weight-strong);
}
.corpo-scale {
  margin: 10px 0 0;
  color: var(--faint);
  font-size: 11px;
  font-weight: var(--type-weight-medium);
  font-variant-numeric: tabular-nums;
}
.corpo-empty-line {
  margin: 12px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.35;
}
.corpo-details {
  display: grid;
  gap: 12px;
}

.corpo-title {
  display: flex;
  align-items: center;
  gap: 8px;
}

.corpo-title-icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  color: var(--text);
}

.corpo-title-icon svg {
  width: 26px;
  height: 26px;
}
.corpo-page {
  overscroll-behavior-y: none;
}
.corpo-fat-seg.is-bmi-under {
  background: color-mix(in srgb, var(--blue) 70%, transparent);
}

.corpo-fat-seg.is-bmi-normal {
  background: color-mix(in srgb, var(--green) 70%, transparent);
}

.corpo-fat-seg.is-bmi-over {
  background: color-mix(in srgb, var(--amber) 70%, transparent);
}

.corpo-fat-seg.is-bmi-obese {
  background: color-mix(in srgb, var(--orange) 70%, transparent);
}

.corpo-fat-chip.is-bmi-under {
  color: var(--blue);
  background: color-mix(in srgb, var(--blue) 16%, transparent);
}

.corpo-fat-chip.is-bmi-normal {
  color: var(--green);
  background: color-mix(in srgb, var(--green) 16%, transparent);
}

.corpo-fat-chip.is-bmi-over {
  color: var(--amber);
  background: color-mix(in srgb, var(--amber) 18%, transparent);
}

.corpo-fat-chip.is-bmi-obese {
  color: var(--orange);
  background: color-mix(in srgb, var(--orange) 16%, transparent);
}
.corpo-weight-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 8px;
  margin: 12px 0 0;
}

.corpo-weight-facts div {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.corpo-weight-facts dt {
  color: var(--muted);
  font-size: 10px;
  font-weight: var(--type-weight-medium);
  line-height: 1.2;
}

.corpo-weight-facts dd {
  margin: 0;
  color: var(--text);
  font-size: 13px;
  font-weight: var(--type-weight-strong);
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}

.corpo-ind-list {
  display: grid;
  gap: 2px;
  margin: 10px 0 0;
}
.corpo-ind-row {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) auto minmax(58px, auto);
  align-items: center;
  gap: 8px;
  padding: 7px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--line) 45%, transparent);
}

.corpo-ind-row:last-child {
  border-bottom: 0;
}

.corpo-ind-icon {
  color: var(--faint);
}

.corpo-ind-row dt {
  min-width: 0;
  color: var(--muted);
  font-size: 12.5px;
  font-weight: var(--type-weight-medium);
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.corpo-ind-row dd {
  margin: 0;
  color: var(--text);
  font-size: 15px;
  font-weight: var(--type-weight-strong);
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.corpo-ind-row dd em {
  margin-left: 2px;
  color: var(--muted);
  font-size: 10px;
  font-style: normal;
  font-weight: var(--type-weight-strong);
}
.corpo-ind-approx {
  margin-right: 2px;
  color: var(--faint);
  font-size: 11px;
  font-style: normal;
}
.corpo-ind-chip {
  justify-self: end;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: var(--type-weight-strong);
  line-height: 1.2;
  text-align: center;
  white-space: nowrap;
}

.corpo-ind-chip.is-cool {
  color: var(--blue);
  background: color-mix(in srgb, var(--blue) 16%, transparent);
}

.corpo-ind-chip.is-good {
  color: var(--green);
  background: color-mix(in srgb, var(--green) 16%, transparent);
}

.corpo-ind-chip.is-warn {
  color: var(--amber);
  background: color-mix(in srgb, var(--amber) 18%, transparent);
}

.corpo-ind-chip.is-alert {
  color: var(--orange);
  background: color-mix(in srgb, var(--orange) 16%, transparent);
}
.corpo-ind-chip.is-none {
  padding: 0;
  background: none;
}

.corpo-cmp-windows {
  display: flex;
  gap: 4px;
  margin-left: auto;
}
.corpo-cmp-window {
  appearance: none;
  margin: 0;
  padding: 4px 9px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--faint);
  font-size: 11px;
  font-weight: var(--type-weight-strong);
  line-height: 1.2;
  cursor: pointer;
}

.corpo-cmp-window.is-on {
  color: var(--text);
  background: color-mix(in srgb, var(--soft) 85%, transparent);
}
.corpo-cmp-bigs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 12px;
}

.corpo-cmp-big {
  display: grid;
  gap: 2px;
  padding: 10px 10px 9px;
  border-radius: 16px;
  background: color-mix(in srgb, var(--soft) 70%, transparent);
  min-width: 0;
}
.corpo-cmp-big strong {
  color: var(--text);
  font-size: 19px;
  font-weight: var(--type-weight-strong);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.corpo-cmp-big strong em {
  margin-left: 2px;
  color: var(--muted);
  font-size: 10px;
  font-style: normal;
}

.corpo-cmp-big span {
  color: var(--muted);
  font-size: 10px;
  font-weight: var(--type-weight-medium);
  line-height: 1.2;
}

.corpo-cmp-dates {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin: 14px 0 6px;
  color: var(--faint);
  font-size: 10.5px;
  font-weight: var(--type-weight-medium);
}

.corpo-cmp-table {
  display: grid;
  gap: 2px;
  margin: 0;
}
.corpo-cmp-row {
  display: grid;
  grid-template-columns: minmax(52px, 1fr) minmax(0, 1.6fr) minmax(52px, 1fr);
  align-items: center;
  gap: 8px;
  padding: 7px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--line) 45%, transparent);
}

.corpo-cmp-row:last-child {
  border-bottom: 0;
}

.corpo-cmp-row dt {
  display: grid;
  gap: 1px;
  min-width: 0;
  justify-items: center;
  color: var(--muted);
  font-size: 11.5px;
  font-weight: var(--type-weight-medium);
  line-height: 1.2;
  text-align: center;
}

.corpo-cmp-delta {
  color: var(--text);
  font-size: 11px;
  font-style: normal;
  font-weight: var(--type-weight-strong);
  font-variant-numeric: tabular-nums;
}

.corpo-cmp-side {
  margin: 0;
  color: var(--text);
  font-size: 14px;
  font-weight: var(--type-weight-strong);
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.corpo-cmp-side.is-to {
  text-align: right;
}
.corpo-tape-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px 10px;
  margin: 12px 0 0;
}

.corpo-tape-open {
  margin: 10px 0 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text);
  font-size: 13px;
  font-weight: var(--type-weight-strong);
  cursor: pointer;
}

.corpo-tape-cta {
  width: 100%;
  margin-top: 12px;
}

.corpo-tape-view .corpo-tape-cta {
  margin-top: 0;
}
.corpo-tape-figure-card {
  display: grid;
  justify-items: center;
}

.corpo-tape-figure {
  width: min(100%, 300px);
  height: auto;
  color: var(--muted);
}

.corpo-tape-dot circle {
  fill: var(--classic-accent, #c6f04f);
  stroke: var(--top);
  stroke-width: 2;
}

.corpo-tape-dot.is-empty circle {
  fill: transparent;
  stroke: var(--faint);
  stroke-width: 1.5;
  stroke-dasharray: 2 2;
}

.corpo-tape-dot text {
  font-size: 11px;
  font-weight: var(--type-weight-strong);
  font-variant-numeric: tabular-nums;
  fill: var(--text);
}

.corpo-tape-figure-note {
  text-align: center;
}
.corpo-tape-lead {
  margin: 0 0 12px;
}
.corpo-tape-ind-list {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  display: grid;
  gap: 8px;
}

.corpo-tape-ind-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--muted);
  font-size: 13px;
}

.corpo-tape-ind-list li b {
  color: var(--text);
  font-size: 17px;
  font-weight: var(--type-weight-strong);
  font-variant-numeric: tabular-nums;
}

.corpo-tape-ind-list li b em,
.corpo-tape-site-value b em {
  margin-left: 2px;
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
  font-weight: var(--type-weight-strong);
}

.corpo-tape-sub {
  margin: 14px 0 6px;
  color: var(--muted);
  font-size: 11px;
  font-weight: var(--type-weight-medium);
  letter-spacing: .1em;
  text-transform: uppercase;
}

.corpo-tape-asym {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}

.corpo-tape-asym li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2px 10px;
  color: var(--muted);
  font-size: 12.5px;
}

.corpo-tape-asym li b {
  color: var(--text);
  font-weight: var(--type-weight-strong);
  font-variant-numeric: tabular-nums;
}

.corpo-tape-asym li em {
  grid-column: 1 / -1;
  color: var(--faint);
  font-size: 11px;
  font-style: normal;
  font-variant-numeric: tabular-nums;
}
.corpo-tape-asym li.is-notable em {
  color: var(--amber);
}
.corpo-tape-group {
  display: grid;
  gap: 8px;
}

.corpo-tape-sites,
.corpo-tape-history-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}

.corpo-tape-site {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 56px auto;
  align-items: center;
  gap: 10px;
  min-height: 56px;
  padding: 8px 14px;
  border: 1px solid color-mix(in srgb, var(--line) 72%, transparent);
  border-radius: 20px;
  background: color-mix(in srgb, var(--top) 90%, transparent);
}

:root[data-theme="dark"] .corpo-tape-site {
  background: color-mix(in srgb, var(--panel) 90%, transparent);
}

.corpo-tape-site-text {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.corpo-tape-site-text b {
  color: var(--text);
  font-size: 14px;
  font-weight: var(--type-weight-strong);
}

.corpo-tape-site-text small,
.corpo-tape-field-hint {
  color: var(--faint);
  font-size: 11px;
  line-height: 1.3;
}

.corpo-tape-spark {
  width: 56px;
  height: 26px;
  overflow: visible;
}

.corpo-tape-spark polyline {
  fill: none;
  stroke: var(--classic-accent, #c6f04f);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.corpo-tape-site-value {
  display: grid;
  justify-items: end;
  gap: 1px;
}

.corpo-tape-site-value b {
  color: var(--text);
  font-size: 17px;
  font-weight: var(--type-weight-strong);
  font-variant-numeric: tabular-nums;
}

.corpo-tape-site-value b.corpo-body-none {
  color: var(--faint);
  font-size: 13px;
}

.corpo-tape-site-value small {
  color: var(--muted);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.corpo-tape-howto .corpo-card-note {
  line-height: 1.45;
}
.corpo-tape-history {
  display: grid;
  gap: 8px;
}

.corpo-tape-history-row {
  padding-right: 8px;
}

.corpo-tape-history-main {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.corpo-tape-delete {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border: 1px solid color-mix(in srgb, var(--line) 72%, transparent);
  border-radius: 50%;
  background: transparent;
  color: var(--muted);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}
.corpo-tape-fieldset {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}

.corpo-tape-fieldset legend {
  padding: 0;
  margin-bottom: 4px;
}

.corpo-tape-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.corpo-tape-row {
  display: grid;
  align-items: center;
  gap: 0 10px;
  grid-template-columns: minmax(0, 1fr) 96px;
  grid-template-areas: 'name input';
  min-width: 0;
  padding: 10px 12px 10px 14px;
  border: 1px solid var(--ring);
  border-radius: 16px;
  background: var(--top);
}

:root[data-theme="dark"] .corpo-tape-row {
  background: var(--panel);
}
.corpo-tape-row.is-active {
  grid-template-columns: minmax(0, 1fr) auto 96px;
  grid-template-areas:
    'name actions input'
    'hint hint hint';
}

.corpo-tape-row-name {
  grid-area: name;
  display: flex;
  align-items: baseline;
  gap: 5px;
  min-width: 0;
}

.corpo-tape-row-name b {
  overflow: hidden;
  color: var(--text);
  font-size: 14px;
  font-weight: var(--type-weight-medium);
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.corpo-tape-row-name .corpo-field-unit {
  margin-left: 0;
  flex: none;
}
.corpo-tape-row .corpo-tape-field-hint {
  display: none;
  grid-area: hint;
  margin-top: 6px;
}

.corpo-tape-row.is-active .corpo-tape-field-hint {
  display: block;
}

.corpo-tape-row .corpo-tape-row-input {
  grid-area: input;
  width: 100%;
  min-height: 38px;
  padding: 0 10px;
  border-radius: 12px;
  font-size: 15px;
  text-align: right;
  -moz-appearance: textfield;
}

.corpo-tape-row-input::-webkit-outer-spin-button,
.corpo-tape-row-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.corpo-tape-row-actions {
  grid-area: actions;
  display: flex;
  gap: 6px;
}

.corpo-tape-ok,
.corpo-tape-undo {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid var(--ring);
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
}
.corpo-tape-ok {
  color: var(--classic-accent, var(--blue));
  border-color: color-mix(in srgb, var(--classic-accent, var(--blue)) 55%, var(--ring));
}

.corpo-tape-ok svg,
.corpo-tape-undo svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.corpo-tape-date-row {
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: 'name input';
}

.corpo-tape-date-row .corpo-tape-date-input {
  grid-area: input;
}

.corpo-tape-date-input {
  width: 172px;
  min-height: 38px;
  padding: 0 12px;
  border-radius: 12px;
  font-size: 15px;
  text-align: center;
  -webkit-appearance: none;
  appearance: none;
}

.corpo-tape-fieldset {
  gap: 8px;
}
.goals-screen {
  position: fixed;
  inset: 0;
  z-index: 63;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: max(10px, env(safe-area-inset-top)) 16px max(24px, env(safe-area-inset-bottom));
  background: var(--bg);
  color: var(--text);
  overflow-y: auto;
  overscroll-behavior-y: none;
  -webkit-overflow-scrolling: touch;
  animation: notif-in 320ms cubic-bezier(0.32, 0.72, 0.28, 1) both;
}

.goals-screen.closing {
  animation: notif-out 280ms cubic-bezier(0.55, 0, 0.55, 0.2) both;
  pointer-events: none;
}

.goals-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0 2px;
}

.goals-head h2 {
  margin: 0;
  font-size: 21px;
  font-weight: var(--type-weight-strong);
}

.goals-back {
  flex: 0 0 auto;
  min-width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  background: color-mix(in srgb, var(--ink, #f4f4f5) 8%, transparent);
  color: inherit;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
}
.goals-card {
  border: 1px solid color-mix(in srgb, var(--line) 72%, transparent);
  border-radius: 18px;
  background: var(--top);
  padding: 16px 16px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.goals-card-label {
  margin: 0;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--faint);
  font-weight: var(--type-weight-medium);
}

.goals-card-note {
  margin: 0;
  font-size: 13px;
  line-height: 1.35;
  color: var(--faint);
}
.goals-weight-value {
  margin: 0;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px;
}

.goals-weight-value strong {
  font-size: 40px;
  line-height: 1;
  font-weight: var(--type-weight-medium);
  font-variant-numeric: tabular-nums;
}

.goals-weight-value em {
  font-style: normal;
  font-size: 15px;
  color: var(--faint);
}

.goals-weight-none {
  margin: 0;
  font-size: 15px;
  color: var(--faint);
}
.goals-trend {
  margin-left: 4px;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  background: color-mix(in srgb, var(--faint) 14%, transparent);
  color: var(--faint);
}

.goals-trend.is-good {
  color: var(--green);
  background: color-mix(in srgb, var(--green) 14%, transparent);
}

.goals-trend.is-warn {
  color: var(--amber);
  background: color-mix(in srgb, var(--amber) 16%, transparent);
}

.goals-trend i {
  font-style: normal;
}
.goals-bmi-value {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

.goals-bmi-value strong {
  font-size: 34px;
  line-height: 1;
  font-weight: var(--type-weight-medium);
  font-variant-numeric: tabular-nums;
}
.goals-goal-value {
  margin: 0;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px;
}

.goals-goal-value strong {
  font-size: 34px;
  line-height: 1;
  font-weight: var(--type-weight-medium);
  font-variant-numeric: tabular-nums;
}

.goals-goal-value em {
  font-style: normal;
  font-size: 15px;
  color: var(--faint);
}

.goals-goal-value span {
  font-size: 15px;
}

.goals-goal-pace {
  margin: 0;
  font-size: 13px;
  color: var(--faint);
  font-variant-numeric: tabular-nums;
}
.goals-forecast {
  position: relative;
  height: 56px;
  margin-top: 2px;
  color: var(--green);
}

.goals-forecast-svg {
  width: 100%;
  height: 100%;
  display: block;
}

.goals-forecast-line {
  stroke-dasharray: 5 4;
}

.goals-forecast-dot {
  position: absolute;
  left: 100%;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: currentColor;
  border: 2px solid var(--top);
  transform: translate(-50%, -50%);
}

.goals-forecast-scale {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0;
  font-size: 11px;
  color: var(--faint);
}

.goals-realism {
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11px;
  color: var(--green);
  background: color-mix(in srgb, var(--green) 14%, transparent);
}

.goals-realism.is-ambitious {
  color: var(--amber);
  background: color-mix(in srgb, var(--amber) 16%, transparent);
}

.goals-realism.is-too_much {
  color: var(--orange);
  background: color-mix(in srgb, var(--orange) 16%, transparent);
}

.goals-empty-title {
  margin: 0;
  font-size: 15px;
  font-weight: var(--type-weight-medium);
}
.goals-ring-row {
  display: flex;
  align-items: center;
  gap: 14px;
}

.goals-ring {
  position: relative;
  flex: 0 0 112px;
  width: 112px;
  height: 112px;
}

.goals-ring-svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.goals-ring-track {
  fill: none;
  stroke: color-mix(in srgb, var(--faint) 22%, transparent);
}

.goals-ring-arc {
  fill: none;
  stroke-linecap: butt;
}

.goals-ring-arc.is-protein {
  stroke: var(--protein);
}

.goals-ring-arc.is-fat {
  stroke: var(--fat);
}

.goals-ring-arc.is-carbs {
  stroke: var(--carb);
}

.goals-ring-center {
  position: absolute;
  inset: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  text-align: center;
}

.goals-ring-center strong {
  font-size: 26px;
  line-height: 1;
  font-weight: var(--type-weight-medium);
  font-variant-numeric: tabular-nums;
}

.goals-ring-center span {
  font-size: 10.5px;
  color: var(--faint);
  max-width: 74px;
  line-height: 1.15;
}

.goals-macros {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

.goals-macro-head {
  margin: 0;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  font-size: 13px;
}

.goals-macro-head b {
  font-weight: var(--type-weight-medium);
}

.goals-macro-head span {
  color: var(--faint);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.goals-macro-bar {
  display: block;
  position: relative;
  height: 6px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--faint) 18%, transparent);
  overflow: hidden;
}

.goals-macro-bar::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--goals-macro-fill, 0%);
  border-radius: 999px;
  background: var(--faint);
}

.goals-macro-bar.is-protein::before {
  background: var(--protein);
}

.goals-macro-bar.is-fat::before {
  background: var(--fat);
}

.goals-macro-bar.is-carbs::before {
  background: var(--carb);
}

.goals-macro small {
  display: block;
  margin-top: 3px;
  font-size: 11px;
  color: var(--faint);
}

.goals-method {
  margin: 6px 0 0;
  font-size: 13px;
  line-height: 1.35;
  color: var(--faint);
}
.goals-why summary {
  list-style: none;
  cursor: pointer;
  font-size: 13px;
  color: var(--green);
  font-weight: var(--type-weight-medium);
}

.goals-why summary::-webkit-details-marker {
  display: none;
}

.goals-why-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 8px;
  padding: 12px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--faint) 10%, transparent);
}

.goals-why-body p {
  margin: 0;
  font-size: 13px;
  line-height: 1.4;
}

.goals-why-body b {
  font-weight: var(--type-weight-medium);
  font-variant-numeric: tabular-nums;
}
.goals-history-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.goals-history-tabs {
  display: flex;
  gap: 6px;
}

.goals-history-tab {
  border: 0;
  border-radius: 999px;
  padding: 4px 10px;
  background: var(--chip);
  color: var(--faint);
  font-size: 11px;
  letter-spacing: 0;
  text-transform: none;
  cursor: pointer;
}

.goals-history-tab.is-on {
  background: color-mix(in srgb, var(--green) 16%, transparent);
  color: var(--green);
}

.goals-history-chart {
  position: relative;
  height: 96px;
  margin-top: 4px;
  color: var(--green);
}

.goals-history-svg {
  width: 100%;
  height: 100%;
  display: block;
}

.goals-history-dot {
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--faint) 60%, transparent);
  transform: translate(-50%, -50%);
}
.goals-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 2px;
}

.goals-action {
  width: 100%;
  border: 1px solid color-mix(in srgb, var(--line) 72%, transparent);
  border-radius: 16px;
  background: var(--top);
  color: inherit;
  padding: 14px 16px;
  font-size: 15px;
  font-weight: var(--type-weight-medium);
  cursor: pointer;
}

.goals-action.is-primary {
  border-color: transparent;
  background: var(--text);
  color: var(--top);
}

.goals-params-title {
  margin: 0;
  font-size: 15px;
  font-weight: var(--type-weight-medium);
}

.goals-params-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.goals-params-option {
  display: grid;
  gap: 2px;
  text-align: left;
  border: 1px solid color-mix(in srgb, var(--line) 72%, transparent);
  border-radius: 14px;
  padding: 12px;
  background: transparent;
  color: inherit;
  cursor: pointer;
}

.goals-params-option.is-on {
  border-color: var(--green);
  background: color-mix(in srgb, var(--green) 10%, transparent);
}

.goals-params-option b {
  font-size: 15px;
  font-weight: var(--type-weight-medium);
}

.goals-params-option small {
  font-size: 12px;
  color: var(--faint);
}

.goals-params-option[disabled] {
  opacity: 0.6;
}
.confetti-layer {
  position: fixed;
  inset: 0;
  z-index: 110;
  overflow: hidden;
  pointer-events: none;
}
.confetti-bit {
  position: absolute;
  top: 0;
  left: var(--x);
  width: var(--w);
  height: var(--h);
  background: var(--tint);
  animation:
    confetti-fall var(--fall) linear var(--delay) both,
    confetti-tumble var(--flutter) linear var(--delay) infinite;
}
.confetti-bit--strip {
  border-radius: 2px;
}

.confetti-bit--dot {
  border-radius: 50%;
}

.confetti-bit--ribbon {
  border-radius: 999px;
}
@keyframes confetti-fall {
  0% {
    translate: 0 -10vh;
    opacity: 0;
  }

  6% {
    opacity: 1;
  }

  94% {
    opacity: 1;
  }

  100% {
    translate: var(--drift) 110vh;
    opacity: 0;
  }
}
@keyframes confetti-tumble {
  0% {
    rotate: 0deg;
    scale: 1 1;
  }

  25% {
    scale: var(--edge) 1;
  }

  50% {
    scale: 1 1;
  }

  75% {
    scale: var(--edge) 1;
  }

  100% {
    rotate: var(--spin);
    scale: 1 1;
  }
}
@media (prefers-reduced-motion: reduce) {
  .confetti-bit {
    animation: none;
    opacity: 0;
    translate: 0 -10vh;
  }
}
[data-sum-zone='under'] {
  --sum-zone: var(--blue);
}

[data-sum-zone='normal'] {
  --sum-zone: var(--green);
}

[data-sum-zone='over'] {
  --sum-zone: var(--amber);
}

[data-sum-zone='obese'] {
  --sum-zone: var(--pink);
}
.wiz-layer.is-summary {
  background: color-mix(in srgb, var(--blue) 12%, var(--top));
  --wiz-gutter: 0px;
}
.wiz-layer.is-summary .wiz-head,
.wiz-layer.is-summary .wiz-progress,
.wiz-layer.is-summary .wiz-title,
.wiz-layer.is-summary .wiz-error,
.wiz-layer.is-summary .wiz-foot {
  padding-inline: 20px;
}
.wiz-layer.is-summary .wiz-body {
  padding-top: 0;
}
.wiz-layer.is-summary .wiz-foot {
  background: var(--panel);
}
.wiz-sum {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
}

.wiz-sum-card {
  margin-top: 18px;
  flex: 1 0 auto;
  box-sizing: border-box;
  background: var(--panel);
  border-radius: 24px 24px 0 0;
  padding: 22px 20px 20px;
  display: flex;
  flex-direction: column;
}
.wiz-sum-calc {
  min-height: 340px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
}

.wiz-sum-calc-title {
  margin: 0;
  font-size: 22px;
  font-weight: var(--type-weight-strong);
  color: var(--text);
  animation: wiz-sum-pulse 1200ms ease-in-out infinite;
}

.wiz-sum-calc-note {
  margin: 0;
  font-size: 15px;
  color: var(--faint);
  animation: wiz-sum-rise 320ms cubic-bezier(0.32, 0.72, 0.28, 1) both;
}

@keyframes wiz-sum-pulse {
  0%,
  100% {
    opacity: 0.45;
  }
  50% {
    opacity: 1;
  }
}
.wiz-sum-chips {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  animation: wiz-sum-rise 320ms cubic-bezier(0.32, 0.72, 0.28, 1) both;
}

.wiz-sum-chips span {
  box-sizing: border-box;
  padding: 9px 15px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 15px;
  line-height: 22px;
  color: var(--text);
  white-space: nowrap;
}
.wiz-sum-imc {
  margin-top: 18px;
}

.wiz-sum-imc-head {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 21px;
  font-weight: var(--type-weight-medium);
  color: var(--text);
  animation: wiz-sum-rise 320ms cubic-bezier(0.32, 0.72, 0.28, 1) 60ms both;
  --stop-ink: #1c274c;
}

:root[data-theme='dark'] .wiz-sum-imc-head {
  --stop-ink: #c8d2e8;
}

.wiz-sum-imc-head svg {
  flex: 0 0 auto;
  width: 21px;
  height: 21px;
}

.wiz-sum-imc-value {
  margin: 10px 0 0;
  font-size: 52px;
  line-height: 1.05;
  font-weight: var(--type-weight-strong);
  color: var(--text);
  font-variant-numeric: tabular-nums;
  animation: wiz-sum-rise 320ms cubic-bezier(0.32, 0.72, 0.28, 1) 120ms both;
}

.wiz-sum-ticks {
  margin: 16px 0 6px;
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: var(--faint);
  font-variant-numeric: tabular-nums;
  animation: wiz-sum-rise 320ms cubic-bezier(0.32, 0.72, 0.28, 1) 160ms both;
}
.wiz-sum-track {
  position: relative;
  height: 24px;
  display: flex;
  align-items: center;
}

.wiz-sum-bars {
  display: flex;
  gap: 4px;
  width: 100%;
  transform-origin: left center;
  animation: wiz-sum-bar-grow 900ms cubic-bezier(0.32, 0.72, 0.28, 1) both;
}

.wiz-sum-seg {
  flex: 1 1 0;
  height: 9px;
  border-radius: 999px;
}

.wiz-sum-seg.is-sum-under {
  background: var(--blue);
}

.wiz-sum-seg.is-sum-normal {
  background: var(--green);
}

.wiz-sum-seg.is-sum-over {
  background: var(--amber);
}

.wiz-sum-seg.is-sum-obese {
  background: var(--pink);
}

.wiz-sum-thumb {
  position: absolute;
  top: 50%;
  left: calc(var(--sum-z) * ((100% - 12px) / 4 + 4px) + var(--sum-f) * ((100% - 12px) / 4));
  width: 24px;
  height: 24px;
  box-sizing: border-box;
  border-radius: 999px;
  background: var(--panel);
  border: 4px solid var(--sum-zone, var(--green));
  transform: translate(-50%, -50%);
  animation: wiz-sum-thumb-in 900ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes wiz-sum-bar-grow {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}

@keyframes wiz-sum-thumb-in {
  0% {
    transform: translate(-50%, -50%) translateX(-40px) scale(0.4);
    opacity: 0;
  }
  35% {
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -50%) translateX(0) scale(1);
    opacity: 1;
  }
}

.wiz-sum-zones {
  margin: 8px 0 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
  animation: wiz-sum-rise 320ms cubic-bezier(0.32, 0.72, 0.28, 1) 200ms both;
}

.wiz-sum-zones span {
  text-align: center;
  font-size: 14px;
  line-height: 1.2;
  color: var(--faint);
}

.wiz-sum-zones span.is-on {
  color: var(--sum-zone, var(--text));
  font-weight: var(--type-weight-strong);
}
.wiz-sum-verdict {
  margin-top: 18px;
  padding: 16px;
  border-radius: 16px;
  background: color-mix(in srgb, var(--sum-zone, var(--green)) 12%, var(--panel));
  animation: wiz-sum-pop 380ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.wiz-sum-verdict-head {
  margin: 0 0 8px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 18px;
  font-weight: var(--type-weight-strong);
  color: var(--text);
}

.wiz-sum-verdict-head svg {
  flex: 0 0 auto;
  color: var(--sum-zone, var(--green));
}

.wiz-sum-verdict-text {
  margin: 0;
  font-size: 15px;
  line-height: 1.4;
  color: var(--muted);
}
.wiz-sum-rows {
  margin: 26px 0 0;
  display: grid;
  gap: 26px;
}

.wiz-sum-row {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  column-gap: 16px;
  align-items: center;
  animation: wiz-sum-pop 380ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.wiz-sum-row-icon {
  grid-row: 1 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
}

.wiz-sum-row-art {
  display: block;
  width: 36px;
  height: 36px;
  object-fit: contain;
}

.wiz-sum-row dt {
  font-size: 14px;
  line-height: 1.2;
  color: var(--faint);
}

.wiz-sum-row dd {
  margin: 0;
  font-size: 19px;
  line-height: 1.25;
  font-weight: var(--type-weight-strong);
  color: var(--text);
}
@keyframes wiz-sum-rise {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes wiz-sum-pop {
  0% {
    opacity: 0;
    transform: translateY(16px) scale(0.94);
  }
  60% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
@media (prefers-reduced-motion: reduce) {
  .wiz-sum-calc-title,
  .wiz-sum-calc-note,
  .wiz-sum-chips,
  .wiz-sum-imc-head,
  .wiz-sum-imc-value,
  .wiz-sum-ticks,
  .wiz-sum-bars,
  .wiz-sum-thumb,
  .wiz-sum-zones,
  .wiz-sum-verdict,
  .wiz-sum-row {
    animation: none;
  }

  .wiz-sum-calc-title {
    opacity: 1;
  }
}
.scrim.diet-help-scrim {
  z-index: 67;
}

.sheet.diet-help-sheet {
  z-index: 68;
}
.diet-help-sheet {
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding-bottom: max(18px, calc(env(safe-area-inset-bottom) + 14px));
}
.sheet.diet-help-sheet {
  overflow-x: hidden;
  top: var(--visual-offset-top, 0px);
  bottom: auto;
  height: var(--visual-vh, 100dvh);
  max-height: var(--visual-vh, 100dvh);
  border-radius: 0;
}
.sheet.diet-help-sheet.settled {
  animation: none;
}
.diet-screen-head {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--sheet);
}
.diet-screen .sheet-x {
  font-size: 30px;
  line-height: 0.8;
}
.diet-screen-cover {
  position: relative;
  width: calc(100% + 32px);
  margin: 0 -16px 4px;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--chip);
}

.diet-screen-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.sheet.diet-help-sheet::before {
  content: none;
}
.diet-help-sheet .sheet-head {
  position: sticky;
  top: 0;
  z-index: 3;
  background: var(--sheet);
}
.sheet.diet-help-sheet .sheet-head {
  height: auto;
  min-height: 60px;
  padding-top: calc(8px + env(safe-area-inset-top));
}
.diet-help-sheet .sheet-head h2 {
  padding: 0 4px;
  font-size: 19px;
  line-height: 1.1;
}
.diet-choice {
  display: grid;
  gap: 8px;
  padding: 12px 0 0;
}
.diet-row {
  position: relative;
}
.diet-option {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 14px;
  align-items: center;
  width: 100%;
  border: 0;
  border-radius: 20px;
  padding: 12px 48px 12px 12px;
  text-align: left;
  color: var(--text);
  background: color-mix(in srgb, var(--soft) 78%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--line) 84%, transparent);
  cursor: pointer;
}
.diet-option[aria-pressed="true"] {
  background: color-mix(in srgb, var(--green) 12%, var(--panel));
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--green) 46%, transparent);
}

.diet-option:disabled {
  opacity: .55;
  cursor: default;
}
.diet-option-mark {
  position: relative;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  border-radius: 7px;
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--line) 92%, transparent);
}

.diet-option[aria-pressed="true"] .diet-option-mark {
  background: var(--green);
  box-shadow: inset 0 0 0 2px var(--green);
}
.diet-option[aria-pressed="true"] .diet-option-mark::after {
  content: "";
  position: absolute;
  left: 6.5px;
  top: 3px;
  width: 4px;
  height: 9px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.diet-option-mark-radio {
  border-radius: 50%;
}

.diet-option[aria-pressed="true"] .diet-option-mark-radio {
  background:
    radial-gradient(circle at 50% 50%, var(--green) 0 5px, transparent 5px);
  box-shadow: inset 0 0 0 2px var(--green);
}

.diet-option[aria-pressed="true"] .diet-option-mark-radio::after {
  content: none;
}
.diet-option-none {
  grid-template-columns: 72px 1fr auto;
  padding-right: 12px;
}

.diet-option-art {
  width: 72px;
  height: 72px;
  border-radius: 12px;
  overflow: hidden;
  background: var(--chip);
}

.diet-option-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.diet-option-text {
  display: grid;
  gap: 4px;
  min-width: 0;
}
.diet-option-text b {
  color: var(--text);
  font-size: 16px;
  line-height: 1.2;
  font-weight: var(--type-weight-medium);
}
.diet-option-text small {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  color: color-mix(in srgb, var(--text) 78%, var(--muted));
  font-size: 13px;
  line-height: 1.42;
  font-weight: var(--type-weight-medium);
}
.diet-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 2px;
}
.diet-option-text > .diet-chip {
  justify-self: start;
}

.diet-chip {
  border-radius: 999px;
  padding: 3px 9px;
  color: var(--muted);
  background: var(--chip);
  font-size: 10.5px;
  font-weight: var(--type-weight-medium);
  letter-spacing: .06em;
  text-transform: uppercase;
}
.diet-chip-rct {
  color: color-mix(in srgb, var(--green) 72%, var(--text));
  background: color-mix(in srgb, var(--green) 14%, var(--chip));
}

.diet-chip-observational {
  color: color-mix(in srgb, var(--amber) 62%, var(--text));
  background: color-mix(in srgb, var(--amber) 16%, var(--chip));
}

.diet-chip-therapeutic,
.diet-chip-medical {
  color: color-mix(in srgb, #c67668 58%, var(--text));
  background: color-mix(in srgb, #c67668 16%, var(--chip));
}
.diet-help-button {
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
  z-index: 1;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 999px;
  color: var(--muted);
  background: color-mix(in srgb, var(--chip) 82%, transparent);
  cursor: pointer;
}
.diet-help-button::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 44px;
  height: 44px;
  transform: translate(-50%, -50%);
}

.diet-help-button svg {
  width: 15px;
  height: 15px;
  margin-left: 1px;
}
.diet-choice-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 2px 0 2px;
}

.diet-choice-label {
  color: var(--muted);
  font-size: 11px;
  font-weight: var(--type-weight-medium);
  letter-spacing: .12em;
  text-transform: uppercase;
}
.diet-choice-count {
  display: flex;
  align-items: baseline;
  gap: 8px;
  color: var(--muted);
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
}

.diet-choice-count b {
  color: var(--text);
  font-weight: var(--type-weight-strong);
}
.diet-choice-count.is-full b {
  color: var(--amber);
}

.diet-choice-count i {
  font-style: normal;
  color: var(--amber);
}

.diet-picker-note {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.4;
  font-weight: var(--type-weight-medium);
  text-align: center;
}

.diet-retry {
  border: 0;
  border-radius: 999px;
  padding: 4px 10px;
  color: var(--text);
  background: var(--chip);
  font-size: 12px;
  font-weight: var(--type-weight-strong);
  cursor: pointer;
}
.diet-disclaimer {
  margin: 10px 0 0;
  border-radius: 16px;
  padding: 10px 12px;
  color: var(--muted);
  background: color-mix(in srgb, var(--soft) 62%, transparent);
  font-size: 11.5px;
  line-height: 1.42;
  font-weight: var(--type-weight-medium);
}

.diet-help-body {
  display: grid;
  gap: 12px;
  padding: 12px 14px 0;
}
.diet-help-hero {
  border-radius: 24px;
  padding: 15px;
  color: #ffffff;
  background:
    radial-gradient(circle at 18% 14%, rgba(255, 255, 255, .30), transparent 30%),
    linear-gradient(135deg, #365f52, #5e83a0 48%, #7a6fa8);
  box-shadow: 0 16px 36px color-mix(in srgb, #4e8c73 18%, transparent);
}

.diet-help-hero span {
  display: block;
  margin-bottom: 6px;
  color: rgba(255, 255, 255, .72);
  font-size: 11px;
  line-height: 1.1;
  font-weight: var(--type-weight-medium);
  text-transform: uppercase;
  letter-spacing: .03em;
}

.diet-help-hero p {
  margin: 0;
  font-size: 14px;
  line-height: 1.36;
  font-weight: var(--type-weight-strong);
}

.diet-help-chips {
  margin-top: 0;
}
.diet-help-alert {
  margin: 0;
  border-radius: 18px;
  padding: 12px 14px;
  color: var(--text);
  background: color-mix(in srgb, #c67668 13%, var(--panel));
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, #c67668 34%, transparent);
  font-size: 13px;
  line-height: 1.42;
  font-weight: var(--type-weight-strong);
}
.diet-help-block {
  border-radius: 22px;
  padding: 14px;
  background: color-mix(in srgb, var(--soft) 78%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--line) 84%, transparent);
}

.diet-help-block h3 {
  margin: 0 0 10px;
  color: var(--text);
  font-size: 17px;
  line-height: 1.08;
  font-weight: var(--type-weight-strong);
}
.diet-help-block h4 {
  margin: 14px 0 6px;
  color: var(--text);
  font-size: 14px;
  line-height: 1.1;
  font-weight: var(--type-weight-strong);
}

.diet-help-block p {
  margin: 0;
  color: color-mix(in srgb, var(--text) 78%, var(--muted));
  font-size: 13px;
  line-height: 1.42;
  font-weight: var(--type-weight-medium);
}
.diet-help-hint {
  margin: 0 0 8px;
  color: var(--muted);
  font-size: 11.5px;
  line-height: 1.3;
  font-weight: var(--type-weight-strong);
}
.diet-help-rules {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.diet-help-rules li {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 10px;
  align-items: baseline;
  border-radius: 15px;
  padding: 9px 11px;
  background: color-mix(in srgb, var(--panel) 84%, transparent);
}

.diet-help-rules b {
  color: var(--text);
  font-size: 13px;
  line-height: 1.2;
  font-weight: var(--type-weight-strong);
}

.diet-help-rules strong {
  color: var(--text);
  font-size: 13px;
  line-height: 1.2;
  font-weight: var(--type-weight-strong);
  white-space: nowrap;
}

.diet-help-rules small {
  grid-column: 1 / -1;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.32;
  font-weight: var(--type-weight-medium);
}
.diet-help-foods {
  display: grid;
  gap: 8px;
}

.diet-help-foods div {
  display: grid;
  gap: 3px;
  border-radius: 15px;
  padding: 10px;
  background: color-mix(in srgb, var(--panel) 84%, transparent);
}

.diet-help-foods b {
  color: var(--text);
  font-size: 13px;
  line-height: 1.1;
}

.diet-help-foods span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.32;
  font-weight: var(--type-weight-medium);
}
.diet-help-limits {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.diet-help-limits li {
  position: relative;
  border-radius: 15px;
  padding: 10px 10px 10px 26px;
  color: var(--muted);
  background: color-mix(in srgb, #c67668 10%, var(--panel));
  font-size: 12px;
  line-height: 1.32;
  font-weight: var(--type-weight-medium);
}

.diet-help-limits li::before {
  content: "";
  position: absolute;
  left: 11px;
  top: 15px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #c67668;
}

.diet-help-limits b {
  display: block;
  color: var(--text);
  font-size: 13px;
  line-height: 1.15;
}
.diet-help-caveats .diet-help-limits li {
  background: color-mix(in srgb, var(--panel) 84%, transparent);
}
.diet-help-dishes {
  display: grid;
  gap: 8px;
}

.diet-help-dishes .diet-dish {
  display: grid;
  gap: 3px;
  border-radius: 15px;
  padding: 10px;
  background: color-mix(in srgb, var(--panel) 84%, transparent);
}

.diet-help-dishes b {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px;
  color: var(--text);
  font-size: 13px;
  line-height: 1.15;
}
.diet-help-dishes i {
  border-radius: 999px;
  padding: 2px 7px;
  color: color-mix(in srgb, #c67668 58%, var(--text));
  background: color-mix(in srgb, #c67668 14%, var(--chip));
  font-size: 10px;
  font-weight: var(--type-weight-medium);
  font-style: normal;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.diet-help-dishes span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.32;
  font-weight: var(--type-weight-medium);
}
.diet-help-sources {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.diet-help-sources li {
  display: grid;
  gap: 2px;
  color: var(--muted);
  font-size: 11.5px;
  line-height: 1.36;
  font-weight: var(--type-weight-medium);
}

.diet-help-sources b {
  color: var(--text);
  font-size: 12.5px;
  line-height: 1.2;
  font-weight: var(--type-weight-strong);
}

.diet-help-sources a {
  color: var(--blue);
  text-decoration: none;
  word-break: break-word;
}

.diet-fold {
  border-radius: 16px;
  background: color-mix(in srgb, var(--panel) 84%, transparent);
}

.diet-fold + .diet-fold {
  margin-top: 6px;
}
.diet-help-rules + .diet-fold,
.diet-help-block > .diet-fold:first-of-type {
  margin-top: 10px;
}

.diet-fold-head {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 8px;
  align-items: center;
  width: 100%;
  min-height: 42px;
  border: 0;
  border-radius: 16px;
  padding: 0 12px;
  text-align: left;
  color: var(--text);
  background: transparent;
  cursor: pointer;
}

.diet-fold-head b {
  font-size: 13px;
  line-height: 1.2;
  font-weight: var(--type-weight-strong);
}
.diet-fold-count {
  border-radius: 999px;
  padding: 2px 8px;
  color: var(--muted);
  background: var(--chip);
  font-size: 11px;
  font-weight: var(--type-weight-strong);
}

.diet-fold-chevron {
  display: grid;
  place-items: center;
  color: var(--muted);
  transition: transform 180ms ease;
}

.diet-fold-chevron .app-icon {
  width: 16px;
  height: 16px;
}

.diet-fold.open .diet-fold-chevron {
  transform: rotate(180deg);
}

.diet-fold-body {
  padding: 2px 10px 10px;
}
.diet-settings-value {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: 42vw;
  color: var(--muted);
  font-size: 12.5px;
  font-weight: var(--type-weight-regular);
  text-align: right;
}

.diet-settings-value > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.diet-settings-more {
  flex: none;
  border-radius: 999px;
  padding: 1px 6px;
  color: var(--text);
  background: var(--chip);
  font-size: 11.5px;
  font-weight: var(--type-weight-medium);
}
.diet-settings-chevron {
  display: grid;
  place-items: center;
  transform: rotate(-90deg);
}

.diet-settings-chevron .app-icon {
  width: 14px;
  height: 14px;
}
.diet-help-sheet {
  overscroll-behavior-y: none;
}
.diet-food-groups {
  display: grid;
  gap: 14px;
}

.diet-food-group h4 {
  margin: 0 0 6px;
  color: var(--muted);
  font-size: 11px;
  font-weight: var(--type-weight-medium);
  letter-spacing: .12em;
  text-transform: uppercase;
}
.onb-layer {
  position: fixed;
  inset: var(--visual-offset-top, 0px) 0 auto 0;
  height: var(--visual-vh, 100dvh);
  z-index: 65;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  padding: max(10px, env(safe-area-inset-top)) 20px 0;
  background: var(--top);
  color: var(--text);
  overscroll-behavior-y: none;
  animation: notif-in 320ms cubic-bezier(0.32, 0.72, 0.28, 1) both;
}

.onb-head {
  flex: 0 0 auto;
  padding: 8px 0 12px;
}

.onb-title {
  margin: 0;
  font-size: 26px;
  line-height: 1.15;
  font-weight: var(--type-weight-medium);
  color: var(--text);
}

.onb-note {
  margin: 8px 0 0;
  font-size: 14px;
  line-height: 1.35;
  color: var(--muted);
}

.onb-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
}
.onb-foot {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 0 max(12px, env(safe-area-inset-bottom));
}

.onb-save {
  width: 100%;
  height: 66px;
  border: 0;
  border-radius: 999px;
  background: var(--text);
  color: var(--top);
  font-size: 18px;
  font-weight: var(--type-weight-medium);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.onb-save:disabled {
  opacity: 0.6;
  cursor: default;
}
.onb-skip {
  width: 100%;
  height: 48px;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--muted);
  font-size: 16px;
  font-weight: var(--type-weight-regular);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.onb-skip:disabled {
  opacity: 0.6;
  cursor: default;
}

.onb-lang,
.onb-consent {
  z-index: 66;
}
.onb-lang .onb-body {
  display: flex;
}
.onb-lang .onb-head {
  text-align: center;
}
.onb-lang-note-line {
  display: block;
}

.onb-lang-list {
  display: flex;
  gap: 20px;
  margin: auto;
}
.onb-lang-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: none;
  color: var(--text);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  opacity: 0.38;
  transition: opacity 220ms cubic-bezier(0.32, 0.72, 0.28, 1);
}
.onb-lang-card:focus-visible {
  outline: 3px solid var(--green2);
  outline-offset: 2px;
}

.onb-lang-card.is-picked {
  opacity: 1;
}
.onb-flag {
  display: block;
  flex: none;
  width: auto;
  height: min(180px, calc((100vw - 100px) / 2.8036));
  transform-origin: bottom center;
  transition: transform 220ms cubic-bezier(0.32, 0.72, 0.28, 1);
}
.onb-lang-card.is-picked .onb-flag {
  transform: scale(1.08);
}
.onb-lang-mark {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--green);
  color: #ffffff;
  opacity: 0;
  transition: opacity 220ms cubic-bezier(0.32, 0.72, 0.28, 1);
}

.onb-lang-card.is-picked .onb-lang-mark {
  opacity: 1;
}

.onb-lang-mark svg {
  width: 15px;
  height: 15px;
}
.onb-consent-art {
  display: flex;
  align-items: center;
  justify-content: center;
  height: min(180px, 26vh);
  padding: 4px 0 0;
}
.onb-consent-body {
  padding-bottom: 8px;
}

.onb-consent-foot {
  gap: 10px;
}

.onb-consent-art-svg {
  width: auto;
  height: 100%;
  max-width: 100%;
}
.onb-consent-title {
  margin: 4px 0 0;
  font-size: 30px;
  line-height: 1.12;
  font-weight: var(--type-weight-medium);
  color: var(--text);
  text-align: center;
  text-wrap: balance;
}

.onb-consent-points {
  display: grid;
  gap: 14px;
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
}

.onb-consent-point {
  display: flex;
  align-items: center;
  gap: 14px;
}
.onb-consent-point-icon {
  --stop-ink: #1c274c;
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
}

:root[data-theme='dark'] .onb-consent-point-icon {
  --stop-ink: #c8d2e8;
}
.onb-consent-point-icon svg {
  width: 44px;
  height: 44px;
}

.onb-consent-point-text {
  min-width: 0;
  font-size: 16px;
  line-height: 1.35;
  color: var(--text);
}

.onb-consent-links {
  margin: 22px 0 0;
  font-size: 14px;
  line-height: 1.4;
  color: var(--muted);
  text-align: center;
}
.onb-consent-link {
  padding: 0;
  border: 0;
  background: none;
  color: var(--text);
  font: inherit;
  font-weight: var(--type-weight-medium);
  text-decoration: underline;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.onb-consent-links-dot {
  margin: 0 8px;
  color: var(--faint);
}

.onb-consent-check {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 20px 0 4px;
  cursor: pointer;
}
.onb-consent-box {
  position: absolute;
  left: 0;
  top: 0;
  width: 34px;
  height: 34px;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.onb-consent-mark {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 2px solid var(--line);
  border-radius: 10px;
  color: #ffffff;
}

.onb-consent-mark svg {
  width: 22px;
  height: 22px;
  opacity: 0;
}

.onb-consent-box:checked + .onb-consent-mark {
  border-color: var(--green);
  background: var(--green);
}

.onb-consent-box:checked + .onb-consent-mark svg {
  opacity: 1;
}

.onb-consent-box:focus-visible + .onb-consent-mark {
  outline: 3px solid var(--green2);
  outline-offset: 2px;
}

.onb-consent-check-text {
  min-width: 0;
  font-size: 14px;
  line-height: 1.35;
  color: var(--text);
}
.onb-consent-error {
  margin: 0;
  font-size: 14px;
  line-height: 1.35;
  color: var(--pink);
  text-align: center;
}
.app-shell {
  min-height: 100vh;
  max-width: 480px;
  margin: 0 auto;
  padding: max(14px, calc(env(safe-area-inset-top) + 3px)) 16px calc(var(--nav-h) + env(safe-area-inset-bottom) + 10px);
  position: relative;
  isolation: isolate;
}
@media (max-width: 380px) {
  .app-shell {
    padding-left: 12px;
    padding-right: 12px;
  }
}
.app-shell {
  width: 100%;
  max-width: 440px;
  height: 100dvh;
  min-height: 100svh;
  margin: 0 auto;
  padding-bottom: 0;
  background: var(--bg);
  position: relative;
  overflow: hidden;
}
@media (min-width: 700px) {
  .app-shell,
  .bottom-nav,
  .selection-dock,
  .plate-view,
  .detail-view,
  .time-modal,
  .sheet {
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--text) 8%, transparent);
  }
}
.app-shell.design-total-shell {
  padding: 0;
  max-width: 440px;
  height: 100dvh;
  min-height: 100svh;
  overflow: hidden;
  background: var(--bg);
}
.app-shell.design-total-shell {
  width: 100vw;
  max-width: none;
  margin: 0;
}
.app-shell.design-total-shell {
  height: 100svh;
  min-height: 100svh;
  max-height: 100svh;
  position: relative;
}
.home-classic-shell {
  --classic-accent: #4f8d77;
  --classic-accent-soft: rgba(79, 141, 119, 0.14);
  background:
    radial-gradient(circle at 8% 8%, rgba(104, 180, 132, 0.18), transparent 32%),
    radial-gradient(circle at 94% 8%, rgba(93, 151, 255, 0.15), transparent 34%),
    var(--bg);
}
:root[data-theme='dark'] .home-classic-shell {
  --classic-accent: #6bbd9d;
  --classic-accent-soft: rgba(107, 189, 157, 0.16);
  background:
    radial-gradient(circle at 8% 8%, rgba(88, 184, 115, 0.12), transparent 34%),
    radial-gradient(circle at 94% 8%, rgba(93, 151, 255, 0.11), transparent 34%),
    var(--bg);
}
.add-flow-host {
  background: var(--bg);
}
.app-shell.design-total-shell,
.add-flow-layer.flow-shell,
.app-shell.flow-shell,
.flow-shell {
  height: 100% !important;
  min-height: 100% !important;
  max-height: 100% !important;
}
.home-classic-shell {
  --classic-accent: #466f63;
  --classic-accent-soft: rgba(70, 111, 99, .12);
  --classic-ink-soft: rgba(34, 36, 33, .68);
  --classic-hairline: rgba(44, 48, 45, .08);
}
:root[data-theme='dark'] .home-classic-shell {
  --classic-accent: #8ab8a5;
  --classic-accent-soft: rgba(138, 184, 165, .15);
  --classic-ink-soft: rgba(242, 242, 238, .66);
  --classic-hairline: rgba(255,255,255,.08);
}
.home-classic-shell,
.home-timeline-shell,
.search-view,
.product-detail-screen,
.meal-detail-view,
.meal-edit-view,
.day-detail-view,
.add-flow-layer.flow-shell > .add-screen.create-screen,
.add-flow-layer.flow-shell > .add-screen.portion-screen {
  background-color: var(--bg) !important;
  background-image: var(--comida-food-bg-tint), var(--comida-food-bg) !important;
  background-position: center center, center center !important;
  background-repeat: no-repeat, no-repeat !important;
  background-size: 100% 100%, 100% 100% !important;
}
.home-classic-shell,
.home-timeline-shell,
.search-view,
.product-detail-screen,
.meal-detail-view,
.meal-edit-view,
.day-detail-view,
.add-flow-layer.flow-shell > .add-screen.create-screen,
.add-flow-layer.flow-shell > .add-screen.portion-screen {
  background-image: none !important;
}
.home-classic-shell {
  --classic-accent: #C6F04F !important;
  --classic-accent-soft: rgba(198, 240, 79, .16) !important;
}
.app-shell {
  overscroll-behavior-y: none;
}
.bottom-nav {
  position: fixed;
  left: 50%;
  bottom: 0;
  z-index: 50;
  width: min(480px, 100vw);
  transform: translateX(-50%);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
  padding: 8px 8px max(8px, env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
  border-right: 1px solid var(--line);
  border-radius: 28px 28px 0 0;
  background: var(--nav);
  box-shadow: var(--shadow-strong);
  backdrop-filter: blur(26px) saturate(170%);
  -webkit-backdrop-filter: blur(26px) saturate(170%);
}
.nav-btn {
  min-width: 0;
  min-height: 58px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border-radius: 22px;
  background: transparent;
  color: var(--muted);
}
.nav-btn .nav-icon {
  width: 22px;
  height: 22px;
}
.nav-btn span {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  color: inherit;
  font-size: 10px;
  font-weight: var(--type-weight-strong);
  white-space: nowrap;
}
.nav-btn.active {
  color: var(--ink);
  background: var(--pill);
  box-shadow: var(--shadow);
}
:root[data-theme='dark'] .nav-btn.active {
  color: #000000;
  background: #ffffff;
}
.bottom-nav {
  position: fixed;
  z-index: 18;
  left: 50%;
  bottom: 0;
  width: min(440px, 100vw);
  height: 96px;
  transform: translateX(-50%);
  padding: 7px 14px var(--nav-bottom-pad);
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  align-items: end;
  color: var(--faint);
  background: var(--nav);
  border-top: 1px solid var(--line);
}
.bottom-nav::after {
  content: none;
}
.bottom-nav {
  height: 96px;
  padding: 7px 14px var(--nav-bottom-pad);
}
.design-total-shell .bottom-nav {
  width: 100vw;
  max-width: 440px;
}
.design-total-shell .top-card,
.design-total-shell .timeline,
.design-total-shell .bottom-nav,
.design-total-shell .search-dock,
.design-total-shell .selection-dock {
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  transform: none;
}
.design-total-shell .top-card,
.design-total-shell .timeline,
.design-total-shell .bottom-nav {
  width: 100vw;
  max-width: none;
}
.design-total-shell .bottom-nav {
  padding-left: 8px;
  padding-right: 8px;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr) 62px minmax(0,1fr) minmax(0,1fr);
}
.design-total-shell .bottom-nav {
  align-items: center;
}
.design-total-shell .bottom-nav {
  position: absolute;
  bottom: 0;
  height: 96px;
  align-items: end;
  padding: 7px 8px var(--nav-bottom-pad);
}
.bottom-nav,
.design-total-shell .bottom-nav {
  position: fixed;
  left: 50%;
  bottom: 0;
  z-index: 50;
  width: min(480px, 100vw);
  height: auto;
  transform: translateX(-50%);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: stretch;
  gap: 4px;
  padding: 8px 8px max(8px, env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
  border-right: 1px solid var(--line);
  border-radius: 28px 28px 0 0;
  background: var(--nav);
  box-shadow: var(--shadow-strong);
  backdrop-filter: blur(26px) saturate(170%);
  -webkit-backdrop-filter: blur(26px) saturate(170%);
}
.bottom-nav::after {
  content: none;
}
.nav-btn,
.design-total-shell .nav-btn {
  min-width: 0;
  min-height: 58px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border-radius: 22px;
  background: transparent;
  color: var(--muted);
}
.nav-btn .nav-icon,
.design-total-shell .nav-btn .nav-icon {
  width: 22px;
  height: 22px;
}
.nav-btn .nav-icon path,
.nav-btn .nav-icon circle,
.nav-btn .nav-icon rect,
.design-total-shell .nav-btn .nav-icon path,
.design-total-shell .nav-btn .nav-icon circle,
.design-total-shell .nav-btn .nav-icon rect {
  stroke: currentColor;
}
.nav-btn span,
.design-total-shell .nav-btn span {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  color: inherit;
  font-size: 10px;
  font-weight: var(--type-weight-strong);
  white-space: nowrap;
}
.nav-btn.active,
.design-total-shell .nav-btn.active {
  color: var(--ink);
  background: var(--pill);
  box-shadow: var(--shadow);
}
:root[data-theme='dark'] .nav-btn.active,
:root[data-theme='dark'] .design-total-shell .nav-btn.active {
  color: #000000;
  background: #ffffff;
}
.bottom-nav,
.design-total-shell .bottom-nav {
  position: fixed !important;
  left: 50% !important;
  bottom: 0 !important;
  z-index: 50 !important;
  width: min(480px, 100vw) !important;
  height: auto !important;
  transform: translateX(-50%) !important;
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  align-items: stretch !important;
  gap: 4px !important;
  padding: 8px 8px max(8px, env(safe-area-inset-bottom)) !important;
  border-top: 1px solid var(--line) !important;
  border-left: 1px solid var(--line) !important;
  border-right: 1px solid var(--line) !important;
  border-radius: 28px 28px 0 0 !important;
  background: var(--nav) !important;
  box-shadow: var(--shadow-strong) !important;
  backdrop-filter: blur(26px) saturate(170%) !important;
  -webkit-backdrop-filter: blur(26px) saturate(170%) !important;
}
.bottom-nav::after,
.design-total-shell .bottom-nav::after {
  content: none !important;
}
.nav-btn,
.design-total-shell .nav-btn {
  min-width: 0 !important;
  min-height: 58px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  border-radius: 22px !important;
  background: transparent !important;
  color: var(--muted) !important;
  transform: none !important;
}
.nav-btn .nav-icon,
.design-total-shell .nav-btn .nav-icon {
  width: 22px !important;
  height: 22px !important;
}
.nav-btn span,
.design-total-shell .nav-btn span {
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  color: inherit !important;
  font-size: 10px !important;
  font-weight: var(--type-weight-strong) !important;
  white-space: nowrap !important;
}
.nav-btn.active,
.design-total-shell .nav-btn.active {
  color: var(--ink) !important;
  background: var(--pill) !important;
  box-shadow: var(--shadow) !important;
}
:root[data-theme='dark'] .nav-btn.active,
:root[data-theme='dark'] .design-total-shell .nav-btn.active {
  color: #000000 !important;
  background: #ffffff !important;
}
.home-classic-shell .bottom-nav,
.home-classic-shell.design-total-shell .bottom-nav {
  transform: translateX(-50%) !important;
}
.bottom-nav,
.design-total-shell .bottom-nav {
  padding: 8px 8px 8px !important;
}
.design-total-shell .top-card,
.design-total-shell .timeline,
.design-total-shell .bottom-nav,
.design-total-shell .search-dock,
.design-total-shell .selection-dock {
  position: absolute !important;
}
.bottom-nav,
.design-total-shell .bottom-nav {
  bottom: 0 !important;
  padding: 8px 8px max(8px, env(safe-area-inset-bottom)) !important;
}
.bottom-nav,
.design-total-shell .bottom-nav,
.home-classic-shell .bottom-nav,
.home-classic-shell.design-total-shell .bottom-nav {
  position: fixed !important;
  bottom: 0 !important;
  transform: translateX(-50%) translateY(var(--bottom-viewport-shift, 0px)) !important;
}
.bottom-nav,
.design-total-shell .bottom-nav,
.home-classic-shell .bottom-nav,
.home-classic-shell.design-total-shell .bottom-nav {
  height: 78px !important;
  min-height: 78px !important;
  padding: 6px 8px 6px !important;
  align-items: center !important;
}
.nav-btn,
.design-total-shell .nav-btn {
  min-height: 58px !important;
}
.bottom-nav,
.design-total-shell .bottom-nav,
.home-classic-shell .bottom-nav,
.home-classic-shell.design-total-shell .bottom-nav {
  height: 64px !important;
  min-height: 64px !important;
  padding: 0 8px 0 !important;
  align-items: center !important;
  overflow: visible !important;
  border-radius: 24px 24px 0 0 !important;
  transform: translateX(-50%) translateY(calc(var(--bottom-viewport-shift, 0px) - 14px)) !important;
}
.nav-btn,
.design-total-shell .nav-btn {
  min-height: 54px !important;
  gap: 2px !important;
}
.bottom-nav,
.design-total-shell .bottom-nav,
.home-classic-shell .bottom-nav,
.home-classic-shell.design-total-shell .bottom-nav {
  position: fixed !important;
  left: 50% !important;
  bottom: 0 !important;
  width: min(480px, 100vw) !important;
  height: auto !important;
  min-height: 0 !important;
  transform: translateX(-50%) !important;
  padding: 7px 8px 0 !important;
  background: color-mix(in srgb, var(--nav) 96%, transparent) !important;
  border-radius: 24px 24px 0 0 !important;
  overflow: hidden !important;
}
.nav-btn,
.design-total-shell .nav-btn {
  min-height: 58px !important;
  transform: none !important;
}
.bottom-nav,
.design-total-shell .bottom-nav,
.home-classic-shell .bottom-nav,
.home-classic-shell.design-total-shell .bottom-nav {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  overflow: visible !important;
}
.bottom-nav::before,
.bottom-nav::after,
.design-total-shell .bottom-nav::before,
.design-total-shell .bottom-nav::after {
  content: none !important;
  display: none !important;
}
.nav-btn,
.design-total-shell .nav-btn {
  background: color-mix(in srgb, var(--nav) 86%, transparent) !important;
  border-radius: 20px !important;
}
.nav-btn.active,
.design-total-shell .nav-btn.active {
  background: var(--pill) !important;
  box-shadow: var(--shadow) !important;
}
.bottom-nav,
.design-total-shell .bottom-nav,
.home-classic-shell .bottom-nav,
.home-classic-shell.design-total-shell .bottom-nav {
  padding-bottom: max(8px, env(safe-area-inset-bottom)) !important;
  background: linear-gradient(to top, color-mix(in srgb, var(--nav) 92%, transparent) 0 22px, transparent 22px) !important;
}
.bottom-nav,
.design-total-shell .bottom-nav,
.home-classic-shell .bottom-nav,
.home-classic-shell.design-total-shell .bottom-nav {
  background: color-mix(in srgb, var(--nav) 96%, transparent) !important;
  box-shadow: 0 -12px 34px color-mix(in srgb, #000 8%, transparent) !important;
  backdrop-filter: blur(18px) saturate(150%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(150%) !important;
}
.home-classic-shell .nav-btn span,
.home-classic-shell.design-total-shell .nav-btn span {
  font-weight: var(--type-weight-medium) !important;
}
.home-classic-shell .classic-round,
.home-classic-shell .classic-date-chip,
.home-classic-shell .classic-day,
.home-classic-shell .classic-summary,
.home-classic-shell .classic-meal-card,
.home-classic-shell .nav-btn.active {
  background: var(--top) !important;
}
.home-classic-shell .nav-btn.active,
.home-classic-shell.design-total-shell .nav-btn.active,
:root[data-theme='dark'] .home-classic-shell .nav-btn.active,
:root[data-theme='dark'] .home-classic-shell.design-total-shell .nav-btn.active {
  color: #C6F04F !important;
  background: #0b0c0d !important;
  box-shadow:
    0 12px 26px rgba(0, 0, 0, .14),
    inset 0 1px 0 rgba(255, 255, 255, .07) !important;
}
.home-classic-shell .nav-btn.active .nav-icon,
.home-classic-shell.design-total-shell .nav-btn.active .nav-icon {
  color: #C6F04F !important;
}
.design-total-shell .bottom-nav .nav-btn.active,
:root[data-theme='dark'] .design-total-shell .bottom-nav .nav-btn.active,
.home-classic-shell .bottom-nav .nav-btn.active,
:root[data-theme='dark'] .home-classic-shell .bottom-nav .nav-btn.active {
  color: #C6F04F !important;
  background: #0b0c0d !important;
  box-shadow:
    0 12px 26px rgba(0, 0, 0, .14),
    inset 0 1px 0 rgba(255, 255, 255, .07) !important;
}
.design-total-shell .bottom-nav .nav-btn.active .nav-icon,
.design-total-shell .bottom-nav .nav-btn.active .nav-icon svg,
.home-classic-shell .bottom-nav .nav-btn.active .nav-icon,
.home-classic-shell .bottom-nav .nav-btn.active .nav-icon svg {
  color: #C6F04F !important;
  stroke: #C6F04F !important;
}
.design-total-shell .bottom-nav .nav-btn.active .nav-icon path,
.design-total-shell .bottom-nav .nav-btn.active .nav-icon circle,
.design-total-shell .bottom-nav .nav-btn.active .nav-icon rect,
.design-total-shell .bottom-nav .nav-btn.active .nav-icon line,
.design-total-shell .bottom-nav .nav-btn.active .nav-icon polyline,
.home-classic-shell .bottom-nav .nav-btn.active .nav-icon path,
.home-classic-shell .bottom-nav .nav-btn.active .nav-icon circle,
.home-classic-shell .bottom-nav .nav-btn.active .nav-icon rect,
.home-classic-shell .bottom-nav .nav-btn.active .nav-icon line,
.home-classic-shell .bottom-nav .nav-btn.active .nav-icon polyline {
  color: #C6F04F !important;
  stroke: #C6F04F !important;
}
.bottom-nav,
.design-total-shell .bottom-nav,
.home-classic-shell .bottom-nav,
.home-classic-shell.design-total-shell .bottom-nav {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.bottom-nav,
.design-total-shell .bottom-nav,
.home-classic-shell .bottom-nav,
.home-classic-shell.design-total-shell .bottom-nav {
  grid-template-columns: repeat(5, 1fr) !important;
  gap: 2px !important;
  padding: 6px 6px max(6px, env(safe-area-inset-bottom)) !important;
}

.nav-btn,
.design-total-shell .nav-btn {
  min-height: 48px !important;
  gap: 3px !important;
  border-radius: 18px !important;
}

.nav-btn .nav-icon,
.design-total-shell .nav-btn .nav-icon {
  width: 20px !important;
  height: 20px !important;
}
.nav-btn span,
.design-total-shell .nav-btn span {
  font-size: 9.5px !important;
  letter-spacing: -0.01em !important;
}
.bottom-nav[data-nav-count="4"],
.design-total-shell .bottom-nav[data-nav-count="4"],
.home-classic-shell .bottom-nav[data-nav-count="4"],
.home-classic-shell.design-total-shell .bottom-nav[data-nav-count="4"] {
  grid-template-columns: repeat(4, 1fr) !important;
}
.plus-burst {
  position: relative;
  color: transparent !important;
}

.plus-burst-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
.pb-ring {
  fill: none;
  stroke: var(--chip);
  stroke-width: 14.5;
  stroke-dasharray: 45.6;
  transform: rotate(-90deg);
  transform-box: view-box;
  transform-origin: center;
  animation: pb-ring 1650ms linear both;
}

@keyframes pb-ring {
  0% { stroke-dashoffset: 0; }
  17% { stroke-dashoffset: 45.6; }
  79% { stroke-dashoffset: 45.6; }
  100% { stroke-dashoffset: 0; }
}

.pb-cross {
  fill: none;
  stroke: var(--text);
  stroke-width: 2.2;
  stroke-linecap: round;
  transform-box: view-box;
  transform-origin: center;
  animation: pb-cross 1650ms both;
}
@keyframes pb-cross {
  0% { transform: rotate(0deg) scale(1); }
  17% { transform: rotate(-120deg) scale(0); }
  79% { transform: rotate(-120deg) scale(0); }
  100% { transform: rotate(0deg) scale(1); }
}

.pb-check {
  transform-box: view-box;
  transform-origin: center;
  transform: scale(0);
  animation: pb-check 1650ms both;
}

.pb-check circle {
  fill: #1f8f52;
}

@keyframes pb-check {
  0%, 15% { transform: scale(0); }
  26% { transform: scale(1.18); }
  31% { transform: scale(1.18); }
  36% { transform: scale(1.14, 0.9); }
  41% { transform: scale(0.94, 1.06); }
  45% { transform: scale(1); }
  68% { transform: scale(1); }
  72% { transform: scale(1.08); }
  81%, 100% { transform: scale(0); }
}

.pb-tick {
  fill: none;
  stroke: #fff;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 16;
  animation: pb-tick 1650ms cubic-bezier(0.65, 0, 0.45, 1) both;
}

@keyframes pb-tick {
  0%, 24% { stroke-dashoffset: 16; }
  40% { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: 0; }
}

.pb-drop {
  fill: #1f8f52;
  transform-box: view-box;
  transform-origin: center;
  opacity: 0;
  animation: pb-drop 1650ms cubic-bezier(0.123, 0.5, 0.5, 1) both;
}
@keyframes pb-drop {
  0%, 15% { transform: translate(0, 0) scale(0.6); opacity: 0; }
  19% { opacity: 1; }
  44% { opacity: 1; }
  58% {
    transform: rotate(var(--angle)) translateX(var(--dist)) rotate(calc(-1 * var(--angle))) scale(0.3);
    opacity: 0;
  }
  100% {
    transform: rotate(var(--angle)) translateX(var(--dist)) rotate(calc(-1 * var(--angle))) scale(0.3);
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pb-ring,
  .pb-cross,
  .pb-drop { animation: none; }
  .pb-cross { transform: rotate(0) scale(0); }
  .pb-check { animation: pb-check-fade 1650ms linear both; }
  .pb-tick { animation: none; stroke-dashoffset: 0; }

  @keyframes pb-check-fade {
    0% { transform: scale(1); opacity: 0; }
    12% { opacity: 1; }
    70% { opacity: 1; }
    100% { transform: scale(1); opacity: 0; }
  }
}
.add-flow-layer.flow-shell .search-view,
.add-flow-layer.flow-shell .modal-backdrop,
.add-flow-layer.flow-shell .confirm-scrim,
.add-flow-layer.flow-shell .confirm-sheet,
.add-flow-layer.flow-shell .timestamp-scrim,
.add-flow-layer.flow-shell .timestamp-sheet {
  pointer-events: auto;
}
.search-plate-pill.draft-hit {
  animation: plate-hit 420ms cubic-bezier(.18, .86, .14, 1);
}
.ingredient-row,
.food-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto auto;
  gap: 8px;
  align-items: center;
  padding: 11px 0;
  border-top: 1px solid var(--line);
}
.ingredient-row:first-child,
.food-row:first-child {
  border-top: 0;
}
.alphabet-letter {
  padding: 12px 0 4px;
  color: var(--ink);
  font-size: 12px;
  font-weight: var(--type-weight-strong);
  border-bottom: 1px solid var(--line);
}
.primary-pill:active:not(:disabled),
.secondary-pill:active:not(:disabled),
.tool-pill:active:not(:disabled),
.food-add:active:not(:disabled),
.draft-counter:active:not(:disabled) {
  transform: translateY(3px) scale(0.985);
  filter: saturate(1.08);
}
.category-form {
  padding: 0 16px 12px;
  display: grid;
  gap: 10px;
}
.favorite-chip {
  height: 36px;
  margin: 0 16px 12px;
  padding: 0 13px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: 999px;
  color: var(--muted);
  background: var(--card-soft);
  border: 1px solid var(--line);
  font-size: 12px;
  font-weight: var(--type-weight-strong);
}
.favorite-chip svg {
  width: 16px;
  height: 16px;
}
.favorite-chip.active {
  color: #1d1d1f;
  background: var(--amber);
  border-color: transparent;
}
.category-head {
  margin-bottom: 8px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
}
.category-head strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--ink);
  font-size: 14px;
  font-weight: var(--type-weight-strong);
  white-space: nowrap;
}
.category-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  padding-bottom: 12px;
}
.category-tile {
  min-height: 82px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 7px;
  border-radius: 20px;
  color: var(--ink);
  background: var(--card-soft);
  border: 1px solid var(--line);
  text-align: left;
}
.category-tile .category-icon {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  color: var(--green);
  background: color-mix(in srgb, var(--green) 14%, transparent);
  overflow: hidden;
}
.category-tile svg {
  width: 16px;
  height: 16px;
}
.category-tile strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 12px;
  line-height: 1.1;
  font-weight: var(--type-weight-strong);
  white-space: nowrap;
}
.category-tile small {
  color: var(--muted);
  font-size: 10px;
  font-weight: var(--type-weight-strong);
}
.category-icon img,
.food-avatar img,
.icon-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.library-grid .category-tile {
  position: relative;
  padding-right: 46px;
}
.category-plus {
  position: absolute;
  right: 10px;
  bottom: 10px;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  color: var(--bg);
  background: linear-gradient(135deg, var(--green2), var(--green));
  box-shadow: var(--shadow);
}
.category-plus svg {
  width: 17px;
  height: 17px;
}
.category-create-tile {
  width: 100%;
  min-height: 48px;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 18px;
  color: var(--ink);
  background: var(--card-soft);
  border: 1px dashed color-mix(in srgb, var(--green) 36%, var(--line));
  font-size: 13px;
  font-weight: var(--type-weight-strong);
}
.subcategory-strip {
  margin: 0 0 10px;
  display: flex;
  gap: 7px;
  overflow-x: auto;
  scrollbar-width: none;
}
.subcategory-strip::-webkit-scrollbar {
  display: none;
}
.subcategory-strip button {
  min-width: max-content;
  height: 32px;
  padding: 0 10px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 999px;
  color: var(--ink);
  background: var(--card-soft);
  border: 1px solid var(--line);
  font-size: 11px;
  font-weight: var(--type-weight-strong);
}
.subcategory-strip button.active {
  color: var(--bg);
  background: linear-gradient(135deg, var(--green2), var(--green));
  border-color: transparent;
  box-shadow: 0 10px 20px color-mix(in srgb, var(--green) 24%, transparent);
}
.subcategory-strip button small {
  min-width: 17px;
  height: 17px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  font-size: 9px;
  font-weight: var(--type-weight-strong);
  background: color-mix(in srgb, currentColor 10%, transparent);
}
.subcategory-strip svg,
.subcategory-strip img {
  width: 15px;
  height: 15px;
  border-radius: 5px;
}
.category-panel {
  width: 100%;
  max-width: 100%;
  display: grid;
  gap: 9px;
  padding: 1px 0 10px;
  overflow: hidden;
}
.category-panel.selected {
  padding-bottom: 8px;
}
.category-toolbar {
  width: 100%;
  max-width: 100%;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
}
.category-circle-btn,
.category-create-icon,
.category-card-arrow,
.category-plus {
  display: grid;
  place-items: center;
}
.category-circle-btn {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  color: var(--ink);
  background: var(--soft);
  border: 1px solid var(--line);
}
.category-circle-btn svg {
  width: 18px;
  height: 18px;
}
.category-toolbar-title {
  min-width: 0;
  display: grid;
  gap: 1px;
}
.category-toolbar-title span,
.category-section-title span {
  color: var(--muted);
  font-size: 9.5px;
  line-height: 1;
  font-weight: var(--type-weight-medium);
  text-transform: uppercase;
}
.category-toolbar-title strong {
  min-width: 0;
  overflow: hidden;
  color: var(--ink);
  font-size: 14px;
  line-height: 1.08;
  font-weight: var(--type-weight-strong);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.category-action-pill {
  max-width: 128px;
  height: 34px;
  padding: 0 10px;
  display: inline-grid;
  grid-auto-flow: column;
  grid-auto-columns: max-content;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border-radius: 999px;
  color: var(--ink);
  background: var(--soft);
  border: 1px solid var(--line);
  font-size: 10.5px;
  font-weight: var(--type-weight-strong);
}
.category-action-pill span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.category-action-pill svg {
  width: 15px;
  height: 15px;
}
.category-create-row {
  width: 100%;
  height: 42px;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  border-radius: 18px;
  color: var(--ink);
  background: var(--soft);
  border: 1px solid var(--line);
  font-size: 12.5px;
  font-weight: var(--type-weight-strong);
  text-align: left;
}
.category-create-icon {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  color: var(--bg);
  background: var(--ink);
}
.category-create-icon svg {
  width: 15px;
  height: 15px;
}
.category-section-title {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 3px 2px 0;
}
.category-section-title b {
  min-width: 23px;
  height: 20px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  color: var(--ink);
  background: var(--soft);
  font-size: 10px;
  line-height: 1;
  font-weight: var(--type-weight-strong);
}
.category-section-title.library-title {
  padding-top: 9px;
}
.category-list {
  width: 100%;
  max-width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 7px;
}
.category-card {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  min-height: 58px;
  display: grid;
  grid-template-columns: 43px minmax(0, 1fr) 28px;
  align-items: center;
  gap: 9px;
  padding: 7px 10px 7px 9px;
  border-radius: 18px;
  color: var(--ink);
  background: var(--card-soft);
  border: 1px solid var(--line);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.025);
  text-align: left;
  overflow: hidden;
}
.category-card.library-card {
  grid-template-columns: 43px minmax(0, 1fr) 34px;
}
.category-art {
  width: 40px;
  height: 40px;
  display: block;
  background-image: var(--light);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
:root[data-theme="dark"] .category-art {
  background-image: var(--dark);
}
.category-art-fallback {
  display: grid;
  place-items: center;
  border-radius: 14px;
  color: var(--green);
  background: color-mix(in srgb, var(--green) 12%, transparent);
}
.category-art-fallback svg,
.category-art-fallback img {
  width: 19px;
  height: 19px;
}
.category-art-fallback img {
  object-fit: contain;
}
.category-art-fallback.category-art-custom {
  overflow: visible;
  color: inherit;
  background: transparent;
  border-radius: 0;
}
.category-art-fallback.category-art-custom img {
  width: 37px;
  height: 37px;
  object-fit: contain;
}
.category-card-copy {
  min-width: 0;
  display: grid;
  gap: 3px;
}
.category-card-copy strong {
  min-width: 0;
  overflow: hidden;
  color: var(--ink);
  font-size: 12.8px;
  line-height: 1.12;
  font-weight: var(--type-weight-strong);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.category-card-copy small {
  color: var(--muted);
  font-size: 10.4px;
  line-height: 1;
  font-weight: var(--type-weight-strong);
}
.category-card-arrow {
  justify-self: end;
  width: 27px;
  height: 27px;
  border-radius: 999px;
  color: var(--muted);
  background: var(--soft);
}
.category-card-arrow svg {
  width: 15px;
  height: 15px;
}
.category-plus {
  justify-self: end;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  color: var(--bg);
  background: var(--ink);
}
.category-plus svg {
  width: 16px;
  height: 16px;
}
.subcategory-list {
  width: 100%;
  max-width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  overflow: hidden;
}
.subcategory-chip {
  max-width: 100%;
  min-width: 0;
  height: 35px;
  padding: 0 9px;
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px;
  border-radius: 999px;
  color: var(--ink);
  background: var(--card-soft);
  border: 1px solid var(--line);
  font-size: 11px;
  font-weight: var(--type-weight-strong);
}
.subcategory-chip.active {
  color: var(--bg);
  background: var(--ink);
  border-color: transparent;
}
.subcategory-chip-icon {
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  overflow: hidden;
}
.subcategory-chip-icon svg,
.subcategory-chip-icon img {
  width: 16px;
  height: 16px;
  object-fit: contain;
}
.subcategory-chip-title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.subcategory-chip small {
  min-width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  color: var(--muted);
  background: var(--soft);
  font-size: 9px;
  line-height: 1;
  font-weight: var(--type-weight-strong);
}
.subcategory-chip.active small {
  color: var(--ink);
  background: var(--bg);
}
.category-empty-line {
  width: 100%;
  min-height: 38px;
  display: grid;
  place-items: center start;
  padding: 0 12px;
  border-radius: 16px;
  color: var(--muted);
  background: var(--card-soft);
  border: 1px solid var(--line);
  font-size: 11.5px;
  font-weight: var(--type-weight-strong);
}
.category-products {
  min-width: 0;
}
.template-tab-panel .template-row {
  min-height: 76px;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  padding: 12px 10px 12px 14px;
  border: 0;
  border-radius: 16px;
  background: var(--card-soft);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 5%, transparent);
}
.search-empty.compact {
  min-height: 56px;
}
.food-row {
  grid-template-columns: 46px minmax(0, 1fr) auto;
  min-height: 62px;
}
.search-empty {
  min-height: 120px;
  display: grid;
  place-items: center;
  color: var(--muted);
  text-align: center;
  font-size: 12px;
  font-weight: var(--type-weight-strong);
}
.search-empty.error {
  color: var(--orange);
}
.search-dock::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -9px;
  width: min(440px, 100vw);
  height: 1px;
  transform: translateX(-50%);
  background: var(--line);
}
.search-view {
  position: fixed;
  z-index: 80;
  inset: 0;
  top: var(--visual-offset-top, 0px);
  bottom: auto;
  left: 50%;
  width: min(440px, 100vw);
  height: var(--visual-vh, 100dvh);
  min-height: var(--visual-vh, 100svh);
  max-height: var(--visual-vh, 100dvh);
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  color: var(--text);
  background: var(--bg);
  overflow: hidden;
  overscroll-behavior: contain;
  isolation: isolate;
  contain: layout paint style;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding-top: max(66px, calc(env(safe-area-inset-top) + 10px));
  user-select: none;
  -webkit-user-select: none;
  touch-action: pan-y;
}
.search-view input,
.search-view textarea,
.search-view [contenteditable="true"] {
  user-select: text;
  -webkit-user-select: text;
}
.search-view::-webkit-scrollbar {
  display: none;
}
.search-panel {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  border-radius: 18px 18px 0 0;
  background: var(--top);
  overflow: hidden;
  overscroll-behavior: contain;
  transform: translateZ(0);
  will-change: transform, opacity;
  padding-bottom: 0;
  transition: transform 820ms cubic-bezier(.18, .82, .16, 1), opacity 680ms ease;
}
.search-panel.panel-hidden {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: calc(100svh - 124px);
  transform: translateY(100%);
  opacity: 0;
  pointer-events: none;
}
.search-handle {
  width: 44px;
  height: 3px;
  border-radius: 999px;
  background: var(--line);
  display: block;
  margin: 7px auto 16px;
}
.search-tabs {
  --tab-index: 0;
  height: 48px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  align-items: start;
  overflow: hidden;
  padding: 0;
  position: relative;
}
.search-tabs::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 4px;
  background: var(--line);
}
.search-tabs::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 25%;
  height: 4px;
  background: var(--text);
  transform: translateX(calc(var(--tab-index) * 100%));
  transition: transform 560ms cubic-bezier(.2, .78, .18, 1);
  z-index: 2;
}
.search-tabs::-webkit-scrollbar {
  display: none;
}
.search-tabs button {
  height: 45px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  justify-content: center;
  position: relative;
  white-space: nowrap;
  color: var(--text);
  font-size: 13.5px;
  font-weight: var(--type-weight-medium);
  z-index: 1;
}
.search-tabs button.active::after {
  content: none;
}
.search-view .glass,
.search-tabs .glass {
  width: 18px;
  height: 18px;
  border: 3px solid currentColor;
  border-radius: 50%;
  position: relative;
  display: inline-block;
}
.search-view .glass::after,
.search-tabs .glass::after {
  content: "";
  width: 9px;
  height: 3px;
  border-radius: 3px;
  background: currentColor;
  position: absolute;
  right: -7px;
  bottom: -4px;
  transform: rotate(45deg);
}
.search-results {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding: 16px 0 82px;
}
.search-results::-webkit-scrollbar {
  display: none;
}
.search-results h2 {
  margin: 0 16px 9px;
  font-size: 17.5px;
  line-height: 1;
  font-weight: var(--type-weight-medium);
}
.product-row {
  min-height: 72px;
  display: grid;
  grid-template-columns: 47px 1fr 34px;
  gap: 10px;
  align-items: center;
  padding: 8px 16px;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
}
.food-art.product-icon,
.product-art {
  width: 39px;
  height: 39px;
  border-radius: 0;
  background-size: 54px 54px;
  background-position: center;
}
.product-art {
  display: block;
  background-image: var(--light);
  background-repeat: no-repeat;
}
.product-art > .product-art-image {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  color: transparent;
  pointer-events: none;
  user-select: none;
}
.product-art > .product-art-image.product-icon-image-failed {
  display: none;
}
.product-art.product-icon-load-failed {
  background-image: url('/assets/product-light-01.png');
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}
:root[data-theme='dark'] .product-art.product-icon-load-failed {
  background-image: url('/assets/product-dark-01.png');
}
:root[data-theme='dark'] .product-art {
  background-image: var(--dark);
}
.product-copy {
  min-width: 0;
  display: grid;
  gap: 3px;
}
.product-copy strong {
  color: var(--text);
  font-size: 15.6px;
  line-height: 1.08;
  font-weight: var(--type-weight-medium);
}
.product-copy span,
.product-copy small {
  color: var(--muted);
  font-size: 13.2px;
  line-height: 1.05;
}
.product-copy span {
  display: flex;
  align-items: center;
}
.product-plus {
  width: 29px;
  height: 29px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--text);
  background: var(--chip);
  font-size: 20px;
  line-height: 1;
}
.search-bottom {
  position: absolute;
  z-index: 82;
  left: 0;
  bottom: 0;
  width: 100%;
  transform: none;
  display: grid;
  grid-template-columns: 1fr 108px;
  gap: 8px;
  padding: 8px 16px max(16px, env(safe-area-inset-bottom));
  background: linear-gradient(to top, var(--top) 76%, color-mix(in srgb, var(--top) 0%, transparent));
}
.search-bottom-input {
  height: 45px;
  border-radius: 24px;
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 12px;
  align-items: center;
  justify-items: start;
  padding: 0 15px;
  color: var(--muted);
  background: var(--chip);
  font-size: 14.5px;
}
:where(button, .product-row, .edit-item, .sheet-row, .plate-item) {
  background-image: radial-gradient(circle at var(--press-x, 50%) var(--press-y, 50%), var(--press-fill) 0%, var(--press-fill) 46%, transparent 47%);
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: 0 0;
  transition-property: background-size, transform, filter, color, background-color, border-color;
  transition-duration: 720ms, 520ms, 260ms, 260ms, 260ms, 260ms;
  transition-timing-function: cubic-bezier(.16, .82, .18, 1);
  background-origin: border-box;
}
:where(button, .product-row, .edit-item, .sheet-row, .plate-item).is-pressing {
  background-size: 260% 260%;
  transition-duration: 860ms, 520ms, 260ms, 260ms, 260ms, 260ms;
}
.product-row:has(button.is-pressing),
.product-row:has(button:active) {
  background-size: 0 0;
}
.search-panel {
  transition: transform 820ms cubic-bezier(.18, .82, .16, 1), opacity 680ms ease;
}
.search-dock {
  bottom: var(--search-dock-bottom);
}
.flow-shell .add-screen-head h1,
.flow-shell .product-title,
.flow-shell .section-title {
  color: var(--text);
}
.flow-shell .round-btn,
.flow-shell .draft-counter,
.flow-shell .tool-pill,
.flow-shell .search-box,
.flow-shell .datetime-row label,
.flow-shell .field,
.flow-shell .modal-tabs,
.flow-shell .category-tile,
.flow-shell .template-row,
.flow-shell .ai-card,
.flow-shell .ai-draft-card,
.flow-shell .source-card,
.flow-shell .product-body .favorite-chip {
  background: var(--panel);
  color: var(--text);
  border-color: var(--line);
  box-shadow: none;
}
.flow-shell .food-list,
.flow-shell .flow-food-list.food-list {
  scrollbar-width: none;
}
.flow-shell .food-list::-webkit-scrollbar,
.flow-shell .flow-food-list.food-list::-webkit-scrollbar {
  display: none;
}
.flow-shell .food-row.db-food-row {
  min-height: 74px;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto auto;
  gap: 9px;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  border-radius: 0;
  box-shadow: none;
}
.flow-shell .food-avatar {
  width: 45px;
  height: 45px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--chip);
}
.flow-shell .food-avatar .product-art,
.flow-shell .food-avatar img {
  width: 42px;
  height: 42px;
  background-size: 56px 56px;
}
.flow-shell .food-main strong {
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--text);
  font-size: 16.2px;
  line-height: 1.08;
  font-weight: var(--type-weight-strong);
}
.flow-shell .food-brand,
.flow-shell .food-desc,
.flow-shell .food-meta {
  color: var(--muted);
  font-size: 12.8px;
  line-height: 1.15;
}
.flow-shell .food-desc {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 2px;
}
.flow-shell .food-desc i {
  width: 14px;
  height: 14px;
  color: var(--muted);
}
.flow-shell .verified-check {
  transform: scale(.82);
  transform-origin: center;
}
.flow-shell .food-add {
  width: 38px;
  height: 38px;
}
.design-total-shell .search-dock::after {
  left: 0;
  right: 0;
  margin: 0 auto;
  transform: none;
}
.add-screen-head {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) 42px;
  align-items: center;
  gap: 12px;
  padding: 2px 0 12px;
}
.add-screen-head h1 {
  margin: 4px 0 0;
  color: var(--ink);
  font-size: 26px;
  line-height: 0.98;
  font-weight: var(--type-weight-strong);
  letter-spacing: -0.03em;
}
.add-screen-footer {
  position: fixed;
  z-index: 60;
  left: 50%;
  bottom: max(18px, calc(env(safe-area-inset-bottom) + 10px));
  width: min(454px, calc(100vw - 28px));
  transform: translateX(-50%);
  padding: 0;
}
.add-screen-footer .primary-pill {
  width: 100%;
  height: 58px;
  font-size: 15.5px;
}
.add-screen-footer .secondary-pill {
  width: 100%;
  height: 58px;
  font-size: 15.5px;
}
.search-view {
  min-height: calc(100dvh - env(safe-area-inset-top, 0px));
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  gap: 12px;
}
.search-flow-head,
.add-screen-head {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) 52px;
  align-items: center;
  gap: 12px;
}
.search-flow-head h1,
.add-screen-head h1 {
  margin: 0;
  font-size: clamp(30px, 7.3vw, 42px);
  line-height: .92;
  letter-spacing: 0;
}
.search-flow-bottom .done-pill,
.add-screen-footer .primary-pill {
  min-height: 62px;
  border-radius: 32px;
  font-size: 20px;
  box-shadow: 0 16px 28px color-mix(in srgb, #000 24%, transparent), inset 0 1px 0 rgba(255,255,255,.26);
  transform: translateY(0);
  transition: transform .12s ease, filter .12s ease;
}
.search-flow-bottom .done-pill:active,
.add-screen-footer .primary-pill:active {
  transform: translateY(2px) scale(.99);
  filter: brightness(.94);
}
.food-row.db-food-row {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) auto auto;
  gap: 10px;
  align-items: center;
  padding: 12px 0;
}
.food-row .food-main strong {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  font-size: 18px;
  line-height: 1.06;
  font-weight: var(--type-weight-strong);
}
.food-row .title-text {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}
.food-row .food-desc,
.food-row .food-meta,
.food-row .food-brand {
  font-size: 13px;
}
.flow-shell .search-view {
  position: fixed;
  z-index: 80;
  inset: 0;
  top: var(--visual-offset-top, 0px);
  bottom: auto;
  left: 50%;
  width: min(440px, 100vw);
  height: var(--visual-vh, 100dvh);
  min-height: var(--visual-vh, 100svh);
  max-height: var(--visual-vh, 100dvh);
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  color: var(--text);
  background: var(--bg);
  overflow: hidden;
  overscroll-behavior: contain;
  isolation: isolate;
  contain: layout paint style;
  padding-top: max(66px, calc(env(safe-area-inset-top) + 10px));
  user-select: none;
  -webkit-user-select: none;
}
.flow-shell .search-results {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 18px 0 92px;
  scrollbar-width: none;
}
.flow-shell .search-results::-webkit-scrollbar {
  display: none;
}
.flow-shell .product-row {
  min-height: 88px;
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr) 42px;
  gap: 10px;
  align-items: center;
  padding: 10px 18px;
  border-bottom: 1px solid var(--line);
  background: transparent;
}
.flow-shell .product-row > .product-art,
.flow-shell .product-row > .food-art {
  justify-self: center;
  width: 46px;
  height: 46px;
  background-size: 58px 58px;
}
.flow-shell .product-copy strong {
  display: block;
  font-size: 20px;
  line-height: 1.08;
  font-weight: var(--type-weight-medium);
}
.flow-shell .product-copy span,
.flow-shell .product-copy small {
  display: flex;
  align-items: center;
  gap: 3px;
  margin-top: 5px;
  color: var(--muted);
  font-size: 15.5px;
  line-height: 1.08;
}
.flow-shell .product-plus {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--text);
  background: var(--chip);
  font-size: 24px;
  line-height: 1;
}
.search-bottom-input input,
.amount-input input {
  min-width: 0;
  width: 100%;
  border: 0;
  outline: 0;
  color: inherit;
  background: transparent;
  font: inherit;
}
.sr-portion {
  display: none;
}
.search-log-button.disabled,
.floating-log.disabled {
  opacity: 0.45;
}
.design-total-shell .search-dock {
  animation: none !important;
}
.flow-shell .product-row {
  min-height: 72px;
  grid-template-columns: 47px minmax(0, 1fr) 34px;
  gap: 10px;
  padding: 8px 16px;
}
.flow-shell .product-row > .product-art,
.flow-shell .product-row > .food-art {
  width: 39px;
  height: 39px;
  background-size: 54px 54px;
}
.flow-shell .product-copy {
  gap: 3px;
}
.flow-shell .product-copy strong {
  font-size: 15.6px;
  line-height: 1.08;
  font-weight: var(--type-weight-medium);
}
.flow-shell .product-copy span,
.flow-shell .product-copy small {
  margin-top: 0;
  font-size: 13.2px;
  line-height: 1.05;
}
.flow-shell .product-plus {
  width: 29px;
  height: 29px;
  font-size: 20px;
}
.search-tabs button .tab-icon {
  width: 17px;
  height: 17px;
  flex: 0 0 17px;
  stroke-width: 2.15;
}
.flow-shell .search-view {
  --flow-body-top: max(121px, calc(env(safe-area-inset-top) + 65px));
}
.flow-shell .search-plate-pill {
  min-width: 0;
  height: 38px;
  contain: layout paint;
}
.flow-shell .search-plate-pill.has-items {
  grid-template-columns: repeat(3, 21px) 24px;
  gap: 3px;
  justify-content: center;
  align-items: center;
}
.flow-shell .search-plate-pill b {
  width: 24px;
  max-width: 24px;
  min-width: 24px;
  font-size: 12px;
  overflow: hidden;
}
.flow-shell .search-plate-pill b.empty {
  visibility: hidden;
}
.flow-shell .search-arrow {
  transition: transform 900ms cubic-bezier(.18, .82, .16, 1), background-color 520ms ease;
}
.flow-shell .search-panel,
.flow-shell .added-plate-panel {
  position: absolute;
  left: 0;
  right: 0;
  top: var(--flow-body-top);
  bottom: 0;
  min-height: 0;
  will-change: transform, opacity;
  backface-visibility: hidden;
}
.flow-shell .search-panel {
  transition: transform 920ms cubic-bezier(.18, .82, .16, 1), opacity 760ms ease;
}
.flow-shell .search-panel.panel-hidden {
  height: auto;
  top: var(--flow-body-top);
  bottom: 0;
  transform: translateY(104%);
  opacity: 0;
  pointer-events: none;
}
.flow-shell .search-bottom {
  transition: transform 720ms cubic-bezier(.18, .82, .16, 1), opacity 560ms ease;
}
.flow-shell .search-bottom.bottom-hidden {
  transform: translateY(125%);
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
}
.flow-shell .verified-check {
  display: none !important;
}
.flow-shell .product-row {
  min-height: 86px;
  grid-template-columns: 66px minmax(0, 1fr) 38px;
  gap: 10px;
  padding: 11px 18px;
}
.flow-shell .product-row > .product-art,
.flow-shell .product-row > .food-art {
  width: 48px;
  height: 48px;
  background-size: 62px 62px;
  border: 0;
  border-radius: 0;
  background-color: transparent;
  box-shadow: none;
}
.flow-shell .product-copy strong {
  font-size: 18px;
  line-height: 1.08;
  font-weight: var(--type-weight-medium);
}
.flow-shell .product-copy span,
.flow-shell .product-copy small {
  font-size: 14.4px;
  line-height: 1.08;
}
.flow-shell .product-plus {
  width: 31px;
  height: 31px;
  font-size: 22px;
}
.flow-shell .search-view.add-flow-screen.flow-entering {
  animation: add-flow-in-right 340ms cubic-bezier(.2, .86, .18, 1) both;
}
.flow-shell .search-view.add-flow-screen.flow-closing {
  animation: add-flow-out-right 320ms cubic-bezier(.32, .72, .28, 1) both !important;
  pointer-events: none;
}
.product-art.beverage-icon,
.food-art.beverage-icon,
.product-art.fresh-fruit-icon,
.food-art.fresh-fruit-icon,
.product-art.vegetable-leaf-icon,
.food-art.vegetable-leaf-icon,
.product-art.tuber-icon,
.food-art.tuber-icon,
.product-art.dairy-cream-icon,
.food-art.dairy-cream-icon,
.product-art.egg-cheese-icon,
.food-art.egg-cheese-icon,
.product-art.chicken-icon,
.food-art.chicken-icon,
.product-art.meat-icon,
.food-art.meat-icon,
.product-art.rice-bean-icon,
.food-art.rice-bean-icon,
.product-art.nut-seed-icon,
.food-art.nut-seed-icon,
.product-art.grain-bakery-icon,
.food-art.grain-bakery-icon,
.product-art.oat-cereal-icon,
.food-art.oat-cereal-icon,
.product-art.seafood-icon,
.food-art.seafood-icon,
.product-art.sweet-snack-icon,
.food-art.sweet-snack-icon {
  border: 0;
  border-radius: 0;
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain !important;
  box-shadow: none;
}
.flow-shell .product-row > .product-art.beverage-icon,
.flow-shell .product-row > .food-art.beverage-icon,
.flow-shell .product-row > .product-art.fresh-fruit-icon,
.flow-shell .product-row > .food-art.fresh-fruit-icon,
.flow-shell .product-row > .product-art.vegetable-leaf-icon,
.flow-shell .product-row > .food-art.vegetable-leaf-icon,
.flow-shell .product-row > .product-art.tuber-icon,
.flow-shell .product-row > .food-art.tuber-icon,
.flow-shell .product-row > .product-art.dairy-cream-icon,
.flow-shell .product-row > .food-art.dairy-cream-icon,
.flow-shell .product-row > .product-art.egg-cheese-icon,
.flow-shell .product-row > .food-art.egg-cheese-icon,
.flow-shell .product-row > .product-art.chicken-icon,
.flow-shell .product-row > .food-art.chicken-icon,
.flow-shell .product-row > .product-art.meat-icon,
.flow-shell .product-row > .food-art.meat-icon,
.flow-shell .product-row > .product-art.rice-bean-icon,
.flow-shell .product-row > .food-art.rice-bean-icon,
.flow-shell .product-row > .product-art.nut-seed-icon,
.flow-shell .product-row > .food-art.nut-seed-icon,
.flow-shell .product-row > .product-art.grain-bakery-icon,
.flow-shell .product-row > .food-art.grain-bakery-icon,
.flow-shell .product-row > .product-art.oat-cereal-icon,
.flow-shell .product-row > .food-art.oat-cereal-icon,
.flow-shell .product-row > .product-art.seafood-icon,
.flow-shell .product-row > .food-art.seafood-icon,
.flow-shell .product-row > .product-art.sweet-snack-icon,
.flow-shell .product-row > .food-art.sweet-snack-icon {
  background-size: 48px 48px !important;
}
.flow-shell .product-row {
  grid-template-columns: 60px minmax(0, 1fr) 36px;
}
.flow-shell .product-row > .product-art,
.flow-shell .product-row > .food-art {
  width: 44px;
  height: 44px;
  background-size: 56px 56px;
}
.flow-shell .product-copy strong {
  font-size: 17.2px;
}
.flow-shell .product-copy span,
.flow-shell .product-copy small {
  font-size: 13.7px;
}
.flow-shell .product-plus {
  width: 29px;
  height: 29px;
  font-size: 20px;
}
.flow-shell .search-plate-pill.has-items {
  grid-template-columns: repeat(3, 22px) 24px;
  gap: 4px;
}
.flow-shell .product-row > .product-art.beverage-icon,
.flow-shell .product-row > .food-art.beverage-icon,
.flow-shell .product-row > .product-art.fresh-fruit-icon,
.flow-shell .product-row > .food-art.fresh-fruit-icon,
.flow-shell .product-row > .product-art.vegetable-leaf-icon,
.flow-shell .product-row > .food-art.vegetable-leaf-icon,
.flow-shell .product-row > .product-art.tuber-icon,
.flow-shell .product-row > .food-art.tuber-icon,
.flow-shell .product-row > .product-art.dairy-cream-icon,
.flow-shell .product-row > .food-art.dairy-cream-icon,
.flow-shell .product-row > .product-art.egg-cheese-icon,
.flow-shell .product-row > .food-art.egg-cheese-icon,
.flow-shell .product-row > .product-art.chicken-icon,
.flow-shell .product-row > .food-art.chicken-icon,
.flow-shell .product-row > .product-art.meat-icon,
.flow-shell .product-row > .food-art.meat-icon,
.flow-shell .product-row > .product-art.rice-bean-icon,
.flow-shell .product-row > .food-art.rice-bean-icon,
.flow-shell .product-row > .product-art.nut-seed-icon,
.flow-shell .product-row > .food-art.nut-seed-icon,
.flow-shell .product-row > .product-art.grain-bakery-icon,
.flow-shell .product-row > .food-art.grain-bakery-icon,
.flow-shell .product-row > .product-art.oat-cereal-icon,
.flow-shell .product-row > .food-art.oat-cereal-icon,
.flow-shell .product-row > .product-art.seafood-icon,
.flow-shell .product-row > .food-art.seafood-icon,
.flow-shell .product-row > .product-art.sweet-snack-icon,
.flow-shell .product-row > .food-art.sweet-snack-icon {
  background-size: 44px 44px !important;
}
.product-art.ready-meal-icon,
.food-art.ready-meal-icon,
.product-art.cake-icon,
.food-art.cake-icon,
.product-art.tort-icon,
.food-art.tort-icon {
  border: 0;
  border-radius: 0;
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain !important;
  box-shadow: none;
}
.flow-shell .product-row > .product-art.ready-meal-icon,
.flow-shell .product-row > .food-art.ready-meal-icon,
.flow-shell .product-row > .product-art.cake-icon,
.flow-shell .product-row > .food-art.cake-icon,
.flow-shell .product-row > .product-art.tort-icon,
.flow-shell .product-row > .food-art.tort-icon {
  background-size: 44px 44px !important;
}
.product-art.oil-sauce-icon,
.food-art.oil-sauce-icon {
  border: 0;
  border-radius: 0;
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain !important;
  box-shadow: none;
}
.flow-shell .product-row > .product-art.oil-sauce-icon,
.flow-shell .product-row > .food-art.oil-sauce-icon {
  background-size: 44px 44px !important;
}
.flow-shell .search-tabs {
  height: 46px;
}
.flow-shell .search-tabs button {
  height: 43px;
  font-size: 13px;
  font-weight: var(--type-weight-medium);
}
.flow-shell .search-results {
  padding-top: 14px;
}
.flow-shell .search-results h2 {
  font-size: 16.5px;
  margin-bottom: 8px;
}
.flow-shell .product-row {
  min-height: 72px;
  grid-template-columns: 50px minmax(0, 1fr) 32px;
  gap: 8px;
  padding: 8px 16px;
}
.flow-shell .product-row > .product-art,
.flow-shell .product-row > .food-art {
  width: 38px;
  height: 38px;
  background-size: 47px 47px;
}
.flow-shell .product-copy strong {
  font-size: 15.2px;
  line-height: 1.08;
  font-weight: var(--type-weight-medium);
}
.flow-shell .product-copy span,
.flow-shell .product-copy small {
  font-size: 12.2px;
  line-height: 1.06;
}
.flow-shell .product-plus {
  width: 27px;
  height: 27px;
  font-size: 18px;
}
.flow-shell .category-tile {
  min-height: 112px;
  padding: 12px;
}
.flow-shell .search-tabs {
  grid-template-columns: repeat(var(--tab-count, 4), calc(100% / var(--visible-tab-count, var(--tab-count, 4))));
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}
.flow-shell .search-tabs::before {
  width: calc(100% / var(--visible-tab-count, var(--tab-count, 4)));
}
.flow-shell .search-tabs::after {
  right: auto;
  width: calc(100% * var(--tab-count, 4) / var(--visible-tab-count, var(--tab-count, 4)));
}
.flow-shell .search-tabs button {
  scroll-snap-align: start;
  min-width: 0;
}
.flow-shell .ai-tab-results {
  padding: 0 16px 96px;
}
.add-ai-plate h2,
.add-ai-nutrition h2 {
  margin: 0;
  font-size: 18px;
  line-height: 1.05;
  font-weight: var(--type-weight-strong);
}
.flow-shell .category-tile .category-icon {
  width: 40px;
  height: 40px;
}
.flow-shell .category-icon img,
.flow-shell .category-icon svg {
  width: 28px;
  height: 28px;
}
.flow-shell .category-tile strong {
  font-size: 14px;
  line-height: 1.08;
}
.flow-shell .category-tile small {
  font-size: 11.4px;
}
.flow-shell .subcategory-chip {
  min-height: 52px;
  padding: 7px 8px;
}
.flow-shell .subcategory-chip-icon {
  width: 32px;
  height: 32px;
}
.flow-shell .subcategory-chip-icon img,
.flow-shell .subcategory-chip-icon svg {
  width: 24px;
  height: 24px;
}
.flow-shell .subcategory-chip-title {
  font-size: 13px;
  line-height: 1.08;
}
.flow-shell .subcategory-chip small {
  font-size: 11px;
}
.flow-shell .product-row > .product-art.beverage-icon,
.flow-shell .product-row > .food-art.beverage-icon,
.flow-shell .product-row > .product-art.fresh-fruit-icon,
.flow-shell .product-row > .food-art.fresh-fruit-icon,
.flow-shell .product-row > .product-art.vegetable-leaf-icon,
.flow-shell .product-row > .food-art.vegetable-leaf-icon,
.flow-shell .product-row > .product-art.tuber-icon,
.flow-shell .product-row > .food-art.tuber-icon,
.flow-shell .product-row > .product-art.dairy-cream-icon,
.flow-shell .product-row > .food-art.dairy-cream-icon,
.flow-shell .product-row > .product-art.egg-cheese-icon,
.flow-shell .product-row > .food-art.egg-cheese-icon,
.flow-shell .product-row > .product-art.chicken-icon,
.flow-shell .product-row > .food-art.chicken-icon,
.flow-shell .product-row > .product-art.meat-icon,
.flow-shell .product-row > .food-art.meat-icon,
.flow-shell .product-row > .product-art.rice-bean-icon,
.flow-shell .product-row > .food-art.rice-bean-icon,
.flow-shell .product-row > .product-art.nut-seed-icon,
.flow-shell .product-row > .food-art.nut-seed-icon,
.flow-shell .product-row > .product-art.grain-bakery-icon,
.flow-shell .product-row > .food-art.grain-bakery-icon,
.flow-shell .product-row > .product-art.oat-cereal-icon,
.flow-shell .product-row > .food-art.oat-cereal-icon,
.flow-shell .product-row > .product-art.seafood-icon,
.flow-shell .product-row > .food-art.seafood-icon,
.flow-shell .product-row > .product-art.sweet-snack-icon,
.flow-shell .product-row > .food-art.sweet-snack-icon,
.flow-shell .product-row > .product-art.ready-meal-icon,
.flow-shell .product-row > .food-art.ready-meal-icon,
.flow-shell .product-row > .product-art.cake-icon,
.flow-shell .product-row > .food-art.cake-icon,
.flow-shell .product-row > .product-art.oil-sauce-icon,
.flow-shell .product-row > .food-art.oil-sauce-icon {
  background-size: 38px 38px !important;
}
.flow-shell .alphabet-letter {
  width: auto;
  min-width: 24px;
  margin: 8px 16px 2px;
  padding: 0 0 4px;
  color: var(--muted);
  font-size: 11px;
  font-weight: var(--type-weight-medium);
  line-height: 1;
  border-bottom: 1px solid var(--line);
  text-align: left;
}
.flow-shell .subcategory-list,
.subcategory-list {
  width: calc(100% + 40px);
  max-width: calc(100% + 40px);
  margin: 0 -20px;
  padding: 2px 20px 5px;
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
}
.flow-shell .subcategory-list::-webkit-scrollbar,
.subcategory-list::-webkit-scrollbar {
  display: none;
}
.flow-shell .subcategory-chip,
.subcategory-chip {
  position: relative;
  flex: 0 0 auto;
  width: auto;
  max-width: min(214px, 74vw);
  min-width: 0;
  height: 38px;
  min-height: 38px;
  padding: 0 9px 0 8px;
  display: grid;
  grid-template-columns: 24px minmax(0, auto) 20px;
  align-items: center;
  gap: 7px;
  scroll-snap-align: start;
  border-radius: 999px;
  color: var(--ink);
  background: color-mix(in srgb, var(--card-soft) 74%, var(--soft));
  border: 1px solid color-mix(in srgb, var(--line) 82%, transparent);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #ffffff 22%, transparent),
    0 5px 14px rgba(0, 0, 0, 0.035);
  font-size: 11.2px;
  font-weight: var(--type-weight-strong);
  letter-spacing: 0;
  isolation: isolate;
  overflow: hidden;
  transform: translateZ(0);
  transition:
    background-color 260ms ease,
    border-color 260ms ease,
    color 260ms ease,
    box-shadow 260ms ease,
    transform 220ms ease;
}
.flow-shell .subcategory-chip::before,
.subcategory-chip::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  opacity: 0;
  background:
    radial-gradient(
      circle at 32% 50%,
      color-mix(in srgb, var(--ink) 10%, transparent) 0%,
      color-mix(in srgb, var(--ink) 5%, transparent) 42%,
      transparent 72%
    );
  transform: scaleX(0.56);
  transition: opacity 300ms ease, transform 300ms ease;
}
.flow-shell .subcategory-chip:active,
.subcategory-chip:active {
  transform: scale(0.985) translateZ(0);
}
.flow-shell .subcategory-chip:active::before,
.subcategory-chip:active::before {
  opacity: 1;
  transform: scaleX(1);
}
.flow-shell .subcategory-chip.active,
.subcategory-chip.active {
  color: #ffffff;
  background: #050506;
  border-color: #050506;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 8px 18px rgba(0, 0, 0, 0.12);
}
:root[data-theme="dark"] .flow-shell .subcategory-chip,
:root[data-theme="dark"] .subcategory-chip {
  background: rgba(255, 255, 255, 0.075);
  border-color: rgba(255, 255, 255, 0.095);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
}
:root[data-theme="dark"] .flow-shell .subcategory-chip.active,
:root[data-theme="dark"] .subcategory-chip.active {
  color: #0b0b0d;
  background: rgba(255, 255, 255, 0.92);
  border-color: transparent;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.42),
    0 9px 20px rgba(0, 0, 0, 0.26);
}
.flow-shell .subcategory-chip-icon,
.subcategory-chip-icon {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 999px;
  color: currentColor;
  background: color-mix(in srgb, var(--bg) 64%, var(--card-soft));
  border: 1px solid color-mix(in srgb, var(--line) 72%, transparent);
}
.flow-shell .subcategory-chip.active .subcategory-chip-icon,
.subcategory-chip.active .subcategory-chip-icon {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.18);
}
:root[data-theme="dark"] .flow-shell .subcategory-chip.active .subcategory-chip-icon,
:root[data-theme="dark"] .subcategory-chip.active .subcategory-chip-icon {
  background: rgba(0, 0, 0, 0.08);
  border-color: rgba(0, 0, 0, 0.08);
}
.flow-shell .subcategory-chip-icon img,
.flow-shell .subcategory-chip-icon svg,
.subcategory-chip-icon img,
.subcategory-chip-icon svg {
  width: 15px;
  height: 15px;
  object-fit: contain;
  border-radius: 0;
}
.flow-shell .subcategory-chip-title,
.subcategory-chip-title {
  min-width: 0;
  max-width: 142px;
  overflow: hidden;
  color: currentColor;
  font-size: 11.3px;
  font-weight: var(--type-weight-strong);
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.flow-shell .subcategory-chip small,
.subcategory-chip small {
  min-width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  color: var(--muted);
  background: color-mix(in srgb, var(--soft) 78%, transparent);
  font-size: 9px;
  line-height: 1;
  font-weight: var(--type-weight-strong);
}
.flow-shell .subcategory-chip.active small,
.subcategory-chip.active small {
  color: currentColor;
  background: rgba(255, 255, 255, 0.16);
}
:root[data-theme="dark"] .flow-shell .subcategory-chip.active small,
:root[data-theme="dark"] .subcategory-chip.active small {
  background: rgba(0, 0, 0, 0.08);
}
.flow-shell .subcategory-chip .subcategory-chip-icon,
.subcategory-chip .subcategory-chip-icon,
.flow-shell .subcategory-chip .subcategory-chip-icon[class*="tone-"],
.subcategory-chip .subcategory-chip-icon[class*="tone-"],
.flow-shell .subcategory-chip.active .subcategory-chip-icon,
.subcategory-chip.active .subcategory-chip-icon {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
.flow-shell .subcategory-chip .subcategory-chip-icon img,
.subcategory-chip .subcategory-chip-icon img {
  width: 20px;
  height: 20px;
}
.flow-shell .subcategory-chip .subcategory-chip-icon svg,
.subcategory-chip .subcategory-chip-icon svg {
  width: 16px;
  height: 16px;
}
.flow-shell .subcategory-list,
.subcategory-list {
  width: 100%;
  max-width: 100%;
  margin-left: 0;
  margin-right: 0;
  padding-left: 14px;
  padding-right: 14px;
}
.flow-shell .product-plus,
.flow-shell .food-add {
  position: relative;
  overflow: visible;
}
.flow-shell .product-plus::before,
.flow-shell .food-add::before {
  content: "";
  position: absolute;
  inset: -14px;
  border-radius: 999px;
}
.flow-shell .search-panel,
.flow-shell .added-plate-panel {
  transition:
    transform 340ms cubic-bezier(.2, .86, .18, 1),
    opacity 1ms linear;
}
.flow-shell .search-panel.panel-hidden,
.flow-shell .added-plate-panel.plate-hidden {
  opacity: 1;
}
.flow-shell .search-bottom {
  transition:
    transform 330ms cubic-bezier(.2, .86, .18, 1),
    opacity 220ms ease;
}
.flow-shell .search-view.add-flow-screen.flow-entering {
  animation-duration: 340ms;
  animation-timing-function: cubic-bezier(.2, .86, .18, 1);
}
.flow-shell .search-view.add-flow-screen.flow-closing {
  animation-duration: 320ms !important;
  animation-timing-function: cubic-bezier(.32, .72, .28, 1) !important;
}
.home-timeline-shell > .search-dock {
  display: none !important;
}
.search-view,
.slide-screen,
.meal-detail-view,
.meal-edit-view {
  position: absolute !important;
  top: 0 !important;
  bottom: 0 !important;
  height: 100% !important;
  min-height: 100% !important;
  max-height: 100% !important;
}
.search-view {
  position: fixed !important;
  top: var(--visual-offset-top, 0px) !important;
  bottom: auto !important;
  height: var(--visual-vh, 100dvh) !important;
  min-height: var(--visual-vh, 100svh) !important;
  max-height: var(--visual-vh, 100dvh) !important;
}
.search-bottom.bottom-hidden,
.flow-shell .search-bottom.bottom-hidden {
  transform: translateX(-50%) translateY(125%) !important;
}
.flow-shell .search-results {
  padding-bottom: 64px !important;
}
.flow-shell .search-results {
  padding-bottom: 48px !important;
}
.flow-shell .search-results {
  padding-bottom: 54px !important;
}
.search-view {
  padding-top: max(44px, calc(env(safe-area-inset-top) - 8px)) !important;
}
.search-view,
.flow-shell .search-view {
  padding-top: max(12px, calc(env(safe-area-inset-top) - 34px)) !important;
}
.flow-shell .search-view {
  --flow-body-top: max(86px, calc(env(safe-area-inset-top) + 30px)) !important;
}
.flow-shell .search-panel,
.flow-shell .added-plate-panel {
  top: var(--flow-body-top) !important;
}
.flow-shell .search-panel.panel-hidden {
  top: var(--flow-body-top) !important;
}
.search-results.ai-tab-results {
  padding-bottom: 116px !important;
  scroll-padding-bottom: 124px !important;
}
.flow-shell .search-results.category-tab-results {
  padding-bottom: max(132px, calc(env(safe-area-inset-bottom) + 112px)) !important;
  scroll-padding-bottom: max(132px, calc(env(safe-area-inset-bottom) + 112px)) !important;
}
.product-art.category-product-icon,
.food-art.category-product-icon {
  border: 0;
  border-radius: 0;
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain !important;
  box-shadow: none;
}
.product-art.sushi-icon,
.food-art.sushi-icon {
  border: 0;
  border-radius: 0;
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain !important;
  box-shadow: none;
}
.food-dot .product-art.sushi-icon.food-icon,
.food-dot .food-art.sushi-icon.food-icon,
.flow-shell .product-row > .product-art.sushi-icon,
.flow-shell .product-row > .food-art.sushi-icon,
.plate-product-icon.sushi-icon,
.edit-icon.sushi-icon {
  background-size: contain !important;
}
.add-screen-footer .primary-pill {
  box-shadow: 0 6px 14px color-mix(in srgb, #000 10%, transparent);
}
.primary-pill:active:not(:disabled),
.secondary-pill:active:not(:disabled) {
  transform: scale(0.97);
  filter: none;
}
.search-view,
.flow-shell .search-view {
  padding-top: max(8px, calc(env(safe-area-inset-top) - 2px)) !important;
}

.flow-shell .search-view {
  --flow-body-top: max(72px, calc(env(safe-area-inset-top) + 62px)) !important;
}
.search-view {
  top: 0 !important;
  height: var(--search-layer-h, 100dvh) !important;
  min-height: var(--search-layer-h, 100svh) !important;
  max-height: var(--search-layer-h, 100dvh) !important;
}
.search-view,
.flow-shell .search-view {
  padding-top: max(8px, calc(env(safe-area-inset-top) - 2px)) !important;
}
.flow-shell .search-view {
  --flow-body-top: max(72px, calc(env(safe-area-inset-top) + 62px)) !important;
}
.search-bottom-input input::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
  display: none;
}

.search-bottom-input {
  position: relative;
}
.search-bottom-input input[data-product-search] {
  padding-right: 26px;
}

.search-clear {
  position: absolute;
  right: 11px;
  top: 50%;
  width: 22px;
  height: 22px;
  padding: 0;
  transform: translateY(-50%);
  border: 0;
  background: transparent;
}

.search-clear::before {
  content: '';
  display: block;
  width: 16px;
  height: 16px;
  margin: 3px;
  border-radius: 50%;
  background: var(--muted);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 4.5l7 7M11.5 4.5l-7 7' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 4.5l7 7M11.5 4.5l-7 7' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% no-repeat;
}
.flow-shell .search-bottom.search-query-dock:not(.bottom-hidden) {
  transform: translateX(-50%) translateY(calc(-1 * var(--search-kbd-lift, 0px))) !important;
  transition:
    transform 250ms cubic-bezier(.38, .7, .125, 1),
    opacity 220ms ease;
  will-change: transform;
}
.search-view {
  --search-bottom-pad-top: 8px;
  --search-bottom-row-h: 45px;
  --search-bottom-safe: max(8px, env(safe-area-inset-bottom, 0px));
  --search-bottom-h: calc(var(--search-bottom-pad-top) + var(--search-bottom-row-h) + var(--search-bottom-safe));
  --search-bottom-phone-extra: min(env(safe-area-inset-bottom, 0px), 19px);
}

.flow-shell .search-results:not(.ai-tab-results):not(.category-tab-results) {
  padding-bottom: calc(var(--search-bottom-h) - 7px + var(--search-bottom-phone-extra) + var(--search-kbd-lift, 0px)) !important;
  scroll-padding-bottom: calc(var(--search-bottom-h) - 7px + var(--search-bottom-phone-extra) + var(--search-kbd-lift, 0px)) !important;
}
.flow-shell .search-results {
  overscroll-behavior-y: none;
}
.flow-shell .search-results .search-empty .search-create-product {
  margin: 0;
  padding: 0;
  display: inline;
  color: inherit;
  background: transparent;
  border: 0;
  box-shadow: none;
  font: inherit;
  font-weight: var(--type-weight-strong);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color 160ms ease;
}

.flow-shell .search-results .search-empty .search-create-product:active {
  color: var(--green);
}

@media (prefers-reduced-motion: reduce) {
  .flow-shell .search-results .search-empty .search-create-product {
    transition: none;
  }
}
.favorites-rail {
  padding: 6px 0 2px;
}

.favorites-rail-title {
  margin: 0 16px 4px;
  font-size: 15px;
  font-weight: var(--type-weight-strong);
  line-height: 1.2;
  color: var(--text);
}

.favorites-rail-scroller {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 4px 12px 6px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}

.favorites-rail-scroller::-webkit-scrollbar {
  display: none;
}

.favorites-rail-item {
  flex: 0 0 70px;
  width: 70px;
  display: grid;
  justify-items: center;
  gap: 5px;
  margin: 0;
  padding: 4px 2px 2px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--text);
  font: inherit;
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
}

.favorites-rail-item:active {
  background: var(--chip);
}

.favorites-rail-art {
  position: relative;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
}

.favorites-rail-plus {
  position: absolute;
  top: -4px;
  right: -6px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 16px;
  line-height: 1;
  font-weight: var(--type-weight-medium);
  color: var(--text);
  background: var(--chip);
  box-shadow: 0 0 0 2px var(--comida-food-panel, var(--bg));
}

.favorites-rail-name {
  width: 100%;
  font-size: 11.5px;
  line-height: 1.2;
  text-align: center;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
}

.flow-shell .fav-swipe {
  position: relative;
  overflow: hidden;
}

.flow-shell .fav-swipe > .swipe-row {
  position: relative;
  z-index: 1;
  touch-action: pan-y;
  will-change: transform;
  transition: transform 360ms cubic-bezier(0.22, 0.9, 0.28, 1);
  background: color-mix(in srgb, var(--top) 82%, var(--bg));
}

:root[data-theme="dark"] .flow-shell .fav-swipe > .swipe-row {
  background: color-mix(in srgb, var(--panel) 84%, var(--bg));
}

.flow-shell .fav-swipe.revealed > .swipe-row {
  transform: translateX(-62px);
}

.flow-shell .fav-swipe.dragging > .swipe-row {
  transition: none;
}

.flow-shell .fav-swipe > .swipe-delete {
  position: absolute;
  z-index: 0;
  right: 12px;
  top: 50%;
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  background: #d73636;
  transform: translateY(-50%);
  cursor: pointer;
  opacity: 0;
}

.flow-shell .fav-swipe.revealed > .swipe-delete {
  opacity: 1;
}
.flow-shell .fav-swipe.sd-armed > .swipe-delete {
  background: #c22525;
}
.product-row .product-copy {
  align-content: center;
}
.product-row .product-copy strong {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.product-row .product-copy span.product-facts {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.product-row .product-copy span.product-flame {
  display: inline-block;
  width: 13px;
  height: 13px;
  margin: 0 1px 0 3px;
  vertical-align: -2px;
}

.product-flame svg {
  overflow: visible;
}
.product-flame {
  --flame-ink: var(--text);
}
.search-plate-pill.pending-arrival .top-added-icon {
  animation: top-icon-shift 780ms cubic-bezier(.18, .82, .16, 1) both;
}
.top-added-slot.incoming {
  display: block;
  border-radius: 999px;
  background: transparent;
  opacity: 0;
  animation: none;
}
@keyframes top-icon-shift {
  from {
    opacity: .72;
    transform: translateX(-18px) scale(.94);
  }
  to {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}
.search-top-controls {
  display: grid;
  grid-template-columns: 39px 62px 106px minmax(0, 1fr) 39px;
  gap: 6px;
  align-items: center;
  padding: 0 10px 17px;
  flex: 0 0 auto;
}
.search-round,
.search-time-pill,
.search-kcal-pill,
.search-plate-pill {
  height: 38px;
  display: grid;
  place-items: center;
  color: var(--text);
  background: var(--chip);
  font-size: 14.8px;
}
.search-round {
  width: 38px;
  border-radius: 50%;
  font-size: 21px;
  font-weight: var(--type-weight-light);
}
.search-time-pill,
.search-kcal-pill,
.search-plate-pill {
  border-radius: 999px;
}
.search-kcal-pill {
  position: relative;
  border: 0;
  background: var(--top);
  font-size: 14.2px;
  overflow: hidden;
  isolation: isolate;
  transition: transform 300ms ease, color 300ms ease;
}
.search-kcal-pill::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 3px;
  background: conic-gradient(from 0deg, var(--blue) var(--p, 0%), color-mix(in srgb, var(--text) 8%, transparent) 0);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  z-index: 0;
  transition: background 520ms ease;
}
.search-kcal-pill.active {
  border-color: var(--blue);
}
.search-plate-pill {
  width: 100%;
  min-width: 0;
  height: 38px;
  padding: 0 9px;
  overflow: hidden;
  transform: translateZ(0);
  contain: layout paint;
}
.search-plate-pill.has-items {
  display: grid;
  grid-template-columns: repeat(3, 24px) 28px;
  gap: 4px;
  justify-items: center;
  align-items: center;
  justify-content: center;
}
.search-plate-pill b {
  width: 28px;
  min-width: 0;
  max-width: 28px;
  height: 22px;
  display: inline-grid;
  place-items: center;
  font-size: 12.4px;
  font-weight: var(--type-weight-strong);
  justify-self: center;
  line-height: 1;
}
.search-arrow {
  transition: transform 680ms cubic-bezier(.22, .78, .18, 1);
}
.search-arrow.up {
  transform: rotate(180deg);
}
.top-added-icon {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  background-size: 30px 30px;
  animation: added-icon-in 420ms cubic-bezier(.2, .74, .25, 1) both;
}
@keyframes added-icon-in {
  from {
    opacity: 0;
    transform: translateX(-12px) scale(.8);
  }
  to {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}
.utensils-icon {
  width: 24px;
  height: 24px;
  display: block;
  color: color-mix(in srgb, var(--muted) 82%, var(--text));
}
.utensils-icon svg {
  width: 100%;
  height: 100%;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.product-art.top-added-icon {
  width: 22px;
  height: 22px;
  background-size: 30px 30px;
}
.search-arrow {
  transition: transform 820ms cubic-bezier(.18, .82, .16, 1), background-size 720ms cubic-bezier(.16, .82, .18, 1);
}
.flow-shell .top-added-icon,
.flow-shell .top-added-slot {
  width: 21px;
  height: 21px;
  min-width: 21px;
  max-width: 21px;
  background-size: 27px 27px;
  border: 0;
  background-color: transparent;
  box-shadow: none;
  transform: translateZ(0);
}
.flow-shell .top-added-slot.empty {
  display: block;
  visibility: hidden;
}
.top-added-icon.beverage-icon,
.edit-plate-icons .beverage-icon.tiny,
.top-added-icon.fresh-fruit-icon,
.edit-plate-icons .fresh-fruit-icon.tiny,
.top-added-icon.vegetable-leaf-icon,
.edit-plate-icons .vegetable-leaf-icon.tiny,
.top-added-icon.tuber-icon,
.edit-plate-icons .tuber-icon.tiny,
.top-added-icon.dairy-cream-icon,
.edit-plate-icons .dairy-cream-icon.tiny,
.top-added-icon.egg-cheese-icon,
.edit-plate-icons .egg-cheese-icon.tiny,
.top-added-icon.chicken-icon,
.edit-plate-icons .chicken-icon.tiny,
.top-added-icon.meat-icon,
.edit-plate-icons .meat-icon.tiny,
.top-added-icon.rice-bean-icon,
.edit-plate-icons .rice-bean-icon.tiny,
.top-added-icon.nut-seed-icon,
.edit-plate-icons .nut-seed-icon.tiny,
.top-added-icon.grain-bakery-icon,
.edit-plate-icons .grain-bakery-icon.tiny,
.top-added-icon.oat-cereal-icon,
.edit-plate-icons .oat-cereal-icon.tiny,
.top-added-icon.seafood-icon,
.edit-plate-icons .seafood-icon.tiny,
.top-added-icon.sweet-snack-icon,
.edit-plate-icons .sweet-snack-icon.tiny {
  background-size: contain !important;
}
.flow-shell .top-added-icon,
.flow-shell .top-added-slot {
  width: 22px;
  height: 22px;
  min-width: 22px;
  max-width: 22px;
  background-size: 28px 28px;
}
.top-added-icon.ready-meal-icon,
.edit-plate-icons .ready-meal-icon.tiny,
.top-added-icon.cake-icon,
.edit-plate-icons .cake-icon.tiny,
.top-added-icon.tort-icon,
.edit-plate-icons .tort-icon.tiny {
  max-width: 19px;
  background-size: 24px 24px;
}
.top-added-icon.oil-sauce-icon,
.edit-plate-icons .oil-sauce-icon.tiny {
  max-width: 19px;
  background-size: 24px 24px;
}
@media (max-width: 389px) {
  .search-top-controls {
    grid-template-columns: 38px 56px 92px minmax(0, 1fr) 38px;
    gap: 4px;
    padding: 0 8px 17px;
  }
}
.added-plate-panel {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 18px 16px 136px;
  background: var(--top);
  transform: translateZ(0);
  will-change: transform, opacity;
  animation: plate-panel-in 720ms cubic-bezier(.18, .82, .16, 1) both;
  user-select: none;
  -webkit-user-select: none;
}
.added-plate-panel input {
  user-select: text;
  -webkit-user-select: text;
}
@keyframes plate-panel-in {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.added-plate-panel h2 {
  margin: 0 0 16px;
  font-size: 22px;
  line-height: 1;
  font-weight: var(--type-weight-strong);
}
.plate-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 14px;
}
.plate-title-row h2 {
  margin: 0;
}
.plate-save-heart {
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 999px;
  display: grid;
  place-items: center;
  color: var(--text);
  background: color-mix(in srgb, var(--text) 6%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text) 4%, transparent);
}
.plate-save-heart svg {
  width: 20px;
  height: 20px;
  fill: none;
}
.plate-save-heart.active {
  color: #ff496f;
  background: color-mix(in srgb, #ff496f 12%, var(--top));
}
.plate-save-heart.active svg {
  fill: color-mix(in srgb, #ff496f 18%, transparent);
}
.plate-save-heart:disabled {
  opacity: .38;
}
.plate-save-picker {
  display: grid;
  gap: 10px;
  margin: -2px 0 14px;
  padding: 12px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--chip) 74%, var(--top));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text) 3%, transparent);
}
.plate-save-meals {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
}
.plate-save-meals button {
  min-width: 0;
  height: 54px;
  border: 0;
  border-radius: 12px;
  display: grid;
  place-items: center;
  gap: 3px;
  color: var(--muted);
  background: color-mix(in srgb, var(--top) 68%, transparent);
  font: inherit;
  font-size: 10.5px;
  font-weight: var(--type-weight-strong);
}
.plate-save-meals button svg {
  width: 18px;
  height: 18px;
}
.plate-save-meals button span {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.plate-save-meals button.active {
  color: var(--top);
  background: var(--text);
}
.plate-save-confirm {
  height: 42px;
  border: 0;
  border-radius: 999px;
  color: var(--top);
  background: var(--text);
  font: inherit;
  font-size: 14px;
  font-weight: var(--type-weight-strong);
}
.plate-save-confirm.loading {
  opacity: .64;
}
.plate-save-picker small {
  color: #ff453a;
  font-size: 12px;
  font-weight: var(--type-weight-strong);
}
.added-plate-list {
  display: grid;
  gap: 10px;
}
.plate-nutrition {
  margin: 22px 0 4px;
}
.plate-nutrition-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 12px;
}
.plate-nutrition-head h3 {
  margin: 0;
  color: var(--text);
  font-size: 21px;
  line-height: 1;
  font-weight: var(--type-weight-strong);
}
.plate-nutrition-segment {
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: 128px;
  min-width: 128px;
  height: 40px;
  padding: 4px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--text) 6%, transparent);
}
.plate-nutrition-segment button {
  border: 0;
  border-radius: 9px;
  color: color-mix(in srgb, var(--text) 72%, var(--muted));
  background: transparent;
  font: inherit;
  font-size: 13px;
  font-weight: var(--type-weight-strong);
}
.plate-nutrition-segment button.active {
  color: var(--top);
  background: var(--text);
  box-shadow: 0 2px 7px color-mix(in srgb, var(--text) 16%, transparent);
}
.plate-nutrition-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.plate-nutrition-card {
  min-height: 108px;
  display: grid;
  align-content: start;
  gap: 7px;
  padding: 15px 16px 14px;
  border-radius: 13px;
  color: var(--text);
  background: color-mix(in srgb, var(--chip) 78%, var(--top));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text) 2%, transparent);
}
.plate-nutrition-card strong {
  font-size: 15px;
  line-height: 1.1;
  font-weight: var(--type-weight-strong);
}
.plate-nutrition-card span {
  color: color-mix(in srgb, var(--text) 78%, var(--muted));
  font-size: 15px;
  line-height: 1.1;
  font-weight: var(--type-weight-medium);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.plate-nutrition-card small {
  color: var(--muted);
  font-size: 12.4px;
  line-height: 1.25;
}
.plate-nutrition-card i {
  display: block;
  height: 8px;
  margin-top: 10px;
  border-radius: 999px;
  background:
    linear-gradient(90deg, var(--metric-color) var(--metric), transparent 0),
    color-mix(in srgb, var(--text) 7%, transparent);
}
.empty-plate {
  min-height: 140px;
  display: grid;
  place-items: center;
  color: var(--muted);
  font-size: 15px;
}
.plate-edit-item {
  min-height: 86px;
  grid-template-columns: 48px 1fr 84px;
  border-radius: 13px;
}
.plate-product-icon {
  width: 42px;
  height: 42px;
  background-size: 54px 54px;
}
.flow-shell .added-plate-panel .floating-log {
  position: sticky;
  left: auto;
  right: auto;
  bottom: 12px;
  z-index: 8;
  width: 112px;
  margin: 18px 0 0 auto;
  transform: none;
}
.swipe-wrap {
  position: relative;
  overflow: hidden;
  border-radius: 14px;
}
.swipe-row {
  position: relative;
  z-index: 1;
  transition: transform 420ms cubic-bezier(.22, .76, .18, 1);
  touch-action: pan-y;
  will-change: transform;
}
.swipe-wrap.revealed .swipe-row {
  transform: translateX(-62px);
}
.swipe-wrap.dragging .swipe-row {
  transition: none;
}
.swipe-delete {
  position: absolute;
  z-index: 0;
  right: 12px;
  top: 50%;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  background: #d73636;
  font-size: 24px;
  line-height: 1;
  transform: translateY(-50%);
}
.edit-item {
  min-height: 75px;
  border-radius: 14px;
  display: grid;
  grid-template-columns: 48px 1fr 92px;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  background: var(--panel);
}
.edit-copy {
  min-width: 0;
  overflow: hidden;
}
.edit-copy strong {
  display: block;
  color: var(--text);
  font-size: 17px;
  line-height: 1.08;
  font-weight: var(--type-weight-medium);
}
.edit-copy span {
  display: flex;
  align-items: center;
  gap: 3px;
  margin-top: 6px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.05;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.swipe-row {
  transition: transform 560ms cubic-bezier(.18, .82, .16, 1), background-size 720ms cubic-bezier(.16, .82, .18, 1);
}
.edit-copy small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
}
.flow-shell .added-plate-panel {
  animation: none;
  transform: translateY(104%);
  opacity: 0;
  pointer-events: none;
  transition: transform 920ms cubic-bezier(.18, .82, .16, 1), opacity 760ms ease;
}
.flow-shell .added-plate-panel.plate-visible {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}
.flow-shell .added-plate-panel.plate-hidden {
  transform: translateY(104%);
  opacity: 0;
  pointer-events: none;
}
.search-bottom.plate-commit-bottom {
  grid-template-columns: 1fr 108px;
  pointer-events: auto;
}
.plate-bottom-spacer {
  min-width: 0;
}
.plate-product-icon.beverage-icon,
.edit-icon.beverage-icon,
.plate-product-icon.fresh-fruit-icon,
.edit-icon.fresh-fruit-icon,
.plate-product-icon.vegetable-leaf-icon,
.edit-icon.vegetable-leaf-icon,
.plate-product-icon.tuber-icon,
.edit-icon.tuber-icon,
.plate-product-icon.dairy-cream-icon,
.edit-icon.dairy-cream-icon,
.plate-product-icon.egg-cheese-icon,
.edit-icon.egg-cheese-icon,
.plate-product-icon.chicken-icon,
.edit-icon.chicken-icon,
.plate-product-icon.meat-icon,
.edit-icon.meat-icon,
.plate-product-icon.rice-bean-icon,
.edit-icon.rice-bean-icon,
.plate-product-icon.nut-seed-icon,
.edit-icon.nut-seed-icon,
.plate-product-icon.grain-bakery-icon,
.edit-icon.grain-bakery-icon,
.plate-product-icon.oat-cereal-icon,
.edit-icon.oat-cereal-icon,
.plate-product-icon.seafood-icon,
.edit-icon.seafood-icon,
.plate-product-icon.sweet-snack-icon,
.edit-icon.sweet-snack-icon {
  background-size: contain !important;
}
.added-plate-panel h2 {
  font-size: 21px;
}
.added-plate-panel .plate-edit-item {
  min-height: 82px;
  grid-template-columns: 44px 1fr 80px;
}
.added-plate-panel .plate-product-icon {
  width: 39px;
  height: 39px;
  background-size: 50px 50px;
}
.added-plate-panel .edit-copy strong {
  font-size: 16px;
}
.added-plate-panel .edit-copy span {
  font-size: 13.2px;
}
.added-plate-panel .edit-copy small {
  font-size: 11.5px;
}
.added-plate-panel .qty-input {
  font-size: 18px;
}
.added-plate-panel .edit-amount span,
.added-plate-panel .edit-amount small {
  font-size: 11.5px;
}
.plate-product-icon.ready-meal-icon,
.edit-icon.ready-meal-icon,
.plate-product-icon.cake-icon,
.edit-icon.cake-icon,
.plate-product-icon.tort-icon,
.edit-icon.tort-icon {
  background-size: contain !important;
}
.plate-product-icon.oil-sauce-icon,
.edit-icon.oil-sauce-icon {
  background-size: contain !important;
}
.flow-shell .search-panel,
.flow-shell .added-plate-panel {
  transition:
    transform 340ms cubic-bezier(.2, .86, .18, 1),
    opacity 1ms linear;
}
.flow-shell .search-panel.panel-hidden,
.flow-shell .added-plate-panel.plate-hidden {
  opacity: 1;
}
.template-tab-panel .template-meal-grid .meal-choice-icon,
.plate-save-meals .meal-choice-icon {
  width: 27px;
  height: 27px;
  margin-bottom: -1px;
  filter: drop-shadow(0 5px 7px rgba(0,0,0,.12));
}
:root[data-theme="dark"] .meal-icon.meal-png-holder .meal-png-icon,
:root[data-theme="dark"] .classic-meal-icon .meal-png-icon,
:root[data-theme="dark"] .home-classic-shell .classic-meal-icon .meal-png-icon,
:root[data-theme="dark"] .template-tab-panel .template-meal-grid .meal-choice-icon,
:root[data-theme="dark"] .plate-save-meals .meal-choice-icon {
  filter:
    drop-shadow(0 9px 13px rgba(0,0,0,.36))
    drop-shadow(0 0 8px rgba(255,255,255,.08));
}
.fly-particle {
  position: fixed;
  z-index: 200;
  width: 34px;
  height: 34px;
  margin: -17px 0 0 -17px;
  border-radius: 62% 58% 66% 38%;
  pointer-events: none;
  background:
    radial-gradient(circle at 35% 28%, rgba(255,255,255,0.95) 0 11%, transparent 13%),
    linear-gradient(135deg, var(--green2), var(--green) 68%, #13843b);
  box-shadow:
    0 0 0 6px color-mix(in srgb, var(--green) 12%, transparent),
    0 14px 30px color-mix(in srgb, var(--green) 48%, transparent);
  transform: rotate(45deg);
  animation: fly-to-cart 860ms cubic-bezier(0.18, 0.82, 0.18, 1) forwards;
}
.fly-particle.has-food {
  width: 50px;
  height: 50px;
  margin: -25px 0 0 -25px;
  border-radius: 999px;
  background: transparent;
  box-shadow: none;
  transform: translateZ(0);
  animation: food-fly-to-plate 720ms cubic-bezier(.18, .82, .16, 1) forwards;
}
.fly-food-wrap {
  width: 50px;
  height: 50px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: transparent;
  border: 0;
  box-shadow: none;
  animation: food-fly-wobble 720ms cubic-bezier(.18, .82, .16, 1) forwards;
}
.fly-food-wrap > .product-art,
.fly-food-wrap > .food-art,
.fly-food-wrap > .plate-product-icon,
.fly-food-wrap .product-art,
.fly-food-wrap .food-art {
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  max-width: 38px !important;
  border: 0 !important;
  background-color: transparent !important;
  background-size: contain !important;
  box-shadow: none !important;
}
.draft-ripple {
  position: fixed;
  z-index: 200;
  width: 24px;
  height: 24px;
  margin: -12px 0 0 -12px;
  border-radius: 999px;
  pointer-events: none;
  border: 3px solid color-mix(in srgb, var(--green) 68%, white);
  box-shadow: 0 0 22px color-mix(in srgb, var(--green) 42%, transparent);
  animation: draft-ripple 540ms ease-out forwards;
}
@keyframes fly-to-cart {
  0% {
    opacity: 0;
    transform: rotate(45deg) scale(0.45);
  }
  12% {
    opacity: 1;
    transform: rotate(45deg) scale(1.18);
  }
  70% {
    opacity: 1;
    transform: translate(calc(var(--tx) * 0.72), calc(var(--ty) * 0.72 - 26px)) rotate(260deg) scale(1);
  }
  100% {
    opacity: 0.08;
    transform: translate(var(--tx), var(--ty)) rotate(405deg) scale(0.42);
  }
}
@keyframes food-fly-to-plate {
  0% {
    opacity: 0;
    transform: translate(0, 0) scale(0.72) rotate(-6deg);
  }
  12% {
    opacity: 1;
    transform: translate(0, -9px) scale(1.06) rotate(4deg);
  }
  100% {
    opacity: 1;
    transform: translate(var(--tx), var(--ty)) scale(0.55) rotate(0deg);
  }
}
@keyframes food-fly-wobble {
  0% {
    filter: saturate(0.92) brightness(1);
  }
  34% {
    filter: saturate(1.18) brightness(1.05);
  }
  100% {
    filter: saturate(1.08) brightness(1.04);
    transform: rotate(0deg);
  }
}
@keyframes draft-ripple {
  100% {
    opacity: 0;
    transform: scale(3.2);
  }
}
.search-plate-pill.draft-hit {
  animation: plate-hit 420ms cubic-bezier(.18, .86, .14, 1);
}
@keyframes plate-hit {
  38% {
    transform: scale(1.055);
    box-shadow:
      0 0 0 9px color-mix(in srgb, var(--blue) 12%, transparent),
      inset 0 1px 0 rgba(255,255,255,.2);
  }
  68% {
    transform: scale(0.985);
  }
}
@media (prefers-reduced-motion: reduce) {
  .fly-particle,
  .fly-food-wrap,
  .draft-ripple,
  .search-plate-pill.draft-hit {
    animation: none !important;
  }

  .fly-particle,
  .draft-ripple {
    display: none !important;
  }
}
.search-bottom.plate-commit-bottom {
  grid-template-columns: 1fr 38px 108px;
}
.plate-commit-bottom .plate-add-more {
  align-self: center;
}
.plate-commit-bottom .plate-add-more .app-icon {
  width: 20px;
  height: 20px;
}
.swipe-wrap.sd-armed .swipe-delete {
  background: #c22525;
}
.quantity-keyboard-open .meal-edit-view,
.quantity-keyboard-open .added-plate-panel,
.quantity-keyboard-open .product-detail-screen,
.quantity-keyboard-open .add-ai-plate {
  padding-bottom: 330px !important;
}
.quantity-keyboard-shell {
  position: fixed;
  z-index: 180;
  left: 50%;
  bottom: 0;
  width: min(440px, 100vw);
  transform: translateX(-50%);
  padding: 9px 8px max(7px, env(safe-area-inset-bottom));
  color: var(--text);
  background: #d2d2d5;
  border-radius: 16px 16px 0 0;
  box-shadow: 0 -12px 26px color-mix(in srgb, #000 18%, transparent);
  animation: quantity-keyboard-up 520ms cubic-bezier(.22, .78, .18, 1) both;
  touch-action: none;
}
:root[data-theme="dark"] .quantity-keyboard-shell {
  background: #2f2f31;
  box-shadow: 0 -16px 34px rgba(0, 0, 0, 0.46);
}
.quantity-keyboard-handle {
  width: 54px;
  height: 5px;
  border-radius: 999px;
  display: block;
  margin: 0 auto 8px;
  background: color-mix(in srgb, var(--muted) 42%, transparent);
}
.quantity-live-preview {
  margin: 0 4px 8px;
  min-height: 68px;
  border-radius: 18px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "label value"
    "grams value";
  align-items: center;
  gap: 2px 12px;
  padding: 10px 14px;
  color: var(--text);
  background: color-mix(in srgb, var(--top) 84%, #fff 16%);
  box-shadow: 0 10px 22px color-mix(in srgb, #000 13%, transparent);
}
.quantity-live-preview span {
  grid-area: label;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--muted);
  font-size: 13px;
  font-weight: var(--type-weight-strong);
}
.quantity-live-preview strong {
  grid-area: value;
  font-size: 32px;
  line-height: .95;
  font-weight: var(--type-weight-medium);
  letter-spacing: 0;
}
.quantity-live-preview small {
  color: var(--muted);
  font-size: 14px;
  font-weight: var(--type-weight-strong);
}
.quantity-live-preview em {
  grid-area: grams;
  color: var(--muted);
  font-size: 13px;
  font-style: normal;
  font-weight: var(--type-weight-medium);
}
:root[data-theme="dark"] .quantity-live-preview {
  background: color-mix(in srgb, var(--panel) 86%, #fff 8%);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.34);
}
.quantity-toolbar {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: max-content;
  align-items: center;
  gap: 8px;
  overflow-x: auto;
  margin: 0 -2px 8px;
  padding: 0 6px 2px;
  scrollbar-width: none;
}
.quantity-toolbar::-webkit-scrollbar {
  display: none;
}
.quantity-toolbar button {
  min-width: 70px;
  height: 39px;
  padding: 0 16px;
  border-radius: 20px;
  color: var(--text);
  background: color-mix(in srgb, var(--top) 36%, transparent);
  font-size: 15px;
  white-space: nowrap;
}
.quantity-toolbar button.active {
  color: var(--top);
  background: var(--text);
}
.comida-keyboard.hg-theme-default {
  padding: 0;
  background: transparent;
  font-family: inherit;
}
.comida-keyboard .hg-row {
  gap: 7px;
  margin-bottom: 7px;
}
.comida-keyboard .hg-row:last-child {
  margin-bottom: 0;
}
.comida-keyboard .hg-button {
  height: 51px;
  border: 0;
  border-radius: 7px;
  color: #f6f6f7;
  background: #77787a;
  box-shadow: none;
  font-size: 27px;
  font-weight: var(--type-weight-regular);
}
:root[data-theme="dark"] .comida-keyboard .hg-button {
  color: #f5f5f5;
  background: #595a5d;
}
.comida-keyboard .hg-button[data-skbtn="{log}"] {
  font-size: 17px;
  font-weight: var(--type-weight-medium);
  letter-spacing: 0;
}
.comida-keyboard .hg-button[data-skbtn="{done}"] {
  color: #111;
  background: #fff;
  font-size: 18px;
  font-weight: var(--type-weight-medium);
}
.comida-keyboard .hg-button:active {
  filter: brightness(1.08);
}
.quantity-keyboard-shell {
  animation-duration: 310ms;
  animation-timing-function: cubic-bezier(.2, .86, .18, 1);
  padding: 9px 8px max(6px, env(safe-area-inset-bottom));
}
.comida-keyboard .hg-row {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: stretch;
  gap: 7px;
}
.comida-keyboard .hg-button {
  min-width: 0;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  flex: initial !important;
  justify-self: stretch;
  align-self: stretch;
}
.comida-keyboard .hg-button[data-skbtn="{done}"] {
  grid-column: span 2;
}
.comida-keyboard .hg-button[data-skbtn="{log}"] {
  display: none !important;
}
.quantity-keyboard-open .flow-shell .added-plate-panel .floating-log,
.quantity-keyboard-open .added-plate-panel .floating-log,
.quantity-keyboard-open .search-bottom.plate-commit-bottom {
  opacity: 0 !important;
  transform: translateY(24px) scale(.96) !important;
  pointer-events: none !important;
  visibility: hidden !important;
}
.quantity-keyboard-open .add-flow-layer.flow-shell > .add-screen.create-screen .create-form {
  padding-bottom: 340px !important;
}
.quantity-keyboard-open .add-flow-layer.flow-shell > .add-screen.create-screen .add-screen-footer {
  opacity: 0 !important;
  transform: translateY(24px) scale(.96) !important;
  pointer-events: none !important;
}
.micro {
  margin: 0;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.1;
  font-weight: var(--type-weight-medium);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 18px 12px max(12px, env(safe-area-inset-bottom));
  background: rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(18px) saturate(135%);
  -webkit-backdrop-filter: blur(18px) saturate(135%);
}
:root[data-theme="dark"] .modal-backdrop {
  background: rgba(0, 0, 0, 0.62);
}
.modal-card {
  width: min(456px, 100%);
  max-height: min(86vh, 760px);
  display: flex;
  flex-direction: column;
  border-radius: 30px;
  color: var(--ink);
  background: color-mix(in srgb, var(--card) 94%, transparent);
  border: 1px solid var(--line);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.22);
  overflow: hidden;
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
}
:root[data-theme="dark"] .modal-card {
  background: rgba(13, 14, 16, 0.94);
  box-shadow: 0 28px 90px rgba(0, 0, 0, 0.72);
}
.field {
  min-width: 0;
  min-height: 74px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 7px;
  border-radius: 18px;
  background: var(--card-soft);
  border: 1px solid var(--line);
}
.field.full {
  grid-column: 1 / -1;
}
.field span {
  color: var(--muted);
  font-size: 9px;
  font-weight: var(--type-weight-medium);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.field input,
.field select {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  color: var(--ink);
  background: transparent;
  font: inherit;
  font-size: 16px;
  font-weight: var(--type-weight-strong);
}
.edit-modal {
  max-height: min(62vh, 520px);
}
.modal-grabber {
  width: 42px;
  height: 5px;
  margin: 9px auto 2px;
  border-radius: 999px;
  background: var(--soft);
}
.modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 16px 10px;
}
.modal-head h3 {
  margin: 5px 0 0;
  font-size: 22px;
  line-height: 1;
  font-weight: var(--type-weight-strong);
  letter-spacing: -0.02em;
}
.modal-close,
.icon-action,
.food-add {
  display: grid;
  place-items: center;
  border-radius: 999px;
  color: var(--ink);
  background: var(--pill);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}
.modal-close {
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
}
.modal-close svg,
.icon-action svg,
.food-add svg {
  width: 17px;
  height: 17px;
}
.modal-section-title {
  padding: 0 17px 7px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--muted);
  font-size: 10px;
  font-weight: var(--type-weight-medium);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.modal-section-title b {
  color: var(--ink);
  letter-spacing: 0;
}
.modal-footer {
  padding: 10px 16px 16px;
  border-top: 1px solid var(--line);
}
.modal-footer.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.primary-pill {
  min-width: 190px;
  height: 54px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border-radius: 999px;
  color: var(--bg);
  background: var(--ink);
  box-shadow: 0 6px 14px color-mix(in srgb, #000 10%, transparent);
  font-size: 15px;
  font-weight: var(--type-weight-strong);
  transition: transform 120ms ease, box-shadow 120ms ease, filter 120ms ease;
  will-change: transform;
}
.modal-footer.split .primary-pill,
.modal-footer.split .secondary-pill {
  min-width: 0;
  width: 100%;
}
.secondary-pill {
  height: 54px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 999px;
  color: var(--ink);
  background: var(--chip);
  border: 1px solid var(--line);
  box-shadow: none;
  font-size: 15px;
  font-weight: var(--type-weight-strong);
  transition: transform 120ms ease, box-shadow 120ms ease, filter 120ms ease;
  will-change: transform;
}
.primary-pill:active:not(:disabled) {
  box-shadow: 0 2px 6px color-mix(in srgb, #000 10%, transparent);
}
.secondary-pill:active:not(:disabled) {
  box-shadow: inset 0 0 0 999px var(--press-fill);
}
.danger-pill {
  color: #ffffff;
  background: #ff3b30;
  box-shadow: 0 10px 22px rgba(255, 59, 48, 0.55);
}
:root[data-theme="dark"] .danger-pill {
  color: #ffffff;
  background: #ff453a;
}
:root[data-theme="dark"] .primary-pill {
  color: #000000;
  background: #f2f2f4;
  box-shadow: 0 10px 22px rgba(0,0,0,0.22);
}
:root[data-theme="dark"] .primary-pill.danger-pill {
  color: #ffffff;
  background: #ff453a;
  box-shadow: 0 10px 22px rgba(255, 69, 58, 0.55);
}
.primary-pill svg {
  width: 18px;
  height: 18px;
}
.edit-body {
  padding: 2px 18px 16px;
}
.edit-body strong {
  display: block;
  color: var(--ink);
  font-size: 17px;
  font-weight: var(--type-weight-strong);
}
.edit-body p {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: var(--type-weight-strong);
}
.warning-panel {
  margin: 0 16px 10px;
  padding: 12px;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: var(--card-soft);
}
.warning-panel.red {
  color: #b42318;
  background: rgba(255, 59, 48, 0.1);
  border-color: rgba(255, 59, 48, 0.28);
}
:root[data-theme="dark"] .warning-panel.red {
  color: #ffb4ae;
  background: rgba(255, 69, 58, 0.14);
  border-color: rgba(255, 69, 58, 0.28);
}
.warning-panel strong,
.warning-panel span {
  display: block;
}
.warning-panel strong {
  font-size: 13px;
  font-weight: var(--type-weight-strong);
}
.warning-panel span {
  margin-top: 5px;
  font-size: 11px;
  line-height: 1.35;
  font-weight: var(--type-weight-strong);
}
.warning-panel.inline {
  margin: 12px 0 0;
}
.inline-title {
  padding: 9px 2px 8px;
}
@keyframes scrim-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
.timestamp-scrim {
  position: fixed;
  z-index: 92;
  inset: 0;
  background: rgba(0, 0, 0, 0.68);
  animation: scrim-in 520ms ease both;
}
.timestamp-scrim.closing {
  animation: scrim-out 500ms ease both;
}
.timestamp-sheet {
  position: fixed;
  z-index: 93;
  left: 50%;
  bottom: 0;
  width: min(440px, 100vw);
  transform: translateX(-50%);
  border-radius: 18px 18px 0 0;
  padding: 16px 16px max(18px, env(safe-area-inset-bottom));
  color: var(--text);
  background: var(--sheet);
  box-shadow: var(--shadow);
  animation: sheet-up 620ms cubic-bezier(.22, .78, .18, 1) both;
  touch-action: pan-y;
}
.timestamp-sheet.closing {
  animation: sheet-down 520ms cubic-bezier(.32, .72, .28, 1) both;
}
@keyframes sheet-up {
  from {
    transform: translate(-50%, 100%);
  }
  to {
    transform: translate(-50%, 0);
  }
}
.timestamp-handle {
  width: 46px;
  height: 4px;
  display: block;
  margin: 0 auto 18px;
  border-radius: 999px;
  background: var(--line);
}
.timestamp-sheet h2 {
  margin: 0 0 18px;
  text-align: center;
  font-size: 20px;
  line-height: 1;
  font-weight: var(--type-weight-strong);
}
.timestamp-form {
  display: grid;
  gap: 12px;
  margin: 4px 0 18px;
}
.timestamp-form label {
  display: grid;
  gap: 7px;
  color: var(--muted);
  font-size: 13px;
  font-weight: var(--type-weight-medium);
}
.timestamp-form input {
  width: 100%;
  height: 52px;
  border: 0;
  outline: none;
  border-radius: 13px;
  padding: 0 14px;
  color: var(--text);
  background: var(--chip);
  font: inherit;
  font-size: 18px;
  font-weight: var(--type-weight-medium);
}
.timestamp-save {
  width: 100%;
  height: 54px;
  margin-top: 10px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  color: var(--top);
  background: var(--text);
  font-size: 18px;
}
.timestamp-cancel {
  width: 100%;
  height: 52px;
  margin-top: 8px;
  color: var(--text);
  font-size: 18px;
}
.confirm-scrim {
  position: fixed;
  z-index: 88;
  inset: 0;
  background: rgba(0, 0, 0, 0.42);
}
.confirm-sheet {
  position: fixed;
  z-index: 89;
  left: 50%;
  bottom: 0;
  width: min(440px, 100vw);
  transform: translateX(-50%);
  border-radius: 18px 18px 0 0;
  padding: 16px 16px max(18px, env(safe-area-inset-bottom));
  color: var(--text);
  background: var(--sheet);
  box-shadow: var(--shadow);
  animation: sheet-up 580ms cubic-bezier(.22, .78, .18, 1) both;
}
.confirm-sheet h2 {
  margin: 0 0 8px;
  text-align: center;
  font-size: 20px;
  line-height: 1.1;
}
.confirm-sheet p {
  margin: 0 10px 18px;
  color: var(--muted);
  text-align: center;
  font-size: 14px;
  line-height: 1.25;
}
.confirm-danger,
.confirm-cancel {
  width: 100%;
  height: 50px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  font-size: 17px;
}
.confirm-danger {
  color: #fff;
  background: #d73636;
}
.confirm-cancel {
  margin-top: 8px;
  color: var(--text);
  background: var(--chip);
}
.ai-create-card .secondary-pill {
  min-height: 42px;
  padding: 0 15px;
  border-radius: 999px;
}
.flow-shell .add-screen-footer .primary-pill,
.flow-shell .add-screen-footer .secondary-pill,
.flow-shell .primary-pill,
.flow-shell .secondary-pill {
  border-radius: 30px;
}
.scrim {
  position: fixed;
  z-index: 50;
  inset: 0;
  background: var(--scrim);
  animation: scrim-in 500ms ease both;
}
.scrim.closing {
  animation: scrim-out 480ms ease both;
  pointer-events: none;
}
@keyframes scrim-out {
  from { opacity: 1; }
  to { opacity: 0; }
}
@keyframes sheet-down {
  from {
    transform: translate(-50%, 0);
  }
  to {
    transform: translate(-50%, 100%);
  }
}
.scrim,
.timestamp-scrim {
  animation-duration: 260ms;
}
.scrim.closing,
.timestamp-scrim.closing {
  animation-duration: 220ms;
}
.sheet,
.timestamp-sheet,
.confirm-sheet,
.time-modal,
.plate-view,
.slide-screen {
  animation-duration: 360ms !important;
  animation-timing-function: cubic-bezier(.2, .86, .18, 1) !important;
}
.sheet.closing,
.timestamp-sheet.closing,
.confirm-sheet.closing,
.time-modal.closing,
.plate-view.closing,
.slide-screen.closing {
  animation-duration: 290ms !important;
  animation-timing-function: cubic-bezier(.32, .72, .28, 1) !important;
}
.icon-picker {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 7px;
}
.icon-picker button {
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 15px;
  color: var(--muted);
  background: var(--card-soft);
  border: 1px solid var(--line);
}
.icon-picker button.active {
  color: var(--green);
  border-color: color-mix(in srgb, var(--green) 42%, var(--line));
  background: color-mix(in srgb, var(--green) 12%, var(--card-soft));
}
.icon-picker svg {
  width: 18px;
  height: 18px;
}
.file-picker {
  min-height: 46px;
  padding: 0 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border-radius: 16px;
  color: var(--ink);
  background: var(--card-soft);
  border: 1px solid var(--line);
  font-size: 12px;
  font-weight: var(--type-weight-strong);
}
.file-picker input {
  max-width: 160px;
  color: var(--muted);
  font-size: 11px;
}
.icon-preview {
  width: 54px;
  height: 54px;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid var(--line);
}
.macro {
  min-width: 0;
  text-align: center;
}
.macro-bar {
  width: 100%;
  max-width: 64px;
  height: 4px;
  border-radius: 999px;
  background: var(--soft);
  overflow: hidden;
}
.macro {
  min-width: 0;
}
.macro-label {
  display: flex;
  align-items: center;
  gap: 4px;
  min-height: 17px;
  font-size: 12.5px;
  line-height: 1;
  font-weight: var(--type-weight-medium);
  white-space: nowrap;
}
.macro-label b {
  font-weight: var(--type-weight-strong);
}
.macro-bar {
  height: 3px;
  margin-top: 6px;
  background: color-mix(in srgb, var(--text) 10%, transparent);
  overflow: hidden;
}
.macro-bar i {
  display: block;
  width: var(--w);
  height: 100%;
  background: var(--c);
}
.nutrition-head h2,
.detail-section h2 {
  margin: 0;
  font-size: 30px;
  line-height: 1;
  font-weight: var(--type-weight-strong);
}
.detail-close {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--panel-2);
  font-size: 36px;
  margin-bottom: 8px;
}
.rings {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin: 26px 0 52px;
  text-align: center;
}
.slide-screen {
  position: fixed;
  z-index: 70;
  inset: 0;
  left: 50%;
  width: min(440px, 100vw);
  height: 100svh;
  margin: 0 auto;
  transform: translateX(-50%);
  color: var(--text);
  background: var(--top);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
  animation: slide-up 480ms cubic-bezier(.22, .86, .28, 1) both;
}
.slide-screen::-webkit-scrollbar {
  display: none;
}
@keyframes slide-up {
  from {
    transform: translate(-50%, 100%);
  }
  to {
    transform: translate(-50%, 0);
  }
}
.meal-detail-view {
  padding: max(18px, calc(env(safe-area-inset-top) + 4px)) 14px 42px;
}
.detail-mini-macros {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 11px;
}
.detail-food-strip {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 44px;
  gap: 8px;
  overflow: hidden;
  margin-bottom: 14px;
}
.detail-food-strip .food-bubble {
  width: 44px;
  height: 44px;
}
.meal-detail-panel {
  min-height: calc(100svh - 168px);
  border-radius: 16px 16px 0 0;
  padding: 14px 16px 28px;
  background: var(--panel);
}
.meal-detail-panel .detail-close {
  width: 38px;
  height: 38px;
  margin: 0 0 6px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--panel-2);
  font-size: 28px;
  line-height: 1;
}
.meal-detail-panel h1 {
  margin: -34px 0 22px;
  text-align: center;
  font-size: 18px;
  line-height: 1;
  font-weight: var(--type-weight-medium);
}
.detail-summary {
  display: grid;
  grid-template-columns: minmax(118px, 1.3fr) repeat(3, minmax(66px, .9fr));
  gap: 8px;
  align-items: end;
  margin: 18px 0 34px;
}
.detail-summary > div {
  min-width: 0;
}
.detail-summary > div:not(.detail-cal) {
  display: grid;
  justify-items: center;
  text-align: center;
}
.detail-summary strong {
  display: block;
  margin-top: 7px;
  font-size: 25px;
  line-height: 1;
  font-weight: var(--type-weight-medium);
}
.detail-summary .detail-cal strong {
  margin-top: 0;
  font-size: clamp(32px, 9vw, 39px);
  letter-spacing: 0;
}
.detail-summary span {
  display: block;
  color: var(--muted);
  font-size: 13.5px;
}
.badge {
  min-width: 42px;
  height: 20px;
  padding: 0 7px;
  border-radius: 999px;
  display: inline-grid;
  place-items: center;
  color: #fff;
  font-size: 12px;
  font-style: normal;
}
.badge.protein {
  background: #b94a25;
}
.badge.carb,
.badge.sugar {
  background: #0a7a4d;
}
.detail-section.compact {
  margin-top: 22px;
}
.detail-section.compact h2 {
  margin: 0;
  font-size: 20px;
  line-height: 1;
  font-weight: var(--type-weight-strong);
}
.meal-detail-view .rings {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin: 22px 0 34px;
  text-align: center;
}
.meal-detail-view .ring {
  width: 50px;
  height: 50px;
  margin: 0 auto 8px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 15px;
  background: conic-gradient(var(--c) var(--p), color-mix(in srgb, var(--text) 12%, transparent) 0);
}
.meal-detail-view .ring::before {
  content: attr(data-pct);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--panel);
}
.meal-detail-view .rings span {
  color: var(--muted);
  font-size: 13px;
}
.metric-row {
  margin: 19px 0 26px;
}
.metric-line {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 10px;
  align-items: center;
  font-size: 15.5px;
}
.metric-line b,
.metric-line em {
  font-weight: var(--type-weight-regular);
  font-style: normal;
}
.metric-bar {
  position: relative;
  height: 13px;
  margin-top: 12px;
  background: color-mix(in srgb, var(--text) 10%, transparent);
  border-radius: 999px;
}
.metric-bar i {
  display: block;
  width: var(--w);
  height: 5px;
  background: var(--c);
  border-radius: 999px;
  transform: translateY(4px);
}
.metric-bar em {
  position: absolute;
  top: 3px;
  left: var(--marker);
  width: 2px;
  height: 9px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--text) 38%, transparent);
  transform: translateX(-1px);
}
.metric-bar.over {
  background: color-mix(in srgb, var(--c) 14%, color-mix(in srgb, var(--text) 8%, transparent));
}
.food-dot {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  padding: 0;
  border-radius: 999px;
  background: color-mix(in srgb, var(--panel) 82%, var(--chip));
  border: 1px solid var(--line);
  scroll-snap-align: start;
}
.food-dot .product-art.food-icon {
  width: 44px;
  height: 44px;
  background-size: 58px 58px;
}
.food-dot.selected {
  box-shadow: 0 0 0 2.2px var(--text);
  border-color: transparent;
}
.food-dot.muted {
  opacity: 0.28;
}
.slide-screen {
  position: fixed;
  z-index: 84;
  inset: 0;
  left: 50%;
  width: min(440px, 100vw);
  height: 100svh;
  min-height: 100svh;
  max-height: 100svh;
  transform: translateX(-50%);
  overflow-y: auto;
  overscroll-behavior: contain;
  animation: slide-up 640ms cubic-bezier(.18, .82, .16, 1) both;
}
.slide-screen.screen-stable {
  animation: none;
}
.meal-detail-view,
.meal-edit-view {
  box-shadow: 0 0 0 999px var(--bg);
}
.food-dot .product-art.beverage-icon.food-icon,
.food-dot .food-art.beverage-icon.food-icon,
.food-dot .product-art.fresh-fruit-icon.food-icon,
.food-dot .food-art.fresh-fruit-icon.food-icon,
.food-dot .product-art.vegetable-leaf-icon.food-icon,
.food-dot .food-art.vegetable-leaf-icon.food-icon,
.food-dot .product-art.tuber-icon.food-icon,
.food-dot .food-art.tuber-icon.food-icon,
.food-dot .product-art.dairy-cream-icon.food-icon,
.food-dot .food-art.dairy-cream-icon.food-icon,
.food-dot .product-art.egg-cheese-icon.food-icon,
.food-dot .food-art.egg-cheese-icon.food-icon,
.food-dot .product-art.chicken-icon.food-icon,
.food-dot .food-art.chicken-icon.food-icon,
.food-dot .product-art.meat-icon.food-icon,
.food-dot .food-art.meat-icon.food-icon,
.food-dot .product-art.rice-bean-icon.food-icon,
.food-dot .food-art.rice-bean-icon.food-icon,
.food-dot .product-art.nut-seed-icon.food-icon,
.food-dot .food-art.nut-seed-icon.food-icon,
.food-dot .product-art.grain-bakery-icon.food-icon,
.food-dot .food-art.grain-bakery-icon.food-icon,
.food-dot .product-art.oat-cereal-icon.food-icon,
.food-dot .food-art.oat-cereal-icon.food-icon,
.food-dot .product-art.seafood-icon.food-icon,
.food-dot .food-art.seafood-icon.food-icon,
.food-dot .product-art.sweet-snack-icon.food-icon,
.food-dot .food-art.sweet-snack-icon.food-icon {
  background-size: 42px 42px !important;
}
.food-dot .product-art.ready-meal-icon.food-icon,
.food-dot .food-art.ready-meal-icon.food-icon,
.food-dot .product-art.cake-icon.food-icon,
.food-dot .food-art.cake-icon.food-icon,
.food-dot .product-art.tort-icon.food-icon,
.food-dot .food-art.tort-icon.food-icon {
  background-size: 42px 42px !important;
}
.food-dot .product-art.oil-sauce-icon.food-icon,
.food-dot .food-art.oil-sauce-icon.food-icon {
  background-size: 42px 42px !important;
}
.detail-food-strip {
  display: flex !important;
  gap: 8px !important;
  min-height: 52px !important;
  padding: 0 2px 8px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scrollbar-width: none !important;
  -webkit-overflow-scrolling: touch !important;
  touch-action: pan-x pan-y !important;
  cursor: pointer;
}
.detail-food-strip::-webkit-scrollbar {
  display: none !important;
}
.detail-food-strip .food-dot {
  flex: 0 0 44px !important;
}
.meal-detail-panel {
  position: relative;
}
.meal-detail-handle {
  display: block;
  width: 42px;
  height: 5px;
  margin: 0 auto 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--muted) 28%, transparent);
}
.meal-detail-panel .detail-close {
  position: absolute !important;
  top: 14px;
  left: 16px;
  margin: 0 !important;
}
.meal-detail-panel .detail-add {
  position: absolute;
  top: 14px;
  right: 16px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  background: linear-gradient(135deg, var(--green2), var(--green));
  box-shadow: 0 12px 24px color-mix(in srgb, var(--green) 24%, transparent);
  transition: transform 160ms ease, box-shadow 160ms ease;
}
.meal-detail-panel .detail-add:active {
  transform: scale(.94);
  box-shadow: 0 8px 18px color-mix(in srgb, var(--green) 18%, transparent);
}
.meal-detail-panel h1 {
  margin: 0 0 22px !important;
}
.slide-screen.closing {
  animation-name: slide-down !important;
  pointer-events: none !important;
}
@keyframes slide-down {
  from {
    transform: translate(-50%, 0);
  }
  to {
    transform: translate(-50%, 100%);
  }
}
.day-detail-view .day-food-strip {
  cursor: default;
}
.day-detail-view .day-food-strip .food-dot {
  pointer-events: none;
}
.day-detail-view .detail-food-strip:empty::before {
  content: attr(aria-label);
  min-height: 44px;
  display: grid;
  align-items: center;
  color: var(--muted);
  font-size: 13px;
  font-weight: var(--type-weight-medium);
}
.meal-detail-view.slide-screen,
.meal-edit-view.slide-screen {
  box-shadow: none !important;
}
.meal-detail-view.slide-screen.closing,
.day-detail-view.slide-screen.closing {
  background: var(--top) !important;
  box-shadow: none !important;
  will-change: transform;
  backface-visibility: hidden;
}
.diet-info-overlay {
  position: fixed;
  inset: 0;
  z-index: 114;
  background: rgba(0, 0, 0, .30);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
}
:root[data-theme="dark"] .diet-info-overlay {
  background: rgba(0, 0, 0, .64);
}
.diet-info-modal {
  position: fixed;
  z-index: 115;
  left: 50%;
  bottom: max(12px, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  width: min(430px, calc(100vw - 20px));
  max-height: min(790px, calc(100dvh - max(34px, env(safe-area-inset-top)) - 20px));
  display: block;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  border-radius: 28px;
  padding-bottom: max(18px, env(safe-area-inset-bottom));
}
.diet-info-modal .modal-head {
  position: sticky;
  top: 0;
  z-index: 2;
  padding: 16px 18px 12px;
  background: color-mix(in srgb, var(--card) 90%, transparent);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
}
.diet-info-modal .modal-head h2 {
  margin: 2px 0 0;
  color: var(--text);
  font-size: 28px;
  line-height: .98;
  font-weight: var(--type-weight-strong);
}
.diet-info-modal .micro {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.1;
  font-weight: var(--type-weight-medium);
  letter-spacing: .02em;
  text-transform: uppercase;
}
.diet-info-hero {
  margin: 4px 18px 14px;
  border-radius: 24px;
  padding: 15px;
  color: #ffffff;
  background:
    radial-gradient(circle at 18% 14%, rgba(255,255,255,.30), transparent 30%),
    linear-gradient(135deg, #365f52, #5e83a0 48%, #7a6fa8);
  box-shadow: 0 16px 36px color-mix(in srgb, #4e8c73 18%, transparent);
}
.diet-info-hero span {
  display: block;
  margin-bottom: 6px;
  color: rgba(255,255,255,.72);
  font-size: 11px;
  line-height: 1.1;
  font-weight: var(--type-weight-medium);
  text-transform: uppercase;
  letter-spacing: .03em;
}
.diet-info-hero p {
  margin: 0;
  font-size: 14px;
  line-height: 1.36;
  font-weight: var(--type-weight-strong);
}
.diet-info-block {
  margin: 0 18px 14px;
  border-radius: 22px;
  padding: 14px;
  background: color-mix(in srgb, var(--soft) 78%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--line) 84%, transparent);
}
.diet-info-block h3,
.diet-info-modal > h3 {
  margin: 0 0 10px;
  color: var(--text);
  font-size: 17px;
  line-height: 1.08;
  font-weight: var(--type-weight-strong);
}
.diet-info-block p {
  margin: 0;
  color: color-mix(in srgb, var(--text) 78%, var(--muted));
  font-size: 13px;
  line-height: 1.42;
  font-weight: var(--type-weight-medium);
}
.diet-info-foods {
  display: grid;
  gap: 8px;
}
.diet-info-foods div {
  display: grid;
  gap: 3px;
  border-radius: 15px;
  padding: 10px;
  background: color-mix(in srgb, var(--panel) 84%, transparent);
}
.diet-info-foods b {
  color: var(--text);
  font-size: 13px;
  line-height: 1.1;
}
.diet-info-foods span,
.diet-info-limits li {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.32;
  font-weight: var(--type-weight-medium);
}
.diet-info-limits {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.diet-info-limits li {
  position: relative;
  border-radius: 15px;
  padding: 10px 10px 10px 26px;
  background: color-mix(in srgb, #c67668 10%, var(--panel));
}
.diet-info-limits li::before {
  content: "";
  position: absolute;
  left: 11px;
  top: 15px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #c67668;
}
.diet-info-modal > h3 {
  margin: 2px 18px 10px;
}
.diet-score-list {
  display: grid;
  gap: 8px;
  padding: 0 18px 18px;
}
.diet-score-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 46px;
  gap: 8px 12px;
  align-items: center;
  border-radius: 18px;
  padding: 11px 12px;
  background: color-mix(in srgb, var(--soft) 88%, transparent);
  box-shadow: inset 0 0 0 1px var(--line);
}
.diet-score-row span,
.diet-score-row b,
.diet-score-row small {
  display: block;
  min-width: 0;
}
.diet-score-row b {
  color: var(--text);
  font-size: 14px;
  line-height: 1.15;
}
.diet-score-row small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.2;
  font-weight: var(--type-weight-medium);
}
.diet-score-row strong {
  color: var(--text);
  font-size: 14px;
  text-align: right;
}
.diet-score-row i {
  grid-column: 1 / -1;
  height: 5px;
  overflow: hidden;
  border-radius: 999px;
  background: color-mix(in srgb, var(--text) 11%, transparent);
}
.diet-score-row em {
  display: block;
  width: var(--score);
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #4e8c73, #7a6fa8);
}
.meal-edit-view {
  z-index: 84;
  padding: max(66px, calc(env(safe-area-inset-top) + 10px)) 15px max(96px, calc(44px + env(safe-area-inset-bottom)));
  background: var(--bg);
  box-shadow: 0 -18px 36px color-mix(in srgb, #000 10%, transparent);
}
.edit-top {
  display: grid;
  grid-template-columns: 42px 66px 100px minmax(0, 1fr) 42px;
  gap: 7px;
  align-items: center;
  margin-bottom: 40px;
}
.edit-round,
.edit-time,
.edit-kcal,
.edit-plate-icons {
  height: 42px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: var(--panel-2);
  font-size: 15px;
}
.edit-round {
  width: 42px;
  font-size: 27px;
  line-height: 1;
}
.edit-kcal {
  border: 3px solid var(--blue);
  background: var(--top);
  font-size: 14.5px;
}
.edit-plate-icons {
  display: flex;
  gap: 7px;
  justify-content: center;
  padding: 0 10px;
  overflow: hidden;
}
.edit-title {
  margin: 0 0 20px;
  font-size: 27px;
  line-height: 1;
  font-weight: var(--type-weight-strong);
}
.edit-list {
  display: grid;
  gap: 9px;
}
.edit-plate-icons .food-art,
.edit-plate-icons .product-art {
  width: 22px;
  height: 22px;
  background-size: 22px 22px;
  flex: 0 0 auto;
}
.meal-screen-stack {
  position: fixed;
  inset: 0;
  z-index: 70;
  pointer-events: none;
}
.meal-screen-stack .meal-edit-view {
  z-index: 72;
  transform: translate(-50%, 0);
  pointer-events: auto;
  animation: none !important;
}
.meal-screen-stack .meal-detail-view {
  z-index: 86;
  pointer-events: auto;
  background: var(--top);
  box-shadow: 0 -20px 42px color-mix(in srgb, #000 12%, transparent);
  animation: meal-info-away 340ms cubic-bezier(.2, .86, .18, 1) both !important;
}
.meal-screen-stack.screen-stable .meal-detail-view {
  animation: none !important;
  transform: translate(-50%, 104%);
  pointer-events: none;
}
.meal-screen-stack .meal-detail-view.returning,
.meal-screen-stack.screen-stable .meal-detail-view.returning {
  animation: meal-info-back 320ms cubic-bezier(.2, .86, .18, 1) both !important;
  pointer-events: none;
}
@keyframes meal-info-away {
  from {
    transform: translate(-50%, 0);
  }
  to {
    transform: translate(-50%, 104%);
  }
}
@keyframes meal-info-back {
  from {
    transform: translate(-50%, 104%);
  }
  to {
    transform: translate(-50%, 0);
  }
}
.edit-error-note {
  margin: -24px 4px 18px;
  border-radius: 12px;
  padding: 9px 12px;
  color: #b3261e;
  background: color-mix(in srgb, #ff3b30 11%, var(--top));
  font-size: 13px;
  font-weight: var(--type-weight-strong);
}
.meal-screen-stack .meal-edit-view {
  padding-top: max(18px, calc(env(safe-area-inset-top) - 12px)) !important;
}
.meal-screen-stack .meal-edit-view .edit-top {
  margin-bottom: 24px !important;
}
.meal-screen-stack .meal-detail-view {
  box-shadow: 0 -20px 42px color-mix(in srgb, #000 12%, transparent) !important;
}
.meal-edit-view {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.meal-edit-view .edit-top,
.meal-edit-view .edit-error-note,
.meal-edit-view .edit-title {
  flex: 0 0 auto;
  min-height: 0;
}

.meal-edit-view .edit-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: none;
  grid-auto-rows: max-content;
  margin: 0 -15px;
  padding: 0 15px 96px;
}
.meal-edit-view .edit-done-bar {
  position: absolute;
  right: 15px;
  bottom: max(16px, calc(env(safe-area-inset-bottom) + 8px));
  z-index: 6;
  display: flex;
  gap: 10px;
  align-items: center;
}

.meal-edit-view .edit-done-bar .search-log-button {
  min-width: 132px;
}
.calendar-modal {
  max-height: min(86vh, 720px);
}
.calendar-head {
  padding: 12px 16px 10px;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 42px;
  gap: 12px;
  align-items: center;
  text-align: center;
}
.calendar-head h3 {
  margin: 5px 0 0;
  color: var(--ink);
  font-size: 20px;
  line-height: 1;
  font-weight: var(--type-weight-strong);
  text-transform: capitalize;
}
.calendar-weekdays,
.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
  padding: 0 16px;
}
.calendar-weekdays {
  padding-top: 4px;
  padding-bottom: 7px;
}
.calendar-weekdays span {
  color: var(--muted);
  font-size: 9px;
  font-weight: var(--type-weight-strong);
  text-align: center;
}
.calendar-grid {
  padding-bottom: 12px;
}
.calendar-day {
  aspect-ratio: 1;
  min-width: 0;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  border-radius: 15px;
  color: var(--ink);
  background: var(--card-soft);
  border: 1px solid var(--line);
  overflow: hidden;
}
.calendar-day::after {
  content: "";
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 6px;
  height: 3px;
  border-radius: 999px;
  background: var(--status-color, transparent);
  transform: scaleX(calc(var(--day-pct) / 100));
  transform-origin: left center;
  opacity: 0;
}
.calendar-day.empty {
  background: transparent;
  border: 0;
}
.calendar-day strong {
  font-size: 13px;
  line-height: 1;
  font-weight: var(--type-weight-strong);
}
.calendar-day span {
  color: currentColor;
  opacity: 0.74;
  font-size: 8px;
  line-height: 1;
  font-weight: var(--type-weight-strong);
}
.calendar-day.status-under {
  --status-color: var(--blue);
  color: var(--ink);
  background: var(--card-soft);
  border-color: color-mix(in srgb, var(--blue) 36%, var(--line));
}
.calendar-day.status-green {
  --status-color: var(--green);
  color: var(--ink);
  background: var(--card-soft);
  border-color: color-mix(in srgb, var(--green) 40%, var(--line));
}
.calendar-day.status-orange {
  --status-color: var(--amber);
  color: var(--ink);
  background: var(--card-soft);
  border-color: color-mix(in srgb, var(--amber) 42%, var(--line));
}
.calendar-day.status-red {
  --status-color: #ff3b30;
  color: var(--ink);
  background: var(--card-soft);
  border-color: color-mix(in srgb, #ff3b30 44%, var(--line));
}
.calendar-day.status-under::after,
.calendar-day.status-green::after,
.calendar-day.status-orange::after,
.calendar-day.status-red::after {
  opacity: 1;
}
.calendar-day.selected {
  outline: 3px solid color-mix(in srgb, var(--green) 20%, transparent);
  border-color: color-mix(in srgb, var(--green) 54%, var(--line));
}
.calendar-legend {
  padding: 2px 16px 16px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 7px;
}
.calendar-legend span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--muted);
  font-size: 10px;
  font-weight: var(--type-weight-strong);
}
.calendar-legend i {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--soft);
}
.legend-under i {
  background: var(--blue);
}
.legend-green i {
  background: var(--green);
}
.legend-orange i {
  background: var(--amber);
}
.legend-red i {
  background: #ff3b30;
}
.calendar-grabber {
  width: 44px;
  height: 5px;
  margin: 10px auto 4px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--muted) 22%, transparent);
}
.calendar-title {
  min-width: 0;
  text-align: center;
}
.calendar-title p {
  margin: 0 0 4px;
  color: var(--muted);
  font-size: 11px;
  font-weight: var(--type-weight-strong);
  line-height: 1;
}
.calendar-title h3 {
  margin: 0;
}
.calendar-nav-btn {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 999px;
  color: var(--text);
  background: color-mix(in srgb, var(--top) 82%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--line) 72%, transparent);
  font: inherit;
  font-size: 26px;
  font-weight: var(--type-weight-light);
  line-height: 1;
}
.calendar-focus-card,
.calendar-month-stats {
  margin: 0 16px 12px;
}
.calendar-focus-card {
  min-height: 66px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 13px 12px 15px;
  border-radius: 20px;
  background: color-mix(in srgb, var(--top) 84%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--line) 70%, transparent);
}
.calendar-focus-card div {
  min-width: 0;
  display: grid;
  gap: 4px;
}
.calendar-focus-card span {
  overflow: hidden;
  color: var(--muted);
  font-size: 12px;
  font-weight: var(--type-weight-medium);
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.calendar-focus-card strong {
  color: var(--text);
  font-size: 20px;
  font-weight: var(--type-weight-strong);
  line-height: 1;
}
.calendar-focus-card button {
  min-width: 68px;
  height: 38px;
  border: 0;
  border-radius: 999px;
  color: var(--top);
  background: var(--classic-accent, var(--green));
  font: inherit;
  font-size: 13px;
  font-weight: var(--type-weight-strong);
}
.calendar-month-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.calendar-month-stats span {
  min-height: 40px;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 5px;
  border-radius: 15px;
  color: var(--muted);
  background: color-mix(in srgb, var(--soft) 54%, transparent);
  font-size: 11px;
  font-weight: var(--type-weight-medium);
}
.calendar-month-stats strong {
  color: var(--text);
  font-size: 16px;
  font-weight: var(--type-weight-strong);
}
.home-classic-shell .calendar-backdrop {
  background: color-mix(in srgb, #161812 20%, transparent) !important;
  backdrop-filter: blur(22px) saturate(150%) !important;
  -webkit-backdrop-filter: blur(22px) saturate(150%) !important;
}
:root[data-theme="dark"] .home-classic-shell .calendar-backdrop {
  background: rgba(0, 0, 0, .64) !important;
}
.home-classic-shell .calendar-modal {
  width: min(430px, calc(100vw - 18px)) !important;
  max-height: min(86vh, 720px) !important;
  border-radius: 32px 32px 26px 26px !important;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--top) 96%, #ffffff), color-mix(in srgb, var(--top) 90%, #dfe4de)) !important;
  border: 1px solid color-mix(in srgb, var(--line) 78%, transparent) !important;
  box-shadow: 0 28px 86px rgba(23, 28, 24, .22) !important;
}
:root[data-theme="dark"] .home-classic-shell .calendar-modal {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--panel) 92%, #ffffff 4%), color-mix(in srgb, var(--panel) 98%, #000000)) !important;
  box-shadow: 0 28px 90px rgba(0, 0, 0, .72) !important;
}
.home-classic-shell .calendar-head {
  padding: 10px 18px 12px !important;
  grid-template-columns: 44px minmax(0, 1fr) 44px !important;
}
.home-classic-shell .calendar-title p {
  color: var(--classic-ink-soft) !important;
}
.home-classic-shell .calendar-head h3 {
  color: var(--text) !important;
  font-size: 21px !important;
  font-weight: var(--type-weight-medium) !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}
.home-classic-shell .calendar-nav-btn {
  color: var(--text) !important;
  background: color-mix(in srgb, var(--top) 72%, transparent) !important;
}
:root[data-theme="dark"] .home-classic-shell .calendar-nav-btn {
  background: color-mix(in srgb, var(--top) 10%, var(--panel)) !important;
}
.home-classic-shell .calendar-focus-card {
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--top) 96%, #ffffff), color-mix(in srgb, var(--top) 82%, #dfe5df)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.72),
    inset 0 0 0 1px var(--classic-hairline) !important;
}
:root[data-theme="dark"] .home-classic-shell .calendar-focus-card {
  background: color-mix(in srgb, var(--panel) 94%, #ffffff 4%) !important;
  box-shadow: inset 0 0 0 1px var(--classic-hairline) !important;
}
.home-classic-shell .calendar-focus-card button {
  background: var(--classic-accent) !important;
}
.home-classic-shell .calendar-weekdays,
.home-classic-shell .calendar-grid {
  gap: 7px !important;
  padding-left: 18px !important;
  padding-right: 18px !important;
}
.home-classic-shell .calendar-weekdays {
  padding-top: 2px !important;
  padding-bottom: 8px !important;
}
.home-classic-shell .calendar-weekdays span {
  color: var(--classic-ink-soft) !important;
  font-size: 10px !important;
  font-weight: var(--type-weight-medium) !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}
.home-classic-shell .calendar-grid {
  padding-bottom: 14px !important;
}
.home-classic-shell .calendar-day {
  min-height: 44px;
  aspect-ratio: 1 / 1;
  border: 0 !important;
  border-radius: 16px !important;
  color: var(--text) !important;
  background: color-mix(in srgb, var(--top) 70%, transparent) !important;
  box-shadow: inset 0 0 0 1px var(--classic-hairline) !important;
}
:root[data-theme="dark"] .home-classic-shell .calendar-day {
  background: color-mix(in srgb, var(--top) 8%, var(--panel)) !important;
}
.home-classic-shell .calendar-day::after {
  content: none !important;
}
.home-classic-shell .calendar-day::before {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 13px;
  background: conic-gradient(from -90deg, var(--status-color, transparent) calc(var(--day-pct) * 1%), transparent 0);
  opacity: .18;
  pointer-events: none;
}
.home-classic-shell .calendar-day.status-under { --status-color: #6f93b8; }
.home-classic-shell .calendar-day.status-green { --status-color: var(--classic-accent); }
.home-classic-shell .calendar-day.status-orange { --status-color: #bd9652; }
.home-classic-shell .calendar-day.status-red { --status-color: #c97066; }
.home-classic-shell .calendar-day strong {
  position: relative;
  z-index: 1;
  font-size: 15px !important;
  font-weight: var(--type-weight-medium) !important;
}
.home-classic-shell .calendar-day span {
  position: relative;
  z-index: 1;
  min-height: 9px;
  color: var(--classic-ink-soft) !important;
  font-size: 8px !important;
  font-weight: var(--type-weight-medium) !important;
}
.home-classic-shell .calendar-day.today strong::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -8px;
  width: 4px;
  height: 4px;
  border-radius: 999px;
  background: var(--classic-accent);
  transform: translateX(-50%);
}
.home-classic-shell .calendar-day.selected {
  color: var(--top) !important;
  background: var(--classic-accent) !important;
  box-shadow:
    0 10px 20px color-mix(in srgb, var(--classic-accent) 22%, transparent),
    inset 0 0 0 1px color-mix(in srgb, #ffffff 24%, transparent) !important;
  outline: 0 !important;
}
.home-classic-shell .calendar-day.selected span,
.home-classic-shell .calendar-day.selected strong {
  color: var(--top) !important;
}
.home-classic-shell .calendar-day.empty {
  background: transparent !important;
  box-shadow: none !important;
}
.home-classic-shell .calendar-legend {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 6px !important;
  padding: 0 18px 18px !important;
}
.home-classic-shell .calendar-legend span {
  min-width: 0;
  justify-content: center;
  gap: 5px;
  overflow: hidden;
  border-radius: 999px;
  padding: 7px 6px;
  background: color-mix(in srgb, var(--soft) 50%, transparent);
  color: var(--classic-ink-soft) !important;
  font-size: 9.5px !important;
  font-weight: var(--type-weight-medium) !important;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.home-classic-shell .calendar-legend i {
  width: 7px !important;
  height: 7px !important;
  flex: 0 0 auto;
}

.calendar-modal .calendar-title p {
  font-size: 11px !important;
  font-weight: var(--type-weight-medium) !important;
  letter-spacing: .08em !important;
  text-transform: uppercase;
}

.calendar-modal .calendar-title h3 {
  font-size: 21px !important;
  font-weight: var(--type-weight-strong) !important;
  letter-spacing: -0.3px !important;
}

.calendar-modal .calendar-focus-card > div > span {
  font-size: 12px !important;
  font-weight: var(--type-weight-medium) !important;
}

.calendar-modal .calendar-focus-card > div > strong {
  font-size: 17px !important;
  font-weight: var(--type-weight-strong) !important;
  letter-spacing: -0.2px !important;
}

.calendar-modal .calendar-month-stats span {
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 1px !important;
  font-size: 11px !important;
  font-weight: var(--type-weight-medium) !important;
}

.calendar-modal .calendar-month-stats strong {
  font-size: 20px !important;
  font-weight: var(--type-weight-strong) !important;
  line-height: 1.1 !important;
  letter-spacing: -0.3px !important;
}

.calendar-modal .calendar-weekdays span {
  font-size: 11px !important;
  font-weight: var(--type-weight-medium) !important;
}

.calendar-modal .calendar-legend {
  grid-template-columns: 1fr 1fr !important;
  gap: 6px 8px !important;
}

.calendar-modal .calendar-legend span {
  justify-content: flex-start !important;
  overflow: visible !important;
  font-size: 11px !important;
  font-weight: var(--type-weight-medium) !important;
  white-space: normal !important;
}
.icon-action,
.food-add {
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
}
.icon-action.danger {
  color: var(--orange);
}
.save-template {
  width: 100%;
  height: 42px;
  margin-bottom: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 999px;
  color: var(--bg);
  background: var(--ink);
  font-size: 12px;
  font-weight: var(--type-weight-strong);
}
:root[data-theme="dark"] .save-template,
:root[data-theme="dark"] .meal-type-grid button.active {
  color: #000000;
  background: #ffffff;
}
.save-template svg {
  width: 16px;
  height: 16px;
}
.template-tab-panel {
  display: grid;
  gap: 12px;
  padding: 0 14px 86px;
}
.template-list {
  display: grid;
  gap: 10px;
}
.template-actions {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.template-tab-panel .template-actions .icon-action {
  width: 40px;
  height: 40px;
  box-shadow: none;
}
.template-tab-panel .save-template {
  margin: 0;
}
.recipe-list {
  gap: 12px;
}
.recipe-row {
  min-height: 118px;
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: start;
  padding: 10px;
  border-radius: 16px;
  background: var(--card-soft);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 5%, transparent);
  cursor: pointer;
  transition: transform 160ms ease, box-shadow 160ms ease;
}
.recipe-row:active {
  transform: scale(.99);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--green) 14%, transparent);
}
.recipe-thumb {
  width: 62px;
  height: 62px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 14px;
  background: color-mix(in srgb, var(--green) 12%, var(--card));
  color: var(--green);
}
.recipe-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.recipe-thumb.icon-thumb {
  background: transparent;
}
.recipe-thumb.icon-thumb img {
  object-fit: contain;
  transform: scale(1.08);
}
.recipe-thumb.placeholder {
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--green) 16%, transparent);
}
.recipe-copy {
  min-width: 0;
  display: grid;
  gap: 4px;
}
.recipe-copy strong {
  min-width: 0;
  overflow: hidden;
  color: var(--text);
  font-size: 15.5px;
  font-weight: var(--type-weight-medium);
  line-height: 1.12;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.recipe-copy span,
.recipe-copy small {
  min-width: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.recipe-portion-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}
.recipe-portion-chips button {
  min-width: 0;
  height: 31px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0 9px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--green) 12%, var(--card));
  color: var(--text);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--green) 16%, transparent);
}
.recipe-portion-chips b,
.recipe-portion-chips span {
  max-width: 82px;
  overflow: hidden;
  font-size: 11.5px;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.recipe-portion-chips span {
  color: var(--muted);
}
.recipe-actions {
  align-self: center;
  flex-direction: column;
}
.flow-shell .portion-stepper.mini-stepper button,
.flow-shell .food-add,
.flow-shell .icon-action {
  box-shadow: none;
}
.recipe-detail-view .recipe-detail-photo.icon-photo,
.recipe-thumb.icon-thumb {
  background: transparent !important;
  box-shadow: none !important;
}
.recipe-detail-view .recipe-detail-photo.icon-photo img,
.recipe-thumb.icon-thumb img {
  object-fit: contain !important;
}
.meal-detail-panel.recipe-detail-panel {
  min-height: auto;
  padding-bottom: max(32px, calc(env(safe-area-inset-bottom) + 28px));
}
.recipe-detail-view.slide-screen {
  overflow-y: auto !important;
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
}
.meal-detail-panel.recipe-detail-panel h1 {
  margin: 14px 48px 12px !important;
  color: var(--text);
  font-size: 21px;
  line-height: 1.12;
  font-weight: var(--type-weight-strong);
}
.meal-detail-panel.recipe-detail-panel .detail-close {
  z-index: 4;
  pointer-events: auto;
}
.recipe-detail-view.slide-screen.closing {
  pointer-events: auto !important;
  animation-duration: 220ms !important;
  will-change: transform;
}
.recipe-detail-view.slide-screen.closing .recipe-detail-panel,
.recipe-detail-view.slide-screen.closing .detail-food-strip,
.recipe-detail-view.slide-screen.closing .detail-mini-macros {
  pointer-events: none;
}
.recipe-detail-photo {
  width: min(100%, 244px);
  aspect-ratio: 16 / 10;
  margin: 8px auto 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 18px;
  background: color-mix(in srgb, var(--green) 10%, var(--panel-2));
  color: var(--green);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 7%, transparent);
}
.recipe-detail-photo img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
.recipe-detail-photo.icon-photo {
  width: min(100%, 276px);
  aspect-ratio: 16 / 9;
  background: transparent;
  box-shadow: none;
}
.recipe-detail-photo.icon-photo img {
  object-fit: contain;
}
.recipe-detail-photo.placeholder {
  gap: 6px;
}
.recipe-detail-photo.placeholder span {
  color: var(--muted);
  font-size: 12px;
  font-weight: var(--type-weight-medium);
}
.recipe-detail-description {
  max-width: 360px;
  margin: 0 auto 14px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.35;
  text-align: center;
}
.recipe-detail-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  justify-content: center;
  margin: 0 0 18px;
}
.recipe-detail-facts span {
  min-height: 28px;
  display: inline-grid;
  place-items: center;
  padding: 0 10px;
  border-radius: 999px;
  background: var(--panel-2);
  color: var(--muted);
  font-size: 12px;
  font-weight: var(--type-weight-medium);
}
.recipe-detail-view .detail-summary {
  margin-top: 14px;
}
.recipe-detail-portions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(126px, 1fr));
  gap: 8px;
  margin-top: 14px;
}
.recipe-detail-portions button {
  min-width: 0;
  min-height: 58px;
  display: grid;
  align-content: center;
  gap: 5px;
  padding: 10px 12px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--green) 11%, var(--panel-2));
  color: var(--text);
  text-align: left;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--green) 16%, transparent);
}
.recipe-detail-portions strong,
.recipe-detail-portions span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.recipe-detail-portions strong {
  font-size: 13px;
  font-weight: var(--type-weight-strong);
}
.recipe-detail-portions span {
  color: var(--muted);
  font-size: 12px;
}
.recipe-detail-ingredients {
  display: grid;
  gap: 8px;
  margin-top: 14px;
}
.recipe-detail-ingredient-row {
  min-height: 58px;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  gap: 9px;
  align-items: center;
  padding: 8px 10px;
  border-radius: 14px;
  background: var(--panel-2);
}
.recipe-detail-ingredient-row strong,
.recipe-detail-ingredient-row small {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.recipe-detail-ingredient-row strong {
  color: var(--text);
  font-size: 13px;
  font-weight: var(--type-weight-strong);
}
.recipe-detail-ingredient-row small,
.recipe-detail-ingredient-row b {
  color: var(--muted);
  font-size: 12px;
}
.recipe-detail-ingredient-row b {
  font-weight: var(--type-weight-strong);
  white-space: nowrap;
}
.recipe-editor-modal {
  max-height: min(88vh, 760px);
}
.recipe-editor-scroll {
  min-height: 0;
  max-height: calc(88vh - 156px);
  display: grid;
  gap: 14px;
  overflow-y: auto;
  padding-right: 2px;
}
.recipe-photo-row {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
}
.recipe-photo-pick {
  width: 92px;
  height: 92px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 18px;
  background: color-mix(in srgb, var(--green) 10%, var(--card));
  color: var(--green);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 8%, transparent);
}
.recipe-photo-pick img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.recipe-photo-pick b {
  font-size: 11px;
  color: var(--muted);
}
.recipe-editor-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.recipe-editor-fields .field.full {
  grid-column: 1 / -1;
}
.recipe-search-input {
  margin: 0;
}
.recipe-product-results {
  display: grid;
  gap: 8px;
}
.recipe-product-results button {
  min-height: 58px;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) 28px;
  gap: 9px;
  align-items: center;
  padding: 8px 10px;
  border-radius: 14px;
  background: var(--card-soft);
  color: var(--text);
  text-align: left;
}
.recipe-product-results strong,
.recipe-product-results small {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.recipe-product-results strong {
  font-size: 13px;
}
.recipe-product-results small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 11.5px;
}
.recipe-ingredient-list,
.recipe-portion-list {
  display: grid;
  gap: 8px;
}
.recipe-ingredient-row {
  min-height: 58px;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) 82px 34px;
  gap: 8px;
  align-items: center;
  padding: 8px 9px;
  border-radius: 14px;
  background: var(--card-soft);
}
.recipe-ingredient-row strong,
.recipe-ingredient-row small {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.recipe-ingredient-row strong {
  font-size: 13px;
}
.recipe-ingredient-row small {
  color: var(--muted);
  font-size: 11.5px;
}
.recipe-ingredient-row label,
.recipe-portion-row label {
  height: 36px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 4px;
  padding: 0 8px;
  border-radius: 12px;
  background: var(--card);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 7%, transparent);
}
.recipe-ingredient-row input,
.recipe-portion-row input {
  min-width: 0;
  width: 100%;
  background: transparent;
  color: var(--text);
  font: inherit;
}
.recipe-ingredient-row label span,
.recipe-portion-row label span {
  color: var(--muted);
  font-size: 11px;
}
.recipe-portion-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 82px 34px;
  gap: 8px;
  align-items: center;
  padding: 8px 9px;
  border-radius: 14px;
  background: var(--card-soft);
}
.recipe-portion-row > input {
  height: 36px;
  padding: 0 9px;
  border-radius: 12px;
  background: var(--card);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 7%, transparent);
}
.recipe-add-portion {
  min-height: 42px;
}
.food-avatar {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 15px;
  color: var(--green);
  background: color-mix(in srgb, var(--green) 13%, transparent);
  border: 1px solid color-mix(in srgb, var(--green) 16%, transparent);
}
.food-avatar svg {
  width: 21px;
  height: 21px;
}
.recipe-detail-view.meal-detail-view.slide-screen {
  z-index: 180 !important;
  pointer-events: auto !important;
  height: 100dvh !important;
  min-height: 100dvh !important;
  max-height: 100dvh !important;
  overflow-x: hidden !important;
  overflow-y: scroll !important;
  overscroll-behavior-y: contain !important;
  -webkit-overflow-scrolling: touch !important;
  touch-action: pan-y !important;
}
.recipe-detail-view .recipe-detail-panel {
  pointer-events: auto !important;
  min-height: auto !important;
  overflow: visible !important;
  padding-bottom: max(72px, calc(env(safe-area-inset-bottom) + 64px)) !important;
}
.recipe-detail-view .recipe-food-strip,
.recipe-detail-view .detail-mini-macros {
  flex-shrink: 0;
}
.food-dot.beverage-dot,
.food-dot.fresh-fruit-dot,
.food-dot.vegetable-leaf-dot,
.food-dot.tuber-dot,
.food-dot.dairy-cream-dot,
.food-dot.egg-cheese-dot,
.food-dot.chicken-dot,
.food-dot.meat-dot,
.food-dot.rice-bean-dot,
.food-dot.nut-seed-dot,
.food-dot.grain-bakery-dot,
.food-dot.oat-cereal-dot,
.food-dot.seafood-dot,
.food-dot.sweet-snack-dot {
  border-color: transparent !important;
  background: transparent !important;
}
.design-total-shell .food-dot.beverage-dot,
.design-total-shell .food-dot.fresh-fruit-dot,
.design-total-shell .food-dot.vegetable-leaf-dot,
.design-total-shell .food-dot.tuber-dot,
.design-total-shell .food-dot.dairy-cream-dot,
.design-total-shell .food-dot.egg-cheese-dot,
.design-total-shell .food-dot.chicken-dot,
.design-total-shell .food-dot.meat-dot,
.design-total-shell .food-dot.rice-bean-dot,
.design-total-shell .food-dot.nut-seed-dot,
.design-total-shell .food-dot.grain-bakery-dot,
.design-total-shell .food-dot.oat-cereal-dot,
.design-total-shell .food-dot.seafood-dot,
.design-total-shell .food-dot.sweet-snack-dot {
  border-color: color-mix(in srgb, var(--text) 10%, transparent) !important;
  background: color-mix(in srgb, var(--top) 86%, transparent) !important;
}
:root[data-theme="dark"] .design-total-shell .food-dot.beverage-dot,
:root[data-theme="dark"] .design-total-shell .food-dot.fresh-fruit-dot,
:root[data-theme="dark"] .design-total-shell .food-dot.vegetable-leaf-dot,
:root[data-theme="dark"] .design-total-shell .food-dot.tuber-dot,
:root[data-theme="dark"] .design-total-shell .food-dot.dairy-cream-dot,
:root[data-theme="dark"] .design-total-shell .food-dot.egg-cheese-dot,
:root[data-theme="dark"] .design-total-shell .food-dot.chicken-dot,
:root[data-theme="dark"] .design-total-shell .food-dot.meat-dot,
:root[data-theme="dark"] .design-total-shell .food-dot.rice-bean-dot,
:root[data-theme="dark"] .design-total-shell .food-dot.nut-seed-dot,
:root[data-theme="dark"] .design-total-shell .food-dot.grain-bakery-dot,
:root[data-theme="dark"] .design-total-shell .food-dot.oat-cereal-dot,
:root[data-theme="dark"] .design-total-shell .food-dot.seafood-dot,
:root[data-theme="dark"] .design-total-shell .food-dot.sweet-snack-dot {
  border-color: rgba(255, 255, 255, 0.13) !important;
  background: rgba(255, 255, 255, 0.015) !important;
}
.food-dot.ready-meal-dot,
.food-dot.cake-dot,
.food-dot.tort-dot {
  border-color: transparent !important;
  background: transparent !important;
}
.design-total-shell .food-dot.ready-meal-dot,
.design-total-shell .food-dot.cake-dot,
.design-total-shell .food-dot.tort-dot {
  border-color: color-mix(in srgb, var(--text) 10%, transparent) !important;
  background: color-mix(in srgb, var(--top) 86%, transparent) !important;
}
:root[data-theme="dark"] .design-total-shell .food-dot.ready-meal-dot,
:root[data-theme="dark"] .design-total-shell .food-dot.cake-dot,
:root[data-theme="dark"] .design-total-shell .food-dot.tort-dot {
  border-color: rgba(255, 255, 255, 0.13) !important;
  background: rgba(255, 255, 255, 0.015) !important;
}
.design-total-shell .food-dot.ready-meal-dot.selected,
.design-total-shell .food-dot.cake-dot.selected,
.design-total-shell .food-dot.tort-dot.selected,
:root[data-theme="dark"] .design-total-shell .food-dot.ready-meal-dot.selected,
:root[data-theme="dark"] .design-total-shell .food-dot.cake-dot.selected,
:root[data-theme="dark"] .design-total-shell .food-dot.tort-dot.selected {
  border-color: var(--text) !important;
  background: color-mix(in srgb, var(--top) 88%, transparent) !important;
}
.food-dot.oil-sauce-dot {
  border-color: color-mix(in srgb, var(--text) 10%, transparent) !important;
  background: color-mix(in srgb, var(--top) 86%, transparent) !important;
}
:root[data-theme="dark"] .food-dot.oil-sauce-dot {
  border-color: rgba(255, 255, 255, 0.13) !important;
  background: rgba(255, 255, 255, 0.015) !important;
}
.design-total-shell .food-dot.oil-sauce-dot.selected,
:root[data-theme="dark"] .design-total-shell .food-dot.oil-sauce-dot.selected {
  border-color: var(--text) !important;
  background: color-mix(in srgb, var(--top) 88%, transparent) !important;
}
.food-dot.sushi-dot,
.design-total-shell .food-dot.sushi-dot {
  background: color-mix(in srgb, #e9dcff 88%, transparent);
}
:root[data-theme="dark"] .food-dot.sushi-dot,
:root[data-theme="dark"] .design-total-shell .food-dot.sushi-dot {
  background: color-mix(in srgb, #2f2650 78%, transparent);
}
.tone-fruit {
  color: #42a447;
  background: rgba(66, 164, 71, 0.12);
  border-color: rgba(66, 164, 71, 0.2);
}
.tone-fat {
  color: #d89b27;
  background: rgba(216, 155, 39, 0.13);
  border-color: rgba(216, 155, 39, 0.2);
}
.tone-grain {
  color: #b77b29;
  background: rgba(183, 123, 41, 0.13);
  border-color: rgba(183, 123, 41, 0.2);
}
.tone-dairy {
  color: #6177d8;
  background: rgba(97, 119, 216, 0.12);
  border-color: rgba(97, 119, 216, 0.2);
}
.tone-legume {
  color: #7b8f25;
  background: rgba(123, 143, 37, 0.13);
  border-color: rgba(123, 143, 37, 0.2);
}
.tone-vegetable {
  color: #2e9664;
  background: rgba(46, 150, 100, 0.12);
  border-color: rgba(46, 150, 100, 0.2);
}
.tone-protein {
  color: #d85650;
  background: rgba(216, 86, 80, 0.12);
  border-color: rgba(216, 86, 80, 0.2);
}
.tone-basic {
  color: #4b98c8;
  background: rgba(75, 152, 200, 0.12);
  border-color: rgba(75, 152, 200, 0.2);
}
.meal-detail-panel .detail-add.recipe-detail-edit {
  width: 42px;
  height: 42px;
  background: color-mix(in srgb, var(--green) 7%, var(--panel-2));
  color: var(--green);
  box-shadow:
  inset 0 0 0 1px color-mix(in srgb, var(--green) 18%, transparent),
  0 10px 22px color-mix(in srgb, var(--ink) 8%, transparent);
}
.meal-detail-panel .detail-add.recipe-detail-edit svg {
  width: 23px;
  height: 23px;
}
.meal-detail-panel .detail-add.recipe-detail-edit:active {
  transform: scale(.94);
  box-shadow:
  inset 0 0 0 1px color-mix(in srgb, var(--green) 24%, transparent),
  0 7px 16px color-mix(in srgb, var(--ink) 7%, transparent);
}
.saved-portions {
  margin: 10px 16px 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.saved-portions button {
  padding: 10px;
  border-radius: 16px;
  color: var(--ink);
  background: var(--card-soft);
  border: 1px solid var(--line);
  text-align: left;
}
.saved-portions button.active {
  color: var(--bg);
  background: var(--ink);
}
.saved-portions strong,
.saved-portions span {
  display: block;
}
.saved-portions strong {
  font-size: 13px;
  font-weight: var(--type-weight-strong);
}
.saved-portions span {
  margin-top: 3px;
  font-size: 11px;
  color: var(--muted);
  font-weight: var(--type-weight-strong);
}
.saved-portions button.active span {
  color: currentColor;
  opacity: 0.82;
}
.portion-count-card {
  margin: 10px 16px 0;
  padding: 10px 12px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  border-radius: 18px;
  background: var(--card-soft);
  border: 1px solid var(--line);
}
.portion-count-card span {
  display: block;
  color: var(--muted);
  font-size: 9px;
  font-weight: var(--type-weight-medium);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.portion-count-card strong {
  display: block;
  margin-top: 4px;
  color: var(--ink);
  font-size: 12px;
  font-weight: var(--type-weight-strong);
}
.portion-count-control {
  height: 38px;
  display: grid;
  grid-template-columns: 32px 44px 32px;
  align-items: center;
  border-radius: 999px;
  overflow: hidden;
  background: var(--pill);
  border: 1px solid var(--line);
}
.portion-count-control button,
.portion-count-control input {
  height: 100%;
  min-width: 0;
  border: 0;
  color: var(--ink);
  background: transparent;
  font: inherit;
  font-weight: var(--type-weight-strong);
  text-align: center;
}
.portion-count-control input {
  border-inline: 1px solid var(--line);
  font-size: 14px;
}
.ring {
  flex: 0 0 auto;
  width: 58px;
  height: 58px;
  position: relative;
}
.sat-fat-slot {
  min-height: 0;
  padding: 0 16px;
}
.sat-fat-notice {
  margin: 0 0 10px;
  min-height: 36px;
  padding: 8px 10px;
  display: flex;
  align-items: center;
  gap: 8px;
  border-radius: 16px;
  color: var(--muted);
  background: color-mix(in srgb, var(--amber) 7%, var(--card-soft));
  border: 1px solid color-mix(in srgb, var(--amber) 18%, var(--line));
  font-size: 11px;
  line-height: 1.25;
  font-weight: var(--type-weight-strong);
}
.sat-fat-notice i {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 999px;
  color: var(--bg);
  background: var(--muted);
  font-style: normal;
  font-size: 13px;
  font-weight: var(--type-weight-strong);
}
.sat-fat-notice strong {
  color: var(--ink);
  font-weight: var(--type-weight-strong);
}
.sat-fat-notice.warning {
  color: #9a5a00;
  background: rgba(255, 176, 32, 0.12);
  border-color: rgba(255, 176, 32, 0.36);
}
.sat-fat-notice.warning i {
  background: var(--amber);
  color: #1d1d1f;
}
.sat-fat-notice.critical {
  color: #bd1f1b;
  background: rgba(255, 59, 48, 0.12);
  border-color: rgba(255, 59, 48, 0.38);
}
.sat-fat-notice.critical i {
  background: #ff3b30;
  color: #ffffff;
}
:root[data-theme="dark"] .sat-fat-notice.warning {
  color: #ffd18a;
  background: rgba(255, 176, 32, 0.14);
}
:root[data-theme="dark"] .sat-fat-notice.critical {
  color: #ffb4ae;
  background: rgba(255, 69, 58, 0.16);
}
.search-log-button,
.add-log,
.soft-log {
  height: 45px;
  border-radius: 23px;
  display: grid;
  place-items: center;
  color: var(--top);
  background: var(--text);
  font-size: 15.2px;
  font-weight: var(--type-weight-medium);
}
.product-detail-screen {
  background: var(--top);
  display: block;
  overflow-y: auto;
  overscroll-behavior: contain;
  transform: translateX(-50%) translateZ(0);
  contain: layout paint style;
}
.product-detail-panel {
  padding: 14px 16px 118px;
}
.product-back {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  font-size: 38px;
  line-height: 1;
  font-weight: var(--type-weight-light);
}
.product-detail-panel h1 {
  margin: -38px 0 28px 58px;
  font-size: 21px;
  line-height: 1.1;
  font-weight: var(--type-weight-medium);
}
.product-macros {
  display: grid;
  grid-template-columns: 1.2fr repeat(3, 1fr);
  gap: 12px;
  align-items: end;
  margin-bottom: 26px;
}
.product-cal strong {
  display: block;
  font-size: 38px;
  line-height: 0.9;
  font-weight: var(--type-weight-medium);
}
.product-cal span,
.product-macro span {
  color: var(--muted);
  font-size: 14.5px;
}
.product-macro {
  text-align: center;
}
.product-macro i {
  min-width: 48px;
  height: 24px;
  border-radius: 999px;
  display: inline-grid;
  place-items: center;
  background: color-mix(in srgb, var(--c) 46%, transparent);
  color: #000;
  font-style: normal;
  font-size: 12.5px;
}
.product-macro strong {
  display: block;
  margin-top: 12px;
  font-size: 23px;
  line-height: 1;
}
.product-actions-row {
  display: grid;
  grid-template-columns: 100px 100px;
  gap: 22px;
  padding-left: 12px;
  margin-bottom: 30px;
}
.product-actions-row button {
  display: grid;
  gap: 8px;
  place-items: center;
  color: var(--text);
  font-size: 14px;
}
.product-actions-row span {
  width: 52px;
  height: 52px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  background: var(--chip);
  font-size: 22px;
}
.product-actions-row span {
  transition:
    background-color 260ms cubic-bezier(.16, .82, .18, 1),
    color 260ms cubic-bezier(.16, .82, .18, 1);
}

.product-actions-row button.active span {
  background: var(--amber);
  color: #1d1d1f;
}

.product-actions-row button.active span svg {
  fill: currentColor;
}
.product-section {
  border-top: 1px solid var(--line);
  padding: 26px 0 6px;
}
.product-section h2 {
  margin: 0 0 24px;
  font-size: 20px;
  line-height: 1;
}
.product-rings {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  text-align: center;
}
.product-rings small {
  color: var(--muted);
  font-size: 13px;
}
.product-detail-bottom {
  position: fixed;
  z-index: 83;
  left: 50%;
  bottom: 0;
  width: min(440px, 100vw);
  transform: translateX(-50%);
  display: grid;
  grid-template-columns: 1fr 102px 102px;
  gap: 8px;
  padding: 10px 15px max(16px, env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
  background: var(--top);
}
.product-detail-bottom .qty-trigger,
.add-ai-result-card .qty-trigger {
  width: 100%;
  min-height: 50px;
  border: 0;
}
.product-detail-bottom .qty-trigger {
  min-height: 54px;
  border-radius: 18px;
}
.qty-trigger {
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}
.soft-log {
  color: var(--text);
  background: color-mix(in srgb, var(--muted) 35%, var(--chip));
}
.add-log,
.soft-log {
  font-size: 18px;
}
.ring {
  width: 54px;
  height: 54px;
  margin: 0 auto 12px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 20px;
  background: conic-gradient(var(--c) var(--p), color-mix(in srgb, var(--text) 12%, transparent) 0);
}
.ring::before {
  content: attr(data-pct);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--panel);
}
.edit-amount {
  min-height: 47px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 0 8px;
  color: var(--text);
  background: var(--panel-2);
  border: 2px solid transparent;
  overflow: hidden;
  line-height: 1;
}
.edit-amount.active {
  border-color: color-mix(in srgb, var(--blue) 86%, var(--text));
  background: color-mix(in srgb, var(--panel-2) 80%, var(--top));
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--blue) 16%, transparent),
    inset 0 0 0 999px color-mix(in srgb, var(--blue) 5%, transparent);
}
.edit-amount b {
  display: inline-block;
  min-width: 0;
  border-radius: 7px;
  padding: 3px 8px 4px;
  font-size: 19px;
  font-weight: var(--type-weight-medium);
  white-space: nowrap;
}
.edit-amount.active b {
  color: #fff;
  background: var(--blue);
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.18);
}
.edit-amount span,
.edit-amount small {
  min-width: 0;
  max-width: 78px;
  color: var(--muted);
  font-size: 12.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.edit-amount small {
  margin-top: 3px;
  font-size: 10.5px;
}
.product-detail-bottom .edit-amount,
.added-plate-panel .edit-amount,
.meal-edit-view .edit-amount {
  flex-direction: row !important;
  flex-wrap: nowrap !important;
}
.product-detail-bottom .edit-amount span,
.product-detail-bottom .edit-amount small {
  max-width: 132px;
}
.product-screen .product-body,
.flow-product-body.product-body {
  overflow-y: auto;
  scrollbar-width: none;
}
.product-screen .product-body::-webkit-scrollbar,
.flow-product-body.product-body::-webkit-scrollbar {
  display: none;
}
.flow-shell .product-detail-screen {
  display: block;
  overflow-y: auto;
  background: var(--top);
}
.flow-shell .product-detail-screen {
  z-index: 84;
  animation: product-detail-in-right 340ms cubic-bezier(.2, .86, .18, 1) both;
}
.flow-shell .product-detail-screen.closing {
  animation: product-detail-out-right 320ms cubic-bezier(.32, .72, .28, 1) both;
}
.flow-shell .product-detail-screen {
  animation-duration: 410ms;
  animation-timing-function: cubic-bezier(.2, .86, .18, 1);
}
.flow-shell .product-detail-screen.closing {
  animation-duration: 330ms;
  animation-timing-function: cubic-bezier(.32, .72, .28, 1);
}
.search-bottom,
.flow-shell .search-bottom,
.search-flow-bottom,
.product-detail-bottom {
  padding-bottom: 8px !important;
}
.search-bottom,
.flow-shell .search-bottom,
.search-flow-bottom,
.product-detail-bottom {
  bottom: 0 !important;
  padding-bottom: max(16px, env(safe-area-inset-bottom)) !important;
}
.search-bottom,
.flow-shell .search-bottom,
.search-flow-bottom,
.product-detail-bottom {
  position: fixed !important;
  left: 50% !important;
  right: auto !important;
  bottom: 0 !important;
  width: min(440px, 100vw) !important;
  transform: translateX(-50%) translateY(var(--bottom-viewport-shift, 0px)) !important;
}
.search-bottom,
.flow-shell .search-bottom,
.search-flow-bottom,
.product-detail-bottom {
  background: transparent !important;
  padding-top: 0 !important;
  padding-bottom: 8px !important;
}
.search-bottom,
.flow-shell .search-bottom,
.search-flow-bottom,
.product-detail-bottom {
  min-height: 0 !important;
  height: auto !important;
  align-items: end !important;
  overflow: visible !important;
  background: transparent !important;
  box-shadow: none !important;
}
.flow-shell .search-bottom::before,
.search-bottom::before,
.search-flow-bottom::before,
.product-detail-bottom::before {
  content: none !important;
  display: none !important;
}
.search-bottom,
.flow-shell .search-bottom,
.search-flow-bottom,
.product-detail-bottom {
  position: fixed !important;
  left: 50% !important;
  right: auto !important;
  bottom: 0 !important;
  width: min(440px, 100vw) !important;
  min-height: 0 !important;
  height: auto !important;
  transform: translateX(-50%) !important;
  padding: 0 16px 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
}
.search-bottom,
.flow-shell .search-bottom,
.search-flow-bottom,
.product-detail-bottom,
.add-ai-bottom {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  overflow: visible !important;
  pointer-events: none !important;
}
.search-bottom > *,
.flow-shell .search-bottom > *,
.search-flow-bottom > *,
.product-detail-bottom > *,
.add-ai-bottom > * {
  pointer-events: auto !important;
}
.search-bottom::before,
.search-bottom::after,
.flow-shell .search-bottom::before,
.flow-shell .search-bottom::after,
.search-flow-bottom::before,
.search-flow-bottom::after,
.product-detail-bottom::before,
.product-detail-bottom::after {
  content: none !important;
  display: none !important;
}
.search-bottom,
.flow-shell .search-bottom,
.search-flow-bottom,
.product-detail-bottom,
.add-ai-bottom {
  padding-bottom: max(8px, env(safe-area-inset-bottom)) !important;
  background: linear-gradient(to top, color-mix(in srgb, var(--bg) 90%, transparent) 0 22px, transparent 22px) !important;
}
.search-bottom,
.flow-shell .search-bottom,
.search-flow-bottom,
.product-detail-bottom,
.add-ai-bottom {
  background: color-mix(in srgb, var(--bg) 96%, transparent) !important;
  box-shadow: 0 -10px 28px color-mix(in srgb, #000 6%, transparent) !important;
  backdrop-filter: blur(14px) saturate(135%) !important;
  -webkit-backdrop-filter: blur(14px) saturate(135%) !important;
}
.search-panel,
.added-plate-panel,
.meal-detail-panel,
.product-detail-panel {
  background: var(--comida-food-panel) !important;
  backdrop-filter: blur(10px) saturate(132%);
  -webkit-backdrop-filter: blur(10px) saturate(132%);
}
.search-bottom,
.product-detail-bottom {
  background:
    linear-gradient(to top,
      color-mix(in srgb, var(--top) 88%, transparent) 0%,
      color-mix(in srgb, var(--top) 68%, transparent) 68%,
      transparent 100%) !important;
  backdrop-filter: blur(12px) saturate(130%);
  -webkit-backdrop-filter: blur(12px) saturate(130%);
}
:root[data-theme="dark"] .search-bottom,
:root[data-theme="dark"] .product-detail-bottom {
  background:
    linear-gradient(to top,
      color-mix(in srgb, var(--panel) 90%, transparent) 0%,
      color-mix(in srgb, var(--panel) 70%, transparent) 68%,
      transparent 100%) !important;
}
.product-hero-art {
  display: block;
  width: 96px;
  height: 96px;
  margin: 0 auto 26px;
  object-fit: contain;
}
@keyframes record-pulse {
  70% {
    box-shadow: 0 0 0 8px rgba(255, 59, 48, 0);
  }
}
.ai-unresolved {
  margin-top: 12px;
  padding: 12px;
  display: grid;
  gap: 6px;
  border-radius: 18px;
  color: var(--muted);
  background: var(--card-soft);
  border: 1px solid var(--line);
  font-size: 12px;
  font-weight: var(--type-weight-strong);
}
.ai-unresolved strong {
  color: var(--ink);
  font-size: 13px;
  font-weight: var(--type-weight-strong);
}
.ai-create-suggestions {
  margin-top: 12px;
  display: grid;
  gap: 9px;
}
.ai-create-suggestions > p {
  margin: -4px 0 2px;
  color: var(--muted);
  font-size: 12px;
  font-weight: var(--type-weight-strong);
}
.ai-create-card {
  padding: 11px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  border-radius: 18px;
  background: var(--card-soft);
  border: 1px solid var(--line);
}
.ai-create-card strong,
.ai-create-card span,
.ai-create-card small {
  display: block;
  min-width: 0;
}
.ai-create-card strong {
  color: var(--ink);
  font-size: 14px;
  font-weight: var(--type-weight-strong);
  line-height: 1.12;
}
.ai-create-card span {
  margin-top: 2px;
  color: var(--ink);
  font-size: 11px;
  font-weight: var(--type-weight-strong);
}
.ai-create-card small {
  margin-top: 4px;
  color: var(--muted);
  font-size: 10.5px;
  font-weight: var(--type-weight-strong);
  line-height: 1.25;
}
.ai-source-line {
  margin-top: 6px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;
}
.ai-source-line span,
.ai-source-line b,
.ai-source-line a,
.ai-source-line small {
  width: auto;
  margin: 0;
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  font-size: 9px;
  line-height: 1;
  font-weight: var(--type-weight-strong);
  text-decoration: none;
}
.ai-source-line span {
  padding: 4px 7px;
  color: var(--ink);
  background: var(--soft);
}
.ai-source-line.official span {
  color: #ffffff;
  background: #1877f2;
}
.ai-source-line.authoritative span {
  color: #103d22;
  background: color-mix(in srgb, var(--green) 22%, white);
}
.ai-source-line.estimate span {
  color: #513400;
  background: color-mix(in srgb, var(--amber) 28%, white);
}
.ai-source-line b {
  color: var(--muted);
}
.ai-source-line a,
.ai-source-line small {
  color: var(--muted);
  max-width: 100%;
}
.ai-fat-line {
  width: fit-content;
  margin-top: 5px;
  padding: 4px 7px;
  border-radius: 999px;
  font-size: 9px;
  line-height: 1;
  font-weight: var(--type-weight-strong);
}
.ai-fat-line.soft {
  color: var(--muted);
  background: var(--soft);
}
.ai-fat-line.warning {
  color: #513400;
  background: color-mix(in srgb, var(--amber) 28%, white);
}
.ai-fat-line.critical {
  color: #ffffff;
  background: #ff3b30;
}
.add-ai-result-card .qty-trigger {
  min-width: 72px;
}
.add-ai-form,
.add-ai-plate {
  display: grid;
  gap: 14px;
  padding-top: 8px;
}
.add-ai-segment {
  width: max-content;
  max-width: 100%;
  display: inline-grid;
  grid-auto-flow: column;
  gap: 4px;
  padding: 4px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--chip) 74%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--line) 76%, transparent);
}
.add-ai-segment button {
  min-width: 94px;
  height: 40px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  color: var(--text);
  font-size: 15px;
  font-weight: var(--type-weight-medium);
}
.add-ai-segment button.active {
  background: var(--top);
  box-shadow: 0 1px 4px color-mix(in srgb, #000 16%, transparent);
}
:root[data-theme="dark"] .add-ai-segment button.active {
  background: #f4f4f4;
  color: #111;
}
.add-ai-mode-segment {
  width: 100%;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.add-ai-mode-segment button {
  min-width: 0;
  padding: 0 8px;
  text-align: center;
  line-height: 1.08;
  white-space: normal;
}
.add-ai-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--muted);
  font-size: 14px;
  font-weight: var(--type-weight-medium);
}
.add-ai-upload-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 56px 56px;
  gap: 10px;
}
.add-ai-upload-row button {
  height: 54px;
  border-radius: 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--text);
  background: color-mix(in srgb, var(--chip) 78%, var(--top));
  font-size: 15px;
  font-weight: var(--type-weight-medium);
}
.add-ai-upload-row button[data-add-ai-camera],
.add-ai-upload-row .add-ai-voice-btn {
  width: 56px;
  padding: 0;
}
.add-ai-upload-row .add-ai-voice-btn {
  position: relative;
  overflow: hidden;
  color: var(--text);
  background:
    radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--text) 10%, transparent), transparent 58%),
    color-mix(in srgb, var(--chip) 78%, var(--top));
}
.add-ai-upload-row .add-ai-voice-btn.recording {
  color: #fff;
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.24), transparent 54%),
    linear-gradient(135deg, #ff786e, #ff3b30);
  box-shadow: 0 10px 22px rgba(255, 59, 48, 0.22);
}
.add-ai-upload-row .add-ai-voice-btn.recording::after {
  content: "";
  position: absolute;
  inset: 9px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.34);
  animation: record-ring 1.1s ease-in-out infinite;
}
.add-ai-upload-row svg {
  width: 22px;
  height: 22px;
}
.add-ai-media-list {
  display: grid;
  gap: 10px;
}
.add-ai-media-card {
  min-height: 76px;
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) 42px;
  align-items: center;
  gap: 12px;
  padding: 10px;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--text) 20%, transparent);
  background: color-mix(in srgb, var(--top) 90%, var(--chip));
}
.add-ai-media-card img,
.add-ai-audio-thumb {
  width: 58px;
  height: 58px;
  border-radius: 8px;
  object-fit: cover;
}
.add-ai-audio-thumb {
  display: grid;
  place-items: center;
  color: #fff;
  background: linear-gradient(135deg, #ff786e, #ff3b30);
}
.add-ai-audio-thumb svg {
  width: 23px;
  height: 23px;
}
.add-ai-recording-line {
  min-height: 22px;
  display: flex;
  align-items: center;
  gap: 8px;
  margin: -4px 0 -1px;
  color: #ff3b30;
  font-size: 12px;
  font-weight: var(--type-weight-medium);
}
.add-ai-recording-line span {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #ff3b30;
  box-shadow: 0 0 0 0 rgba(255, 59, 48, 0.42);
  animation: record-pulse 1.1s ease-in-out infinite;
}
@keyframes record-ring {
  0%, 100% { transform: scale(.86); opacity: .52; }
  50% { transform: scale(1.12); opacity: .18; }
}
.add-ai-media-card strong,
.add-ai-media-card span {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.add-ai-media-card strong {
  color: var(--text);
  font-size: 14.5px;
  font-weight: var(--type-weight-medium);
}
.add-ai-media-card span {
  margin-top: 3px;
  color: #58c982;
  font-size: 12.5px;
}
.add-ai-media-card span i {
  width: 12px;
  height: 12px;
  margin-right: 5px;
  border-radius: 50%;
  display: inline-block;
  vertical-align: -1px;
  background: #58c982;
  position: relative;
}
.add-ai-media-card span i::after {
  content: "";
  position: absolute;
  left: 3px;
  top: 2px;
  width: 5px;
  height: 8px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.add-ai-media-card button {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--text);
  background: var(--chip);
}
.add-ai-error-help {
  position: relative;
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 8px auto 0;
  color: var(--orange);
  font-size: 12.5px;
  font-weight: var(--type-weight-strong);
  text-align: center;
}
.add-ai-error-help > span {
  max-width: min(310px, calc(100vw - 86px));
}
.add-ai-error-help > button {
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--muted);
  background: color-mix(in srgb, var(--chip) 82%, var(--top));
  border: 1px solid color-mix(in srgb, var(--text) 12%, transparent);
  font-size: 12px;
  font-weight: var(--type-weight-strong);
  box-shadow: none;
}
.add-ai-error-help > button.active {
  color: #ffffff;
  background: #1d1d1f;
}
.add-ai-error-popover {
  position: absolute;
  z-index: 18;
  left: 50%;
  bottom: calc(100% + 8px);
  width: min(292px, calc(100vw - 42px));
  transform: translateX(-50%);
  padding: 10px 11px;
  border-radius: 12px;
  color: var(--text);
  background: color-mix(in srgb, var(--top) 96%, var(--chip));
  border: 1px solid color-mix(in srgb, var(--text) 14%, transparent);
  box-shadow: 0 14px 36px color-mix(in srgb, #000 18%, transparent);
  font-size: 11.5px;
  font-weight: var(--type-weight-medium);
  line-height: 1.25;
  text-align: left;
}
.add-ai-textarea {
  width: 100%;
  min-height: 108px;
  resize: none;
  border: 0;
  outline: 0;
  border-radius: 9px;
  padding: 16px;
  color: var(--text);
  background: color-mix(in srgb, var(--chip) 80%, var(--top));
  font: inherit;
  font-size: 14.5px;
  line-height: 1.25;
}
.add-ai-textarea::placeholder {
  color: color-mix(in srgb, var(--muted) 70%, transparent);
}
.search-bottom.add-ai-bottom {
  grid-template-columns: 1fr;
  padding-inline: 16px;
}
.add-ai-bottom.result {
  grid-template-columns: 1fr;
  justify-items: end;
  background: linear-gradient(to top, var(--top) 70%, color-mix(in srgb, var(--top) 0%, transparent));
}
.add-ai-bottom.result.with-new-search {
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
}
.add-ai-bottom .search-log-button {
  width: 100%;
  height: 52px;
  border-radius: 9px;
  font-size: 16px;
  font-weight: var(--type-weight-medium);
}
.add-ai-bottom.result .search-log-button {
  width: 128px;
  border-radius: 28px;
}
.add-ai-bottom.result.with-new-search .ai-new-search-button {
  width: 100%;
  min-width: 0;
  color: var(--ink);
  background: var(--chip);
}
.add-ai-bottom .search-log-button.disabled {
  opacity: .42;
}
.add-ai-disclaimer {
  margin: 2px 30px 16px;
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.25;
}
.add-ai-result-card {
  grid-template-columns: 56px minmax(0, 1fr) 86px;
  padding: 12px;
}
.add-ai-result-card + .add-ai-result-card,
.add-ai-unresolved,
.add-ai-suggestions {
  margin-top: 9px;
}
.add-ai-result-card .plate-product-icon {
  width: 46px;
  height: 46px;
  justify-self: center;
}
.add-ai-result-card strong,
.add-ai-result-card span,
.add-ai-result-card small {
  display: block;
}
.add-ai-result-card strong {
  font-size: 15px;
  line-height: 1.08;
  font-weight: var(--type-weight-medium);
}
.add-ai-result-card span,
.add-ai-result-card small {
  margin-top: 5px;
  color: var(--muted);
  font-size: 12.5px;
}
.add-ai-result-card label,
.add-ai-result-card .qty-trigger {
  height: 50px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  color: var(--text);
  background: color-mix(in srgb, var(--text) 10%, transparent);
}
.add-ai-result-card input {
  width: 100%;
  border: 0;
  outline: 0;
  text-align: center;
  color: inherit;
  background: transparent;
  font-size: 15px;
  font-weight: var(--type-weight-medium);
}
.add-ai-result-card label span {
  margin: -4px 0 0;
  font-size: 11px;
}
.add-ai-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.add-ai-segment.small {
  min-width: 128px;
  padding: 3px;
}
.add-ai-segment.small button {
  min-width: 58px;
  height: 31px;
  font-size: 13px;
}
.add-ai-metrics {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
}
.add-ai-nutrition-card {
  min-height: 108px;
  display: grid;
  align-content: start;
  gap: 6px;
  padding: 14px;
  border-radius: 11px;
  background: color-mix(in srgb, var(--chip) 74%, var(--top));
}
.add-ai-nutrition-card strong {
  font-size: 15px;
  font-weight: var(--type-weight-medium);
}
.add-ai-nutrition-card span,
.add-ai-nutrition-card small {
  color: var(--muted);
  font-size: 12.5px;
}
.add-ai-nutrition-card i {
  height: 9px;
  margin-top: 10px;
  border-radius: 0;
  background:
    linear-gradient(90deg, var(--metric-color) var(--metric), transparent 0),
    color-mix(in srgb, var(--text) 8%, transparent);
}
.add-ai-toggle {
  min-height: 60px;
  margin-top: 10px;
  padding: 0 14px;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--text);
  background: color-mix(in srgb, var(--chip) 74%, var(--top));
  font-size: 14px;
  font-weight: var(--type-weight-medium);
}
.add-ai-toggle b {
  width: 44px;
  height: 28px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--text) 12%, transparent);
  position: relative;
}
.add-ai-toggle b::after {
  content: "";
  position: absolute;
  left: 3px;
  top: 3px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #000;
}
.add-ai-form {
  align-content: start !important;
}
.add-ai-textarea {
  min-height: 108px !important;
  max-height: min(340px, calc(var(--visual-vh, 100dvh) - 320px)) !important;
  overflow-y: hidden;
  transition: height 140ms ease;
}
.add-ai-text-focused .search-results.ai-tab-results {
  padding-bottom: calc(136px + var(--keyboard-inset, 0px)) !important;
  scroll-padding-bottom: calc(144px + var(--keyboard-inset, 0px)) !important;
}
.add-ai-text-focused .search-bottom.add-ai-bottom {
  z-index: 86 !important;
}
.add-flow-layer.flow-shell > .add-screen.create-screen,
.add-flow-layer.flow-shell > .add-screen.portion-screen {
  position: fixed;
  inset: var(--visual-offset-top, 0px) auto auto 50%;
  z-index: 82;
  width: min(440px, 100vw);
  height: var(--visual-vh, 100dvh);
  min-height: var(--visual-vh, 100svh);
  max-height: var(--visual-vh, 100dvh);
  padding: max(18px, calc(env(safe-area-inset-top) - 22px)) 0 max(8px, env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  color: var(--text, var(--ink));
  background: var(--bg);
  overflow: hidden;
  overscroll-behavior: contain;
  transform: translateX(-50%);
  isolation: isolate;
  contain: layout paint style;
}

.add-flow-layer.flow-shell > .add-screen.create-screen {
  padding-top: max(26px, calc(env(safe-area-inset-top) - 14px));
}

.add-flow-layer.flow-shell > .add-screen.portion-screen {
  padding-top: max(26px, calc(env(safe-area-inset-top) - 14px));
}

.add-flow-layer.flow-shell > .add-screen.create-screen .add-screen-head,
.add-flow-layer.flow-shell > .add-screen.portion-screen .add-screen-head {
  min-height: 54px;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 0 18px 12px;
}

.add-flow-layer.flow-shell > .add-screen.create-screen .add-screen-head h1,
.add-flow-layer.flow-shell > .add-screen.portion-screen .add-screen-head h1 {
  margin: 0;
  font-size: clamp(23px, 5.8vw, 29px);
  line-height: 1;
  letter-spacing: -.035em;
}

.add-flow-layer.flow-shell > .add-screen.create-screen .micro,
.add-flow-layer.flow-shell > .add-screen.portion-screen .micro {
  margin-bottom: 2px;
}

.create-screen .round-btn,
.portion-screen .round-btn {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--ink);
  background: var(--pill);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}

.create-screen .round-btn svg,
.portion-screen .round-btn svg { width: 18px; height: 18px; }

.create-step-mark {
  min-width: 42px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  color: var(--muted);
  background: var(--pill);
  border: 1px solid var(--line);
  font-size: 11px;
  font-weight: var(--type-weight-strong);
}

.create-product-scroll {
  flex: 1 1 auto;
  min-height: 0;
  padding: 0 18px 104px;
  overflow-y: auto;
  overscroll-behavior-y: none;
  scrollbar-width: none;
}

.create-product-scroll::-webkit-scrollbar,
.create-category-picker::-webkit-scrollbar { display: none; }

.create-identity-card,
.create-ai-card,
.create-section-card,
.portion-screen .portion-product-card,
.portion-screen .portion-weight-card {
  color: var(--ink);
  background: color-mix(in srgb, var(--card) 96%, transparent);
  border: 1px solid color-mix(in srgb, var(--line) 92%, transparent);
  box-shadow: 0 14px 32px color-mix(in srgb, #000 7%, transparent);
}

.create-identity-card {
  min-height: 76px;
  margin-bottom: 10px;
  padding: 10px 12px;
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  border-radius: 23px;
}

.create-product-avatar,
.portion-screen .portion-product-art {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 50%;
  color: var(--green);
  background: color-mix(in srgb, var(--green) 11%, var(--card));
  border: 1px solid color-mix(in srgb, var(--green) 20%, var(--line));
}

.create-product-avatar img,
.portion-screen .portion-product-art img { width: 100%; height: 100%; object-fit: cover; }
.create-product-avatar svg,
.portion-screen .portion-product-art svg { width: 23px; height: 23px; }

.create-product-summary { min-width: 0; display: grid; gap: 2px; }
.create-product-summary > span,
.create-section-heading > span {
  color: var(--muted);
  font-size: 9px;
  line-height: 1.15;
  font-weight: var(--type-weight-medium);
  letter-spacing: .105em;
  text-transform: uppercase;
}

.create-product-summary strong,
.create-product-summary small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.create-product-summary strong {
  color: var(--ink);
  font-size: 17px;
  line-height: 1.15;
  font-weight: var(--type-weight-strong);
}

.create-product-summary small { color: var(--muted); font-size: 11px; }
.create-success-mark {
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(145deg, var(--green2), var(--green));
  animation: create-success-arrive 420ms cubic-bezier(.2,.9,.25,1.25) both;
}

.create-success-mark { width: 30px; height: 30px; }
.create-success-mark svg { width: 17px; height: 17px; }

.create-ai-card { margin-bottom: 10px; padding: 9px; border-radius: 25px; }

.create-screen .create-ai-tools {
  position: relative;
  margin: 0;
  padding: 8px 3px 3px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.create-ai-compact {
  position: absolute;
  z-index: 1;
  top: -6px;
  left: 50%;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #17200a;
  background: var(--green2);
  border: 2px solid var(--card);
  transform: translateX(-50%);
}
.create-ai-compact svg { width: 14px; height: 14px; }

.create-screen .tool-pill,
.create-screen .create-ai-run {
  min-width: 0;
  min-height: 88px;
  padding: 0 10px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 8px;
  border-radius: 18px;
  color: var(--ink);
  background: var(--pill);
  border: 1px solid var(--line);
  font-size: 12px;
  font-weight: var(--type-weight-strong);
}

.create-screen .tool-pill svg { width: 27px; height: 27px; }
.create-screen .create-ai-run {
  position: absolute;
  z-index: 2;
  bottom: -18px;
  left: 50%;
  width: 44px;
  min-height: 44px;
  padding: 0;
  color: #17200a;
  background: linear-gradient(135deg, var(--green2), var(--green));
  border: 2px solid var(--card);
  border-radius: 50%;
  box-shadow: 0 7px 18px color-mix(in srgb, var(--green) 28%, transparent);
  transform: translateX(-50%);
}
.create-screen .create-ai-run svg { width: 18px; height: 18px; }
.create-screen .create-ai-run.thinking { background: linear-gradient(135deg, var(--green), var(--blue)); }
.create-screen .create-ai-run.success { color: #fff; }
.analysis-running .create-ai-run { animation: create-ai-soft-pulse 1.1s ease-in-out infinite; }
.create-screen .tool-pill:disabled,
.create-screen .create-ai-run:disabled,
.create-media-thumb button:disabled { opacity: .58; }

.create-media-strip { margin: 12px 0 0; display: flex; justify-content: center; gap: 7px; overflow-x: auto; }
.create-media-thumb {
  position: relative;
  width: 46px;
  height: 46px;
  flex: 0 0 46px;
}
.create-media-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 15px;
  border: 1px solid var(--line);
}
.create-media-thumb button {
  position: absolute;
  top: -5px;
  right: -5px;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: rgba(23,25,24,.86);
  border: 1px solid rgba(255,255,255,.35);
}
.create-media-thumb button svg { width: 13px; height: 13px; }

.create-ai-error-row {
  min-height: 40px;
  margin-top: 7px;
  padding: 5px 8px 5px 5px;
  display: flex;
  align-items: center;
  gap: 7px;
  border-radius: 13px;
  color: var(--orange);
  background: color-mix(in srgb, var(--orange) 8%, var(--card));
  border: 1px solid color-mix(in srgb, var(--orange) 22%, var(--line));
  font-size: 10.5px;
}
.create-error-info {
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  border-radius: 50%;
  color: var(--muted);
  background: var(--card);
  border: 1px solid var(--line);
  font-weight: var(--type-weight-strong);
}
.create-error-info.active { color: #fff; background: #1d1d1f; }

.create-section-card { margin-bottom: 10px; padding: 12px; border-radius: 23px; }
.create-section-heading {
  margin: 0 1px 9px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.create-section-heading small {
  overflow: hidden;
  color: var(--muted);
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.create-section-card .create-form {
  min-height: 0;
  padding: 0;
  display: grid;
  overflow: visible;
}
.create-identity-fields,
.create-category-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }

.create-screen .field {
  min-width: 0;
  min-height: 58px;
  padding: 8px 10px;
  display: grid;
  align-content: start;
  justify-items: start;
  text-align: left;
  gap: 5px;
  border-radius: 16px;
  background: var(--card-soft);
  border: 1px solid var(--line);
  box-shadow: none;
}
.create-screen .field.full { grid-column: 1 / -1; }
.create-identity-fields > .field.full {
  grid-template-columns: minmax(0, 1fr);
  justify-content: stretch !important;
  align-content: start !important;
  justify-items: start !important;
  text-align: left !important;
}
.create-identity-fields > .field.full > span,
.create-identity-fields > .field.full > input {
  align-self: start;
  text-align: left !important;
}
.create-screen .field > span {
  color: var(--muted);
  font-size: 8.6px;
  line-height: 1.15;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.create-screen .field input,
.create-screen .field select {
  min-width: 0;
  width: 100%;
  padding: 0;
  color: var(--ink);
  background: transparent;
  border: 0;
  outline: 0;
  font-size: 14.5px;
  line-height: 1.1;
  font-weight: var(--type-weight-strong);
  text-align: left;
}
.create-screen .numeric-field { transition: border-color 160ms ease, box-shadow 160ms ease; }
.create-screen .numeric-field input { cursor: pointer; caret-color: transparent; user-select: none; }
.create-screen .numeric-field.active {
  border-color: color-mix(in srgb, var(--blue) 72%, var(--line));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 18%, transparent);
}

.create-category-picker {
  margin: 0 -2px 10px;
  padding: 2px;
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
}
.create-category-picker button {
  width: 64px;
  min-height: 76px;
  flex: 0 0 64px;
  padding: 4px 2px;
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 5px;
  border-radius: 18px;
  color: var(--muted);
  border: 1px solid transparent;
  transition: color 160ms ease, background 160ms ease, border-color 160ms ease;
}
.create-category-picker button > span {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 50%;
  color: var(--green);
  background: var(--card-soft);
  border: 1px solid var(--line);
}
.create-category-picker button img { width: 100%; height: 100%; object-fit: cover; }
.create-category-picker button svg { width: 20px; height: 20px; }
.create-category-picker button small {
  width: 100%;
  overflow: hidden;
  font-size: 9px;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.create-category-picker button.active {
  color: var(--ink);
  background: color-mix(in srgb, var(--green) 8%, transparent);
  border-color: color-mix(in srgb, var(--green) 28%, transparent);
}
.create-category-picker button.active > span {
  border-color: color-mix(in srgb, var(--green) 52%, var(--line));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--green) 13%, transparent);
}

.create-main-nutrition,
.create-extra-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.create-main-nutrition .numeric-field { min-height: 67px; }
.create-main-nutrition .numeric-field input { font-size: 19px; letter-spacing: -.02em; }
.create-extra-nutrition { margin-top: 8px; border-top: 1px solid var(--line); }
.create-extra-nutrition summary {
  min-height: 46px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
  font-size: 12px;
  font-weight: var(--type-weight-strong);
}
.create-extra-nutrition summary::-webkit-details-marker { display: none; }
.create-extra-nutrition summary::after {
  content: "+";
  width: 26px;
  height: 26px;
  margin-left: auto;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--muted);
  background: var(--pill);
  border: 1px solid var(--line);
  font-size: 17px;
  transition: transform 180ms ease;
}
.create-extra-nutrition[open] summary::after { transform: rotate(45deg); }
.create-extra-nutrition summary small { color: var(--muted); font-size: 9.5px; }
.create-extra-grid { padding-top: 1px; }
.analysis-success .field.has-value { animation: create-field-confirm 520ms ease-out both; }
.analysis-success .field.has-value:nth-child(2n) { animation-delay: 55ms; }
.create-product-scroll {
  padding-inline: 18px;
}

.create-ai-card {
  padding: 6px 8px 8px;
  border-radius: 16px;
}

.create-screen .create-ai-tools {
  padding: 0;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.create-screen .tool-pill,
.create-screen .create-ai-run {
  position: relative;
  inset: auto;
  width: auto;
  min-height: 106px;
  padding: 2px 2px 7px;
  display: grid;
  align-content: center;
  gap: 1px;
  color: var(--ink);
  background: transparent;
  border: 0;
  border-radius: 14px;
  box-shadow: none;
  font-size: 12px;
  transform: none;
}

.create-action-art {
  width: 76px;
  height: 76px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 18px;
}

.create-action-art img {
  width: 76px;
  height: 76px;
  object-fit: contain;
}

.create-screen .tool-pill .create-action-art img { transform: scale(1.4); }
.create-screen .create-ai-run .create-action-art img { transform: scale(1); }
.create-screen .create-ai-run.thinking { background: transparent; }
.create-screen .create-ai-run.success { color: var(--ink); }
.create-screen .create-ai-run .create-success-mark {
  position: absolute;
  top: 3px;
  right: 6px;
  width: 24px;
  height: 24px;
}
.create-screen .create-ai-run .create-success-mark svg { width: 14px; height: 14px; }

.create-ai-hint {
  margin: 1px 0 3px;
  color: var(--muted);
  font-size: 10px;
  text-align: center;
}

.create-section-card {
  padding: 10px;
  border-radius: 16px;
}

.create-identity-fields,
.create-category-fields,
.create-nutrition-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
}

.create-screen .field,
.create-identity-fields > .field.full {
  min-height: 48px;
  padding: 8px 12px;
  grid-template-columns: minmax(0, 1fr) minmax(120px, 1.15fr);
  align-items: center;
  align-content: center !important;
  justify-items: stretch !important;
  gap: 12px;
  border-radius: 12px;
}

.create-screen .field > span,
.create-identity-fields > .field.full > span {
  align-self: center;
  text-align: left !important;
}

.create-screen .field input,
.create-screen .field select,
.create-identity-fields > .field.full > input {
  align-self: center;
  text-align: right !important;
}

.create-nutrition-group {
  display: grid;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--card-soft);
}

.create-nutrition-group .field {
  border: 0;
  border-radius: 0;
  background: transparent;
}

.create-screen .field > span,
.create-identity-fields > .field.full > span {
  font-size: 14px;
  line-height: 1.3;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
  font-weight: var(--type-weight-medium);
}
.create-screen .numeric-field {
  grid-template-columns: minmax(0, 1fr) 88px;
  padding: 12px 14px;
}
.create-screen .field input,
.create-screen .field select { font-size: 15px; }
.create-nutrition-card {
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}
.create-nutrition-card .create-section-heading { padding: 8px 2px; }
.create-nutrition-card .create-section-heading > span {
  font-size: 17px;
  line-height: 1.3;
  color: var(--ink);
  text-transform: none;
  letter-spacing: 0;
  font-weight: var(--type-weight-strong);
}
.create-nutrition-group { border: 0; background: var(--card); }
.create-nutrition-group .field + .field { border: 0; }


.quantity-keyboard-open .create-section-card .create-form { padding-bottom: 0 !important; }
.quantity-keyboard-open .create-product-scroll { padding-bottom: 360px; }

.create-screen .add-screen-footer,
.portion-screen .add-screen-footer {
  position: fixed;
  z-index: 3;
  right: auto;
  left: 50%;
  bottom: 0;
  width: min(440px, 100vw);
  padding: 0 18px max(8px, env(safe-area-inset-bottom));
  display: flex;
  gap: 10px;
  background: color-mix(in srgb, var(--bg) 96%, transparent);
  box-shadow: 0 -10px 28px color-mix(in srgb, #000 6%, transparent);
  backdrop-filter: blur(14px) saturate(135%);
  transform: translateX(-50%);
  pointer-events: none;
}
.create-screen .add-screen-footer > *,
.portion-screen .add-screen-footer > * { pointer-events: auto; }
.create-screen .add-screen-footer .primary-pill,
.create-screen .add-screen-footer .secondary-pill,
.portion-screen .add-screen-footer .primary-pill,
.portion-screen .add-screen-footer .secondary-pill {
  width: 100%;
  min-height: 54px;
  height: 54px;
  font-size: 18px;
}
.add-flow-layer.flow-shell > .add-screen.portion-screen {
  padding-bottom: 92px;
  overflow-y: auto;
  overscroll-behavior-y: none;
  scrollbar-width: none;
}
.portion-screen::-webkit-scrollbar { display: none; }
.portion-screen .portion-product-card {
  min-height: 68px;
  margin: 0 18px 11px;
  padding: 8px 11px;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  border-radius: 21px;
}
.portion-screen .portion-product-art { width: 48px; height: 48px; }
.portion-screen .portion-product-card > span:last-child { min-width: 0; display: grid; gap: 3px; }
.portion-screen .portion-product-card strong,
.portion-screen .portion-product-card small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.portion-screen .portion-product-card strong { font-size: 15px; line-height: 1.15; }
.portion-screen .portion-product-card small { color: var(--muted); font-size: 10.5px; }

.portion-screen .portion-option-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  padding: 0 18px 11px;
}
.portion-screen .portion-option {
  min-height: 86px;
  padding: 9px 5px;
  display: grid;
  grid-template-rows: 44px auto auto;
  place-items: center;
  align-content: center;
  gap: 4px;
  border-radius: 19px;
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--line);
  box-shadow: 0 10px 24px color-mix(in srgb, #000 6%, transparent);
  transition: transform 160ms ease, border-color 160ms ease, background 160ms ease;
}
.portion-screen .portion-option:active { transform: scale(.975); }
.portion-screen .portion-option.active { color: #fff; background: linear-gradient(145deg, var(--green2), var(--green)); border-color: transparent; }
.portion-screen .portion-option-icon {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  background: transparent;
}
.portion-screen .portion-option.active .portion-option-icon { background: rgba(255,255,255,.14); border-radius: 13px; }
.portion-screen .portion-option-icon img { width: 44px; height: 44px; object-fit: contain; }
.portion-screen .portion-option strong {
  max-width: 100%;
  overflow: hidden;
  font-size: 11.5px;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.portion-screen .portion-option small { color: currentColor; font-size: 10px; opacity: .8; }

.portion-screen .selected-portions {
  margin: 0 18px 10px;
  padding: 11px;
  display: grid;
  gap: 6px;
  border-radius: 20px;
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--line);
  box-shadow: 0 10px 24px color-mix(in srgb, #000 6%, transparent);
}
.portion-screen .selected-portions-title {
  margin: 0 2px 2px;
  color: var(--muted);
  font-size: 9px;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.portion-screen .selected-portions button {
  min-height: 43px;
  padding: 0 11px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-radius: 13px;
  color: var(--ink);
  background: var(--card-soft);
  border: 1px solid var(--line);
  font-size: 12px;
}
.portion-screen .selected-portions button b { font-size: 12px; }
.portion-screen .portion-weight-card {
  margin: clamp(18px, 6vh, 46px) 18px 18px;
  padding: 24px 18px 22px;
  display: grid;
  justify-items: center;
  border-radius: 28px;
  text-align: center;
}
.portion-screen .portion-weight-icon {
  width: 62px;
  height: 62px;
  display: grid;
  place-items: center;
  border-radius: 21px;
  color: #18200f;
  background: linear-gradient(145deg, #dfff78, var(--green2));
  box-shadow: 0 13px 30px color-mix(in srgb, var(--green) 22%, transparent);
}
.portion-screen .portion-weight-icon svg { width: 31px; height: 31px; }
.portion-screen .portion-weight-icon img { width: 54px; height: 54px; object-fit: contain; }

.portion-screen .portion-screen-footer.is-skip {
  justify-content: center;
  padding-bottom: max(22px, env(safe-area-inset-bottom));
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

.portion-screen .portion-skip-link {
  padding: 7px 18px;
  color: var(--muted);
  font-size: 13px;
  font-weight: var(--type-weight-strong);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.portion-screen .portion-weight-card > strong { margin-top: 13px; font-size: 21px; line-height: 1; letter-spacing: -.025em; }
.portion-screen .portion-weight-card > small { margin-top: 5px; color: var(--muted); font-size: 11px; }
.portion-screen .portion-weight-field {
  width: min(260px, 100%);
  margin-top: 24px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  border-bottom: 2px solid color-mix(in srgb, var(--green) 46%, var(--line));
}
.portion-screen .portion-weight-field input {
  width: 100%;
  min-width: 0;
  padding: 0 4px 6px;
  color: var(--ink);
  background: transparent;
  border: 0;
  outline: 0;
  font-size: clamp(56px, 17vw, 78px);
  line-height: .95;
  font-weight: var(--type-weight-strong);
  letter-spacing: -.07em;
  text-align: center;
  appearance: textfield;
}
.portion-screen .portion-weight-field input::-webkit-outer-spin-button,
.portion-screen .portion-weight-field input::-webkit-inner-spin-button {
  margin: 0;
  appearance: none;
}
.portion-screen .portion-weight-field input::placeholder { color: color-mix(in srgb, var(--muted) 34%, transparent); }
.portion-screen .portion-weight-field b { padding: 0 3px 10px 0; color: var(--muted); font-size: 20px; }
.portion-screen .portion-weight-card p { margin: 11px 0 0; color: var(--muted); font-size: 12px; line-height: 1.3; }

@keyframes create-ai-soft-pulse {
  50% { transform: scale(1.08); box-shadow: 0 0 0 5px rgba(198,240,79,.12); }
}
@keyframes create-success-arrive {
  from { opacity: 0; transform: scale(.62) rotate(-12deg); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes create-field-confirm {
  45% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--green) 18%, transparent); }
}

@media (max-width: 350px) {
  .portion-screen .portion-option-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .create-product-scroll { padding-right: 14px; padding-left: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .analysis-running .create-ai-run,
  .create-success-mark,
  .analysis-success .field.has-value,
  .create-category-picker button,
  .portion-screen .portion-option,
  .create-extra-nutrition summary::after { animation: none !important; transition: none !important; }
}
.meal-type-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 7px;
  margin-bottom: 10px;
}
.meal-type-grid button {
  min-width: 0;
  height: 58px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border-radius: 18px;
  color: var(--muted);
  background: var(--card-soft);
  border: 1px solid var(--line);
}
.meal-type-grid button.active {
  color: var(--bg);
  background: var(--ink);
}
.meal-type-grid svg {
  width: 17px;
  height: 17px;
}
.meal-type-grid span {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 9px;
  font-weight: var(--type-weight-strong);
  white-space: nowrap;
}
.template-row {
  min-height: 64px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 8px;
  align-items: center;
  padding: 10px 0;
  border-top: 1px solid var(--line);
}
.template-row strong,
.template-row span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.template-row strong {
  color: var(--ink);
  font-size: 14px;
  font-weight: var(--type-weight-strong);
}
.template-row span {
  margin-top: 4px;
  color: var(--muted);
  font-size: 11px;
  font-weight: var(--type-weight-strong);
}
.template-tab-panel .template-meal-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
}
.template-tab-panel .template-meal-grid button {
  height: 60px;
  border-radius: 16px;
  padding: 7px 4px;
  gap: 4px;
}
.template-tab-panel .template-meal-grid svg {
  width: 18px;
  height: 18px;
}
.template-tab-panel .template-meal-grid span {
  font-size: 10px;
  line-height: 1.05;
}
.template-copy {
  min-width: 0;
}
.template-tab-panel .template-row strong {
  font-size: 16px;
  line-height: 1.15;
}
.template-tab-panel .template-row span {
  margin-top: 5px;
  font-size: 12.5px;
  line-height: 1.15;
}
.flow-shell,
.flow-shell :where(button, input, select, textarea, strong, span, small, i, b, em) {
  font-style: normal;
}
.rules-layer {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.rules-scrim {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: rgba(0, 0, 0, .46);
  cursor: pointer;
}

.rules-sheet {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 560px;
  max-height: 92dvh;
  border-radius: 24px 24px 0 0;
  background: #f5f5f5;
}

.rules-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 18px 12px;
}

.rules-title {
  margin: 0;
  color: #050505;
  font-size: 22px;
  font-weight: var(--type-weight-strong);
  letter-spacing: -0.3px;
}

.rules-close {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #ececee;
  color: #1d1d1f;
  font-size: 21px;
  line-height: 1;
  cursor: pointer;
}
.rules-body {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0 18px calc(env(safe-area-inset-bottom) + 24px);
}

.rules-intro {
  margin: 0 0 14px;
  color: rgba(5, 5, 5, .64);
  font-size: 15px;
  font-weight: var(--type-weight-medium);
  line-height: 1.5;
}

.rules-block {
  margin: 0 0 12px;
  padding: 16px;
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 16px 36px rgba(0, 0, 0, .09);
}

.rules-block h2 {
  margin: 0 0 8px;
  color: #050505;
  font-size: 17px;
  font-weight: var(--type-weight-strong);
  letter-spacing: -0.2px;
}

.rules-block p {
  margin: 0 0 8px;
  color: rgba(5, 5, 5, .70);
  font-size: 15px;
  font-weight: var(--type-weight-medium);
  line-height: 1.5;
}

.rules-block p:last-child {
  margin-bottom: 0;
}
.rules-privacy-link {
  display: block;
  margin: 2px 0 10px;
  color: rgba(5, 5, 5, .56);
  font-size: 13px;
  font-weight: var(--type-weight-medium);
  text-align: center;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.rules-footer {
  margin: 4px 0 0;
  color: rgba(5, 5, 5, .44);
  font-size: 13px;
  font-weight: var(--type-weight-medium);
  text-align: center;
}

:root[data-theme="dark"] .rules-sheet {
  background: #111;
}

:root[data-theme="dark"] .rules-title,
:root[data-theme="dark"] .rules-block h2 {
  color: #f7f7f7;
}

:root[data-theme="dark"] .rules-close {
  background: #2c2c2e;
  color: #f7f7f7;
}

:root[data-theme="dark"] .rules-block {
  background: #202021;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
}

:root[data-theme="dark"] .rules-intro,
:root[data-theme="dark"] .rules-block p {
  color: rgba(247, 247, 247, .70);
}

:root[data-theme="dark"] .rules-footer {
  color: rgba(247, 247, 247, .44);
}

:root[data-theme="dark"] .rules-privacy-link {
  color: rgba(247, 247, 247, .56);
}
.report-ai-confidence {
  justify-self: end;
  color: var(--muted);
  font-size: 13px;
  font-weight: var(--type-weight-strong);
}
.ai-analysis-empty {
  min-height: 260px;
  border-radius: 28px;
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
  align-content: center;
  gap: 9px;
  padding: 24px;
  color: var(--muted);
  background: color-mix(in srgb, var(--panel) 91%, var(--bg));
  text-align: center;
}
.ai-analysis-empty strong {
  color: var(--text);
  font-size: 20px;
  font-weight: var(--type-weight-strong);
}
.ai-analysis-empty small {
  max-width: 280px;
  font-size: 14px;
  line-height: 1.35;
  font-weight: var(--type-weight-medium);
}
.ai-analysis-empty.error {
  border-color: color-mix(in srgb, #ff6b57 45%, var(--line));
  color: #c95848;
}
.ai-stale-note {
  margin: 0 0 10px;
  color: #b36b4f;
  font-size: 13px;
  font-weight: var(--type-weight-strong);
}
.ai-score-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 12px;
}
.ai-score-card {
  width: 100%;
  min-height: 118px;
  border-radius: 24px;
  padding: 14px;
  display: grid;
  align-content: space-between;
  appearance: none;
  border: 1px solid color-mix(in srgb, var(--line) 80%, transparent);
  background: color-mix(in srgb, var(--panel) 94%, var(--bg));
  color: inherit;
  font: inherit;
  text-align: left;
}
button.ai-score-card {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 160ms ease, box-shadow 180ms ease, border-color 180ms ease;
}
button.ai-score-card:active {
  transform: translateY(1px) scale(.985);
}
button.ai-score-card:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--accent) 56%, transparent);
  outline-offset: 3px;
}
button.ai-score-card:hover {
  border-color: color-mix(in srgb, var(--accent) 36%, var(--line));
  box-shadow: 0 12px 28px color-mix(in srgb, var(--accent) 12%, transparent);
}
.ai-score-card span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.1;
  font-weight: var(--type-weight-strong);
}
.ai-score-card strong {
  color: var(--text);
  font-size: 34px;
  line-height: 0.95;
  font-weight: var(--type-weight-medium);
  font-variant-numeric: tabular-nums;
}
.ai-score-card i,
.ai-nutrient-card::after {
  display: block;
  height: 5px;
  overflow: hidden;
  border-radius: 99px;
  background: color-mix(in srgb, var(--text) 10%, transparent);
}
.ai-score-card i em {
  display: block;
  width: var(--score);
  height: 100%;
  border-radius: inherit;
  background: var(--accent);
}
.ai-message-card,
.ai-analysis-section,
.ai-nutrient-card {
  border: 1px solid color-mix(in srgb, var(--line) 80%, transparent);
  background: color-mix(in srgb, var(--panel) 94%, var(--bg));
}
.ai-message-card {
  margin-bottom: 12px;
  border-radius: 24px;
  padding: 16px;
  color: var(--text);
  font-size: 15px;
  line-height: 1.35;
  font-weight: var(--type-weight-medium);
}
.ai-nutrient-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}
.ai-nutrient-card {
  min-height: 112px;
  border-radius: 22px;
  padding: 14px;
  display: grid;
  gap: 6px;
}
.ai-nutrient-card span {
  color: var(--text);
  font-size: 16px;
  font-weight: var(--type-weight-strong);
}
.ai-nutrient-card strong {
  color: var(--text);
  font-size: 20px;
  font-weight: var(--type-weight-strong);
}
.ai-nutrient-card small {
  min-height: 16px;
  color: var(--muted);
  font-size: 12px;
  font-weight: var(--type-weight-medium);
}
.ai-nutrient-card::after {
  content: "";
  width: 42%;
  background: var(--accent);
}
.ai-days-strip {
  height: 96px;
  margin: 4px 0 14px;
  border-radius: 24px;
  padding: 14px;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 8px;
  border: 1px solid color-mix(in srgb, var(--line) 80%, transparent);
  background: color-mix(in srgb, var(--panel) 92%, var(--bg));
}
.ai-days-strip span {
  flex: 1;
  height: 100%;
  display: grid;
  align-items: end;
  gap: 6px;
  color: var(--muted);
  font-size: 11px;
  font-weight: var(--type-weight-strong);
  text-align: center;
}
.ai-days-strip i {
  align-self: end;
  width: 100%;
  height: var(--h);
  min-height: 5px;
  border-radius: 8px 8px 2px 2px;
  background: #4e8c73;
}
.ai-analysis-section {
  margin-bottom: 12px;
  border-radius: 24px;
  padding: 16px;
}
.ai-analysis-section h3 {
  margin: 0 0 10px;
  color: var(--text);
  font-size: 19px;
  font-weight: var(--type-weight-strong);
}
.ai-chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.ai-advice-chip {
  max-width: 100%;
  border-radius: 999px;
  padding: 8px 11px;
  border: 0;
  color: var(--text);
  background: color-mix(in srgb, var(--chip) 92%, var(--panel));
  font-size: 13px;
  line-height: 1.2;
  font-weight: var(--type-weight-strong);
  text-align: left;
  transition: border-radius 180ms ease, background 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}
.ai-advice-chip:active {
  transform: scale(.99);
}
.ai-advice-chip span,
.ai-advice-chip small,
.ai-advice-chip em {
  display: block;
}
.ai-advice-chip span {
  color: var(--text);
}
.ai-advice-chip.expanded {
  width: 100%;
  border-radius: 19px;
  padding: 12px 13px;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--line) 82%, transparent);
}
.ai-advice-chip.expanded span {
  font-size: 14px;
  line-height: 1.18;
  font-weight: var(--type-weight-strong);
}
.ai-advice-chip small {
  margin-top: 8px;
  color: color-mix(in srgb, var(--text) 72%, var(--muted));
  font-size: 12.5px;
  line-height: 1.34;
  font-weight: var(--type-weight-medium);
}
.ai-advice-chip em {
  width: fit-content;
  margin-top: 8px;
  border-radius: 999px;
  padding: 4px 8px;
  color: color-mix(in srgb, var(--text) 68%, transparent);
  background: color-mix(in srgb, var(--panel) 88%, transparent);
  font-size: 10.5px;
  line-height: 1;
  font-style: normal;
  font-weight: var(--type-weight-strong);
}
.ai-analysis-section.risks .ai-advice-chip {
  background: color-mix(in srgb, #ff8066 16%, var(--panel));
}
.ai-analysis-section.good .ai-advice-chip {
  background: color-mix(in srgb, #4e8c73 16%, var(--panel));
}
.ai-analysis-section.actions .ai-advice-chip {
  background: color-mix(in srgb, #7a6fa8 13%, var(--panel));
}
.add-ai-loading-card,
.add-ai-result-card {
  min-height: 84px;
  display: grid;
  align-items: center;
  gap: 12px;
  border-radius: 11px;
  background: color-mix(in srgb, var(--chip) 74%, var(--top));
}
.add-ai-loading-card {
  grid-template-columns: 52px minmax(0, 1fr) 92px;
  padding: 12px 14px;
}
.add-ai-loading-dot {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: linear-gradient(100deg, color-mix(in srgb, var(--text) 6%, transparent), color-mix(in srgb, var(--text) 17%, transparent), color-mix(in srgb, var(--text) 6%, transparent));
  animation: add-ai-pulse 1600ms ease-in-out infinite;
}
.add-ai-loading-card strong {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--text);
  font-size: 15px;
  font-weight: var(--type-weight-medium);
}
.add-ai-loading-card strong svg {
  width: 15px;
  height: 15px;
}
.add-ai-loading-card i,
.add-ai-loading-card b {
  display: block;
  height: 15px;
  margin-top: 8px;
  border-radius: 4px;
  background: linear-gradient(100deg, color-mix(in srgb, var(--text) 7%, transparent), color-mix(in srgb, var(--text) 18%, transparent), color-mix(in srgb, var(--text) 7%, transparent));
  background-size: 220% 100%;
  animation: add-ai-shimmer 1750ms ease-in-out infinite;
}
.add-ai-loading-card i.short {
  width: 72%;
}
.add-ai-loading-card b {
  width: 88px;
  height: 50px;
}
@keyframes add-ai-shimmer {
  0% { background-position: 100% 0; }
  100% { background-position: -120% 0; }
}
@keyframes add-ai-pulse {
  0%, 100% { opacity: .55; transform: scale(.96); }
  50% { opacity: 1; transform: scale(1); }
}
.ai-score-card > span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}
.ai-score-info {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  border: 0;
  border-radius: 999px;
  display: grid;
  place-items: center;
  color: var(--muted);
  background: color-mix(in srgb, var(--chip) 82%, transparent);
  font-size: 12px;
  font-weight: var(--type-weight-strong);
}
.ai-advice-chip small,
.ai-advice-chip em {
  display: none;
}
.ai-advice-chip.expanded small,
.ai-advice-chip.expanded em {
  display: block;
}
.ai-advice-chip.expanded small {
  margin-top: 8px;
  color: color-mix(in srgb, var(--text) 84%, var(--muted));
  font-size: 13px;
  line-height: 1.35;
  font-weight: var(--type-weight-medium);
}
.ai-advice-chip.expanded em {
  width: fit-content;
  margin-top: 9px;
  border-radius: 999px;
  padding: 4px 8px;
  color: var(--muted);
  background: color-mix(in srgb, var(--panel) 80%, transparent);
  font-size: 11px;
  font-style: normal;
  font-weight: var(--type-weight-strong);
}
.ai-medical-disclaimer {
  margin: 10px 0 0;
  border-radius: 16px;
  padding: 10px 12px;
  color: var(--muted);
  background: color-mix(in srgb, var(--soft) 62%, transparent);
  font-size: 11.5px;
  line-height: 1.42;
  font-weight: var(--type-weight-medium);
}
.ai-report-screen {
  position: fixed;
  inset: 0;
  z-index: 64;
  display: flex;
  flex-direction: column;
  padding: 0 16px 0;
  background: var(--top);
  color: var(--text);
  overflow-y: auto;
  overscroll-behavior-y: none;
  -webkit-overflow-scrolling: touch;
  animation: notif-in 320ms cubic-bezier(0.32, 0.72, 0.28, 1) both;
}
.ai-report-head {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: calc(6px + max(10px, env(safe-area-inset-top))) 0 12px;
  background: var(--top);
}

.ai-report-head h2 {
  flex: 1 1 auto;
  margin: 0;
  font-size: 21px;
  font-weight: var(--type-weight-strong);
}

.ai-report-back {
  flex: 0 0 auto;
  min-width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  background: color-mix(in srgb, var(--ink, #f4f4f5) 8%, transparent);
  color: inherit;
  cursor: pointer;
  display: grid;
  place-items: center;
}

.ai-report-back svg {
  width: 18px;
  height: 18px;
}
.ai-report-period {
  flex: 0 0 auto;
  border: 0;
  border-radius: 999px;
  padding: 4px 10px;
  background: var(--chip);
  color: inherit;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}

.ai-report-body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding-bottom: max(12px, env(safe-area-inset-bottom));
}
.ai-report-screen .ai-message-card p {
  margin: 0;
}

.ai-report-screen .ai-message-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ai-report-hero {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.ai-report-overall {
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.ai-report-overall strong {
  font-size: 40px;
  line-height: 1;
  font-weight: var(--type-weight-strong);
  font-variant-numeric: tabular-nums;
}

.ai-report-overall span {
  font-size: 15px;
  color: var(--faint);
}

.ai-report-overall .report-ai-confidence {
  margin-left: auto;
}
.ai-report-origin {
  margin: 0;
  color: var(--faint);
  font-size: 12px;
  line-height: 1.3;
}
.ai-report-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ai-report-section h3 {
  margin: 0;
  font-size: 13px;
  line-height: 1.1;
  font-weight: var(--type-weight-medium);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--faint);
}

.ai-card-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ai-card {
  --card-color: color-mix(in srgb, var(--text) 26%, transparent);
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 12px 12px;
  border-left: 4px solid var(--card-color);
  border-radius: 4px 14px 14px 4px;
  background: color-mix(in srgb, var(--card-color) 7%, transparent);
}

.ai-card-attention {
  --card-color: #f2b90d;
}

.ai-card-warning {
  --card-color: #ff9f43;
}

.ai-card-critical {
  --card-color: #ff453a;
}
.ai-card-severity {
  color: var(--card-color);
  font-size: 11px;
  line-height: 1.1;
  font-weight: var(--type-weight-medium);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.ai-card-title {
  margin: 0;
  font-size: 15px;
  line-height: 1.25;
  font-weight: var(--type-weight-medium);
}

.ai-card-short {
  margin: 0;
  color: var(--faint);
  font-size: 12px;
  line-height: 1.35;
}
.ai-card-metrics {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 2px;
}

.ai-card-metric {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.ai-card-chip {
  border-radius: 999px;
  padding: 4px 10px;
  background: var(--chip);
  font-size: 12px;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}
.ai-card-bar {
  --fill: 0%;
  --bar-color: var(--chip);
  flex: 1 1 90px;
  min-width: 90px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.ai-card-bar i {
  flex: 1 1 auto;
  height: 6px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--text) 10%, transparent);
  position: relative;
  overflow: hidden;
}

.ai-card-bar i::after {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--fill);
  border-radius: 999px;
  background: var(--bar-color);
}

.ai-card-bar b {
  flex: 0 0 auto;
  color: var(--faint);
  font-size: 11px;
  font-weight: var(--type-weight-medium);
  font-variant-numeric: tabular-nums;
}

.ai-card-bar-under {
  --bar-color: color-mix(in srgb, var(--text) 34%, transparent);
}

.ai-card-bar-ok {
  --bar-color: #52a974;
}

.ai-card-bar-over {
  --bar-color: #e55f5f;
}
.ai-card-products {
  display: flex;
  gap: 10px;
  margin-top: 4px;
}

.ai-card-product {
  flex: 0 0 auto;
  width: 62px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.ai-card-product .product-art {
  width: 34px;
  height: 34px;
  border-radius: 12px;
  background-size: contain;
}

.ai-card-product small {
  width: 100%;
  color: var(--faint);
  font-size: 11px;
  line-height: 1.2;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ai-card-action {
  margin: 4px 0 0;
  font-size: 13px;
  line-height: 1.35;
}

.ai-card-action b {
  font-weight: var(--type-weight-strong);
}
.ai-card-more {
  align-self: flex-start;
  margin-top: 2px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--report-lime-dark, #6faf21);
  font-size: 12px;
  font-weight: var(--type-weight-medium);
  cursor: pointer;
}

.ai-card-detail {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 4px;
}

.ai-card-detail p {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.4;
  color: color-mix(in srgb, var(--text) 76%, transparent);
}

.ai-card-swap {
  font-weight: var(--type-weight-medium);
}
.ai-card-source {
  color: var(--faint);
  font-size: 11px;
  font-style: normal;
  line-height: 1.3;
}
.ai-plan-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ai-plan-item {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.ai-plan-check {
  flex: 1 1 auto;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font-size: 14px;
  line-height: 1.35;
  text-align: left;
  cursor: pointer;
}

.ai-plan-check i {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  border: 1.5px solid color-mix(in srgb, var(--text) 26%, transparent);
  border-radius: 7px;
}
.ai-plan-item.done .ai-plan-check i {
  border-color: #52a974;
  background: #52a974;
}

.ai-plan-item.done .ai-plan-check i::after {
  content: '✓';
  display: block;
  margin-top: -2px;
  color: #ffffff;
  font-size: 13px;
  line-height: 20px;
  text-align: center;
}

.ai-plan-item.done .ai-plan-check span {
  color: var(--faint);
  text-decoration: line-through;
}

.ai-plan-chip {
  margin-left: 30px;
}
.ai-report-reference .ai-nutrient-grid {
  margin-top: 0;
}
.ai-report-gaps {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ai-report-gaps-toggle {
  align-self: flex-start;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--faint);
  font-size: 12px;
  font-weight: var(--type-weight-medium);
  cursor: pointer;
}

.ai-report-gaps ul {
  margin: 0;
  padding-left: 16px;
  color: var(--faint);
  font-size: 12px;
  line-height: 1.4;
}
.ai-report-foot {
  position: sticky;
  bottom: 0;
  z-index: 2;
  margin: auto -16px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 12px 16px max(12px, env(safe-area-inset-bottom));
  background: var(--top);
}

.ai-report-foot::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: 16px;
  background: linear-gradient(to top, var(--top), transparent);
  pointer-events: none;
}

.ai-report-refresh {
  width: 100%;
  border: 0;
  border-radius: 999px;
  padding: 12px 18px;
  background: var(--classic-accent, #c6f04f);
  color: #16180f;
  font-size: 15px;
  font-weight: var(--type-weight-strong);
  cursor: pointer;
}

.ai-report-refresh:disabled {
  opacity: 0.6;
  cursor: default;
}

.ai-report-left {
  color: var(--faint);
  font-size: 11px;
}
.ai-report-loading {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.ai-report-skeleton {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ai-skel-row {
  display: flex;
  gap: 10px;
}

.ai-skel {
  display: block;
  border-radius: 14px;
  background: color-mix(in srgb, var(--text) 9%, transparent);
  animation: ai-skel-breathe 1400ms ease-in-out infinite;
}

.ai-skel-score {
  width: 130px;
  height: 44px;
}

.ai-skel-diet {
  flex: 1 1 0;
  height: 92px;
}

.ai-skel-card {
  height: 74px;
}

@keyframes ai-skel-breathe {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.55;
  }
}

.ai-report-steps {
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: center;
}

.ai-report-steps strong {
  font-size: 15px;
  font-weight: var(--type-weight-medium);
}

.ai-report-steps span {
  color: var(--faint);
  font-size: 13px;
  line-height: 1.35;
}

.ai-report-loading-note {
  color: var(--faint);
  font-size: 12px;
  line-height: 1.35;
  text-align: center;
}
@media (prefers-reduced-motion: reduce) {
  .ai-report-screen {
    animation: none;
  }

  .ai-skel {
    animation: none;
  }
}
.scrim.ai-consent-scrim {
  z-index: 58;
}

.sheet.ai-consent-sheet {
  z-index: 59;
}
.ai-consent-sheet {
  max-height: min(760px, calc(var(--visual-vh, 100dvh) - max(14px, env(safe-area-inset-top)) - 8px));
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding-bottom: max(18px, calc(env(safe-area-inset-bottom) + 14px));
}
.ai-consent-sheet .sheet-head {
  position: sticky;
  top: 0;
  z-index: 3;
  background: var(--sheet);
}
.ai-consent-body {
  display: grid;
  gap: 12px;
  padding: 12px 14px 0;
}
.ai-consent-lead {
  margin: 0;
  color: var(--text);
  font-size: 15px;
  line-height: 1.5;
  font-weight: var(--type-weight-strong);
}
.ai-consent-block {
  display: grid;
  gap: 10px;
  border-radius: 22px;
  padding: 14px;
  background: color-mix(in srgb, var(--soft) 78%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--line) 84%, transparent);
}

.ai-consent-block h3 {
  margin: 0;
  color: var(--text);
  font-size: 17px;
  line-height: 1.08;
  font-weight: var(--type-weight-strong);
}

.ai-consent-block p {
  margin: 0;
  color: color-mix(in srgb, var(--text) 78%, var(--muted));
  font-size: 13px;
  line-height: 1.42;
  font-weight: var(--type-weight-medium);
}
.ai-consent-block-auto {
  background: color-mix(in srgb, #c67668 13%, var(--panel));
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, #c67668 34%, transparent);
}
.ai-consent-list {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ai-consent-list li {
  display: grid;
  gap: 3px;
  border-radius: 15px;
  padding: 9px 11px;
  background: color-mix(in srgb, var(--panel) 84%, transparent);
}

.ai-consent-list b {
  color: var(--text);
  font-size: 13px;
  line-height: 1.2;
  font-weight: var(--type-weight-strong);
}

.ai-consent-list span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.32;
  font-weight: var(--type-weight-medium);
}
.ai-consent-note {
  margin: 0;
  color: var(--muted);
  font-size: 11.5px;
  line-height: 1.3;
  font-weight: var(--type-weight-strong);
}
.ai-consent-back {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.32;
  font-weight: var(--type-weight-medium);
}
.ai-consent-error {
  margin: 0;
  font-size: 13px;
  line-height: 1.35;
}
.ai-consent-actions {
  display: grid;
  gap: 10px;
  margin-top: 2px;
}
.ai-consent-yes {
  width: 100%;
  min-height: 52px;
  border: 0;
  border-radius: 18px;
  color: #fff;
  background: #050505;
  font-size: 15px;
  font-weight: var(--type-weight-strong);
}
:root[data-theme="dark"] .ai-consent-yes {
  color: #050505;
  background: #f5f5f5;
}
.ai-consent-no {
  width: 100%;
  min-height: 52px;
  border: 0;
  border-radius: 18px;
  color: var(--ink);
  background: var(--card);
  box-shadow: inset 0 0 0 1px var(--line);
  font-size: 15px;
  font-weight: var(--type-weight-strong);
}
.ai-consent-actions button[disabled] {
  opacity: 0.55;
  cursor: default;
}
.scrim.ai-settings-scrim {
  z-index: 52;
}

.sheet.ai-settings-sheet {
  z-index: 53;
}
.sheet.ai-settings-sheet {
  top: var(--visual-offset-top, 0px);
  bottom: auto;
  height: var(--visual-vh, 100dvh);
  max-height: var(--visual-vh, 100dvh);
  border-radius: 0;
  overflow-y: auto;
  overscroll-behavior-y: none;
  padding-bottom: max(18px, calc(env(safe-area-inset-bottom) + 14px));
  -webkit-overflow-scrolling: touch;
}
.ai-settings-head {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--sheet);
}
.sheet.ai-settings-sheet .ai-settings-head {
  height: auto;
  min-height: 60px;
  padding-top: calc(8px + env(safe-area-inset-top));
}
.ai-settings-screen .sheet-x {
  font-size: 30px;
  line-height: 0.8;
}
.ai-settings-diets {
  display: block;
  padding: 0 16px;
}
.ai-settings-group-label {
  margin: 18px 16px 6px;
  color: var(--muted);
  font-size: 11px;
  font-weight: var(--type-weight-medium);
  letter-spacing: .12em;
  text-transform: uppercase;
}
.ai-settings-sheet .sheet-row > span:nth-child(2) b,
.ai-settings-sheet .sheet-row > span:nth-child(2) small,
.ai-settings-language > span b,
.ai-settings-language > span small {
  display: block;
}
.ai-settings-sheet .sheet-row > span:nth-child(2) small,
.ai-settings-language > span small {
  color: var(--muted);
}
.ai-settings-language > div {
  flex: 0 0 auto;
}
.ai-settings-sheet .settings-error {
  margin: 10px 22px 0;
}
.ai-settings-sheet {
  overscroll-behavior-y: none;
}
.ai-settings-sheet .sheet-row {
  min-height: 62px;
  grid-template-columns: 30px 1fr auto;
  gap: 14px;
  padding: 12px 20px;
  text-align: left;
  font-size: 15px;
}
.ai-settings-sheet .sheet-row > span:nth-child(2) b,
.ai-settings-language > span b {
  font-size: 15px;
  font-weight: var(--type-weight-medium);
  line-height: 1.25;
}
.ai-settings-sheet .sheet-row > span:nth-child(2) small,
.ai-settings-language > span small {
  margin-top: 3px;
  font-size: 12px;
  line-height: 1.4;
  font-weight: var(--type-weight-regular);
}
.settings-language.ai-settings-language {
  margin: 0;
  border-top: 0;
  padding: 12px 20px;
  border-bottom: 1px solid var(--line);
  align-items: center;
  gap: 14px;
  font-weight: var(--type-weight-regular);
}
.ai-settings-sheet .row-icon .app-icon {
  width: 16px;
  height: 16px;
}
.report-risks-panel {
  display: grid;
  gap: 10px;
}

.report-risks-panel .report-panel-head {
  margin-bottom: 0;
}
.report-risk-card {
  --risk-color: color-mix(in srgb, var(--report-text) 26%, transparent);
  padding: 10px 0 10px 12px;
  border-left: 4px solid var(--risk-color);
  border-radius: 4px 12px 12px 4px;
  background: color-mix(in srgb, var(--risk-color) 7%, transparent);
}

.report-risk-card.risk-attention {
  --risk-color: #f2b90d;
}

.report-risk-card.risk-warning {
  --risk-color: #ff9f43;
}

.report-risk-card.risk-critical {
  --risk-color: #ff453a;
}

.report-risk-head {
  display: grid;
  gap: 3px;
}
.report-risk-severity {
  color: var(--risk-color);
  font-size: 11px;
  line-height: 1.1;
  font-weight: var(--type-weight-medium);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.report-risk-title {
  margin: 0;
  color: var(--report-text);
  font-size: 15px;
  line-height: 1.25;
  font-weight: var(--type-weight-medium);
  letter-spacing: 0;
}

.report-risk-days {
  margin: 4px 0 0;
  color: var(--report-muted);
  font-size: 12px;
  line-height: 1.3;
}
.report-risk-toggle {
  margin-top: 6px;
  padding: 0;
  border: 0;
  color: var(--report-lime-dark);
  background: transparent;
  font-size: 12px;
  font-weight: var(--type-weight-medium);
}
.report-risk-more {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition:
    grid-template-rows 220ms cubic-bezier(0.22, 0.61, 0.36, 1),
    opacity 180ms ease;
}

.report-risk-more.shown {
  grid-template-rows: 1fr;
  opacity: 1;
}

.report-risk-more-inner {
  min-height: 0;
  overflow: hidden;
  display: grid;
  gap: 6px;
}

@media (prefers-reduced-motion: reduce) {
  .report-risk-more {
    transition: none;
  }
}
.report-risk-body {
  margin: 6px 0 0;
  color: var(--report-text);
  font-size: 13px;
  line-height: 1.45;
}

.report-risk-daylist,
.report-risk-confidence {
  margin: 0;
  color: var(--report-muted);
  font-size: 12px;
  line-height: 1.3;
}

.report-risks-clear {
  margin: 0;
  color: var(--report-muted);
  font-size: 14px;
  line-height: 1.3;
}

.report-risks-coverage {
  display: grid;
  gap: 2px;
  margin-top: 2px;
  padding-top: 8px;
  border-top: 1px solid var(--report-line);
  color: var(--report-muted);
  font-size: 12px;
  line-height: 1.3;
}

.report-risks-coverage p {
  margin: 0;
}

.report-risks-coverage b {
  color: var(--report-muted);
  font-weight: var(--type-weight-medium);
}
.report-risk-actions {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-top: 6px;
}

.report-risk-actions .report-risk-toggle {
  margin-top: 0;
}
.report-risk-mute,
.report-risk-ask-no,
.report-risk-unmute {
  padding: 0;
  border: 0;
  color: var(--report-muted);
  background: transparent;
  font-size: 12px;
  line-height: 1.3;
  font-weight: var(--type-weight-medium);
}
.report-risk-ask {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
  color: var(--report-muted);
  font-size: 12px;
  line-height: 1.3;
}
.report-risk-ask-yes {
  padding: 0;
  border: 0;
  color: #ff453a;
  background: transparent;
  font-size: 12px;
  line-height: 1.3;
  font-weight: var(--type-weight-medium);
}

.report-risk-ask-yes[disabled],
.report-risk-unmute[disabled] {
  opacity: .5;
}

.report-risk-mute-error {
  margin: 4px 0 0;
  color: #ff453a;
  font-size: 12px;
  line-height: 1.3;
}
.report-risks-muted {
  display: grid;
  gap: 4px;
  margin-top: 2px;
  padding-top: 8px;
  border-top: 1px solid var(--report-line);
  color: var(--report-muted);
  font-size: 12px;
  line-height: 1.3;
}

.report-risks-muted b {
  color: var(--report-muted);
  font-weight: var(--type-weight-medium);
}

.report-risks-muted p {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin: 0;
}
.report-risk-unmute {
  color: var(--report-lime-dark);
}

.report-pinned-risks {
  display: grid;
  gap: 8px;
}
.report-pinned-risk {
  display: grid;
  grid-template-rows: 1fr;
  width: 100%;
  padding: 10px 12px;
  border: 0;
  border-left: 4px solid #ff453a;
  border-radius: 4px 12px 12px 4px;
  background: color-mix(in srgb, #ff453a 10%, var(--report-card));
  text-align: left;
  opacity: 1;
  transition:
    grid-template-rows 280ms cubic-bezier(0.22, 0.61, 0.36, 1),
    opacity 200ms ease,
    padding 280ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.report-pinned-risk.leaving {
  grid-template-rows: 0fr;
  padding-top: 0;
  padding-bottom: 0;
  opacity: 0;
}
.report-pinned-risk-inner {
  display: grid;
  gap: 2px;
  min-height: 0;
  overflow: hidden;
}

.report-pinned-risk-severity {
  color: #ff453a;
  font-size: 11px;
  line-height: 1.1;
  font-weight: var(--type-weight-medium);
  text-transform: uppercase;
  letter-spacing: .04em;
}

.report-pinned-risk-title {
  color: var(--report-text);
  font-size: 15px;
  line-height: 1.25;
  font-weight: var(--type-weight-medium);
}

.report-pinned-risk-hint {
  color: var(--report-muted);
  font-size: 12px;
  line-height: 1.3;
}

@media (prefers-reduced-motion: reduce) {
  .report-pinned-risk {
    transition: none;
  }
}
.ai-history-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}

.ai-history-row {
  width: 100%;
  min-height: 56px;
  border-radius: 18px;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  appearance: none;
  border: 1px solid color-mix(in srgb, var(--line) 80%, transparent);
  background: color-mix(in srgb, var(--panel) 94%, var(--bg));
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 160ms ease, border-color 180ms ease;
}

.ai-history-row:active {
  transform: translateY(1px) scale(.985);
}

.ai-history-row:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--accent) 56%, transparent);
  outline-offset: 3px;
}
.ai-history-main {
  flex: 1 1 auto;
  min-width: 0;
  display: grid;
  gap: 3px;
  justify-items: start;
}

.ai-history-main strong {
  color: var(--text);
  font-size: 15px;
  font-weight: var(--type-weight-strong);
}

.ai-history-dates {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.1;
  font-weight: var(--type-weight-strong);
}
.ai-history-date {
  flex: 0 0 auto;
  color: var(--faint);
  font-size: 11px;
  line-height: 1.2;
  font-weight: var(--type-weight-medium);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.ai-report-screen span.ai-report-period {
  cursor: default;
}
.report-page {
  display: grid;
  gap: 10px;
}
.report-shell {
  --health-green: #30d158;
  --health-card: color-mix(in srgb, var(--panel) 94%, var(--bg));
  --health-muted-bar: color-mix(in srgb, var(--text) 20%, transparent);
  --health-grid: color-mix(in srgb, var(--text) 13%, transparent);
  overflow: hidden;
}
.report-shell .health-report-page {
  height: 100dvh;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: max(18px, calc(env(safe-area-inset-top) + 10px)) 18px calc(var(--nav-h) + env(safe-area-inset-bottom) + 18px);
  color: var(--text);
  background: var(--bg);
  scrollbar-width: none;
}
.report-shell .health-report-page::-webkit-scrollbar {
  display: none;
}
.report-ai-stack {
  position: relative;
  height: 100dvh;
  overflow: hidden;
  background: var(--bg);
  color: var(--text);
  isolation: isolate;
}
.report-top-layer {
  position: absolute;
  inset: 0;
  min-width: 0;
}
.report-top-layer {
  z-index: 2;
  transition: transform 320ms cubic-bezier(.2, .86, .18, 1), border-radius 320ms cubic-bezier(.2, .86, .18, 1), box-shadow 320ms ease;
  will-change: transform;
  box-shadow: 0 -18px 44px color-mix(in srgb, var(--text) 11%, transparent);
}
.report-shell .report-top-layer.health-report-page {
  position: relative;
  inset: auto;
  height: 100%;
  min-height: 100%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.health-loading {
  min-height: 180px;
  border-radius: 24px;
  display: grid;
  place-items: center;
  color: var(--muted);
  background: var(--health-card);
  font-weight: var(--type-weight-strong);
}
.health-loading.error {
  color: #ff453a;
}
.report-shell {
  --report-lime: #a9f63f;
  --report-lime-dark: #6faf21;
  --report-lime-graph: #8fd82c;
  --report-hero: #0b0c0e;
  --report-body: #f4f4f6;
  --report-card: #ffffff;
  --report-line: rgba(18, 18, 20, .09);
  --report-muted: rgba(18, 18, 20, .52);
  --report-text: #111214;
}
:root[data-theme="dark"] .report-shell {
  --report-body: #050506;
  --report-card: #111214;
  --report-line: rgba(255,255,255,.10);
  --report-muted: rgba(255,255,255,.54);
  --report-text: #ffffff;
}
.report-shell .report-ai-stack {
  background: var(--report-body);
}
.report-shell .health-report-page {
  display: block !important;
  padding: 0 !important;
  color: var(--report-text);
  background: var(--report-body);
  overflow-x: hidden;
}
.report-shell .health-loading {
  margin: calc(env(safe-area-inset-top) + 22px) 18px 0;
  background: var(--report-card);
}
.report-redesign {
  min-height: 100%;
  font-family: var(--font-sans);
  letter-spacing: 0;
  overflow-x: hidden;
}
.report-redesign-hero {
  position: relative;
  overflow: hidden;
  width: 100%;
  max-width: 100%;
  min-height: 318px;
  padding: calc(env(safe-area-inset-top) + 22px) 22px 20px;
  border-radius: 0 0 34px 34px;
  color: #ffffff;
  background:
    radial-gradient(circle at 18% 0%, rgba(169,246,63,.18), transparent 26%),
    radial-gradient(circle at 84% 22%, rgba(95,151,255,.12), transparent 34%),
    linear-gradient(180deg, #07080a 0%, var(--report-hero) 100%);
  box-shadow: 0 16px 36px rgba(0,0,0,.18);
}
.report-redesign-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
}
.report-redesign-title h1 {
  margin: 0;
  font-size: clamp(37px, 10vw, 52px);
  line-height: .92;
  font-weight: var(--type-weight-strong);
  letter-spacing: 0;
}
.report-calendar-btn {
  width: 52px;
  height: 52px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  color: var(--report-lime);
  background: rgba(255,255,255,.055);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}
.report-calendar-btn svg {
  width: 25px;
  height: 25px;
}
.report-period-tabs {
  width: 100%;
  max-width: 100%;
  height: 45px;
  min-height: 45px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 3px;
  padding: 4px;
  margin-bottom: 12px;
  border-radius: 999px;
  background: rgba(0,0,0,.32);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: inset 0 1px 8px rgba(255,255,255,.04);
}
.report-period-tabs button {
  min-width: 0;
  height: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 0;
  padding: 0 4px;
  color: rgba(255,255,255,.68);
  background: transparent;
  font-size: 13.5px;
  line-height: 1;
  font-weight: var(--type-weight-medium);
  white-space: nowrap;
}
.report-period-tabs button.active {
  color: var(--report-lime);
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.035));
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.06),
    0 10px 22px rgba(0,0,0,.22);
}
.report-stat-grid {
  width: 100%;
  max-width: 100%;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 9px;
  min-height: 136px;
}
.report-stat-card {
  min-width: 0;
  height: 136px;
  padding: 11px 9px 9px;
  border-radius: 18px;
  display: grid;
  grid-template-rows: 23px auto auto 1fr;
  gap: 4px;
  color: rgba(255,255,255,.78);
  background:
    radial-gradient(circle at 80% 100%, rgba(169,246,63,.10), transparent 34%),
    linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.035));
  border: 1px solid rgba(255,255,255,.105);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}
.report-stat-icon {
  width: 23px;
  height: 23px;
  display: grid;
  place-items: center;
  color: var(--report-lime);
}
.report-stat-card.protein .report-stat-icon {
  color: #9a78d8;
}
.report-stat-card.satfat .report-stat-icon {
  color: #f0b35a;
}
.report-stat-card.fiber .report-stat-icon {
  color: #f0a542;
}
.report-stat-icon svg {
  width: 22px;
  height: 22px;
}
.report-stat-card small {
  min-height: 26px;
  color: rgba(255,255,255,.62);
  font-size: 11px;
  line-height: 1.15;
  font-weight: var(--type-weight-medium);
}
.report-stat-card strong {
  color: #ffffff;
  font-size: clamp(20px, 5vw, 28px);
  line-height: .98;
  font-weight: var(--type-weight-medium);
  font-variant-numeric: tabular-nums;
}
.report-stat-card.corridor {
  grid-template-rows: 23px 27px 27px 11px 20px;
  gap: 3px;
}
.report-stat-card strong em {
  color: rgba(255,255,255,.68);
  font-size: 13px;
  font-style: normal;
  font-weight: var(--type-weight-medium);
}
.report-stat-note {
  color: rgba(255,255,255,.56);
  font-size: 10.5px;
  line-height: 1.1;
  font-weight: var(--type-weight-medium);
}
.report-corridor-bars {
  align-self: end;
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 4px;
  height: 20px;
  align-items: end;
  margin-top: 1px;
}
.report-corridor-bars i {
  height: 17px;
  border-radius: 999px;
  background: rgba(255,255,255,.26);
}
.report-corridor-bars i.on {
  background: var(--report-lime);
  box-shadow: 0 0 10px rgba(169,246,63,.24);
}
.report-redesign-content {
  display: grid;
  gap: 14px;
  padding: 16px 18px calc(var(--nav-h, 96px) + env(safe-area-inset-bottom) + 54px);
  overflow-x: hidden;
}
.report-panel {
  width: 100%;
  border-radius: 24px;
  padding: 17px 16px;
  color: var(--report-text);
  background: var(--report-card);
  border: 1px solid var(--report-line);
  box-shadow: 0 12px 32px rgba(0,0,0,.045);
}
:root[data-theme="dark"] .report-panel {
  box-shadow: none;
}
.report-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.report-panel h2,
.report-panel-head h2 {
  margin: 0;
  color: var(--report-text);
  font-size: 18px;
  line-height: 1.1;
  font-weight: var(--type-weight-strong);
  letter-spacing: 0;
}
.report-info-dot {
  width: 18px;
  height: 18px;
  margin-left: 7px;
  border-radius: 50%;
  display: inline-grid;
  place-items: center;
  color: var(--report-muted);
  border: 1px solid color-mix(in srgb, var(--report-muted) 36%, transparent);
  font-size: 11px;
  font-weight: var(--type-weight-medium);
  vertical-align: 1px;
}
.report-chart-legend {
  display: grid;
  gap: 4px;
  color: var(--report-muted);
  font-size: 11px;
  line-height: 1.1;
  font-weight: var(--type-weight-medium);
  text-align: right;
}
.report-chart-legend span {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
  white-space: nowrap;
}
.report-chart-legend strong {
  color: var(--report-lime-dark);
  font: inherit;
  font-weight: var(--type-weight-medium);
}
.report-chart-legend i {
  width: 28px;
  height: 1px;
  border-top: 1px dashed currentColor;
}
.report-chart-legend i.average {
  border-top-style: solid;
}
.report-calorie-chart {
  position: relative;
  height: 214px;
  padding-top: 20px;
  overflow: hidden;
}
.report-line {
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  z-index: 1;
  pointer-events: none;
}
.report-line.target {
  top: var(--target-top);
  border-top: 1px dashed rgba(28,28,30,.32);
}
.report-line.average {
  top: var(--avg-top);
  border-top: 1.5px solid rgba(28,28,30,.58);
}
:root[data-theme="dark"] .report-line.target {
  border-color: rgba(255,255,255,.25);
}
:root[data-theme="dark"] .report-line.average {
  border-color: rgba(255,255,255,.50);
}
.report-bars {
  height: 100%;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(34px, 1fr);
  align-items: end;
  gap: 10px;
  overflow-x: hidden;
  scrollbar-width: none;
}
.report-bars.scroll {
  grid-auto-flow: initial;
  grid-auto-columns: initial;
  gap: 5px;
  overflow-x: hidden;
  padding-bottom: 2px;
}
.report-bars.scroll .report-bar-col {
  grid-template-rows: 18px 1fr 28px;
  min-width: 0;
}
.report-bars.scroll .report-bar-col b {
  min-height: 12px;
  font-size: 8px;
}
.report-bars.scroll .report-bar-col small {
  min-height: 22px;
  font-size: 8px;
  line-height: .95;
}
.report-bars.scroll .report-bar-col i {
  width: min(100%, 5px);
  border-radius: 6px 6px 2px 2px;
}
.report-bars::-webkit-scrollbar {
  display: none;
}
.report-bar-col {
  position: relative;
  height: calc(100% - 34px);
  min-width: 0;
  display: grid;
  grid-template-rows: 19px 1fr 30px;
  align-items: end;
  justify-items: center;
  gap: 5px;
  color: var(--report-muted);
  font-variant-numeric: tabular-nums;
}
.report-bar-col b {
  min-height: 15px;
  color: color-mix(in srgb, var(--report-text) 70%, transparent);
  font-size: 10.5px;
  line-height: 1;
  font-weight: var(--type-weight-medium);
}
.report-bar-col i {
  width: min(100%, 27px);
  height: var(--h);
  min-height: 4px;
  border-radius: 9px 9px 3px 3px;
  background: #d9d9dc;
  box-shadow: none;
}
.report-bar-col.active i {
  background: var(--report-lime-graph);
  box-shadow: 0 0 12px rgba(143,216,44,.20);
}
.report-bar-col small {
  display: grid;
  gap: 2px;
  justify-items: center;
  color: var(--report-muted);
  font-size: 11px;
  line-height: 1;
  font-weight: var(--type-weight-medium);
}
.report-bar-col.active small {
  color: var(--report-lime-dark);
}
.report-bar-col small em {
  font-style: normal;
}
.report-two-col {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
}
.report-macro-panel,
.report-balance-panel {
  min-height: 238px;
}
.report-macro-body {
  display: grid;
  grid-template-columns: 1fr;
  justify-items: center;
  gap: 9px;
  align-items: center;
  margin-top: 10px;
}
.report-donut {
  width: 92px;
  aspect-ratio: 1;
  border-radius: 50%;
  display: grid;
  place-items: center;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.04);
}
.report-donut span {
  width: 61px;
  aspect-ratio: 1;
  border-radius: 50%;
  display: grid;
  place-items: center;
  align-content: center;
  color: var(--report-text);
  background: var(--report-card);
}
.report-donut b {
  font-size: 18px;
  line-height: 1;
  font-weight: var(--type-weight-strong);
}
.report-donut small {
  color: var(--report-muted);
  font-size: 10px;
  font-weight: var(--type-weight-medium);
}
.report-macro-legend {
  display: grid;
  width: 100%;
  gap: 6px;
}
.report-macro-legend span {
  display: grid;
  grid-template-columns: 8px minmax(0, 1fr) auto;
  column-gap: 7px;
  align-items: start;
  color: var(--report-muted);
  font-size: 11px;
  line-height: 1.1;
}
.report-macro-legend i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--c);
}
.report-macro-legend b {
  display: grid;
  gap: 2px;
  min-width: 0;
  color: var(--report-text);
  font-weight: var(--type-weight-medium);
}
.report-macro-legend strong {
  display: block;
  color: var(--report-muted);
  font-size: 10px;
  font-weight: var(--type-weight-medium);
  white-space: nowrap;
}
.report-macro-legend em {
  font-style: normal;
  color: var(--report-muted);
  white-space: nowrap;
  align-self: center;
}
.report-balance-list {
  display: grid;
  gap: 12px;
  margin-top: 16px;
}
.report-balance-row {
  display: grid;
  gap: 6px;
}
.report-balance-row span {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  color: var(--report-muted);
  font-size: 12px;
  line-height: 1;
  font-weight: var(--type-weight-medium);
}
.report-balance-row b {
  color: var(--report-muted);
  font-weight: var(--type-weight-medium);
}
.report-balance-row strong {
  color: var(--report-text);
  font-weight: var(--type-weight-medium);
  white-space: nowrap;
}
.report-balance-row i {
  height: 4px;
  overflow: hidden;
  border-radius: 99px;
  background: color-mix(in srgb, var(--report-text) 11%, transparent);
}
.report-balance-row em {
  display: block;
  width: min(100%, var(--w));
  height: 100%;
  border-radius: inherit;
  background: var(--c);
}
.report-changes-panel {
  display: grid;
  gap: 10px;
}
.report-changes-panel .report-panel-head {
  margin-bottom: 0;
}
.report-changes-panel .report-panel-head button {
  border: 0;
  color: var(--report-lime-dark);
  background: transparent;
  font-size: 12px;
  font-weight: var(--type-weight-medium);
}
.report-change-row {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid var(--report-line);
}
.report-change-row:last-child {
  border-bottom: 0;
}
.report-change-row span {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  color: var(--report-lime-dark);
  background: color-mix(in srgb, var(--report-lime) 18%, transparent);
}
.report-change-row.down span,
.report-change-row.good span {
  color: #3fa364;
  background: rgba(63,163,100,.14);
}
.report-change-row.up span,
.report-change-row.warn span {
  color: #e86565;
  background: rgba(232,101,101,.14);
}
.report-change-row p {
  margin: 0;
  color: color-mix(in srgb, var(--report-text) 78%, var(--report-muted));
  font-size: 13.5px;
  line-height: 1.28;
  font-weight: var(--type-weight-medium);
}
.report-empty-note {
  margin: 0;
  color: var(--report-muted);
  font-size: 14px;
  line-height: 1.3;
}
.report-main-ai-button {
  position: fixed;
  left: 50%;
  bottom: max(72px, calc(var(--nav-h, 96px) + env(safe-area-inset-bottom) - 20px));
  z-index: 80;
  width: min(60vw, 244px);
  min-height: 46px;
  border: 1px solid rgba(169,246,63,.28);
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--report-lime);
  background: #08090a;
  box-shadow:
    0 14px 26px rgba(0,0,0,.16),
    inset 0 0 0 1px rgba(255,255,255,.04);
  font-size: 13.2px;
  line-height: 1;
  font-weight: var(--type-weight-strong);
  transform: translateX(-50%);
}
.report-main-ai-button:active,
.report-calendar-btn:active {
  transform: scale(.985);
}
.report-main-ai-button:active {
  transform: translateX(-50%) scale(.985);
}
.report-shell .calendar-day.status-under,
.report-shell .calendar-day.status-green,
.report-shell .calendar-day.status-orange,
.report-shell .calendar-day.status-red {
  border-width: 2px;
}
.report-shell .calendar-day.selected {
  outline-width: 4px;
  border-width: 2px;
}
@media (max-width: 390px) {
  .report-redesign-hero {
    padding-left: 18px;
    padding-right: 18px;
  }

  .report-redesign-content {
    padding-left: 14px;
    padding-right: 14px;
  }

  .report-stat-grid {
    gap: 7px;
    min-height: 130px;
  }

  .report-stat-card {
    height: 130px;
    padding: 10px 8px;
    border-radius: 16px;
  }

  .report-stat-card small {
    font-size: 10px;
  }

  .report-stat-card strong {
    font-size: 20px;
  }

  .report-stat-card.corridor {
    grid-template-rows: 22px 26px 25px 10px 18px;
    gap: 3px;
  }

  .report-two-col {
    gap: 10px;
  }

  .report-panel {
    padding: 15px 13px;
    border-radius: 22px;
  }

  .report-macro-body {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 9px;
    margin-top: 10px;
  }

  .report-donut {
    width: 90px;
  }

  .report-donut span {
    width: 60px;
  }

  .report-macro-legend {
    width: 100%;
    gap: 6px;
  }

.report-macro-legend span {
    grid-template-columns: 7px minmax(0, 1fr) auto;
    column-gap: 6px;
    font-size: 10.5px;
  }
}
.report-redesign-title h1 {
  font-size: 32px !important;
  font-weight: var(--type-weight-strong) !important;
  letter-spacing: -0.6px !important;
  line-height: 1.05 !important;
}
.report-period-tabs button {
  font-size: 13px !important;
  font-weight: var(--type-weight-medium) !important;
}

.report-period-tabs button.active {
  font-weight: var(--type-weight-strong) !important;
}
.report-stat-card small,
.report-stat-note {
  font-size: 11px !important;
  font-weight: var(--type-weight-medium) !important;
}

.report-stat-card strong {
  font-size: 20px !important;
  font-weight: var(--type-weight-strong) !important;
  letter-spacing: -0.2px !important;
}

.report-stat-card strong em {
  font-size: 12px !important;
  font-weight: var(--type-weight-medium) !important;
}
.report-panel-head h2,
.report-panel > h2 {
  font-size: 17px !important;
  font-weight: var(--type-weight-strong) !important;
  letter-spacing: -0.2px !important;
}
.report-chart-legend span {
  font-size: 11px !important;
  font-weight: var(--type-weight-medium) !important;
}

.report-chart-legend span b,
.report-chart-legend span strong {
  font-weight: var(--type-weight-strong) !important;
}
.report-bars .report-bar-col b,
.report-bars .report-bar-col small {
  font-size: 11px !important;
  font-weight: var(--type-weight-medium) !important;
}
.report-donut span b {
  font-size: 19px !important;
  font-weight: var(--type-weight-strong) !important;
  letter-spacing: -0.2px !important;
}

.report-donut span small {
  font-size: 11px !important;
  font-weight: var(--type-weight-medium) !important;
}
.report-macro-legend span b {
  font-size: 12px !important;
  font-weight: var(--type-weight-strong) !important;
}

.report-macro-legend span em {
  font-size: 12px !important;
  font-weight: var(--type-weight-medium) !important;
}
.report-macro-legend span b strong {
  font-size: 12px !important;
  font-weight: var(--type-weight-strong) !important;
}
.report-balance-row span b {
  font-size: 12px !important;
  font-weight: var(--type-weight-medium) !important;
}

.report-balance-row span i,
.report-balance-row span strong {
  font-size: 12px !important;
  font-weight: var(--type-weight-strong) !important;
}
.report-change-row p {
  font-size: 13px !important;
  font-weight: var(--type-weight-medium) !important;
  line-height: 1.35 !important;
}
.report-info-dot {
  font-size: 11px !important;
  font-weight: var(--type-weight-medium) !important;
}
.report-ai-head h1 {
  font-size: 32px !important;
  font-weight: var(--type-weight-strong) !important;
  letter-spacing: -0.6px !important;
}

.report-ai-head p {
  font-size: 12px !important;
  font-weight: var(--type-weight-medium) !important;
}

.report-ai-run-button span b {
  font-size: 14px !important;
  font-weight: var(--type-weight-strong) !important;
}

.report-ai-period-button {
  font-size: 13px !important;
  font-weight: var(--type-weight-medium) !important;
}

.report-ai-period-button.active {
  font-weight: var(--type-weight-strong) !important;
}

.report-ai-period-button small {
  font-size: 11px !important;
  font-weight: var(--type-weight-medium) !important;
}

.report-hero-ai {
  width: 46px !important;
  height: 46px !important;
  min-width: 46px !important;
  min-height: 46px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  border-color: transparent !important;
  background: #c6f04f !important;
  color: #16180f !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.report-hero-ai svg {
  width: 20px !important;
  height: 20px !important;
}
:root:not([data-theme="dark"]) .report-redesign-hero {
  color: var(--report-text);
  background-color: var(--report-card);
  background-image: radial-gradient(circle at 18% 0%, rgba(198, 240, 79, .16), transparent 26%);
  box-shadow: 0 16px 36px color-mix(in srgb, #000 9%, transparent);
}
:root:not([data-theme="dark"]) .report-hero-ai {
  /* !important — потому что перебивается слой волны 45 (строка 1315), а он
     написан с !important: одной специфичности `:root:not(...)` тут мало. */
  background-color: #0b0c0d !important;
  color: #c6f04f !important;
  box-shadow:
    0 12px 28px rgba(0, 0, 0, .16),
    inset 0 1px 0 rgba(255, 255, 255, .06);
}
:root:not([data-theme="dark"]) .report-period-tabs {
  background-color: #e7e7e8;
  border-color: var(--report-line);
  box-shadow: none;
}

:root:not([data-theme="dark"]) .report-period-tabs button {
  color: var(--muted);
}

:root:not([data-theme="dark"]) .report-period-tabs button.active {
  color: var(--report-text);
  background-color: var(--report-card);
  background-image: none;
  box-shadow:
    0 6px 14px color-mix(in srgb, #000 10%, transparent),
    inset 0 0 0 1px var(--report-line);
}
:root:not([data-theme="dark"]) .report-stat-card {
  color: var(--report-text);
  background-color: #e7e7e8;
  background-image: none;
  border-color: var(--report-line);
  box-shadow: none;
}

:root:not([data-theme="dark"]) .report-stat-card strong {
  color: var(--report-text);
}

:root:not([data-theme="dark"]) .report-stat-card small,
:root:not([data-theme="dark"]) .report-stat-card strong em,
:root:not([data-theme="dark"]) .report-stat-note {
  color: var(--muted);
}
:root:not([data-theme="dark"]) .report-stat-icon {
  color: color-mix(in srgb, var(--report-lime) 55%, #000);
}

:root:not([data-theme="dark"]) .report-stat-card.protein .report-stat-icon {
  color: color-mix(in srgb, #9a78d8 90%, #000);
}

:root:not([data-theme="dark"]) .report-stat-card.satfat .report-stat-icon {
  color: color-mix(in srgb, #f0b35a 65%, #000);
}

:root:not([data-theme="dark"]) .report-stat-card.fiber .report-stat-icon {
  color: color-mix(in srgb, #f0a542 70%, #000);
}
.report-redesign-title h1 {
  flex: 1 1 auto;
  min-width: 0;
}
.report-hero-aux {
  display: inline-grid;
  place-items: center;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.report-hero-ai-settings {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  color: #ffffff;
  opacity: .72;
}

:root:not([data-theme="dark"]) .report-hero-ai-settings {
  color: var(--report-text);
}

.report-hero-ai-settings:active {
  opacity: 1;
}

.report-hero-ai-settings .app-icon {
  width: 19px;
  height: 19px;
}
.report-hero-ai-confirm,
.report-hero-ai-cancel {
  position: absolute;
  right: 69px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  transform: translateX(0) scale(.4);
  opacity: 0;
  pointer-events: none;
  transition: transform 200ms cubic-bezier(.32, .72, 0, 1), opacity 200ms cubic-bezier(.32, .72, 0, 1);
}
.report-hero-ai-confirm {
  color: #16180f;
  background: #c6f04f;
}

.report-hero-ai-cancel {
  color: #ffffff;
  background: rgba(255, 255, 255, .055);
  border: 1px solid rgba(255, 255, 255, .10);
}

.report-hero-ai-confirm svg,
.report-hero-ai-cancel svg {
  width: 20px;
  height: 20px;
}
.report-hero-ai-left {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: #16180f;
  color: #c6f04f;
  font-size: 10px;
  font-weight: var(--type-weight-strong);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}
:root:not([data-theme="dark"]) .report-hero-ai-left {
  background: #c6f04f;
  color: #16180f;
}
:root:not([data-theme="dark"]) .report-hero-ai-confirm,
:root:not([data-theme="dark"]) .report-hero-ai-cancel {
  background-color: #0b0c0d;
  border-color: transparent;
  box-shadow: 0 12px 28px rgba(0, 0, 0, .16), inset 0 1px 0 rgba(255, 255, 255, .06);
}

:root:not([data-theme="dark"]) .report-hero-ai-confirm {
  color: #c6f04f;
}

:root:not([data-theme="dark"]) .report-hero-ai-cancel {
  color: #ffffff;
}
.report-hero-ai-cancel.fan-shown {
  transform: translateX(-53px) scale(1);
  opacity: 1;
  pointer-events: auto;
}

.report-hero-ai-confirm.fan-shown {
  transform: translateX(-103px) scale(1);
  opacity: 1;
  pointer-events: auto;
  transition-delay: 40ms;
}
.report-hero-ai-confirm.fan-shown:disabled {
  opacity: .45;
  cursor: not-allowed;
}
@media (prefers-reduced-motion: reduce) {
  .report-hero-ai-confirm,
  .report-hero-ai-cancel {
    transition: none !important;
    transition-delay: 0ms !important;
  }
}
.report-donut span {
  width: 74px;
}
@media (max-width: 390px) {
  .report-donut span {
    width: 73px;
  }
}
.report-shell .health-report-page {
  overscroll-behavior-y: none;
}

.report-shell .report-top-layer.health-report-page {
  overscroll-behavior-y: none;
}
.report-period-tabs {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.report-period-tabs button {
  padding: 0 2px;
}
.report-changes-more {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition:
    grid-template-rows 220ms cubic-bezier(0.22, 0.61, 0.36, 1),
    opacity 180ms ease;
}

.report-changes-more.shown {
  grid-template-rows: 1fr;
  opacity: 1;
}

.report-changes-more-inner {
  min-height: 0;
  overflow: hidden;
  display: grid;
  gap: 8px;
}

@media (prefers-reduced-motion: reduce) {
  .report-changes-more {
    transition: none;
  }
}
.report-changes-window {
  margin: 0;
  color: var(--report-muted);
  font-size: 12px;
  line-height: 1.3;
}
.report-changes-none {
  margin: 0;
  color: var(--report-muted);
  font-size: 14px;
  line-height: 1.3;
}
.report-changes-grid {
  margin: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 12px;
}
.report-changes-grid dt,
.report-changes-grid dd {
  margin: 0;
  padding: 8px 0;
  border-bottom: 1px solid var(--report-line);
}

.report-changes-grid dt:last-of-type,
.report-changes-grid dd:last-of-type {
  border-bottom: 0;
}
.report-changes-grid dt {
  color: color-mix(in srgb, var(--report-text) 78%, var(--report-muted));
  font-size: 13px;
  line-height: 1.28;
  font-weight: var(--type-weight-medium);
}

.report-changes-grid dt small,
.report-changes-delta small {
  display: block;
  margin-top: 2px;
  color: var(--report-muted);
  font-size: 11px;
  line-height: 1.2;
}
.report-changes-delta {
  text-align: right;
  white-space: nowrap;
}
.report-changes-delta strong {
  color: var(--report-text);
  font-size: 13px;
  line-height: 1.2;
  font-weight: var(--type-weight-strong);
}
.report-changes-delta.flat small {
  opacity: 0.55;
}
.report-changes-ai {
  justify-self: start;
  padding: 4px 0 0;
  border: 0;
  color: var(--report-lime-dark);
  background: transparent;
  font-size: 12px;
  font-weight: var(--type-weight-medium);
  text-align: left;
}
.report-hero-history {
  position: absolute;
  right: 69px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  color: #ffffff;
  background: rgba(255, 255, 255, .055);
  border: 1px solid rgba(255, 255, 255, .10);
  transform: translateX(0) scale(.4);
  opacity: 0;
  pointer-events: none;
  transition: transform 200ms cubic-bezier(.32, .72, 0, 1), opacity 200ms cubic-bezier(.32, .72, 0, 1);
}

.report-hero-history svg {
  width: 20px;
  height: 20px;
}

.report-hero-history.fan-shown {
  transform: translateX(-53px) scale(1);
  opacity: 1;
  pointer-events: auto;
}
.report-hero-ai-cancel.fan-shown {
  transform: translateX(-103px) scale(1);
}

.report-hero-ai-confirm.fan-shown {
  transform: translateX(-153px) scale(1);
}
:root:not([data-theme="dark"]) .report-hero-history {
  color: #0b0c0d;
  background: rgba(11, 12, 13, .06);
  border: 1px solid rgba(11, 12, 13, .10);
}
.activity-rings-row {
  display: grid;
  min-width: 0;
  align-items: center;
  gap: 14px;
  grid-template-columns: 132px minmax(0, 1fr);
}
.figma-progress-ring-card.activity-rings-card {
  border-right: 0;
}

.activity-rings {
  width: 132px;
  height: 132px;
  overflow: visible;
  transform: rotate(-90deg);
}

.activity-rings circle {
  fill: none;
  stroke-linecap: round;
}
.activity-rings .track {
  stroke: currentColor;
  opacity: .25;
}
.activity-rings .value {
  transition: stroke-dashoffset .35s ease;
}
.activity-rings .over-lap {
  filter: drop-shadow(0 0 3px rgba(0, 0, 0, .55));
}
.activity-rings .glyph {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.activity-rings .activity-ring.empty {
  color: rgba(255, 255, 255, .34);
}
.activity-ring {
  color: var(--activity-ring-color, #fff);
}

@media (prefers-reduced-motion: reduce) {
  .activity-rings .value {
    transition: none;
  }
}

.activity-readouts {
  display: grid;
  min-width: 0;
  align-content: center;
  gap: 11px;
}

.activity-readout small {
  display: block;
  margin-bottom: 3px;
  color: rgba(255, 255, 255, .52);
  font-size: 10px;
  font-weight: var(--type-weight-medium);
  letter-spacing: .06em;
  line-height: 1;
  text-transform: uppercase;
}

.activity-readout b {
  display: block;
  color: #fff;
  font-size: 20px;
  font-weight: var(--type-weight-strong);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
  line-height: 1;
}

.activity-readout i {
  margin-left: 2px;
  font-size: 11px;
  font-style: normal;
  font-weight: var(--type-weight-medium);
  opacity: .62;
}
.activity-readout b,
.activity-readout i {
  color: var(--activity-ring-color, #fff);
}
.activity-readout b.none {
  color: rgba(255, 255, 255, .38);
  font-weight: var(--type-weight-medium);
}
.activity-hr {
  display: block;
  height: 1px;
  margin: 12px 0;
  background: rgba(255, 255, 255, .12);
}
.training-page .figma-mini-stack.activity-tiles {
  grid-template-columns: 1fr 1fr;
  grid-template-rows: none;
  gap: 9px;
}

.activity-tile {
  align-content: start;
  padding: 9px 10px 10px;
}

.activity-tile small {
  display: block;
  color: rgba(255, 255, 255, .52);
  font-size: 10px;
  font-weight: var(--type-weight-medium);
  letter-spacing: .05em;
  line-height: 1;
  text-transform: uppercase;
}
.activity-tile .activity-tile-head {
  display: flex;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
}

.activity-tile .activity-tile-head small {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.activity-tile .activity-tile-head b {
  margin-top: 0;
  flex: 0 0 auto;
}

.activity-tile b {
  display: block;
  margin-top: 6px;
  color: #c6f04f;
  font-size: 17px;
  font-weight: var(--type-weight-strong);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.activity-tile b.none {
  color: rgba(255, 255, 255, .38);
  font-weight: var(--type-weight-medium);
}

.activity-tile b span {
  font-size: 11px;
  font-weight: var(--type-weight-medium);
  opacity: .7;
}
.activity-tile.activity-tile-sleep b span {
  color: rgba(255, 255, 255, .5);
  font-size: 13px;
  font-weight: var(--type-weight-medium);
  opacity: 1;
}

.activity-tile em {
  display: block;
  margin-top: 4px;
  color: rgba(255, 255, 255, .42);
  font-size: 10px;
  font-style: normal;
  font-weight: var(--type-weight-medium);
  line-height: 1.15;
}
.activity-tile.activity-tile-sleep {
  align-content: space-between;
}

.activity-tile.activity-tile-sleep b {
  margin-top: 0;
  font-size: 24px;
}
.activity-tile.activity-tile-sleep b.none {
  font-size: 24px;
}
.activity-tile .activity-week {
  display: grid;
  margin-top: 7px;
  gap: 3px;
  grid-template-columns: repeat(7, 1fr);
}

.activity-tile .activity-week i {
  display: block;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .16);
  justify-self: center;
}

.activity-tile .activity-week i.done {
  background: #c6f04f;
  box-shadow: 0 0 10px rgba(198, 240, 79, .22);
}
.activity-tile .activity-week i.rest {
  background: transparent;
  box-shadow: inset 0 0 0 1.5px rgba(93, 151, 255, .75);
}

.activity-tile .activity-week i.activity-cardio {
  background: #5d97ff;
}

.activity-tile .activity-week i.activity-football {
  background: #ff9f43;
}
.activity-tile .activity-week i.activity-cardio.activity-football {
  background: linear-gradient(90deg, #5d97ff 0 50%, #ff9f43 50% 100%);
}
.activity-tile .activity-week i.plan-half {
  box-shadow: 0 0 0 1.5px rgba(198, 240, 79, .55);
}
@media (max-width: 360px) {
  .activity-rings-row {
    gap: 10px;
    grid-template-columns: 108px minmax(0, 1fr);
  }

  .activity-rings {
    width: 108px;
    height: 108px;
  }
}
.hw-row {
  display: flex;
  flex-direction: column;
  gap: 5px;
  flex: 1 1 auto;
  min-width: 0;
}

.hw-head {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}

.hw-head strong {
  font-size: 14.5px;
  font-weight: var(--type-weight-strong);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.hw-icon {
  flex: 0 0 20px;
  opacity: 0.85;
}
.hw-linked {
  flex: 0 0 auto;
  font-size: 10.5px;
  font-style: normal;
  font-weight: var(--type-weight-medium);
  line-height: 1;
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--line) 80%, transparent);
  opacity: 0.7;
}

.hw-facts {
  font-size: 12.5px;
  opacity: 0.75;
  overflow-wrap: anywhere;
}

.hw-source {
  font-size: 11px;
  opacity: 0.5;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.hw-zones {
  display: flex;
  gap: 2px;
  height: 6px;
  margin-top: 1px;
  border-radius: 999px;
  overflow: hidden;
}

.hw-zone {
  display: block;
  min-width: 0;
  border-radius: 999px;
}
.hw-zone-1 { background: #8a94a3; }
.hw-zone-2 { background: #4a90d9; }
.hw-zone-3 { background: #43ab7a; }
.hw-zone-4 { background: #d99a2b; }
.hw-zone-5 { background: #d9534a; }
.hw-zone[data-share='0'] {
  display: none;
}
.treino-week-rings {
  display: grid;
  margin: 0 0 14px;
  gap: 0;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  touch-action: pan-y;
  user-select: none;
}

.treino-week-rings.week-rings-dragging {
  transform: translateX(var(--week-drag, 0px));
}

.treino-week-rings.week-rings-dragging .week-ring-day {
  animation: none;
}

@keyframes week-rail-in-forward {
  from { transform: translateX(34%); opacity: .3; }
  to { transform: none; opacity: 1; }
}

@keyframes week-rail-in-back {
  from { transform: translateX(-34%); opacity: .3; }
  to { transform: none; opacity: 1; }
}
.treino-week-rings[data-slide="1"] .week-ring-day {
  animation: week-rail-in-forward 260ms cubic-bezier(.22, .61, .36, 1) both;
  animation-delay: calc(var(--week-day-index, 0) * 18ms);
}

.treino-week-rings[data-slide="-1"] .week-ring-day {
  animation: week-rail-in-back 260ms cubic-bezier(.22, .61, .36, 1) both;
  animation-delay: calc(var(--week-day-index, 0) * 18ms);
}
@media (prefers-reduced-motion: reduce) {
  .treino-week-rings[data-slide] .week-ring-day {
    animation: none;
  }

  .treino-week-rings.week-rings-dragging {
    transform: none;
  }
}

.treino-week-rings .week-ring-day {
  appearance: none;
  -webkit-appearance: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.treino-week-rings .week-ring-letter {
  display: block;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  color: rgba(255, 255, 255, .5);
  font-size: 12px;
  font-weight: var(--type-weight-medium);
  line-height: 22px;
  text-align: center;
}
.treino-week-rings .week-ring-day.selected .week-ring-letter {
  background: rgba(142, 142, 147, .5);
  color: #fff;
  font-weight: var(--type-weight-strong);
}
.treino-week-rings .week-ring-day.today .week-ring-letter {
  background: #FA114F;
  color: #fff;
  font-weight: var(--type-weight-strong);
}

.treino-week-rings .week-ring-arcs {
  display: block;
  width: 34px;
  height: 34px;
  transform: rotate(-90deg);
}

.treino-week-rings .week-ring-arcs circle {
  fill: none;
  stroke-linecap: round;
}
.treino-week-rings .week-ring-arcs .track {
  stroke: var(--activity-ring-color, #fff);
  opacity: .25;
}
.treino-week-rings .week-ring-arcs .empty .track {
  stroke: rgba(255, 255, 255, .16);
  opacity: 1;
}
.treino-week-rings .week-ring-arcs.dim .empty .track {
  stroke: rgba(255, 255, 255, .08);
  opacity: 1;
}

.treino-week-rings .week-ring-arcs .value {
  stroke: var(--activity-ring-color, #fff);
  transition: stroke-dashoffset .35s ease;
}

@media (prefers-reduced-motion: reduce) {
  .treino-week-rings .week-ring-arcs .value {
    transition: none;
  }
}
@media (max-width: 360px) {
  .treino-week-rings .week-ring-arcs {
    width: 28px;
    height: 28px;
  }
}
.free-group {
  padding: 12px 2px 4px;
  font-size: 11.5px;
  font-weight: var(--type-weight-medium);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0.5;
}
.free-pick-list > .free-group:first-child {
  padding-top: 2px;
}
.free-pick-list li.free-group + li .free-pick-row {
  border-top: 0;
}

.free-why {
  font-size: 12px;
  opacity: 0.5;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.free-pick-icon.free-pick-glyph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: inherit;
  opacity: 0.45;
}
.step-goal {
  display: grid;
  align-items: center;
  gap: 10px;
  grid-template-columns: minmax(0, 1fr) 96px auto;
  margin: 4px 0 12px;
  padding: 12px 14px;
  border: 1px solid var(--ring);
  border-radius: 16px;
  background: var(--top);
}

:root[data-theme="dark"] .step-goal {
  background: var(--panel);
}

.step-goal-copy {
  display: block;
  min-width: 0;
}

.step-goal-copy b {
  display: block;
  color: var(--text);
  font-size: 14px;
  font-weight: var(--type-weight-medium);
  line-height: 1.2;
}

.step-goal-copy em {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
  font-weight: var(--type-weight-regular);
  line-height: 1.25;
}

.step-goal input {
  width: 100%;
  box-sizing: border-box;
  padding: 9px 10px;
  border: 1px solid var(--ring);
  border-radius: 12px;
  background: transparent;
  color: var(--text);
  font-size: 15px;
  font-weight: var(--type-weight-medium);
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.step-goal-ok {
  color: var(--classic-accent);
  font-size: 14px;
  font-style: normal;
  font-weight: var(--type-weight-strong);
}
.training-goal-art {
  position: relative;
  display: grid;
  min-height: 92px;
  place-items: center;
  overflow: hidden;
  border-radius: 16px;
  background:
    radial-gradient(circle at 72% 18%, rgba(255,255,255,.65), rgba(255,255,255,0) 34%),
    linear-gradient(145deg, rgba(255,255,255,.54), rgba(255,255,255,0)),
    var(--icon-bg, #eef2ff);
  color: var(--icon-color, #111);
}

.training-goal-art::before {
  position: absolute;
  inset: 13px 26px;
  border-radius: 999px;
  background: rgba(255,255,255,.34);
  content: "";
}

.training-goal-art::after {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 10px;
  height: 4px;
  border-radius: 999px;
  background:
    linear-gradient(90deg, var(--icon-color, #111) var(--p), rgba(255,255,255,.64) 0);
  opacity: .78;
  content: "";
}

.training-goal-art svg {
  position: relative;
  z-index: 2;
  width: 72px;
  height: 72px;
  filter: drop-shadow(0 9px 15px rgba(0,0,0,.11));
}

.training-goal-art.icon-squat,
.training-goal-art.icon-calf {
  --icon-bg: linear-gradient(145deg, #dff8ed, #bfe4ff);
  --icon-color: #17624a;
}

.training-goal-art.icon-push,
.training-goal-art.icon-core {
  --icon-bg: linear-gradient(145deg, #ffe2d9, #ffd0a8);
  --icon-color: #8f351d;
}

.training-goal-art.icon-curl {
  --icon-bg: linear-gradient(145deg, #fff1bf, #d8f1c7);
  --icon-color: #6f5312;
}

.training-goal-art.icon-pull {
  --icon-bg: linear-gradient(145deg, #dcf5ff, #c9d7ff);
  --icon-color: #164f7a;
}

.training-goal-art.icon-press,
.training-goal-art.icon-dumbbell {
  --icon-bg: linear-gradient(145deg, #eee7ff, #d7ecff);
  --icon-color: #43327f;
}
.training-goal-art.asset {
  min-height: 92px;
  border-radius: 22px;
  background: #222;
}

.training-goal-art.asset.clean {
  background: transparent !important;
  box-shadow: none !important;
}

.training-goal-art.asset::before,
.training-goal-art.asset::after {
  display: none;
}

.training-goal-art.asset img {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  max-height: 92px;
  object-fit: contain;
  filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .24));
}

.training-goal-art.asset.clean img {
  filter: drop-shadow(0 8px 14px rgba(0, 0, 0, .16));
}

.training-goal-art.asset.clean.photo img {
  border-radius: 14px;
  object-fit: cover;
}
.glog-screen .goal-screen-head .training-goal-art {
  box-sizing: border-box;
  width: 34px;
  min-height: 0;
  height: 34px;
  border-radius: 10px;
}

.glog-screen .goal-screen-head .training-goal-art::before,
.glog-screen .goal-screen-head .training-goal-art::after {
  display: none;
}

.glog-screen .goal-screen-head .training-goal-art img,
.glog-screen .goal-screen-head .training-goal-art svg {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.glog-meter {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 2px 2px 14px;
}

.training-goal-log-progress {
  position: relative;
  flex: 1 1 auto;
  height: 4px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--line);
}

.training-goal-log-progress i {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--p, 0%);
  border-radius: 999px;
  background: #b4dc45;
  transition: width .22s ease;
}

.glog-meter small {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 12.5px;
  font-weight: var(--type-weight-medium);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.glog-chips {
  display: flex;
  gap: 8px;
  margin: 0 -14px 14px;
  padding: 0 14px 2px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.glog-chips::-webkit-scrollbar {
  display: none;
}

.glog-chip {
  display: inline-flex;
  flex: 0 0 auto;
  gap: 6px;
  align-items: center;
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0 14px;
  background: var(--top);
  color: inherit;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: var(--type-weight-medium);
  white-space: nowrap;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.glog-chip svg {
  width: 15px;
  height: 15px;
  opacity: .65;
}

.glog-chip:active {
  border-color: color-mix(in srgb, var(--classic-accent, #c6f04f) 60%, var(--line));
}
.glog-chip.filled::after {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #b4dc45;
  content: "";
}
.glog-thead,
.training-goal-set-row {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr) 62px 62px 28px;
  gap: 8px;
  align-items: center;
}

.glog-thead {
  padding: 0 12px 6px;
  color: var(--muted);
  font-size: 9.5px;
  font-weight: var(--type-weight-medium);
  letter-spacing: .06em;
  text-transform: uppercase;
}
.glog-thead > :nth-child(1),
.glog-thead > :nth-child(3),
.glog-thead > :nth-child(4) {
  text-align: center;
}
.glog-col-toggle {
  display: inline-flex;
  gap: 4px;
  align-items: center;
  justify-self: start;
  margin: -6px 0 -6px -6px;
  border: 0;
  border-radius: 8px;
  padding: 6px;
  background: transparent;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.glog-col-toggle svg {
  width: 12px;
  height: 12px;
  opacity: .75;
}

.glog-col-toggle:active {
  background: color-mix(in srgb, var(--line) 55%, transparent);
}
.training-goal-set-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
  padding: 0;
  background: transparent;
  list-style: none;
}
.glog-sd {
  position: relative;
  overflow: hidden;
  border-radius: 14px;
  background: var(--top);
}
.glog-sd > .swipe-row {
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  min-height: 62px;
  padding: 9px 12px;
  border-radius: inherit;
  background: var(--top);
  transition: transform .36s cubic-bezier(.22, .9, .28, 1), background .16s ease;
}

.glog-sd.revealed > .swipe-row {
  transform: translateX(-62px);
}
.glog-sd.dragging > .swipe-row {
  transition: none;
}
.glog-sd > .swipe-delete {
  position: absolute;
  z-index: 0;
  top: 50%;
  right: 12px;
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 0;
  border-radius: 50%;
  padding: 0;
  background: #d73636;
  color: #fff;
  transform: translateY(-50%);
  cursor: pointer;
  opacity: 0;
  -webkit-tap-highlight-color: transparent;
}

.glog-sd > .swipe-delete svg {
  width: 18px;
  height: 18px;
}
.glog-sd.revealed > .swipe-delete {
  opacity: 1;
}
.glog-sd.sd-armed > .swipe-delete {
  background: #c22525;
}
.training-goal-set-row.completed {
  background: color-mix(in srgb, #c6f04f 12%, var(--top));
}

.training-goal-set-row.row-enter {
  animation: training-goal-row-enter .18s cubic-bezier(.2, .86, .2, 1) both;
}
.glog-num {
  display: grid;
  width: 26px;
  height: 26px;
  place-items: center;
  border-radius: 50%;
  background: var(--bg);
  color: var(--muted);
  font-size: 12.5px;
  font-weight: var(--type-weight-medium);
  font-variant-numeric: tabular-nums;
}

.glog-target {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.glog-target b {
  overflow: hidden;
  font-size: 13.5px;
  font-weight: var(--type-weight-medium);
  white-space: nowrap;
  text-overflow: ellipsis;
}

.glog-target small {
  overflow: hidden;
  color: var(--muted);
  font-size: 11px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.glog-target-empty {
  color: var(--muted);
  font-size: 12.5px;
  font-style: normal;
  opacity: .6;
}

.glog-field {
  position: relative;
  display: block;
  min-width: 0;
}
.glog-field input {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid transparent;
  border-radius: 10px;
  padding: 8px 4px;
  background: var(--bg);
  color: inherit;
  font-family: inherit;
  font-size: 15px;
  font-weight: var(--type-weight-medium);
  font-variant-numeric: tabular-nums;
  text-align: center;
  -webkit-appearance: none;
  appearance: none;
}

.glog-field input:focus {
  border-color: color-mix(in srgb, var(--classic-accent, #c6f04f) 70%, var(--line));
}
.glog-rir {
  position: absolute;
  right: -6px;
  bottom: -7px;
  display: grid;
  min-width: 19px;
  height: 19px;
  place-items: center;
  border: 1.5px solid var(--top);
  border-radius: 999px;
  padding: 0 3px;
  background: #e5484d;
  color: #fff;
  font-family: inherit;
  font-size: 10.5px;
  font-weight: var(--type-weight-strong);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.glog-rir.rir-hard {
  background: #ff453a;
  color: #fff;
}

.glog-rir.rir-work {
  background: #ff9f43;
  color: #fff;
}

.glog-rir.rir-easy {
  background: #c6f04f;
  color: #10230a;
}

.glog-rir.rir-fresh {
  background: #00d7e1;
  color: #06262a;
}
.glog-rir.empty {
  background: var(--line);
  color: var(--muted);
  opacity: .8;
}
.training-goal-set-check {
  display: grid;
  min-height: 44px;
  place-items: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.training-goal-set-check input {
  position: relative;
  box-sizing: border-box;
  width: 26px;
  height: 26px;
  margin: 0;
  border: 1.5px solid var(--line);
  border-radius: 8px;
  background: var(--bg);
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: background .16s ease, border-color .16s ease;
}

.training-goal-set-check input:checked {
  border-color: transparent;
  background: #b4dc45;
}
.training-goal-set-check input:checked::after {
  position: absolute;
  top: 4px;
  left: 8px;
  width: 6px;
  height: 11px;
  border: solid #16180f;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  content: "";
}

.glog-tools {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 12px 2px 0;
}
.glog-add {
  display: grid;
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  padding: 0;
  background: var(--top);
  color: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.glog-add svg {
  display: block;
  width: 18px;
  height: 18px;
}

.glog-scrim {
  position: fixed;
  inset: 0;
  z-index: 70;
  background: var(--scrim);
  animation: glog-fade-in 260ms ease both;
}

@keyframes glog-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.glog-sheet {
  position: fixed;
  bottom: 0;
  left: 50%;
  z-index: 71;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  width: min(440px, 100vw);
  max-height: min(80svh, calc(100svh - 56px));
  overflow: hidden;
  border-radius: 14px 14px 0 0;
  padding: 20px 14px max(14px, env(safe-area-inset-bottom));
  background: var(--bg);
  color: var(--text);
  box-shadow: var(--shadow);
  transform: translateX(-50%);
  animation: glog-sheet-up 360ms cubic-bezier(.22, .78, .18, 1) both;
}
.glog-sheet.settled {
  animation: none;
}

.glog-scrim.closing {
  animation: glog-fade-out 220ms ease both;
  pointer-events: none;
}

.glog-sheet.closing {
  animation: glog-sheet-down 280ms cubic-bezier(.32, .72, .28, 1) both;
  pointer-events: none;
}
.glog-sheet::before {
  position: absolute;
  top: 8px;
  left: 50%;
  width: 36px;
  height: 4px;
  border-radius: 999px;
  background: var(--line);
  transform: translateX(-50%);
  content: "";
}

@keyframes glog-sheet-up {
  from { transform: translate(-50%, 100%); }
  to { transform: translate(-50%, 0); }
}

@keyframes glog-fade-out {
  from { opacity: 1; }
  to { opacity: 0; }
}

@keyframes glog-sheet-down {
  from { transform: translate(-50%, 0); }
  to { transform: translate(-50%, 100%); }
}

.glog-sheet-title {
  margin: 0 0 4px;
  font-size: 17px;
  font-weight: var(--type-weight-strong);
}

.glog-sheet-hint {
  margin: 0 0 14px;
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.35;
}
.rir-grid {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(4, 1fr);
}

.rir-option {
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--top);
  color: inherit;
  font-family: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.rir-option:first-child {
  grid-column: 1 / -1;
  min-height: 44px;
}

.rir-option b {
  font-size: 17px;
  font-weight: var(--type-weight-strong);
  font-variant-numeric: tabular-nums;
}

.rir-option small {
  color: var(--muted);
  font-size: 10px;
}

.rir-option.active {
  border-color: transparent;
  background: #b4dc45;
  color: #16180f;
}

.rir-option.active small {
  color: #16180f;
  opacity: .7;
}

.note-input {
  box-sizing: border-box;
  width: 100%;
  margin: 0 0 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 12px;
  background: var(--top);
  color: inherit;
  font-family: inherit;
  font-size: 15px;
  line-height: 1.4;
  resize: none;
  -webkit-appearance: none;
  appearance: none;
}

.swap-search {
  display: flex;
  gap: 8px;
  align-items: center;
  margin: 0 0 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0 14px;
  background: var(--top);
}

.swap-search svg {
  width: 16px;
  height: 16px;
  opacity: .5;
}

.swap-search input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  padding: 11px 0;
  background: transparent;
  color: inherit;
  font-family: inherit;
  font-size: 15px;
  -webkit-appearance: none;
  appearance: none;
}

.swap-search input:focus {
  outline: none;
}

.swap-list {
  display: flex;
  flex: 0 1 auto;
  flex-direction: column;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior-y: none;
  -webkit-overflow-scrolling: touch;
}

.swap-row {
  display: flex;
  gap: 12px;
  align-items: center;
  border: 0;
  padding: 9px 2px;
  background: transparent;
  color: inherit;
  font-family: inherit;
  font-size: 14.5px;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.swap-row + .swap-row {
  border-top: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
}

.swap-row .training-goal-art {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 10px;
}

.swap-row .training-goal-art img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.swap-row span {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.swap-empty {
  padding: 18px 2px;
  color: var(--muted);
  font-size: 13.5px;
  text-align: center;
}
@media (prefers-reduced-motion: reduce) {
  .glog-sheet {
    animation: glog-fade-in 200ms ease both;
  }

  .training-goal-set-row.row-enter {
    animation: none;
  }

  .glog-sd > .swipe-row {
    transition: none;
  }
}
@keyframes training-goal-row-enter {
  0% {
    opacity: 0;
    transform: translateY(8px) scale(.985);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
:root[data-theme="dark"] .training-goal-art {
  background:
    linear-gradient(145deg, rgba(255,255,255,.08), rgba(255,255,255,0)),
    var(--icon-bg, #2d2f33);
}

:root[data-theme="dark"] .training-goal-art::before {
  background: rgba(255,255,255,.08);
}

:root[data-theme="dark"] .training-goal-art::after {
  --icon-ring-core: rgba(34,35,38,.86);
  background:
    radial-gradient(circle at center, transparent 57%, var(--icon-ring-core) 59%),
    conic-gradient(var(--icon-color, #f5f5f6) var(--p), rgba(255,255,255,.12) 0);
}

:root[data-theme="dark"] .training-goal-art.icon-squat,
:root[data-theme="dark"] .training-goal-art.icon-calf {
  --icon-bg: linear-gradient(145deg, #18382d, #1a3346);
  --icon-color: #8fd9bb;
}

:root[data-theme="dark"] .training-goal-art.icon-push,
:root[data-theme="dark"] .training-goal-art.icon-core {
  --icon-bg: linear-gradient(145deg, #4b241b, #493119);
  --icon-color: #ffb39c;
}

:root[data-theme="dark"] .training-goal-art.icon-curl {
  --icon-bg: linear-gradient(145deg, #473a18, #263b22);
  --icon-color: #f2d477;
}

:root[data-theme="dark"] .training-goal-art.icon-pull {
  --icon-bg: linear-gradient(145deg, #163747, #222f55);
  --icon-color: #92d8ff;
}

:root[data-theme="dark"] .training-goal-art.icon-press,
:root[data-theme="dark"] .training-goal-art.icon-dumbbell {
  --icon-bg: linear-gradient(145deg, #30254d, #1f3448);
  --icon-color: #c5b8ff;
}
.training-report-screen {
  position: fixed;
  inset: 0;
  z-index: 72;
  box-sizing: border-box;
  width: 100%;
  max-width: 440px;
  margin: 0 auto;
  padding: calc(env(safe-area-inset-top, 0px) + 14px) 0 calc(env(safe-area-inset-bottom, 0px) + 16px);
  overflow-y: auto;
  background: #1f1f20;
  color: #f8f8f8;
  font-family: "Satoshi", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-overflow-scrolling: touch;
  will-change: transform;
  touch-action: pan-y;
}

.training-report-screen.entering {
  animation: training-report-in-right 340ms cubic-bezier(.2, .86, .18, 1) both;
}

.training-report-screen.closing {
  animation: training-report-out-right 320ms cubic-bezier(.32, .72, .28, 1) both;
  pointer-events: none;
}

@keyframes training-report-in-right {
  from {
    opacity: 1;
    transform: translateX(100%);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes training-report-out-right {
  from {
    opacity: 1;
    transform: translateX(0);
  }
  to {
    opacity: 1;
    transform: translateX(100%);
  }
}

.training-report-screen.daily {
  --report-accent: #1f8f52;
}

.training-report-screen.gym {
  --report-accent: #ff825f;
}

.training-report-topbar {
  display: grid;
  grid-template-columns: 52px 1fr 52px;
  align-items: center;
  padding: 0 16px 18px;
}

.training-report-topbar button {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: currentColor;
}

.training-report-topbar h2 {
  margin: 0;
  font-size: 20px;
  font-weight: var(--type-weight-medium);
  line-height: 1;
  text-align: center;
}

.training-report-loading {
  margin: 16px 20px;
  border-radius: 18px;
  padding: 14px;
  background: rgba(255, 255, 255, .08);
  color: rgba(255, 255, 255, .72);
  text-align: center;
}

.training-report-body {
  display: grid;
  gap: 22px;
}

.training-report-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  padding: 0 20px;
}

.training-report-stats span {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.training-report-stats small,
.training-report-stats em {
  overflow: hidden;
  color: rgba(255, 255, 255, .52);
  font-size: 13px;
  font-style: normal;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.training-report-stats b {
  color: #fff;
  font-size: 30px;
  font-weight: var(--type-weight-regular);
  line-height: 1;
}

.training-report-month-grid {
  display: grid;
  gap: 14px;
  padding: 0 12px;
}

.training-report-days {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 14px 10px;
}

.training-report-day {
  position: relative;
  display: grid;
  aspect-ratio: 1;
  place-items: center;
  border: 2px solid rgba(255, 255, 255, .16);
  border-radius: 50%;
  background: transparent;
  color: rgba(255, 255, 255, .88);
  font: inherit;
  font-size: 18px;
}
.training-report-day.done:not(.activity-cardio):not(.activity-football):not(.muted) {
  border-color: var(--report-accent);
  background: var(--report-accent);
  color: #fff;
}

.training-report-day.selected {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--report-accent) 40%, transparent);
}

.training-report-day.muted {
  border-color: transparent;
  color: rgba(255, 255, 255, .22);
}

.training-report-day[aria-disabled="true"] {
  opacity: .42;
}

.training-report-day i {
  position: absolute;
  left: 50%;
  bottom: 5px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: currentColor;
  transform: translateX(-50%);
}

.training-report-weekdays {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  color: rgba(255, 255, 255, .56);
  font-size: 14px;
  text-align: center;
}

.training-report-controls {
  display: grid;
  grid-template-columns: 58px 58px 1fr 104px;
  gap: 8px;
  align-items: center;
}

.training-report-controls button,
.training-report-controls strong {
  display: grid;
  min-height: 44px;
  place-items: center;
  border: 0;
  border-radius: 20px;
  background: rgba(255, 255, 255, .08);
  color: #fff;
  font-size: 16px;
  font-weight: var(--type-weight-regular);
}

.training-report-legend {
  display: flex;
  justify-content: center;
  gap: 28px;
  margin: 0 20px;
  border-radius: 14px;
  padding: 16px;
  background: rgba(255, 255, 255, .06);
}

.training-report-legend span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: rgba(255, 255, 255, .82);
  font-size: 14px;
}

.training-report-legend i {
  width: 15px;
  height: 15px;
  border: 2px solid rgba(255, 255, 255, .22);
  border-radius: 50%;
}
.training-report-legend i.done {
  border-color: var(--report-accent);
  background: var(--report-accent);
}

.training-report-screen.daily .training-report-legend span:first-child {
  color: var(--report-accent);
}

.training-report-year {
  display: grid;
  gap: 14px;
  padding: 18px 20px 8px;
}

.training-report-year h3 {
  margin: 0;
  font-size: 24px;
  font-weight: var(--type-weight-medium);
}

.training-report-screen.daily .training-report-year h3 {
  color: var(--report-accent);
}

.training-report-year-grid {
  display: grid;
  grid-template-columns: repeat(31, minmax(0, 1fr));
  gap: 3px;
  border-radius: 12px;
  padding: 12px;
  background: rgba(255, 255, 255, .06);
}

.training-report-year-grid i {
  display: block;
  aspect-ratio: 1;
  border-radius: 2px;
  background: rgba(255, 255, 255, .09);
}

.training-report-year-grid i.done {
  background: var(--report-accent);
}

.training-report-year-grid i.future {
  opacity: .45;
}

:root[data-theme="light"] .training-report-screen {
  background: #f4f4f5;
  color: #121212;
}

:root[data-theme="light"] .training-report-stats small,
:root[data-theme="light"] .training-report-stats em,
:root[data-theme="light"] .training-report-weekdays,
:root[data-theme="light"] .training-report-legend span {
  color: rgba(10, 10, 10, .56);
}

:root[data-theme="light"] .training-report-stats b,
:root[data-theme="light"] .training-report-controls button,
:root[data-theme="light"] .training-report-controls strong {
  color: #121212;
}

:root[data-theme="light"] .training-report-controls button,
:root[data-theme="light"] .training-report-controls strong,
:root[data-theme="light"] .training-report-legend,
:root[data-theme="light"] .training-report-year-grid,
:root[data-theme="light"] .training-report-loading {
  background: #fff;
}

:root[data-theme="light"] .training-report-day {
  border-color: rgba(10, 10, 10, .16);
  color: rgba(10, 10, 10, .82);
}
:root[data-theme="light"] .training-report-day.muted {
  border-color: transparent;
  color: rgba(10, 10, 10, .25);
}

:root[data-theme="light"] .training-report-year-grid i {
  background: #e3e3e5;
}

:root[data-theme="light"] .training-report-year-grid i.done {
  background: var(--report-accent);
}

.goal-layer {
  position: fixed;
  inset: 0;
  z-index: 60;
  animation: goal-layer-in 320ms cubic-bezier(0.32, 0.72, 0.28, 1) both;
}

.goal-layer.closing {
  animation: goal-layer-out 280ms cubic-bezier(0.55, 0, 0.55, 0.2) both;
  pointer-events: none;
}

@keyframes goal-layer-in {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}

@keyframes goal-layer-out {
  from { transform: translateX(0); }
  to { transform: translateX(100%); }
}

.goal-screen {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding-top: max(10px, env(safe-area-inset-top));
  background: var(--bg);
  color: var(--text);
}
.goal-screen-head {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 34px;
  align-items: center;
  gap: 10px;
  padding: 8px 16px 10px;
  background: var(--top);
  border-bottom: 1px solid var(--line);
}

.goal-screen-titles {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.goal-screen-head h2 {
  margin: 0;
  font-size: 21px;
  font-weight: var(--type-weight-strong);
  line-height: 1.15;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.goal-screen-lead {
  font-size: 12.5px;
  opacity: 0.62;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.goal-back,
.goal-head-action {
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  background: color-mix(in srgb, var(--ink, #1d1d1f) 8%, transparent);
  color: inherit;
  font-family: inherit;
  font-size: 20px;
  line-height: 1;
  display: grid;
  place-items: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.goal-head-action svg {
  width: 18px;
  height: 18px;
}

.goal-screen-body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow-y: auto;
  overscroll-behavior-y: none;
  -webkit-overflow-scrolling: touch;
  padding: 14px 16px max(16px, env(safe-area-inset-bottom));
}
.goal-screen-body > * {
  flex: 0 0 auto;
}

.gform-card {
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--top);
  overflow: hidden;
}

.gform-card-title {
  margin: 4px 0 -6px 6px;
  font-size: 11.5px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  opacity: 0.5;
  font-weight: var(--type-weight-medium);
}

.gform-row {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 50px;
  padding: 7px 14px;
}

.gform-row + .gform-row,
.gform-block + .gform-row,
.gform-row + .gform-block {
  border-top: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
}

.gform-label {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 14.5px;
}

.gform-hint {
  margin: 0;
  padding: 0 14px 12px;
  font-size: 11.5px;
  opacity: 0.55;
}
.gform-row > input[type="text"],
.gform-row > input[type="number"],
.gform-row > input[type="date"],
.gform-row > select {
  border: 0;
  background: transparent;
  color: inherit;
  font-family: inherit;
  font-size: 15px;
  font-weight: var(--type-weight-medium);
  text-align: right;
  padding: 4px 0;
  max-width: 60%;
  -webkit-appearance: none;
  appearance: none;
}

.gform-row > select {
  padding-right: 14px;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: right 5px center, right 1px center;
  background-size: 4px 4px, 4px 4px;
  background-repeat: no-repeat;
  opacity: 0.92;
}
.gform-name-row {
  align-items: center;
  gap: 12px;
}

.gform-name-row input {
  flex: 1;
  min-width: 0;
  max-width: none;
  border: 0;
  background: transparent;
  color: inherit;
  font-family: inherit;
  font-size: 19px;
  font-weight: var(--type-weight-medium);
  text-align: left;
  padding: 6px 0;
}

.gform-name-row input::placeholder {
  opacity: 0.35;
}
.gform-name-row .training-goal-art {
  flex: 0 0 auto;
  width: 52px;
  height: 52px;
  min-height: 52px;
  border-radius: 14px;
}

.gform-name-row .training-goal-art img {
  max-height: 52px;
}
.gform-pick-base {
  display: block;
  width: 100%;
  margin: 8px 0 4px;
  padding: 11px 14px;
  border: 1px solid var(--stroke, rgba(0, 0, 0, 0.12));
  border-radius: 12px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: var(--type-weight-strong);
  text-align: center;
  cursor: pointer;
}

.gform-icons {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 10px 14px 12px;
}

.gform-icons::-webkit-scrollbar {
  display: none;
}

.gform-icon {
  flex: 0 0 auto;
  width: 62px;
  display: grid;
  gap: 3px;
  justify-items: center;
  border: 1px solid var(--line);
  border-radius: 15px;
  padding: 6px 3px 5px;
  background: transparent;
  color: inherit;
  font-family: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.gform-icon.active {
  border-color: var(--classic-accent, #c6f04f);
  background: color-mix(in srgb, var(--classic-accent, #c6f04f) 12%, transparent);
}

.gform-icon .training-goal-art {
  width: 40px;
  height: 40px;
  min-height: 40px;
  border-radius: 11px;
}

.gform-icon .training-goal-art img {
  max-height: 40px;
}

.gform-icon small {
  font-size: 9.5px;
  line-height: 1.1;
  opacity: 0.7;
  text-align: center;
  overflow: hidden;
  width: 100%;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.gform-days {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
  padding: 10px 14px 12px;
}

.gform-day {
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: transparent;
  color: inherit;
  font-family: inherit;
  font-size: 12px;
  font-weight: var(--type-weight-medium);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 140ms ease, color 140ms ease, border-color 140ms ease;
}

.gform-day.active {
  border-color: transparent;
  background: var(--classic-accent, #c6f04f);
  color: #16180f;
}

.gform-segment {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 3px;
  margin: 10px 14px 12px;
  padding: 3px;
  border-radius: 999px;
  background: var(--chip);
}

.gform-segment button {
  border: 0;
  border-radius: 999px;
  padding: 8px 4px;
  background: transparent;
  color: inherit;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: var(--type-weight-regular);
  cursor: pointer;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  -webkit-tap-highlight-color: transparent;
}

.gform-segment button.active {
  background: var(--top);
  font-weight: var(--type-weight-medium);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.10);
}

.gform-stepper {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 2px;
}

.gform-stepper button {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: transparent;
  color: inherit;
  font-family: inherit;
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.gform-stepper button:disabled {
  opacity: 0.35;
  cursor: default;
}
.gform-stepper input {
  width: 52px;
  border: 0;
  background: transparent;
  color: inherit;
  font-family: inherit;
  font-size: 17px;
  font-weight: var(--type-weight-medium);
  font-variant-numeric: tabular-nums;
  text-align: center;
  padding: 2px 0;
  -moz-appearance: textfield;
  appearance: textfield;
}

.gform-stepper input::-webkit-outer-spin-button,
.gform-stepper input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.gform-unit {
  flex: 0 0 auto;
  font-size: 13px;
  opacity: 0.55;
}
.gform-card > .gform-schedule {
  border-top: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
}

.gform-schedule > .gform-row + .gform-row,
.gform-schedule > .gform-block + .gform-row,
.gform-schedule > .gform-row + .gform-block {
  border-top: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
}

.gform-plan {
  display: block;
  padding: 4px 14px 12px;
}

.gform-plan-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 74px 74px;
  gap: 8px;
  align-items: end;
  padding: 8px 0;
}

.gform-plan-row + .gform-plan-row {
  border-top: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
}

.gform-plan-row b {
  font-size: 13.5px;
  font-weight: var(--type-weight-medium);
  align-self: center;
}

.gform-plan-row label {
  display: grid;
  gap: 2px;
}

.gform-plan-row label span {
  font-size: 10.5px;
  opacity: 0.55;
  text-align: center;
}

.gform-plan-row input {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: transparent;
  color: inherit;
  font-family: inherit;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  text-align: center;
  padding: 7px 4px;
  -moz-appearance: textfield;
  appearance: textfield;
}

.gform-plan-row input::-webkit-outer-spin-button,
.gform-plan-row input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.goal-shelf {
  position: sticky;
  bottom: 0;
  z-index: 2;
  margin-top: auto;
  padding: 12px 0 max(6px, env(safe-area-inset-bottom));
  background: var(--bg);
}
.goal-shelf::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -20px;
  height: 20px;
  background: linear-gradient(to top, var(--bg), transparent);
  pointer-events: none;
}

.goal-save {
  display: block;
  width: 100%;
  border: 0;
  border-radius: 16px;
  padding: 15px 18px;
  background: var(--classic-accent, #c6f04f);
  color: #16180f;
  font-family: inherit;
  font-size: 15.5px;
  font-weight: var(--type-weight-strong);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.goal-save:disabled {
  opacity: 0.55;
  cursor: default;
}

.goal-danger {
  align-self: center;
  margin: 2px 0 6px;
  border: 0;
  background: none;
  color: #d64545;
  font-family: inherit;
  font-size: 13.5px;
  cursor: pointer;
  padding: 6px 10px;
}

.goal-screen-error {
  margin: 0;
  padding: 0 2px;
  font-size: 12.5px;
  color: #d64545;
}
.gpers-search {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--top);
  padding: 0 12px;
}

.gpers-search:focus-within {
  border-color: color-mix(in srgb, var(--classic-accent, #c6f04f) 70%, var(--line));
}

.gpers-search > span {
  display: grid;
  place-items: center;
  opacity: 0.45;
}

.gpers-search > span svg {
  width: 17px;
  height: 17px;
}

.gpers-search input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font-family: inherit;
  font-size: 15px;
  padding: 13px 0;
  -webkit-appearance: none;
  appearance: none;
}

.gpers-group-title {
  margin: 2px 0 -6px 6px;
  font-size: 11.5px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  opacity: 0.5;
  font-weight: var(--type-weight-medium);
}

.gpers-list {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--top);
  overflow: hidden;
}

.gpers-row {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  padding: 9px 12px;
  background: transparent;
}

.gpers-row + .gpers-row {
  border-top: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
}

.gpers-row .training-goal-art {
  width: 46px;
  height: 46px;
  min-height: 46px;
  border-radius: 12px;
}

.gpers-row .training-goal-art img {
  max-height: 46px;
}

.gpers-row-copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font-family: inherit;
  text-align: left;
  padding: 0;
  cursor: pointer;
}

.gpers-row-copy b {
  font-size: 14.5px;
  font-weight: var(--type-weight-medium);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.gpers-row-copy em {
  font-style: normal;
  font-size: 12px;
  opacity: 0.6;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.gpers-row-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.gpers-row-actions button {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: transparent;
  color: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.gpers-row-actions button svg {
  width: 17px;
  height: 17px;
}

.gpers-row-actions button.catalog-toggle.active {
  border-color: transparent;
  background: var(--classic-accent, #c6f04f);
  color: #16180f;
}

.gpers-empty {
  margin: 0;
  padding: 22px 16px;
  text-align: center;
  font-size: 13.5px;
  opacity: 0.6;
}
.gpers-add {
  align-self: flex-start;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--top);
  color: inherit;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: var(--type-weight-medium);
  padding: 9px 16px;
  cursor: pointer;
}
@media (prefers-reduced-motion: reduce) {
  .goal-layer {
    animation: goal-layer-fade-in 200ms ease-out both;
  }

  .goal-layer.closing {
    animation: goal-layer-fade-out 180ms ease-in both;
  }

  @keyframes goal-layer-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
  }

  @keyframes goal-layer-fade-out {
    from { opacity: 1; }
    to { opacity: 0; }
  }

  .gform-day {
    transition: none;
  }
}
.week-plan-screen {
  position: fixed;
  inset: 0;
  z-index: 118;
  background: var(--panel, #141516);
  animation: week-plan-in 320ms cubic-bezier(.32, .72, .28, 1) both;
}

.week-plan-screen.closing {
  animation: week-plan-out 280ms cubic-bezier(.55, 0, .55, .2) both;
  pointer-events: none;
}

@keyframes week-plan-in {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(0);
  }
}

@keyframes week-plan-out {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(100%);
  }
}
@media (prefers-reduced-motion: reduce) {
  .week-plan-screen {
    animation: week-plan-fade-in 200ms ease-out both;
  }

  .week-plan-screen.closing {
    animation: week-plan-fade-out 180ms ease-in both;
  }
}

@keyframes week-plan-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes week-plan-fade-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
.week-plan-sheet {
  display: flex;
  height: 100%;
  flex-direction: column;
  overflow: hidden;
  padding: 0 14px;
  border-radius: 0;
  background: var(--panel, #141516);
  color: var(--ink, #f4f4f5);
}

.week-plan-head {
  position: sticky;
  top: 0;
  z-index: 1;
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: 34px 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 14px 0 12px;
  padding-top: max(14px, env(safe-area-inset-top, 0px));
  background: var(--panel, #141516);
  box-shadow: 0 6px 12px -8px rgba(0, 0, 0, .45);
}

.week-plan-head h2 {
  margin: 0;
  font-size: 17px;
  font-weight: var(--type-weight-strong);
  text-align: center;
}

.week-plan-close,
.week-plan-nav button {
  min-width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  background: color-mix(in srgb, var(--ink, #f4f4f5) 8%, transparent);
  color: inherit;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}

.week-plan-nav {
  display: flex;
  gap: 6px;
}

.week-plan-hint,
.week-plan-state,
.week-plan-week {
  flex: 0 0 auto;
  margin: 0 0 10px;
  color: var(--muted, #9a9a9f);
  font-size: 12px;
  text-align: center;
}

.week-plan-error {
  color: #e0705f;
}

.week-plan-days {
  display: grid;
  flex: 1 1 auto;
  gap: 10px;
  overflow-y: auto;
  padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  overscroll-behavior-y: none;
  -webkit-overflow-scrolling: touch;
}

.week-plan-day {
  padding: 12px;
  border-radius: 18px;
  background: color-mix(in srgb, var(--ink, #f4f4f5) 5%, transparent);
}
.week-plan-day-today {
  box-shadow: inset 0 0 0 1.5px var(--classic-accent, #C6F04F);
}

.week-plan-day-past {
  opacity: .72;
}
.week-plan-day-rest {
  box-shadow: inset 2.5px 0 0 0 color-mix(in srgb, var(--ink, #f4f4f5) 26%, transparent);
  opacity: .66;
}

.week-plan-day-head {
  display: grid;
  grid-template-columns: auto auto 1fr auto;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.week-plan-day-tags {
  display: flex;
  gap: 6px;
  min-width: 0;
}

.week-plan-day-head b {
  font-size: 12px;
  letter-spacing: .04em;
}

.week-plan-day-head span {
  color: var(--muted, #9a9a9f);
  font-size: 12px;
}
.week-plan-today,
.week-plan-rest {
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-style: normal;
  font-weight: var(--type-weight-strong);
}

.week-plan-today {
  background: var(--classic-accent, #C6F04F);
  color: #14170d;
}

.week-plan-rest {
  background: color-mix(in srgb, var(--ink, #f4f4f5) 12%, transparent);
  color: var(--muted, #9a9a9f);
}

.week-plan-empty {
  margin: 0;
  color: var(--muted, #9a9a9f);
  font-size: 13px;
}

.week-plan-list {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.week-plan-goal {
  display: grid;
  grid-template-columns: 34px 1fr 28px 28px;
  align-items: center;
  gap: 8px;
}

.week-plan-activity,
.week-plan-remove {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 12px;
  background: color-mix(in srgb, var(--ink, #f4f4f5) 8%, transparent);
  color: inherit;
  cursor: pointer;
}

.week-plan-activity svg {
  width: 20px;
  height: 20px;
}

.week-plan-remove,
.week-plan-delete {
  width: 28px;
  height: 28px;
  font-size: 16px;
  line-height: 1;
}
.week-plan-delete {
  color: #e0705f;
}

.week-plan-delete svg {
  width: 15px;
  height: 15px;
}

.week-plan-activity:disabled,
.week-plan-remove:disabled {
  opacity: .5;
}

.week-plan-goal-body {
  display: grid;
  gap: 2px;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.week-plan-goal-body b {
  font-size: 14px;
  font-weight: var(--type-weight-medium);
}

.week-plan-goal-body small {
  color: var(--muted, #9a9a9f);
  font-size: 12px;
}
.week-plan-day-actions {
  display: flex;
  gap: 6px;
  margin-left: auto;
}
.week-plan-rest-toggle,
.week-plan-day-add {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 9px;
  background: color-mix(in srgb, var(--ink, #f4f4f5) 8%, transparent);
  color: inherit;
  font-size: 13px;
  font-weight: var(--type-weight-strong);
  line-height: 1;
  cursor: pointer;
}

.week-plan-rest-toggle svg {
  width: 15px;
  height: 15px;
}
.week-plan-rest-toggle.active {
  background: color-mix(in srgb, var(--classic-accent, #C6F04F) 22%, transparent);
  color: var(--classic-accent, #C6F04F);
}
.week-plan-title {
  display: grid;
  justify-items: center;
  gap: 1px;
  min-width: 0;
}

.week-plan-title small {
  color: var(--muted, #9a9a9f);
  font-size: 11px;
  font-weight: var(--type-weight-regular);
  letter-spacing: .01em;
  white-space: nowrap;
}

.week-plan-course-list {
  margin-bottom: 6px;
}

.week-plan-course-mark {
  display: grid;
  width: 34px;
  height: 34px;
  align-content: center;
  justify-items: start;
  gap: 4px;
  padding-left: 8px;
  box-sizing: border-box;
  border-radius: 12px;
  background: #101112;
}

.week-plan-course-mark i {
  display: block;
  height: 3px;
  border-radius: 999px;
  background: var(--classic-accent, #c6f04f);
}

.week-plan-course-mark i:nth-child(1) { width: 17px; }
.week-plan-course-mark i:nth-child(2) { width: 13px; opacity: .7; }
.week-plan-course-mark i:nth-child(3) { width: 9px; opacity: .42; }

.week-plan-course-body {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.week-plan-course-body > b {
  font-size: 14px;
  font-weight: var(--type-weight-medium);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.week-plan-course-target {
  display: flex;
  align-items: center;
  gap: 4px;
}

.week-plan-course-target button {
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: transparent;
  color: inherit;
  font-family: inherit;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
}

.week-plan-course-target button:disabled {
  opacity: .35;
  cursor: default;
}

.week-plan-course-target > b {
  min-width: 16px;
  text-align: center;
  font-size: 13px;
  font-weight: var(--type-weight-medium);
  font-variant-numeric: tabular-nums;
}

.week-plan-course-target small {
  color: var(--muted, #9a9a9f);
  font-size: 11px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.week-plan-pick {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  align-items: flex-end;
}

.week-plan-pick-scrim {
  position: absolute;
  inset: 0;
  background: var(--scrim);
}

.week-plan-pick-card {
  position: relative;
  box-sizing: border-box;
  display: flex;
  width: 100%;
  max-height: 70%;
  overflow-y: auto;
  overscroll-behavior-y: none;
  flex-direction: column;
  gap: 8px;
  border-radius: 20px 20px 0 0;
  padding: 18px 16px max(16px, env(safe-area-inset-bottom));
  background: var(--top);
  color: var(--text);
  animation: week-plan-pick-in 260ms cubic-bezier(.32, .72, .28, 1) both;
}

@keyframes week-plan-pick-in {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}

.week-plan-pick-card h3 {
  margin: 0 0 4px;
  font-size: 17px;
  font-weight: var(--type-weight-strong);
}

.week-plan-pick-card button {
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px 16px;
  background: transparent;
  color: inherit;
  font-family: inherit;
  font-size: 14.5px;
  font-weight: var(--type-weight-medium);
  text-align: left;
  cursor: pointer;
}

.week-plan-pick-card button:disabled {
  opacity: .5;
  cursor: default;
}

.week-plan-pick-cancel {
  border-color: transparent !important;
  opacity: .6;
  text-align: center !important;
}

.week-plan-pick-empty {
  margin: 0;
  padding: 10px 2px;
  font-size: 13px;
  opacity: .65;
}

@media (prefers-reduced-motion: reduce) {
  .week-plan-pick-card {
    animation: none;
  }
}
.lesson-scrim {
  position: fixed;
  inset: 0;
  z-index: 61;
  background: var(--scrim);
  animation: lesson-fade-in 260ms ease both;
}
.lesson-scrim.settled {
  animation: none;
  opacity: 1;
}

.lesson-scrim.closing {
  animation: lesson-fade-out 240ms ease both;
  pointer-events: none;
}

@keyframes lesson-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes lesson-fade-out {
  from { opacity: 1; }
  to { opacity: 0; }
}

.lesson-sheet {
  position: fixed;
  touch-action: pan-y;
  left: 50%;
  bottom: 0;
  z-index: 62;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  --top: #000;
  --bg: #000;
  --text: #fff;
  --muted: #a1a1a6;
  --chip: #1c1c1e;
  --line: #2c2c2e;
  top: 0;
  width: min(440px, 100vw);
  height: 100svh;
  max-height: none;
  overflow: hidden;
  border-radius: 0;
  padding: 0;
  background: #000;
  color: #fff;
  box-shadow: var(--shadow);
  transform: translateX(-50%);
  animation: lesson-sheet-up 360ms cubic-bezier(.22, .78, .18, 1) both;
}
.lesson-sheet.settled {
  animation: none;
  transform: translateX(-50%);
}

.lesson-sheet.closing {
  animation: lesson-sheet-down 260ms cubic-bezier(.32, .72, .28, 1) both;
  pointer-events: none;
}
.lesson-sheet::before {
  content: none;
}

@keyframes lesson-sheet-up {
  from { transform: translate(-50%, 100%); }
  to { transform: translate(-50%, 0); }
}

@keyframes lesson-sheet-down {
  from { transform: translate(-50%, 0); }
  to { transform: translate(-50%, 100%); }
}
.lesson-close,
.lesson-edit {
  position: absolute;
  top: max(12px, env(safe-area-inset-top));
  z-index: 2;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  padding: 0;
  margin: 0;
  background: rgba(60, 60, 64, 0.72);
  color: #fff;
  font-size: 19px;
  line-height: 1;
  opacity: 1;
  text-decoration: none;
  cursor: pointer;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.lesson-close {
  left: 12px;
}

.lesson-edit {
  right: 12px;
}

.lesson-sheet-body {
  flex: 1 1 auto;
  padding: 0 16px calc(var(--nav-h, 88px) + max(12px, env(safe-area-inset-bottom)));
  overflow-y: auto;
  overscroll-behavior-y: none;
  -webkit-overflow-scrolling: touch;
}
.lesson-hero {
  position: relative;
  aspect-ratio: auto;
  width: calc(100% + 32px);
  aspect-ratio: 1.3 / 1;
  height: auto;
  min-height: 240px;
  max-height: 46svh;
  margin: 0 -16px 0;
  border-radius: 0;
  overflow: hidden;
  background: #1c1c1e;
}

.lesson-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.92) 100%);
}
.lesson-hero img,
.lesson-hero video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.lesson-hero-ph {
  font-size: 44px;
}

.lesson-title {
  position: relative;
  z-index: 1;
  margin: -68px 0 8px;
  font-size: 30px;
  font-weight: var(--type-weight-strong);
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: #fff;
}

.lesson-course {
  margin: 0 0 2px;
  font-size: 17px;
  font-weight: var(--type-weight-strong);
  color: var(--classic-accent, #c6f04f);
}

.lesson-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  margin: 0 0 6px;
  font-size: 15px;
  color: #a1a1a6;
}

.lesson-passes {
  margin: 0 0 10px;
  font-size: 12px;
  opacity: 0.7;
  font-variant-numeric: tabular-nums;
}
.lesson-desc {
  margin: 0 0 14px;
  font-size: 15px;
  line-height: 1.45;
  color: #a1a1a6;
  white-space: pre-line;
}

.lesson-desc-empty {
  opacity: 0.55;
}
.lesson-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 14px 0 18px;
}

.lesson-start,
.lesson-done,
.lesson-save,
.lesson-cancel {
  flex: 1 1 0;
  min-height: 52px;
  border-radius: 26px;
  border: 1px solid transparent;
  background: #1c1c1e;
  color: #fff;
  font-family: inherit;
  font-size: 14.5px;
  font-weight: var(--type-weight-strong);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.lesson-start {
  min-height: 56px;
  border-radius: 28px;
  border-color: transparent;
  background: var(--classic-accent, #c6f04f);
  color: #16180f;
  font-size: 17px;
}
.lesson-start.running {
  background: transparent;
  color: inherit;
  border-color: var(--classic-accent, #c6f04f);
}

.lesson-save {
  border-color: transparent;
  background: var(--classic-accent, #c6f04f);
  color: #16180f;
}

.lesson-done:disabled,
.lesson-save:disabled,
.lesson-photo-pick:disabled,
.lesson-photo-drop:disabled {
  opacity: 0.55;
  cursor: default;
}

.lesson-error {
  margin: 10px 0 0;
  padding: 8px 12px;
  border-radius: 10px;
  background: color-mix(in srgb, #d64545 12%, transparent);
  color: inherit;
  font-size: 12.5px;
  line-height: 1.3;
}

.lesson-form {
  display: flex;
  flex-direction: column;
}

.lesson-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 12px;
  min-width: 0;
  flex: 1 1 0;
}

.lesson-field > span,
.lesson-field-title {
  font-size: 12px;
  opacity: 0.7;
}

.lesson-field-title {
  margin: 0 0 6px;
}

.lesson-field input,
.lesson-select {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: transparent;
  color: inherit;
  font-family: inherit;
  font-size: 14px;
  padding: 8px 10px;
  min-width: 0;
}

.lesson-field-row {
  display: flex;
  gap: 8px;
}
.lesson-segment {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 3px;
  margin: 0 0 12px;
  padding: 3px;
  border-radius: 999px;
  background: var(--chip);
}

.lesson-segment button {
  border: 0;
  border-radius: 999px;
  padding: 8px 4px;
  background: transparent;
  color: inherit;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: var(--type-weight-regular);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.lesson-segment button.active {
  background: var(--top);
  font-weight: var(--type-weight-medium);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.10);
}
.lesson-textarea {
  width: 100%;
  box-sizing: border-box;
  min-height: 108px;
  resize: none;
  border: 0;
  outline: 0;
  border-radius: 9px;
  padding: 16px;
  color: var(--text);
  background: color-mix(in srgb, var(--chip) 80%, var(--top));
  font: inherit;
  font-size: 14.5px;
  line-height: 1.25;
}

.lesson-photo-actions {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
}
.lesson-photo-input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.lesson-photo-pick,
.lesson-photo-drop {
  flex: 1 1 0;
  min-height: 40px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: transparent;
  color: inherit;
  font-family: inherit;
  font-size: 13px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.lesson-photo-drop {
  color: #d64545;
}
@media (prefers-reduced-motion: reduce) {
  .lesson-sheet {
    animation: lesson-fade-in 200ms ease-out both;
  }

  .lesson-sheet.closing {
    animation: lesson-fade-out 180ms ease-in both;
  }
}
.free-start {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 13px 16px;
  background: var(--top);
  color: inherit;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.free-start-copy,
.free-chip-copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}

.free-start-copy strong,
.free-chip-copy strong {
  font-size: 15px;
  font-weight: var(--type-weight-strong);
}

.free-start-copy span,
.free-chip-copy span {
  font-size: 12.5px;
  opacity: 0.7;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.free-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  border: 0;
  border-radius: 16px;
  padding: 12px 14px;
  background: #101112;
  color: #f7f7f7;
  text-align: left;
  cursor: pointer;
}

.free-chip-dot {
  flex: 0 0 10px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--classic-accent, #c6f04f);
  animation: free-pulse 1.6s ease-in-out infinite;
}

@keyframes free-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.35); opacity: 0.55; }
}

.free-chip-clock {
  flex: 0 0 auto;
  font-size: 13px;
  font-weight: var(--type-weight-strong);
  font-variant-numeric: tabular-nums;
}
.free-stale {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  border: 1px solid color-mix(in srgb, var(--warn, #d99b28) 45%, transparent);
  background: color-mix(in srgb, var(--warn, #d99b28) 10%, transparent);
  border-radius: 14px;
  padding: 10px 12px;
}

.free-stale-copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1 1 180px;
  min-width: 0;
}

.free-stale-copy strong {
  font-size: 13.5px;
  font-weight: var(--type-weight-strong);
}

.free-stale-copy span {
  font-size: 12px;
  opacity: 0.78;
}

.free-stale-actions {
  display: flex;
  gap: 8px;
}

.free-stale-save,
.free-stale-drop {
  border-radius: 10px;
  font-size: 13px;
  font-weight: var(--type-weight-strong);
  padding: 8px 14px;
  border: 1px solid var(--line);
  background: transparent;
  color: inherit;
}

.free-stale-save {
  border-color: transparent;
  background: var(--accent, #b7f000);
  color: #0d0f0c;
}

.free-stale-save[disabled] {
  opacity: 0.55;
}

.free-layer {
  position: fixed;
  inset: 0;
  z-index: 61;
  animation: free-in 320ms cubic-bezier(0.32, 0.72, 0.28, 1) both;
}

.free-layer.closing {
  animation: free-out 280ms cubic-bezier(0.55, 0, 0.55, 0.2) both;
  pointer-events: none;
}

@keyframes free-in {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}

@keyframes free-out {
  from { transform: translateX(0); }
  to { transform: translateX(100%); }
}

.free-screen {
  --free-paused: #f5c451;
  --free-finish-red: #c2352c;
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding-top: max(10px, env(safe-area-inset-top));
  background: #0a0b0d;
  color: #f7f7f7;
}
.free-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 14px 2px;
}

.free-head-gap {
  flex: 1;
}

.free-kind {
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--classic-accent, #c6f04f) 16%, transparent);
  color: var(--classic-accent, #c6f04f);
}
.free-round {
  flex: 0 0 52px;
  width: 52px;
  height: 52px;
  border: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(247, 247, 247, 0.14);
  color: #f7f7f7;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.free-round.big {
  flex: 0 0 56px;
  width: 56px;
  height: 56px;
}
.free-round.small {
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  background: rgba(247, 247, 247, 0.1);
}
.free-round.resume {
  background: var(--free-paused, #f5c451);
  color: #241b06;
}

.free-body {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior-y: none;
  -webkit-overflow-scrolling: touch;
  padding: 4px 14px calc(104px + max(14px, env(safe-area-inset-bottom)));
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.free-metrics {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 2px 2px 8px;
}

.free-metric-value {
  display: block;
  font-size: 28px;
  line-height: 1.04;
  font-weight: var(--type-weight-medium);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

.free-metric.lead .free-metric-value {
  font-size: 58px;
  letter-spacing: -0.02em;
}

.free-metric-label {
  display: block;
  margin-top: 2px;
  font-size: 12.5px;
  letter-spacing: 0.01em;
  color: rgba(247, 247, 247, 0.52);
}

.free-empty {
  display: flex;
  flex-direction: column;
  gap: 4px;
  border-radius: 18px;
  border: 1px dashed rgba(247, 247, 247, 0.22);
  padding: 18px 16px;
}

.free-empty strong {
  font-size: 15px;
  font-weight: var(--type-weight-strong);
}

.free-empty span {
  font-size: 13px;
  opacity: 0.7;
}

.free-exercise {
  border-radius: 18px;
  background: rgba(247, 247, 247, 0.06);
  padding: 10px 10px 8px;
}

.free-exercise-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 2px 4px 6px;
}

.free-exercise-head strong {
  flex: 1;
  min-width: 0;
  font-size: 15px;
  font-weight: var(--type-weight-strong);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.free-exercise-mode {
  flex: 0 0 auto;
  border: 1px solid rgba(247, 247, 247, 0.26);
  background: transparent;
  color: inherit;
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 11.5px;
  cursor: pointer;
}

.free-exercise-mode[aria-pressed='true'] {
  border-color: transparent;
  background: var(--classic-accent, #c6f04f);
  color: #16180f;
  font-weight: var(--type-weight-strong);
}

.free-exercise-remove {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: rgba(247, 247, 247, 0.5);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}
.free-exercise-hint {
  display: inline-block;
  margin: 0 4px 8px;
  border: 1px dashed rgba(247, 247, 247, 0.28);
  background: transparent;
  color: rgba(247, 247, 247, 0.62);
  border-radius: 999px;
  padding: 4px 11px;
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}

.free-sets {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.free-set {
  display: flex;
  align-items: center;
  gap: 6px;
}
.free-set-rir {
  flex: 0 0 auto;
  display: grid;
  min-width: 22px;
  height: 22px;
  place-items: center;
  border: 0;
  border-radius: 999px;
  padding: 0 4px;
  background: var(--line);
  color: var(--text);
  font-family: inherit;
  font-size: 11px;
  font-weight: var(--type-weight-strong);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.free-set-rir.empty {
  color: var(--muted);
  opacity: .75;
}
.free-set-rir.rir-hard {
  background: #ff453a;
  color: #fff;
}

.free-set-rir.rir-work {
  background: #ff9f43;
  color: #fff;
}

.free-set-rir.rir-easy {
  background: #c6f04f;
  color: #10230a;
}

.free-set-rir.rir-fresh {
  background: #00d7e1;
  color: #06262a;
}

.free-set-index {
  flex: 0 0 16px;
  font-size: 12px;
  opacity: 0.45;
  font-variant-numeric: tabular-nums;
  text-align: center;
}
.free-field {
  display: flex;
  align-items: center;
  gap: 2px;
  flex: 1 1 0;
  min-width: 0;
  border-radius: 12px;
  background: rgba(247, 247, 247, 0.08);
  padding: 2px;
}

.free-field-step {
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 9px;
  background: rgba(247, 247, 247, 0.1);
  color: inherit;
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
}

.free-field-input {
  flex: 1 1 0;
  min-width: 0;
  width: 100%;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: center;
  font-size: 15px;
  font-weight: var(--type-weight-strong);
  font-variant-numeric: tabular-nums;
  padding: 0;
}

.free-field-unit {
  flex: 0 0 auto;
  font-style: normal;
  font-size: 11px;
  opacity: 0.5;
  padding-right: 2px;
}

.free-set-drop {
  flex: 0 0 auto;
  width: 24px;
  border: 0;
  background: transparent;
  color: rgba(247, 247, 247, 0.32);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}
.free-set-done {
  flex: 0 0 auto;
  width: 48px;
  height: 46px;
  border-radius: 14px;
  border: 1px solid rgba(247, 247, 247, 0.24);
  background: transparent;
  color: rgba(247, 247, 247, 0.55);
  display: grid;
  place-items: center;
  cursor: pointer;
}

.free-set.done .free-set-done {
  border-color: transparent;
  background: var(--classic-accent, #c6f04f);
  color: #16180f;
}
.free-set.done .free-field {
  opacity: 0.5;
}

.free-add-set {
  margin: 8px 0 0 20px;
  border: 0;
  background: none;
  color: rgba(247, 247, 247, 0.55);
  font-size: 12.5px;
  font-weight: var(--type-weight-medium);
  padding: 4px 0;
  cursor: pointer;
}
.free-add-exercise {
  border: 1px solid rgba(247, 247, 247, 0.22);
  background: rgba(247, 247, 247, 0.06);
  color: inherit;
  border-radius: 18px;
  min-height: 54px;
  padding: 10px 16px;
  font-size: 15px;
  font-weight: var(--type-weight-medium);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.free-error {
  margin: 4px 0 0;
  font-size: 13px;
  color: #ff8a80;
}

.free-rest {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 4px 0 2px;
  border-radius: 16px;
  background: color-mix(in srgb, var(--classic-accent, #c6f04f) 12%, transparent);
  padding: 8px 10px 8px 8px;
  animation: free-rest-in 200ms ease-out both;
}

@keyframes free-rest-in {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}
.free-rest-ring {
  position: relative;
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
}

.free-rest-ring svg {
  position: absolute;
  inset: 0;
  transform: rotate(-90deg);
}

.free-rest-ring-track,
.free-rest-ring-live {
  fill: none;
  stroke-width: 3;
}

.free-rest-ring-track {
  stroke: rgba(247, 247, 247, 0.16);
}

.free-rest-ring-live {
  stroke: var(--classic-accent, #c6f04f);
  stroke-linecap: round;
  transition: stroke-dashoffset 480ms linear;
}

.free-rest-clock {
  position: relative;
  font-style: normal;
  font-size: 12.5px;
  font-weight: var(--type-weight-medium);
  font-variant-numeric: tabular-nums;
  color: var(--classic-accent, #c6f04f);
}

.free-rest-copy {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  min-width: 0;
}

.free-rest-copy strong {
  font-size: 13px;
  font-weight: var(--type-weight-medium);
  font-variant-numeric: tabular-nums;
}

.free-rest-nudge {
  display: flex;
  gap: 6px;
}

.free-rest-step {
  border: 1px solid rgba(247, 247, 247, 0.22);
  background: transparent;
  color: rgba(247, 247, 247, 0.8);
  border-radius: 999px;
  min-height: 30px;
  padding: 4px 10px;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}

.free-rest-skip {
  flex: 0 0 auto;
  border: 0;
  background: rgba(247, 247, 247, 0.14);
  color: inherit;
  border-radius: 999px;
  min-height: 44px;
  padding: 6px 14px;
  font-size: 13px;
  font-weight: var(--type-weight-medium);
  cursor: pointer;
}
.free-capsule {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: max(14px, calc(env(safe-area-inset-bottom) + 6px));
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px;
  border-radius: 999px;
  border: 1px solid rgba(247, 247, 247, 0.1);
  background: rgba(28, 30, 33, 0.82);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  touch-action: pan-x;
}

.free-capsule-clock {
  flex: 1;
  text-align: center;
  font-size: 30px;
  line-height: 1;
  font-weight: var(--type-weight-medium);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.free-capsule-clock.paused,
.free-sheet-clock.paused {
  color: var(--free-paused, #f5c451);
}

.free-paused-flag {
  margin-left: 6px;
  font-style: normal;
  font-weight: var(--type-weight-medium);
  color: var(--free-paused, #f5c451);
}

.free-sheet {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: rgba(0, 0, 0, 0.45);
  animation: free-fade 180ms ease-out both;
}

@keyframes free-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

.free-sheet-card {
  width: min(560px, 100%);
  max-height: 86vh;
  display: flex;
  flex-direction: column;
  gap: 10px;
  border-radius: 20px 20px 0 0;
  background: var(--top);
  color: var(--text);
  padding: 14px 16px max(16px, env(safe-area-inset-bottom));
  animation: free-rise 240ms cubic-bezier(0.32, 0.72, 0.28, 1) both;
}
.free-sheet-card.settled {
  animation: none;
}

@keyframes free-rise {
  from { transform: translateY(14%); }
  to { transform: translateY(0); }
}

.free-sheet-head {
  display: flex;
  align-items: center;
  gap: 10px;
}

.free-sheet-head h3 {
  margin: 0;
  flex: 1;
  font-size: 17px;
  font-weight: var(--type-weight-strong);
}

.free-sheet-close {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 50%;
  background: var(--chip);
  color: inherit;
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
}

.free-sheet-body {
  margin: 0;
  font-size: 13.5px;
  opacity: 0.78;
}

.free-tabs {
  display: flex;
  gap: 6px;
}

.free-tab {
  flex: 1;
  border: 1px solid var(--line);
  background: transparent;
  color: inherit;
  border-radius: 999px;
  padding: 7px 10px;
  font-size: 13px;
  cursor: pointer;
}

.free-tab[aria-selected='true'] {
  border-color: transparent;
  background: var(--classic-accent, #c6f04f);
  color: #16180f;
  font-weight: var(--type-weight-strong);
}

.free-search,
.free-health-select {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: transparent;
  color: inherit;
  font-size: 14px;
  padding: 9px 11px;
  width: 100%;
}

.free-facets {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  padding-bottom: 2px;
}

.free-facet {
  flex: 0 0 auto;
  border: 1px solid var(--line);
  background: transparent;
  color: inherit;
  border-radius: 999px;
  padding: 5px 11px;
  font-size: 12px;
  white-space: nowrap;
  cursor: pointer;
}

.free-facet[aria-pressed='true'] {
  border-color: transparent;
  background: var(--chip);
  font-weight: var(--type-weight-strong);
}

.free-pick-list {
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 1;
  overflow-y: auto;
  overscroll-behavior-y: none;
  -webkit-overflow-scrolling: touch;
  min-height: 120px;
}

.free-pick-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  padding: 9px 2px;
  cursor: pointer;
}

.free-pick-list li + li .free-pick-row {
  border-top: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
}

.free-pick-icon {
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  object-fit: cover;
  background: var(--chip);
}

.free-pick-copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}

.free-pick-copy strong {
  font-size: 14px;
  font-weight: var(--type-weight-strong);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.free-pick-copy span {
  font-size: 12px;
  opacity: 0.68;
  font-variant-numeric: tabular-nums;
}

.free-pick-empty {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 14px 2px;
}

.free-pick-empty strong {
  font-size: 14.5px;
  font-weight: var(--type-weight-strong);
}

.free-pick-empty span {
  font-size: 12.5px;
  opacity: 0.7;
}

.free-pick-note {
  font-size: 12.5px;
  opacity: 0.6;
  padding: 12px 2px;
}

.free-create {
  border: 0;
  border-radius: 999px;
  padding: 11px 18px;
  background: var(--classic-accent, #c6f04f);
  color: #16180f;
  font-size: 14px;
  font-weight: var(--type-weight-strong);
  cursor: pointer;
}

.free-finish-summary {
  margin: 0;
  font-size: 13.5px;
  opacity: 0.75;
  font-variant-numeric: tabular-nums;
}

.free-finish-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.free-finish-field > span {
  font-size: 12px;
  opacity: 0.7;
}

.free-sheet-actions {
  display: flex;
  gap: 8px;
  margin-top: 4px;
}

.free-sheet-actions.column {
  flex-direction: column;
}

.free-sheet-save {
  flex: 1;
  border: 0;
  border-radius: 999px;
  padding: 11px 18px;
  background: var(--classic-accent, #c6f04f);
  color: #16180f;
  font-size: 14px;
  font-weight: var(--type-weight-strong);
  cursor: pointer;
}

.free-sheet-save:disabled {
  opacity: 0.6;
  cursor: default;
}

.free-sheet-cancel {
  flex: 1;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 11px 16px;
  background: transparent;
  color: inherit;
  font-size: 14px;
  cursor: pointer;
}

.free-sheet-card.actions {
  background: #16181b;
  color: #f7f7f7;
  gap: 12px;
  padding-bottom: max(20px, calc(env(safe-area-inset-bottom) + 12px));
}
.free-sheet-handle {
  align-self: center;
  width: 38px;
  height: 4px;
  border-radius: 999px;
  background: rgba(247, 247, 247, 0.28);
}

.free-sheet-top {
  display: flex;
  align-items: center;
  gap: 10px;
}

.free-sheet-clock {
  flex: 1;
  text-align: center;
  font-size: 28px;
  line-height: 1;
  font-weight: var(--type-weight-medium);
  font-variant-numeric: tabular-nums;
}

.free-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.free-wide {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 56px;
  border: 0;
  border-radius: 16px;
  padding: 12px 16px;
  background: rgba(247, 247, 247, 0.1);
  color: #f7f7f7;
  font-size: 16px;
  font-weight: var(--type-weight-medium);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.free-wide.danger {
  background: var(--free-finish-red, #c2352c);
}

.free-wide:disabled {
  opacity: 0.6;
  cursor: default;
}

.free-wide-glyph {
  font-size: 15px;
  opacity: 0.9;
}
.free-wide.plain.rest {
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  cursor: default;
}

.free-wide-label {
  font-size: 13px;
  color: rgba(247, 247, 247, 0.6);
  font-variant-numeric: tabular-nums;
}

.free-rest-picker {
  display: flex;
  gap: 6px;
}

.free-rest-choice {
  flex: 1 1 0;
  min-height: 44px;
  border: 1px solid rgba(247, 247, 247, 0.2);
  background: transparent;
  color: inherit;
  border-radius: 12px;
  padding: 6px 4px;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}

.free-rest-choice[aria-pressed='true'] {
  border-color: transparent;
  background: var(--classic-accent, #c6f04f);
  color: #16180f;
  font-weight: var(--type-weight-medium);
}
.free-records {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.free-records li {
  border: 1px solid color-mix(in srgb, var(--classic-accent, #c6f04f) 45%, transparent);
  background: color-mix(in srgb, var(--classic-accent, #c6f04f) 12%, transparent);
  border-radius: 12px;
  padding: 8px 12px;
  font-size: 13px;
  font-weight: var(--type-weight-strong);
}
.free-history-record {
  font-style: normal;
  font-size: 11px;
  padding: 1px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--classic-accent, #c6f04f) 22%, transparent);
}

.free-history-repeat {
  flex: 0 0 auto;
  border: 1px solid var(--line);
  background: transparent;
  color: inherit;
  border-radius: 999px;
  padding: 5px 12px;
  font-size: 12px;
  cursor: pointer;
}
@media (prefers-reduced-motion: reduce) {
  .free-layer {
    animation: free-fade 200ms ease-out both;
  }

  .free-layer.closing {
    animation: free-fade 180ms ease-in both reverse;
  }

  .free-sheet-card {
    animation: none;
  }

  .free-chip-dot {
    animation: none;
  }

  .free-rest {
    animation: none;
  }

  .free-rest-ring-live {
    transition: none;
  }
}
.courses-block {
  width: var(--figma-main-track, calc(100% - 32px));
  margin: 14px auto 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.course-live-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  border: 0;
  border-radius: 16px;
  padding: 12px 14px;
  background: #101112;
  color: #f7f7f7;
  text-align: left;
  cursor: pointer;
}

.course-live-dot {
  flex: 0 0 10px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--classic-accent, #c6f04f);
  animation: course-live-pulse 1.6s ease-in-out infinite;
}

@keyframes course-live-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.35); opacity: 0.55; }
}

.course-live-copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.course-live-copy strong {
  font-size: 14.5px;
  font-weight: var(--type-weight-strong);
}

.course-live-copy span {
  font-size: 12.5px;
  opacity: 0.75;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.course-card {
  border-radius: 0;
  background: transparent;
  border: 0;
  overflow: visible;
}

.course-head {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 8px 0;
  color: inherit;
  text-align: left;
  -webkit-tap-highlight-color: transparent;
}

.course-head-hit {
  position: absolute;
  inset: 0;
  z-index: 0;
  border: 0;
  padding: 0;
  background: transparent;
  background-image: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.course-head-hit:active:not(:disabled) {
  scale: 1;
}
.course-thumb {
  position: relative;
  z-index: 1;
  pointer-events: none;
  flex: 0 0 48%;
  aspect-ratio: 16 / 9;
  border-radius: 12px;
  overflow: hidden;
  background: var(--chip);
}

.course-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.course-thumb .lesson-thumb-ph {
  width: 100%;
  height: 100%;
  font-size: 28px;
}

.course-head-copy {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  flex: 1;
  position: relative;
  z-index: 1;
  pointer-events: none;
}

.course-head-title {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.course-head-copy strong {
  font-size: 16px;
  font-weight: var(--type-weight-medium);
  line-height: 1.25;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.course-head-meta {
  font-size: 13px;
  line-height: 1.3;
  color: var(--muted);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 6px;
}

.course-pass-badge {
  font-style: normal;
  font-size: 11.5px;
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--chip);
  opacity: 0.9;
}

.course-percent {
  font-size: 13px;
  font-weight: var(--type-weight-medium);
  font-variant-numeric: tabular-nums;
}

.course-chevron {
  flex: 0 0 auto;
  opacity: 0.45;
  position: relative;
  z-index: 1;
  pointer-events: none;
}
.course-page {
  touch-action: pan-y;
}

.course-page .course-screen {
  --top: #000;
  --bg: #000;
  --text: #fff;
  --muted: #a1a1a6;
  --chip: #1c1c1e;
  --line: #2c2c2e;
  padding-top: 0;
  background: #000;
  color: #fff;
}

.course-page-head {
  position: absolute;
  top: max(12px, env(safe-area-inset-top));
  left: 12px;
  right: 12px;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  pointer-events: none;
}

.course-page-back,
.course-page-more {
  pointer-events: auto;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(60, 60, 64, 0.72);
  color: #fff;
  cursor: pointer;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.course-page-more.course-pencil {
  opacity: 1;
  visibility: visible;
  transform: none;
  padding: 0;
}

.course-page-body {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior-y: none;
  -webkit-overflow-scrolling: touch;
  padding: 0 0 calc(var(--nav-h, 88px) + max(16px, env(safe-area-inset-bottom)));
}

.course-page-hero {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  background: #1c1c1e;
  overflow: hidden;
}

.course-page-hero img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.course-page-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, 0.85) 100%);
}

.course-page-hero-ph {
  width: 100%;
  height: 100%;
  font-size: 56px;
}

.course-page-title {
  position: relative;
  z-index: 1;
  margin: -64px 16px 6px;
  font-size: 30px;
  font-weight: var(--type-weight-strong);
  line-height: 1.1;
  letter-spacing: -0.01em;
}

.course-page-meta {
  margin: 0 16px 16px;
  font-size: 15px;
  color: var(--muted);
}

.course-page-meta .course-pass-badge {
  background: #1c1c1e;
  color: #fff;
}

.course-continue {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: calc(100% - 32px);
  margin: 0 16px 22px;
  min-height: 54px;
  border: 0;
  border-radius: 27px;
  background: #1c1c1e;
  color: var(--classic-accent, #c6f04f);
  font-size: 17px;
  font-weight: var(--type-weight-strong);
  cursor: pointer;
}

.course-page-section {
  margin: 0 16px 8px;
  font-size: 22px;
  font-weight: var(--type-weight-strong);
  letter-spacing: -0.01em;
}

.course-items {
  list-style: none;
  margin: 0;
  padding: 0 6px 4px;
}

.course-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  background: var(--top);
}
.course-item-hit {
  position: absolute;
  inset: 0;
  z-index: 0;
  border: 0;
  padding: 0;
  background: transparent;
  background-image: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.course-item-hit:active:not(:disabled) {
  scale: 1;
}
.course-form-items li {
  flex-wrap: wrap;
}

.course-item-workout-extra {
  flex: 1 1 100%;
  display: flex;
  gap: 6px;
  margin-top: 6px;
}

.course-item-workout-extra .course-item-note,
.course-item-workout-extra .course-item-block {
  flex: 1;
  min-width: 0;
}

.course-item-side {
  flex: 0 0 auto;
  width: 58px;
}
.course-workout-start {
  display: block;
  width: calc(100% - 24px);
  margin: 10px 12px 4px;
  border: 0;
  border-radius: 999px;
  padding: 12px 16px;
  background: var(--classic-accent, #c6f04f);
  color: #16180f;
  font-size: 15px;
  font-weight: var(--type-weight-strong);
  cursor: pointer;
}

.course-item-measure {
  font-style: normal;
  font-weight: var(--type-weight-strong);
  font-variant-numeric: tabular-nums;
}
.course-item-thumb {
  position: relative;
  z-index: 1;
  pointer-events: none;
  flex: 0 0 132px;
  width: 132px;
  height: 74px;
  border-radius: 12px;
  overflow: hidden;
  background: var(--chip);
}

.course-item-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.course-item-thumb .lesson-thumb-poster {
  position: absolute;
  inset: 0;
}

.course-item-thumb .lesson-thumb-poster[hidden] {
  display: none;
}
.lesson-thumb-ph {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  font-style: normal;
  font-size: 19px;
  font-weight: var(--type-weight-strong);
  font-variant-numeric: tabular-nums;
  color: color-mix(in srgb, var(--text) 28%, transparent);
  background: linear-gradient(
    145deg,
    color-mix(in srgb, var(--text) 8%, var(--chip)),
    color-mix(in srgb, var(--classic-accent, #c6f04f) 14%, var(--chip))
  );
}
.lesson-thumb-done {
  position: absolute;
  right: 3px;
  bottom: 3px;
  display: grid;
  place-items: center;
  width: 19px;
  height: 19px;
  border-radius: 50%;
  background: var(--classic-accent, #c6f04f);
  color: #16180f;
  box-shadow: 0 0 0 2px var(--top);
}

.course-item-copy {
  position: relative;
  z-index: 1;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  flex: 1;
}
.course-item-copy strong {
  font-size: 15px;
  font-weight: var(--type-weight-strong);
  line-height: 1.25;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.course-item-copy span {
  font-size: 13px;
  opacity: 0.6;
  display: flex;
  align-items: center;
  gap: 6px;
}
.course-diff {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-style: normal;
}

.course-diff i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.3;
}

.course-diff i.on {
  opacity: 1;
  background: color-mix(in srgb, var(--classic-accent, #c6f04f) 96%, #000);
}

.course-item-count {
  font-style: normal;
  font-variant-numeric: tabular-nums;
  opacity: 0.9;
}
.course-item.done .course-item-copy strong {
  opacity: 0.62;
}

.course-item.done .course-item-thumb > img,
.course-item.done .course-item-thumb > .lesson-thumb-ph {
  opacity: 0.62;
}
.course-item-start {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid transparent;
  display: grid;
  place-items: center;
  cursor: pointer;
  background: #101112;
  color: #f7f7f7;
}
.course-item.live .course-item-start {
  background: var(--classic-accent, #c6f04f);
  color: #16180f;
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--classic-accent, #c6f04f) 18%, transparent);
  animation: course-live-halo 1.8s ease-in-out infinite;
}
.course-item.live.paused .course-item-start {
  background: transparent;
  color: inherit;
  border-color: var(--classic-accent, #c6f04f);
  box-shadow: none;
  animation: none;
}
.course-item-ring {
  position: absolute;
  inset: -4px;
  width: 52px;
  height: 52px;
  pointer-events: none;
  transform: rotate(-90deg);
}

.course-item-ring circle {
  fill: none;
  stroke-width: 3;
}

.course-item-ring-track {
  stroke: color-mix(in srgb, var(--classic-accent, #c6f04f) 22%, transparent);
}

.course-item-ring-bar {
  stroke: var(--classic-accent, #c6f04f);
  stroke-linecap: round;
  transition: stroke-dashoffset 900ms linear;
}

@keyframes course-live-halo {
  0%, 100% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--classic-accent, #c6f04f) 16%, transparent); }
  50% { box-shadow: 0 0 0 8px color-mix(in srgb, var(--classic-accent, #c6f04f) 8%, transparent); }
}

.course-item-live-flag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-style: normal;
  color: var(--classic-accent, #c6f04f);
  font-weight: var(--type-weight-strong);
}

.course-item-live-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--classic-accent, #c6f04f);
  animation: course-live-pulse 1.6s ease-in-out infinite;
}

.course-item.paused .course-item-live-dot {
  animation: none;
  opacity: 0.55;
}
.course-item-live-open {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  border: 0;
  background: transparent;
  color: inherit;
  padding: 4px 6px;
  cursor: pointer;
  font-variant-numeric: tabular-nums;
  font-size: 13px;
  font-weight: var(--type-weight-strong);
}

.course-sd,
.course-item-sd {
  position: relative;
  overflow: hidden;
}

.course-sd > .swipe-row,
.course-item-sd > .swipe-row {
  position: relative;
  z-index: 1;
  touch-action: pan-y;
  will-change: transform;
  transition: transform 360ms cubic-bezier(0.22, 0.9, 0.28, 1);
}

.course-sd.revealed > .swipe-row,
.course-item-sd.revealed > .swipe-row {
  transform: translateX(-62px);
}
.course-sd.revealed .course-item-sd:not(.revealed) > .swipe-row {
  transform: none;
}

.course-sd.dragging > .swipe-row,
.course-item-sd.dragging > .swipe-row {
  transition: none;
}

.course-sd {
  border-radius: 18px;
}
.course-item-sd {
  border-top: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
}

.course-sd > .swipe-delete,
.course-item-sd > .swipe-delete {
  position: absolute;
  z-index: 0;
  right: 12px;
  top: 50%;
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  background: #d73636;
  transform: translateY(-50%);
  cursor: pointer;
  opacity: 0;
}
.course-sd > .swipe-delete {
  top: 36px;
}

.course-sd.revealed > .swipe-delete,
.course-item-sd.revealed > .swipe-delete {
  opacity: 1;
}
.course-sd.sd-armed > .swipe-delete,
.course-item-sd.sd-armed > .swipe-delete {
  background: #c22525;
}
.courses-notice {
  margin: 0;
  padding: 10px 14px;
  border-radius: 14px;
  background: var(--chip);
  color: var(--text);
  font-size: 12.5px;
  line-height: 1.3;
}

.courses-empty {
  display: flex;
  flex-direction: column;
  gap: 4px;
  border-radius: 18px;
  border: 1px dashed var(--line);
  padding: 18px 16px;
}

.courses-empty strong {
  font-size: 15px;
  font-weight: var(--type-weight-strong);
}

.courses-empty span {
  font-size: 13px;
  opacity: 0.72;
}

.courses-skeleton i {
  display: block;
  height: 64px;
  border-radius: 18px;
  margin-bottom: 10px;
  background: linear-gradient(90deg, rgba(128, 128, 128, 0.10), rgba(128, 128, 128, 0.16), rgba(128, 128, 128, 0.10));
  background-size: 200% 100%;
  animation: courses-skeleton 1.1s linear infinite;
}

@keyframes courses-skeleton {
  from { background-position: 200% 0; }
  to { background-position: -200% 0; }
}

.courses-add {
  border: 1px solid var(--line);
  background: var(--top);
  color: inherit;
  border-radius: 999px;
  padding: 10px 16px;
  font-size: 14px;
  font-weight: var(--type-weight-strong);
  cursor: pointer;
  align-self: flex-start;
}

.courses-error {
  margin: 0;
  font-size: 12.5px;
  color: #d64545;
}

.courses-mini-history {
  margin-top: 4px;
}

.courses-mini-history header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 0 2px 6px;
}

.courses-mini-history h3 {
  margin: 0;
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0.6;
  font-weight: var(--type-weight-strong);
}

.courses-mini-history header button {
  border: 0;
  background: none;
  color: var(--muted, rgba(0, 0, 0, 0.55));
  font-size: 12.5px;
  cursor: pointer;
}

.courses-mini-history ul {
  list-style: none;
  margin: 0;
  padding: 0;
  border-radius: 16px;
  background: var(--top);
  border: 1px solid var(--line);
}

.courses-mini-history li {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 14px;
}

.courses-mini-history li + li {
  border-top: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
}

.courses-mini-history strong {
  font-size: 13.5px;
  font-weight: var(--type-weight-strong);
}

.courses-mini-history li span {
  font-size: 12px;
  opacity: 0.68;
}

.course-layer {
  position: fixed;
  inset: 0;
  z-index: 60;
  animation: course-in 320ms cubic-bezier(0.32, 0.72, 0.28, 1) both;
}

.course-layer.closing {
  animation: course-out 280ms cubic-bezier(0.55, 0, 0.55, 0.2) both;
  pointer-events: none;
}

@keyframes course-in {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}

@keyframes course-out {
  from { transform: translateX(0); }
  to { transform: translateX(100%); }
}

.course-screen {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding-top: max(10px, env(safe-area-inset-top));
  background: var(--top);
  color: var(--text);
}

.course-screen-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--line);
}

.course-screen-head h2 {
  margin: 0;
  font-size: 21px;
  font-weight: var(--type-weight-strong);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.course-back {
  flex: 0 0 auto;
  min-width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  background: color-mix(in srgb, var(--ink, #f4f4f5) 8%, transparent);
  color: inherit;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
}

.course-screen-body {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior-y: none;
  -webkit-overflow-scrolling: touch;
  padding: 14px 16px max(16px, env(safe-area-inset-bottom));
}

.course-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 12px;
}

.course-field > span,
.course-field-title {
  font-size: 12px;
  opacity: 0.7;
}

.course-field-title {
  margin: 10px 0 6px;
}

.course-field input,
.course-form-items input {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: transparent;
  color: inherit;
  font-size: 14px;
  padding: 8px 10px;
}

.course-pin-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  margin-bottom: 6px;
}

.course-form-items {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.course-form-items li {
  display: flex;
  gap: 8px;
}

.course-item-name {
  flex: 1;
  min-width: 0;
}

.course-item-minutes {
  flex: 0 0 74px;
  text-align: center;
}
.course-item-remove {
  flex: 0 0 auto;
  width: 34px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: transparent;
  color: #d64545;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}
.course-stale {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  border: 1px solid color-mix(in srgb, var(--warn, #d99b28) 45%, transparent);
  background: color-mix(in srgb, var(--warn, #d99b28) 10%, transparent);
  border-radius: 14px;
  padding: 10px 12px;
  margin-bottom: 10px;
}

.course-stale-copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1 1 180px;
  min-width: 0;
}

.course-stale-copy strong {
  font-size: 13.5px;
  font-weight: var(--type-weight-strong);
}

.course-stale-copy span {
  font-size: 12px;
  opacity: 0.78;
}

.course-stale-actions {
  display: flex;
  gap: 8px;
}

.course-stale-save,
.course-stale-drop {
  border-radius: 10px;
  font-size: 13px;
  font-weight: var(--type-weight-strong);
  padding: 8px 14px;
  border: 1px solid var(--line);
  background: transparent;
  color: inherit;
}

.course-stale-save {
  border-color: transparent;
  background: var(--accent, #b7f000);
  color: #0d0f0c;
}

.course-stale-save[disabled] {
  opacity: 0.55;
}
.course-health-select {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: transparent;
  color: inherit;
  font-size: 14px;
  padding: 8px 10px;
  width: 100%;
}
.course-item-health {
  flex: 0 0 118px;
  width: auto;
  font-size: 12.5px;
  padding: 6px 6px;
}

.course-minutes-hint {
  margin: 6px 0 0;
  font-size: 11.5px;
  opacity: 0.55;
}

.course-add-item {
  margin-top: 10px;
  border: 1px solid var(--line);
  background: transparent;
  color: inherit;
  border-radius: 999px;
  padding: 7px 14px;
  font-size: 13px;
  cursor: pointer;
  align-self: flex-start;
}

.course-form-actions {
  display: flex;
  gap: 8px;
  margin-top: 16px;
}
.course-form-actions-sticky {
  position: sticky;
  bottom: 0;
  z-index: 2;
  padding: 12px 0 max(10px, env(safe-area-inset-bottom));
  margin-top: 18px;
  background: linear-gradient(to top, var(--top) 78%, transparent);
}
.course-field-bad input {
  border-color: #d64545;
}

.course-field-error {
  font-style: normal;
  font-size: 12px;
  color: #d64545;
}

.course-save {
  border: 0;
  border-radius: 999px;
  padding: 9px 18px;
  background: var(--classic-accent, #c6f04f);
  color: #16180f;
  font-size: 14px;
  font-weight: var(--type-weight-strong);
  cursor: pointer;
}

.course-save:disabled {
  opacity: 0.6;
  cursor: default;
}

.course-cancel {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 9px 16px;
  background: transparent;
  color: inherit;
  font-size: 14px;
  cursor: pointer;
}

.course-archive {
  margin-top: 22px;
  border: 0;
  background: none;
  color: #d64545;
  font-size: 13px;
  cursor: pointer;
  text-align: left;
  padding: 4px 0;
}

.course-history-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.course-history-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 2px;
}

.course-history-list li + li {
  border-top: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
}

.course-undo {
  flex: 0 0 auto;
  border: 1px solid var(--line);
  background: transparent;
  color: inherit;
  border-radius: 999px;
  padding: 5px 12px;
  font-size: 12px;
  cursor: pointer;
}

.live-screen {
  background: #0a0b0d;
  color: #f7f7f7;
}

.live-screen .course-screen-head {
  border-bottom-color: rgba(247, 247, 247, 0.12);
}

.live-screen .course-back {
  background: rgba(247, 247, 247, 0.1);
}

.live-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 0 24px max(24px, env(safe-area-inset-bottom));
}

.live-course-name {
  margin: 0;
  font-size: 14px;
  opacity: 0.6;
}
.live-clock {
  margin: 0;
  font-size: 76px;
  font-weight: var(--type-weight-strong);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
  line-height: 1;
}

.live-clock.paused {
  opacity: 0.5;
}
.live-finishing {
  margin: -6px 0 0;
  font-size: 13px;
  color: var(--classic-accent, #c6f04f);
  opacity: 0.9;
}

.live-bar {
  width: min(280px, 76%);
  height: 5px;
  border-radius: 999px;
  background: rgba(247, 247, 247, 0.14);
  overflow: hidden;
}

.live-bar i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--classic-accent, #c6f04f);
  transition: width 480ms linear;
}

.live-actions {
  display: flex;
  gap: 10px;
  margin-top: 18px;
}

.live-pause {
  border: 1px solid rgba(247, 247, 247, 0.3);
  background: transparent;
  color: inherit;
  border-radius: 999px;
  padding: 12px 22px;
  font-size: 15px;
  font-weight: var(--type-weight-strong);
  cursor: pointer;
}

.live-finish {
  border: 0;
  border-radius: 999px;
  padding: 12px 24px;
  background: var(--classic-accent, #c6f04f);
  color: #16180f;
  font-size: 15px;
  font-weight: var(--type-weight-strong);
  cursor: pointer;
}
.live-error {
  margin: 4px 0 0;
  font-size: 13px;
  color: #ff8a80;
}

.live-finish:disabled {
  opacity: 0.6;
  cursor: default;
}

.live-discard {
  margin-top: 6px;
  border: 0;
  background: none;
  color: rgba(247, 247, 247, 0.55);
  font-size: 13px;
  cursor: pointer;
}
@media (prefers-reduced-motion: reduce) {
  .course-layer {
    animation: course-fade-in 200ms ease-out both;
  }

  .course-layer.closing {
    animation: course-fade-out 180ms ease-in both;
  }

  @keyframes course-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
  }

  @keyframes course-fade-out {
    from { opacity: 1; }
    to { opacity: 0; }
  }

  .course-body,
  .course-card.expanded .course-body,
  .course-bar i,
  .course-chevron {
    transition: none;
  }
  .course-page-more.course-pencil {
    transition: none;
    transform: none;
  }
  .course-item.live .course-item-start,
  .course-item-live-dot {
    animation: none;
  }
}
.course-page .course-item {
  padding: 10px 16px;
  background: #000;
  border-bottom: 1px solid #1c1c1e;
}

.course-page .course-item-copy strong {
  font-size: 15px;
  font-weight: var(--type-weight-medium);
}

.course-page .course-item-copy span {
  color: #a1a1a6;
  opacity: 1;
}

.course-page .course-item-start {
  background: #1c1c1e;
  color: #fff;
}

.course-page .course-item.live .course-item-start {
  background: var(--classic-accent, #c6f04f);
  color: #16180f;
}

.course-page .course-item.done .course-item-thumb > img,
.course-page .course-item.done .course-item-thumb > .lesson-thumb-ph {
  opacity: 0.55;
}
.workout-screen {
  background: var(--top);
  color: var(--text);
}
.workout-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 16px 14px;
  background: #0a0b0d;
  color: #f7f7f7;
}

.workout-head .course-back {
  background: rgba(247, 247, 247, 0.1);
}

.workout-clock {
  flex: 1;
  margin: 0;
  font-size: 44px;
  font-weight: var(--type-weight-strong);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
  line-height: 1;
}

.workout-clock.paused {
  opacity: 0.5;
}

.workout-pause {
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  border: 2px solid rgba(247, 247, 247, 0.85);
  border-radius: 50%;
  background: transparent;
  color: inherit;
  display: grid;
  place-items: center;
  cursor: pointer;
}

.workout-body {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior-y: none;
  -webkit-overflow-scrolling: touch;
  padding: 12px 12px 24px;
}

.workout-progress {
  margin: 0 4px 10px;
  font-size: 13px;
  color: var(--muted);
}
.workout-block {
  margin-bottom: 12px;
  border-radius: 16px;
  background: var(--card, var(--chip));
  overflow: hidden;
}

.workout-block-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 16px 10px;
  border-bottom: 1px solid var(--line);
}

.workout-block-head h3 {
  margin: 0;
  font-size: 18px;
  font-weight: var(--type-weight-strong);
  line-height: 1.2;
}

.workout-rounds {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 15px;
  font-weight: var(--type-weight-strong);
  font-variant-numeric: tabular-nums;
}

.workout-items {
  list-style: none;
  margin: 0;
  padding: 0;
}

.workout-item + .workout-item {
  border-top: 1px solid var(--line);
}
.workout-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 12px 12px 16px;
  min-height: 72px;
}

.workout-row-hit {
  position: absolute;
  inset: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  border-radius: 0;
}

.workout-row-hit:active {
  background: color-mix(in srgb, var(--ink, #f4f4f5) 6%, transparent);
}

.workout-measure {
  flex: 0 0 auto;
  min-width: 34px;
  font-size: 15px;
  font-weight: var(--type-weight-strong);
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}

.workout-copy {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  pointer-events: none;
}

.workout-copy strong {
  font-size: 15px;
  font-weight: var(--type-weight-medium);
  line-height: 1.3;
}

.workout-note {
  font-size: 13px;
  color: var(--muted);
}
.workout-thumb {
  position: relative;
  z-index: 1;
  flex: 0 0 64px;
  width: 64px;
  height: 64px;
  padding: 0;
  border: 0;
  border-radius: 10px;
  overflow: hidden;
  background: var(--chip);
  cursor: pointer;
}

.workout-thumb .lesson-thumb-ph {
  width: 100%;
  height: 100%;
}

.workout-thumb-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.workout-thumb-img[hidden] {
  display: none;
}
.workout-item.done .workout-measure,
.workout-item.done .workout-copy {
  opacity: 0.5;
}

.workout-item.done .workout-thumb {
  outline: 2px solid var(--classic-accent, #c6f04f);
  outline-offset: -2px;
}

.workout-item.open .workout-row {
  background: color-mix(in srgb, var(--ink, #f4f4f5) 4%, transparent);
}
.workout-media-box {
  position: relative;
  aspect-ratio: 16 / 9;
  width: 100%;
  background: #000;
  overflow: hidden;
}

.workout-media-box video,
.workout-media-box img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.workout-media-box .lesson-hero-ph {
  width: 100%;
  height: 100%;
  font-size: 44px;
}

.workout-media-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 16px 12px;
}

.workout-countdown-start,
.workout-mark {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 9px 16px;
  background: transparent;
  color: inherit;
  font-size: 14px;
  font-weight: var(--type-weight-strong);
  cursor: pointer;
}

.workout-mark {
  margin-left: auto;
  border-color: transparent;
  background: var(--classic-accent, #c6f04f);
  color: #16180f;
}

.workout-mark.undone {
  background: transparent;
  border-color: var(--line);
  color: inherit;
}

.workout-countdown {
  font-size: 26px;
  font-weight: var(--type-weight-strong);
  font-variant-numeric: tabular-nums;
}

.workout-empty {
  margin: 24px 0;
  text-align: center;
  color: var(--muted);
}
.workout-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px max(12px, env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
  background: var(--top);
}

.workout-finish {
  flex: 1;
}
.workout-actions .live-discard {
  margin-top: 0;
  color: var(--muted);
}

@media (prefers-reduced-motion: reduce) {
  .workout-row-hit:active {
    background: transparent;
  }
}
:root {
  --training-top-pad: max(0px, calc(env(safe-area-inset-top, 0px) - 48px));
}

@supports (padding-top: constant(safe-area-inset-top)) {
  :root {
    --training-top-pad: max(0px, calc(constant(safe-area-inset-top) - 48px));
  }
}
.training-shell {
  background: #f2f2f3;
  color: #111;
}

.training-page {
  box-sizing: border-box;
  height: 100svh;
  min-height: 100svh;
  padding: calc(env(safe-area-inset-top, 0px) + 12px) 18px calc(var(--bottom-nav-height, 86px) + env(safe-area-inset-bottom, 0px) + 26px);
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  background: #f2f2f3;
}
:root[data-theme="dark"] .training-shell {
  background: #151516;
  color: #f5f5f6;
}
.training-page {
  padding: 0 18px calc(var(--bottom-nav-height, 86px) + env(safe-area-inset-bottom, 0px) + 26px) !important;
  background: #f2f2f3 !important;
}
.traino-switch {
  --traino-switch-inset: 4px;
  display: flex;
  gap: 3px;
  width: 100%;
  max-width: 380px;
  height: 50px;
  margin: 0 auto 22px;
  padding: 3px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, 0)),
    #090a0a;
  box-shadow:
    0 16px 30px rgba(0, 0, 0, .30),
    inset 0 1px 0 rgba(255, 255, 255, .10);
}

.traino-switch button {
  appearance: none;
  -webkit-appearance: none;
  display: flex;
  flex: 1 1 0;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-sizing: border-box;
  min-width: 0;
  min-height: 42px;
  margin: 0;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: calc(999px - var(--traino-switch-inset));
  background: rgba(0, 0, 0, .12);
  color: rgba(255, 255, 255, .86);
  font-size: 13.5px;
  font-weight: var(--type-weight-strong);
  letter-spacing: 0;
  transition: background .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease, transform .14s ease;
}

.traino-switch button.active {
  border-color: rgba(255, 255, 255, .88);
  background: linear-gradient(180deg, #ffffff 0%, #f2f2f2 100%), #fff;
  color: #111;
  box-shadow:
    0 10px 22px rgba(255, 255, 255, .10),
    0 8px 18px rgba(0, 0, 0, .22);
}

.traino-switch button:active {
  transform: scale(.985);
}

.traino-tab-icon,
.traino-tab-icon svg {
  display: block;
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
}
.training-page:has(.figma-traino-screen) {
  height: calc(100dvh - var(--training-top-pad)) !important;
  min-height: calc(100dvh - var(--training-top-pad)) !important;
  padding: 0 0 calc(var(--bottom-nav-height, 86px) + env(safe-area-inset-bottom, 0px) + 18px) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  background: #0a0b0d !important;
}
body.treino-sheet-open .training-shell .training-page {
  overflow: hidden !important;
}

.app-shell.training-shell {
  width: min(100%, 440px) !important;
  height: 100dvh !important;
  min-height: 100dvh !important;
  padding: var(--training-top-pad) 0 0 !important;
  overflow: hidden !important;
  background: #0a0b0d !important;
}
.training-dashboard-skeleton {
  display: grid;
  grid-template-rows: clamp(378px, 44svh, 410px) minmax(330px, 1fr);
  min-height: calc(100svh - var(--bottom-nav-height, 86px));
  background: #fefefe;
}

.training-dashboard-skeleton-hero {
  border-radius: 0 0 75px 75px;
  background: #131313;
}

.training-dashboard-skeleton-body {
  min-height: 330px;
  background: #fefefe;
}
.figma-traino-screen {
  --figma-black: #131313;
  --figma-green: #c4fb6d;
  --figma-lime: #c6f04f;
  --figma-card: #383838;
  --figma-main-track: min(380px, 88vw);
  box-sizing: border-box;
  width: 100%;
  min-height: calc(100svh - var(--bottom-nav-height, 86px));
  margin: 0 auto;
  overflow: hidden;
  border-radius: 0 0 40px 40px;
  background: #fefefe;
  color: #0a0a0a;
  font-family: "Satoshi", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: var(--type-weight-regular);
  letter-spacing: 0;
}

.figma-train-screen {
  --figma-hero-height: clamp(378px, 44svh, 410px);
  position: relative;
  box-sizing: border-box;
  height: var(--figma-hero-height);
  padding-top: 20px;
  border-radius: 0 0 75px 75px;
  background: #131313;
  color: #fff;
}
.figma-dashboard-switch.traino-switch {
  margin-bottom: 0;
}

.figma-dashboard-switch.traino-switch,
.figma-dashboard-switch.traino-switch button {
  font-family: "SF Pro Display Figma", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.figma-day-labels {
  position: relative;
  display: block;
  box-sizing: border-box;
  width: var(--figma-main-track);
  margin: 14px auto 0;
  padding: 5px 10px 8px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .105);
  border-radius: 17px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, .008)),
    rgba(8, 9, 9, .22);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .06),
    0 10px 20px rgba(0, 0, 0, .18);
  font-family: Poppins, "SF Pro Display Figma", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-mask-image: none;
  mask-image: none;
}

.figma-day-labels::after {
  content: "";
  position: absolute;
  left: var(--figma-selected-x, 50%);
  bottom: 0;
  width: 18px;
  height: 3px;
  border-radius: 999px 999px 0 0;
  background: #c6f04f;
  box-shadow: 0 -4px 12px rgba(198, 240, 79, .36);
  transform: translateX(-50%);
  pointer-events: none;
}

.figma-day-rail {
  display: grid;
  grid-auto-columns: 42px;
  grid-auto-flow: column;
  gap: 5px;
  width: min(324px, 100%);
  margin: 0 auto;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: auto;
  scroll-padding-inline: calc(50% - 21px);
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  touch-action: pan-x;
  -webkit-overflow-scrolling: touch;
}

.figma-day-rail::-webkit-scrollbar {
  display: none;
}

.figma-day {
  position: relative;
  display: block;
  height: 58px;
  width: 42px;
  min-width: 0;
  border: 0;
  border-radius: 14px;
  background: transparent;
  color: #bcaead;
  font-family: inherit;
  line-height: 1.04;
  scroll-snap-align: center;
  touch-action: pan-x;
  transition: background-color .18s ease, color .18s ease, transform .18s ease;
}

.figma-day::before {
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 0;
  width: 42px;
  height: 56px;
  border-radius: 14px;
  background: transparent;
  content: "";
  transform: translateX(-50%);
}

.figma-day.selected {
  background: transparent;
  color: #292c31;
}

.figma-day.selected::before {
  background: #c6f04f;
  box-shadow:
    0 8px 16px rgba(198, 240, 79, .22),
    inset 0 1px 0 rgba(255, 255, 255, .30);
}

.figma-day.selected::after {
  content: none;
}

.figma-day.today:not(.selected)::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -1px;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #c6f04f;
  box-shadow: 0 0 0 2px rgba(198, 240, 79, .16);
  transform: translateX(-50%);
}

.figma-day b {
  position: absolute;
  top: 7px;
  left: 50%;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 13px;
  margin: 0;
  font-size: 9.5px;
  font-weight: var(--type-weight-regular);
  line-height: 1.05;
  text-align: center;
  font-variant-numeric: tabular-nums;
  transform: translateX(-50%);
}

.figma-day span {
  position: absolute;
  top: 22px;
  left: 50%;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 27px;
  margin: 0;
  font-size: 21px;
  font-weight: var(--type-weight-regular);
  line-height: 1;
  text-align: center;
  font-variant-numeric: tabular-nums;
  transform: translateX(-50%);
}
.figma-daily-overview {
  position: relative;
  display: grid;
  width: var(--figma-main-track);
  min-height: 236px;
  margin: 14px auto 0;
  grid-template-columns: minmax(0, 168px) minmax(0, 1fr);
  gap: 8px;
  box-sizing: border-box;
  padding: 12px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 27px;
  background:
    radial-gradient(circle at 22% 48%, rgba(198, 240, 79, .16), transparent 38%),
    radial-gradient(circle at 80% 16%, rgba(255, 255, 255, .045), transparent 34%),
    linear-gradient(145deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .012)),
    #0b0d0d;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .08),
    0 14px 32px rgba(0, 0, 0, .24);
}
.training-day-complete {
  position: fixed;
  z-index: 220;
  top: max(18px, env(safe-area-inset-top));
  left: 16px;
  right: 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 13px;
  border: 1px solid rgba(190, 242, 100, .34);
  border-radius: 15px;
  background: rgba(13, 18, 13, .94);
  box-shadow: 0 12px 28px rgba(0, 0, 0, .28);
  color: #f6f7f2;
  pointer-events: none;
  overflow: hidden;
  animation: training-day-complete-in 2400ms cubic-bezier(.2, .8, .3, 1) both;
}

.training-day-complete-mark {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 50%;
  background: #bef264;
  color: #15200b;
  font-weight: var(--type-weight-strong);
  box-shadow: 0 0 22px rgba(190, 242, 100, .45);
}

.training-day-complete::after { content: ''; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 35%, rgba(190,242,100,.16) 50%, transparent 65%); transform: translateX(-120%); animation: training-day-complete-sweep 1200ms ease-out both; }

.training-day-complete b,
.training-day-complete small {
  display: block;
}

.training-day-complete b {
  font-size: 13px;
  letter-spacing: .01em;
}

.training-day-complete small {
  margin-top: 2px;
  color: rgba(246, 247, 242, .68);
  font-size: 11px;
}

@keyframes training-day-complete-in {
  0% { opacity: 0; transform: translateY(-6px); }
  12%, 82% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(-2px); }
}
@keyframes training-day-complete-sweep { to { transform: translateX(120%); } }

@media (prefers-reduced-motion: reduce) {
  .training-day-complete, .training-day-complete::after { animation: none; }
}

.figma-progress-ring-card {
  position: relative;
  display: grid;
  min-width: 0;
  min-height: 210px;
  place-items: center;
  border-right: 1px solid rgba(255, 255, 255, .12);
}
.figma-daily-overview .figma-progress-ring-card {
  animation: figma-day-swap 260ms ease-out;
}

@keyframes figma-day-swap {
  from {
    opacity: .4;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes figma-day-fade {
  from {
    opacity: .4;
  }
  to {
    opacity: 1;
  }
}
@media (prefers-reduced-motion: reduce) {
  .figma-daily-overview .figma-progress-ring-card {
    animation: figma-day-fade 180ms ease-out;
  }
}

.figma-mini-stack {
  display: grid;
  min-width: 0;
  grid-template-rows: 58px 78px 58px;
  gap: 9px;
}

.figma-mini-card {
  position: relative;
  display: grid;
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: 16px;
  background:
    radial-gradient(circle at 12% 14%, rgba(198, 240, 79, .08), transparent 34%),
    linear-gradient(145deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .015)),
    #111414;
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .055);
}

.figma-mission-card {
  grid-template-columns: minmax(0, 1fr) 50px;
  gap: 4px;
  padding: 9px 7px 8px 10px;
}

.figma-mission-copy {
  display: grid;
  min-width: 0;
  align-content: center;
}

.figma-mission-copy small {
  color: #c6f04f;
  font-size: 8.9px;
  font-weight: var(--type-weight-medium);
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
  align-self: start;
}

.figma-mission-copy b {
  margin-top: 5px;
  display: -webkit-box;
  overflow: hidden;
  color: #fff;
  font-size: 9.8px;
  font-weight: var(--type-weight-strong);
  line-height: 1.04;
  text-overflow: ellipsis;
  white-space: normal;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.figma-mission-copy em {
  margin-top: 3px;
  color: rgba(255, 255, 255, .65);
  font-size: 8.45px;
  font-style: normal;
  font-weight: var(--type-weight-regular);
  line-height: 1.08;
}

.figma-mission-copy strong {
  color: #c6f04f;
  font-weight: var(--type-weight-strong);
}

.figma-mission-art {
  position: relative;
  display: block;
  align-self: stretch;
  color: #c6f04f;
}

.figma-mission-art img {
  position: absolute;
  right: -10px;
  bottom: -7px;
  width: 64px;
  height: 64px;
  object-fit: contain;
  opacity: .62;
  filter: drop-shadow(0 0 12px rgba(198, 240, 79, .13));
}
.figma-goals-area {
  box-sizing: border-box;
  padding: 14px 32px 26px;
}

.figma-goals-area h2 {
  margin: 0 0 28px 4px;
  color: #0a0a0a;
  font-family: "Satoshi", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 24px;
  font-weight: var(--type-weight-medium);
  line-height: 1;
}

.figma-goals-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px 32px;
}

.figma-goal-card {
  position: relative;
  display: grid;
  box-sizing: border-box;
  min-width: 0;
  min-height: 164px;
  grid-template-rows: minmax(0, 1fr) 38px;
  aspect-ratio: 175 / 178;
  border: 0;
  border-radius: 0;
  padding: 73px 12px 14px;
  background: transparent;
  color: #fff;
  font-family: "Satoshi", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: var(--type-weight-regular);
  overflow: visible;
  text-align: center;
  transform-origin: 50% 18px;
  will-change: transform;
}

.figma-goal-card.card-press {
  animation: figma-goal-card-tap .2s cubic-bezier(.2, .9, .2, 1) both;
}

.figma-goal-card::before {
  position: absolute;
  inset: 27px 0 0;
  z-index: 0;
  background: #1a1a1a;
  border-radius: 24px;
  content: "";
  -webkit-mask: radial-gradient(circle 44px at 50% -5px, transparent 43px, #000 44px);
  mask: radial-gradient(circle 44px at 50% -5px, transparent 43px, #000 44px);
}

.figma-goal-card > * {
  position: relative;
  z-index: 1;
}

.figma-goal-icon {
  position: absolute;
  top: -22px;
  left: 50%;
  display: grid;
  width: 88px;
  height: 88px;
  place-items: center;
  overflow: hidden;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  transform: translateX(-50%);
  backface-visibility: hidden;
  will-change: transform;
  -webkit-tap-highlight-color: transparent;
}

.figma-goal-card.quick-tap .figma-goal-icon {
  animation: figma-goal-icon-tap .22s cubic-bezier(.16, .9, .18, 1) both;
}

.figma-goal-icon img {
  display: block;
  width: 70px;
  height: 70px;
  object-fit: contain;
}

.figma-goal-name {
  display: -webkit-box;
  overflow: hidden;
  align-self: center;
  justify-self: center;
  width: 100%;
  max-width: calc(100% - 4px);
  margin: 0 auto;
  color: #fff;
  font-size: var(--goal-name-size, 22px);
  font-weight: var(--type-weight-regular);
  line-height: 1.03;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow-wrap: normal;
  word-break: normal;
}

.figma-goal-set-zone {
  display: grid;
  width: min(116px, calc(100% - 20px));
  justify-self: center;
  align-self: end;
  gap: 6px;
}

.figma-goal-bars,
.figma-goal-reps-row {
  display: grid;
  grid-template-columns: repeat(var(--set-count), minmax(0, 1fr));
  gap: 4px;
  align-items: center;
}

.figma-goal-bars i {
  position: relative;
  display: block;
  width: 100%;
  height: 6px;
  overflow: hidden;
  border-radius: 9px;
  background: #f7f7f7;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .05);
}

.figma-goal-bars i.done {
  background: #c6f04f;
  box-shadow: none;
}

.figma-goal-bars i.just-done {
  background: #f7f7f7;
}

.figma-goal-bars i.just-done::after {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: #c6f04f;
  content: "";
  animation: figma-goal-bar-fill .42s cubic-bezier(.2,.82,.22,1) both;
}

.figma-goal-reps-row em {
  display: block;
  min-width: 0;
  overflow: hidden;
  color: #b6b6b7;
  font-size: 14px;
  font-style: normal;
  font-weight: var(--type-weight-regular);
  line-height: 1;
  text-align: center;
  text-overflow: clip;
}

.figma-goal-burst {
  position: absolute;
  left: 50%;
  top: 22px;
  z-index: 4;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

.figma-goal-burst i {
  position: absolute;
  left: -3px;
  top: -3px;
  width: var(--size, 6px);
  height: var(--size, 6px);
  border-radius: 50%;
  background: #c6f04f;
  box-shadow: 0 0 0 1px rgba(10, 10, 10, .55);
  opacity: 0;
  will-change: transform, opacity;
  animation: figma-goal-bubble var(--dur, 340ms) cubic-bezier(.14,.86,.18,1) var(--delay, 0ms) forwards;
}

.figma-goal-burst i:nth-child(3n + 1) {
  background: #efffd0;
}

@keyframes figma-goal-bubble {
  0% {
    opacity: .95;
    transform: translate(0, 0) scale(.35);
  }
  62% {
    opacity: .86;
  }
  100% {
    opacity: 0;
    transform: translate(var(--dx), var(--dy)) scale(.95);
  }
}

@keyframes figma-goal-icon-tap {
  0% {
    transform: translateX(-50%) scale(1);
  }
  38% {
    transform: translateX(-50%) scale(.9);
  }
  100% {
    transform: translateX(-50%) scale(1);
  }
}

@keyframes figma-goal-card-tap {
  0% {
    transform: scale(1);
  }
  42% {
    transform: scale(.984);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes training-goal-row-enter {
  0% {
    opacity: 0;
    transform: translateY(8px) scale(.985);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes figma-goal-bar-fill {
  0% {
    transform: translateX(-102%);
    transform-origin: left center;
  }
  62% {
    transform: translateX(6%);
  }
  82% {
    transform: translateX(-2%);
  }
  100% {
    transform: translateX(0);
  }
}

@keyframes figma-goal-bar-glow {
  0% {
    box-shadow: inset 0 0 0 0 rgba(255, 255, 255, 0);
  }
  45% {
    box-shadow: inset 0 0 5px 1px rgba(255, 255, 255, .85);
  }
  100% {
    box-shadow: inset 0 0 0 0 rgba(255, 255, 255, 0);
  }
}
.figma-personalize-button {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 34px;
  box-sizing: border-box;
  width: min(60vw, 244px);
  min-height: 46px;
  align-items: center;
  margin: 18px auto 0;
  border: 1px solid rgba(198, 240, 79, .46);
  border-radius: 999px;
  padding: 6px 7px;
  background:
    linear-gradient(180deg, rgba(198, 240, 79, .05), rgba(198, 240, 79, 0)),
    #090a0a;
  color: #f7f7f4;
  font-family: "Satoshi", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: var(--type-weight-medium);
  box-shadow:
    0 14px 26px rgba(0, 0, 0, .16),
    inset 0 1px 0 rgba(255, 255, 255, .07);
}

.figma-personalize-button > span:not(.figma-personalize-icon) {
  overflow: hidden;
  justify-self: center;
  color: #f8f8f4;
  font-size: 13.2px;
  font-weight: var(--type-weight-strong);
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.figma-personalize-icon {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, .06);
  color: #c6f04f;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .10);
}

.figma-personalize-icon svg {
  width: 17px;
  height: 17px;
}

.figma-personalize-arrow {
  display: grid;
  width: 32px;
  height: 32px;
  justify-self: end;
  place-items: center;
  border-radius: 50%;
  background: #c6f04f;
  color: #0b0c0d;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-style: normal;
  line-height: 0;
  box-shadow:
    0 8px 16px rgba(198, 240, 79, .20),
    inset 0 1px 0 rgba(255, 255, 255, .28);
}

.figma-personalize-arrow svg {
  width: 17px;
  height: 17px;
}
.figma-report-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 22px;
}

.figma-report-card {
  display: grid;
  min-width: 0;
  grid-template-rows: auto auto 1fr auto;
  gap: 8px;
  border: 0;
  border-radius: 20px;
  padding: 16px 12px 12px;
  background: #fff;
  color: #0a0a0a;
  font-family: "Satoshi", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  text-align: left;
  box-shadow: 0 16px 38px rgba(10, 10, 10, .08);
  -webkit-tap-highlight-color: transparent;
}

.figma-report-card:active {
  transform: scale(.992);
}

.figma-report-title {
  display: block;
  overflow: hidden;
  font-size: clamp(21px, 5.45vw, 25px);
  font-weight: var(--type-weight-regular);
  line-height: .98;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.figma-report-subtitle {
  display: block;
  color: #565656;
  font-size: clamp(15px, 4.1vw, 18px);
  font-weight: var(--type-weight-regular);
  line-height: 1;
}

.figma-report-mini-grid {
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  gap: 5px;
  align-self: center;
  margin: 4px 0 6px;
}

.figma-report-mini-grid i {
  display: block;
  aspect-ratio: 1;
  border-radius: 4px;
  background: #ececed;
}

.figma-report-card.daily .figma-report-mini-grid i.done {
  background: #1f8f52;
}

.figma-report-card.gym .figma-report-mini-grid i.done {
  background: #ff825f;
}

.figma-report-footer {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 6px;
  align-items: baseline;
  border-top: 1px solid #e8e8e8;
  padding-top: 12px;
}

.figma-report-footer b {
  color: #050505;
  font-size: clamp(25px, 6.6vw, 32px);
  font-weight: var(--type-weight-regular);
  line-height: 1;
}

.figma-report-footer em {
  overflow: hidden;
  color: #5f5f62;
  font-size: clamp(12px, 3.45vw, 15px);
  font-style: normal;
  font-weight: var(--type-weight-regular);
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.figma-report-footer i {
  color: #aaa;
  font-size: 32px;
  font-style: normal;
  line-height: .7;
}
@media (max-width: 410px) {
  .figma-train-screen {
    --figma-hero-height: clamp(366px, 43svh, 394px);
    border-radius: 0 0 64px 64px;
  }

  .figma-switch-shell {
    width: var(--figma-main-track);
    height: 56px;
  }

  .figma-day-labels {
    width: var(--figma-main-track);
    margin-top: 12px;
    padding-inline: 9px;
  }

  .figma-metrics-row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    width: calc(100% - 92px);
    margin-top: 10px;
  }

  .figma-metric-card {
    width: auto;
    height: 90px;
    border-radius: 21px;
  }

  .figma-metric-card img,
  .figma-metric-card.sleep img,
  .figma-metric-card.sets img,
  .figma-metric-card.gym img {
    width: 32px;
    height: 32px;
  }

  .figma-metric-card b {
    font-size: 28px;
  }

  .figma-metric-card span {
    font-size: 12px;
  }

  .figma-goals-area {
    padding: 10px 28px 18px;
  }

  .figma-goals-area h2 {
    margin-bottom: 18px;
  }

  .figma-goals-grid {
    gap: 26px 32px;
  }

  .figma-goal-card {
    min-height: 164px;
    padding: 73px 12px 14px;
  }

  .figma-goal-name {
    font-size: var(--goal-name-size, 21px);
  }

  .figma-personalize-button {
    min-height: 50px;
    margin-top: 14px;
  }
}

@media (max-width: 374px) {
  .figma-goals-area {
    padding-left: 22px;
    padding-right: 22px;
  }

  .figma-goals-grid {
    gap: 20px 24px;
  }

  .figma-metrics-row {
    width: calc(100% - 58px);
    gap: 10px;
  }

  .figma-goal-card {
    min-height: 158px;
    padding-top: 70px;
    padding-bottom: 13px;
  }

  .figma-goal-name {
    font-size: 21px;
  }

  .figma-goal-set-zone {
    width: min(106px, calc(100% - 18px));
  }

  .figma-goal-reps-row em {
    font-size: 12px;
  }
}
.figma-train-screen {
  --figma-hero-height: clamp(444px, 52svh, 478px);
}

.figma-metrics-row {
  grid-template-columns: repeat(3, minmax(0, 84px));
  gap: clamp(10px, 4vw, 22px);
  margin-top: 9px;
}

.figma-metric-card {
  width: 84px;
  height: 84px;
  gap: 3px;
  border-radius: 20px;
}

.figma-metric-card img,
.figma-metric-card.sleep img,
.figma-metric-card.sets img,
.figma-metric-card.gym img {
  width: 29px;
  height: 29px;
}

.figma-metric-card b {
  font-size: 25px;
}

.figma-metric-card span {
  font-size: 11.5px;
}

.figma-goals-area {
  padding: 10px 0 22px;
}

.figma-goals-head {
  display: flex;
  position: relative;
  left: 50%;
  width: var(--figma-main-track);
  margin: 0 0 13px;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  transform: translateX(-50%);
}

.figma-goals-head-actions {
  display: inline-flex;
  min-width: 0;
  flex: 0 0 auto;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
}

.figma-activity-button {
  box-sizing: border-box;
  display: inline-flex;
  height: 32px;
  min-height: 32px;
  min-width: 58px;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(10, 10, 10, .56);
  border-radius: 999px;
  padding: 0 10px;
  appearance: none;
  -webkit-appearance: none;
  background: rgba(255, 255, 255, .92);
  color: #111;
  font-family: "Satoshi", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 10.5px;
  font-weight: var(--type-weight-medium);
  line-height: 1;
  vertical-align: middle;
  white-space: nowrap;
  box-shadow:
    0 3px 10px rgba(10, 10, 10, .04),
    inset 0 1px 0 rgba(255, 255, 255, .94);
  -webkit-tap-highlight-color: transparent;
  transition: background-color .16s ease, border-color .16s ease, box-shadow .16s ease;
}

.figma-activity-button.active {
  border-color: #111;
  background: #f1f1ef;
  color: #111;
  font-weight: var(--type-weight-medium);
  box-shadow:
    0 0 0 2px rgba(17, 17, 17, .10),
    inset 0 -2px 0 #111,
    inset 0 1px 0 rgba(255, 255, 255, .96);
}

.figma-activity-button:active {
  background: #e9e9e7;
}

.figma-activity-button:focus-visible {
  outline: 2px solid #111;
  outline-offset: 2px;
}

.figma-activity-button:disabled {
  opacity: .58;
  pointer-events: none;
}

.figma-goals-area h2 {
  margin: 0;
  font-size: 19px;
}

.figma-plan-button {
  box-sizing: border-box;
  display: inline-flex;
  height: 32px;
  min-height: 32px;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border: 1px solid rgba(10, 10, 10, .10);
  border-radius: 999px;
  padding: 4px 9px 4px 8px;
  background: rgba(255, 255, 255, .88);
  color: #111;
  font-family: "Satoshi", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 11px;
  font-weight: var(--type-weight-regular);
  line-height: 1;
  white-space: nowrap;
  box-shadow:
    0 8px 20px rgba(10, 10, 10, .06),
    inset 0 1px 0 rgba(255, 255, 255, .9);
  -webkit-tap-highlight-color: transparent;
}

.figma-plan-button svg {
  width: 13px;
  height: 13px;
  color: #6b6b6b;
}

.figma-plan-button:active {
  transform: scale(.985);
}

.figma-goals-grid {
  display: flex;
  position: relative;
  left: 50%;
  width: var(--figma-main-track);
  flex-direction: column;
  gap: 8px;
  margin: 0;
  transform: translateX(-50%);
}

.figma-goal-card {
  position: relative;
  display: grid;
  grid-template-columns: 66px minmax(0, 1fr) 42px;
  grid-template-rows: 1fr;
  column-gap: 9px;
  box-sizing: border-box;
  width: 100%;
  min-height: 80px;
  aspect-ratio: auto;
  align-items: start;
  overflow: hidden;
  border: 1px solid #d9d9d9;
  border-radius: 16px;
  padding: 7px 9px;
  background: #fff;
  color: #0a0a0a;
  font-family: "Satoshi", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: var(--type-weight-regular);
  text-align: left;
  box-shadow:
    0 12px 26px rgba(10, 10, 10, .055),
    inset 0 1px 0 rgba(255, 255, 255, .72);
  transform-origin: center;
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
  touch-action: manipulation;
}

.figma-goal-card.done {
  border-color: rgba(178, 226, 48, .58);
  background:
    radial-gradient(circle at 82% 50%, rgba(198, 240, 79, .12), transparent 40%),
    #fff;
  box-shadow:
    0 12px 26px rgba(10, 10, 10, .045),
    0 0 0 1px rgba(198, 240, 79, .13),
    inset 0 1px 0 rgba(255, 255, 255, .72);
}

.figma-goal-card::before {
  content: none;
}

.figma-goal-card.card-press {
  animation: figma-goal-board-tap .18s cubic-bezier(.2, .86, .24, 1) both;
}

.figma-goal-photo {
  display: block;
  width: 66px;
  height: 66px;
  overflow: hidden;
  border-radius: 12px;
  background: #d9d9d9;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .03);
}

.figma-goal-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 48% 54%;
}

.figma-goal-info {
  display: grid;
  min-width: 0;
  min-height: 66px;
  grid-template-rows: auto auto 1fr;
  align-content: start;
  padding-top: 2px;
}

.figma-goal-name {
  display: -webkit-box;
  overflow: hidden;
  width: 100%;
  max-width: 100%;
  margin: 0;
  color: #080808;
  font-size: calc(var(--goal-name-size, 22px) * .74);
  font-weight: var(--type-weight-regular);
  line-height: 1.05;
  text-align: left;
  text-overflow: ellipsis;
  white-space: normal;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.figma-goal-category {
  display: block;
  margin-top: 2px;
  overflow: hidden;
  color: #bababa;
  font-size: 12.5px;
  font-weight: var(--type-weight-regular);
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.figma-goal-set-zone {
  display: grid;
  width: min(156px, 100%);
  grid-template-columns: minmax(58px, 72px) minmax(72px, auto);
  column-gap: 7px;
  align-self: end;
  justify-self: start;
  align-items: center;
  padding: 0 0 2px 1px;
}

.figma-goal-bars {
  display: grid;
  width: 100%;
  grid-template-columns: repeat(var(--set-count), minmax(12px, 1fr));
  gap: 3px;
  align-items: center;
}

.figma-goal-bars i {
  display: block;
  width: 100%;
  height: 3px;
  overflow: hidden;
  border-radius: 999px;
  background: #d1d1d6;
  box-shadow: none;
}

.figma-goal-set-count {
  display: block;
  overflow: hidden;
  color: #747474;
  font-size: 10px;
  font-weight: var(--type-weight-regular);
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.figma-goal-bars i.done {
  background: #b4dc45;
}

.figma-goal-bars i.just-done {
  background: #d1d1d6;
}

.figma-goal-bars i.just-done::after {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: #b4dc45;
  content: "";
  animation:
    figma-goal-bar-fill .36s cubic-bezier(.2,.82,.22,1) both,
    figma-goal-bar-glow .22s ease-out both;
}

.figma-goal-reps-row {
  display: none;
}

.figma-goal-play {
  display: grid;
  position: absolute;
  top: 50%;
  right: 11px;
  box-sizing: border-box;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 1px solid rgba(198, 240, 79, .92);
  border-radius: 50%;
  padding: 0;
  background: #000;
  color: #c6f04f;
  box-shadow:
    0 10px 18px rgba(0, 0, 0, .12),
    inset 0 1px 0 rgba(255, 255, 255, .08);
  cursor: pointer;
  transform: translateY(-50%);
  transition: transform .14s ease, box-shadow .14s ease, background .14s ease;
}

.figma-goal-play span {
  display: block;
  width: 0;
  height: 0;
  margin-left: 3px;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-left: 11px solid currentColor;
  filter: drop-shadow(0 1px 0 rgba(255, 255, 255, .10));
}

.figma-goal-play:active {
  transform: translateY(-50%) scale(.94);
  box-shadow:
    0 6px 12px rgba(0, 0, 0, .14),
    inset 0 1px 0 rgba(255, 255, 255, .08);
}

.figma-goal-play.done {
  border-width: 1px;
  border-color: rgba(7, 8, 8, .74);
  background: #76bd18;
  color: #fff;
  box-shadow:
    0 5px 12px rgba(100, 168, 18, .22),
    inset 0 1px 0 rgba(255, 255, 255, .16);
}

.figma-goal-play.done span {
  width: 15px;
  height: 8px;
  margin: -2px 0 0;
  border: solid #fff;
  border-width: 0 0 3px 3px;
  transform: rotate(-45deg);
  filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .08));
}

.figma-goal-status {
  position: absolute;
  top: calc(50% + 22px);
  right: 2px;
  width: 54px;
  color: #8bcf18;
  font-size: 10.5px;
  font-weight: var(--type-weight-regular);
  line-height: 1;
  text-align: center;
  white-space: nowrap;
}
.figma-goal-cheer {
  position: absolute;
  z-index: 2;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 6px;
  inset: 0;
  padding: 6px 10px;
  border-radius: inherit;
  background: rgba(6, 10, 4, .72);
  pointer-events: none;
  animation: figma-goal-cheer-in 2600ms ease-out both;
}

.figma-goal-cheer b {
  color: #fff;
  font-size: 12px;
  font-weight: var(--type-weight-strong);
  line-height: 1.15;
  text-align: center;
  text-wrap: balance;
}

.figma-goal-bolt {
  width: 26px;
  height: 26px;
  fill: #c6f04f;
  filter: drop-shadow(0 0 10px rgba(198, 240, 79, .55));
  animation: figma-goal-bolt-strike 900ms cubic-bezier(.2, .8, .3, 1) both;
}
@keyframes figma-goal-bolt-strike {
  0% { transform: translateY(-14px) scale(.4); opacity: 0; }
  35% { transform: translateY(0) scale(1.25); opacity: 1; }
  50% { opacity: .55; }
  65% { transform: scale(1); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
@keyframes figma-goal-cheer-in {
  0% { opacity: 0; }
  8% { opacity: 1; }
  88% { opacity: 1; }
  100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .figma-goal-cheer,
  .figma-goal-bolt {
    animation: none;
  }
}

@keyframes figma-goal-board-tap {
  0% {
    transform: scale(1);
  }
  45% {
    transform: scale(.992);
  }
  100% {
    transform: scale(1);
  }
}

@media (max-width: 374px) {
  .figma-goals-head,
  .figma-goals-grid {
    width: var(--figma-main-track);
  }

  .figma-goals-head {
    gap: 4px;
  }

  .figma-goals-head-actions {
    gap: 3px;
  }

  .figma-activity-button {
    height: 30px;
    min-height: 30px;
    min-width: 50px;
    padding-inline: 7px;
    font-size: 9.5px;
  }

  .figma-plan-button {
    height: 30px;
    min-height: 30px;
    gap: 3px;
    padding-inline: 6px;
    font-size: 9.5px;
  }

  .figma-metrics-row {
    width: calc(100% - 76px);
    gap: 9px;
  }

  .figma-metric-card {
    height: 80px;
  }

  .figma-goal-card {
    grid-template-columns: 62px minmax(0, 1fr) 38px;
    column-gap: 7px;
    min-height: 76px;
    padding: 7px 8px;
    border-radius: 16px;
  }

  .figma-goal-photo {
    width: 62px;
    height: 62px;
    border-radius: 12px;
  }

  .figma-goal-info {
    min-height: 62px;
  }

  .figma-goal-play {
    width: 32px;
    height: 32px;
    right: 9px;
  }

  .figma-goal-play span {
    border-top-width: 7px;
    border-bottom-width: 7px;
    border-left-width: 11px;
  }
}
.figma-goals-title-toggle {
  display: inline-grid;
  min-width: 0;
  flex: 1 1 auto;
  grid-template-rows: auto auto;
  gap: 3px;
  border: 0;
  padding: 0;
  background: transparent;
  color: #0a0a0a;
  font-family: "Satoshi", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1;
  text-align: left;
  -webkit-tap-highlight-color: transparent;
}

.figma-goals-title-toggle span {
  display: block;
  font-size: 19px;
  font-weight: var(--type-weight-medium);
  line-height: 1;
}

.figma-goals-title-toggle i {
  display: inline-block;
  width: max-content;
  max-width: 100%;
  border-radius: 999px;
  padding: 4px 8px;
  background: rgba(10, 10, 10, .08);
  color: rgba(10, 10, 10, .54);
  font-size: 10px;
  font-style: normal;
  font-weight: var(--type-weight-medium);
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.figma-goals-title-toggle:active {
  transform: scale(.985);
}

.figma-traino-screen.rest-day .figma-daily-overview,
.figma-traino-screen.rest-day .figma-goals-grid,
.figma-traino-screen.rest-day .figma-report-card.daily,
.figma-traino-screen.rest-day .figma-personalize-button {
  filter: grayscale(1) saturate(.12);
}

.figma-traino-screen.rest-day .figma-daily-overview {
  opacity: .78;
}

.figma-traino-screen.rest-day .figma-goal-card {
  opacity: .66;
}

.figma-traino-screen.rest-day .figma-report-card.daily {
  opacity: .78;
}
.figma-report-mini-grid i,
.training-report-year-grid i,
.training-report-legend i {
  position: relative;
  overflow: hidden;
}

.figma-report-mini-grid i.rest,
.training-report-year-grid i.rest {
  background: #e7e8ea !important;
}

.figma-report-mini-grid i.rest::before,
.figma-report-mini-grid i.rest::after,
.training-report-year-grid i.rest::before,
.training-report-year-grid i.rest::after,
.training-report-legend i.rest::before,
.training-report-legend i.rest::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 72%;
  height: 2px;
  border-radius: 999px;
  background: rgba(85, 86, 88, .72);
  transform-origin: center;
}

.figma-report-mini-grid i.rest::before,
.training-report-year-grid i.rest::before,
.training-report-legend i.rest::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.figma-report-mini-grid i.rest::after,
.training-report-year-grid i.rest::after,
.training-report-legend i.rest::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.training-report-day.rest {
  border-color: rgba(145, 145, 145, .55);
  color: rgba(255, 255, 255, .55);
}

.training-report-day.rest::before,
.training-report-day.rest::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 0;
  width: 58%;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
  opacity: .75;
  transform-origin: center;
}

.training-report-day.rest::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.training-report-day.rest::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.training-report-day.rest span,
.training-report-day.rest i {
  position: relative;
  z-index: 1;
}

.training-report-legend i.rest {
  border-color: rgba(120, 120, 120, .38);
  border-radius: 5px;
}

.training-report-screen.daily .training-report-legend span:nth-child(2) {
  color: rgba(255, 255, 255, .72);
}

:root[data-theme="light"] .training-report-day.rest {
  border-color: rgba(92, 92, 92, .38);
  color: rgba(10, 10, 10, .42);
}

:root[data-theme="light"] .training-report-legend i.rest {
  border-color: rgba(10, 10, 10, .26);
}

:root[data-theme="light"] .training-report-screen.daily .training-report-legend span:nth-child(2) {
  color: rgba(10, 10, 10, .58);
}
.figma-report-mini-grid i.plan-half:not(.activity-cardio):not(.activity-football),
.training-report-year-grid i.plan-half:not(.activity-cardio):not(.activity-football) {
  background: #1f8f52;
}

.figma-report-mini-grid i.activity-cardio:not(.activity-football):not(.plan-half),
.training-report-year-grid i.activity-cardio:not(.activity-football):not(.plan-half),
.training-report-legend i.activity-cardio {
  background: #c65a17;
}

.figma-report-mini-grid i.activity-football:not(.activity-cardio):not(.plan-half),
.training-report-year-grid i.activity-football:not(.activity-cardio):not(.plan-half),
.training-report-legend i.activity-football {
  background: #2877c7;
}

.figma-report-mini-grid i.activity-cardio.activity-football:not(.plan-half),
.training-report-year-grid i.activity-cardio.activity-football:not(.plan-half) {
  background: linear-gradient(90deg, #c65a17 0 50%, #2877c7 50% 100%);
}

.figma-report-mini-grid i.plan-half.activity-cardio:not(.activity-football),
.training-report-year-grid i.plan-half.activity-cardio:not(.activity-football) {
  background: linear-gradient(90deg, #1f8f52 0 50%, #c65a17 50% 100%);
}

.figma-report-mini-grid i.plan-half.activity-football:not(.activity-cardio),
.training-report-year-grid i.plan-half.activity-football:not(.activity-cardio) {
  background: linear-gradient(90deg, #1f8f52 0 50%, #2877c7 50% 100%);
}

.figma-report-mini-grid i.plan-half.activity-cardio.activity-football,
.training-report-year-grid i.plan-half.activity-cardio.activity-football {
  background: linear-gradient(90deg, #1f8f52 0 33.333%, #c65a17 33.333% 66.666%, #2877c7 66.666% 100%);
}

.training-report-day.activity-cardio:not(.activity-football):not(.plan-half) {
  border-color: #c65a17;
  background: #c65a17;
  color: #fff;
}

.training-report-day.activity-football:not(.activity-cardio):not(.plan-half) {
  border-color: #2877c7;
  background: #2877c7;
  color: #fff;
}

.training-report-day.activity-cardio.activity-football:not(.plan-half) {
  border-color: #8a5e67;
  background: linear-gradient(90deg, #c65a17 0 50%, #2877c7 50% 100%);
  color: #fff;
}

.training-report-day.plan-half.activity-cardio:not(.activity-football) {
  border-color: #58873a;
  background: linear-gradient(90deg, #1f8f52 0 50%, #c65a17 50% 100%);
  color: #fff;
}

.training-report-day.plan-half.activity-football:not(.activity-cardio) {
  border-color: #247f8d;
  background: linear-gradient(90deg, #1f8f52 0 50%, #2877c7 50% 100%);
  color: #fff;
}

.training-report-day.plan-half.activity-cardio.activity-football {
  border-color: #61765d;
  background: linear-gradient(90deg, #1f8f52 0 33.333%, #c65a17 33.333% 66.666%, #2877c7 66.666% 100%);
  color: #fff;
}

.training-report-day.rest {
  background: transparent !important;
}
.figma-streak-days i.activity-cardio:not(.rest) b::after,
.figma-streak-days i.activity-football:not(.rest) b::after,
.figma-streak-days i.plan-half:not(.rest) b::after {
  content: "";
  position: absolute;
  left: 3.5px;
  top: 3.5px;
  width: 5px;
  height: 3px;
  border: solid #fff;
  border-width: 0 0 1.6px 1.6px;
  transform: rotate(-45deg);
}
.figma-streak-days i.plan-half:not(.rest) b::after {
  border-color: #111;
}

.training-report-legend {
  flex-wrap: wrap;
  gap: 12px 20px;
}

.training-report-legend i.activity-cardio,
.training-report-legend i.activity-football {
  border-color: transparent;
  border-radius: 5px;
}

.training-page .treino-top.home-classic-shell {
  display: block;
  min-height: 0;
  height: auto;
  padding: max(8px, calc(env(safe-area-inset-top) - 2px)) 0 10px;
  background: transparent;
  overflow: visible;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}
.app-shell.training-shell {
  --training-top-pad: 0px;
}

.training-page .treino-top .classic-head {
  padding-left: 18px;
  padding-right: 18px;
}

.training-page .figma-train-screen {
  --figma-hero-height: clamp(368px, 43svh, 402px);
  border-radius: 28px 28px 75px 75px;
}

.training-page .treino-switch-card {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding: 0 18px;
}

.training-page .treino-switch-inner {
  padding: 16px 16px 12px;
  border: 1px solid rgba(198, 240, 79, .16);
  border-bottom: 0;
  border-radius: 24px 24px 0 0;
  background-color: #101112;
  background-image: linear-gradient(145deg, #141617 0%, #101112 52%, #0b0c0d 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07);
  color: #fff;
}

.training-page .figma-train-screen,
.training-page .traino-hero.workout {
  box-sizing: border-box;
  width: 100vw;
  height: auto;
  min-height: 0;
  margin: 0 calc(50% - 50vw) 10px;
  padding: 0 18px;
  border-radius: 0;
  background: transparent;
}
.training-page .figma-train-screen > *,
.training-page .traino-hero.workout > * {
  position: relative;
  z-index: 1;
}

.training-page .figma-train-screen,
.training-page .traino-hero.workout {
  position: relative;
}

.training-page .figma-train-screen::before,
.training-page .traino-hero.workout::before {
  position: absolute;
  top: 0;
  right: 18px;
  bottom: 0;
  left: 18px;
  border: 1px solid rgba(198, 240, 79, .16);
  border-top: 0;
  border-radius: 0 0 24px 24px;
  background-color: #101112;
  background-image: linear-gradient(145deg, #141617 0%, #101112 52%, #0b0c0d 100%);
  box-shadow: 0 22px 44px rgba(0, 0, 0, .2);
  content: "";
}

.training-page .figma-daily-overview {
  width: auto;
  min-height: 0;
  margin: 0;
  padding: 4px 16px 16px;
}

.training-page .figma-mini-stack {
  grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
  gap: 9px;
}

.training-page .figma-progress-ring-card {
  min-height: 0;
}
.activity-tile.activity-tile-sleep b:not(.none) {
  color: #fff;
}
.training-page .figma-daily-overview,
.training-page .workout-overview {
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  overflow: visible;
}
.training-page .treino-switch-inner,
.training-page .figma-train-screen::before,
.training-page .traino-hero.workout::before {
  background-image: none;
  background-color: #101112;
}

.training-page:has(.figma-traino-screen) {
  background: #f2f2f3 !important;
}
:root[data-theme="dark"] .training-page {
  background: #0b0b0c !important;
}

.training-page .treino-switch-card {
  padding: 0 22px;
}

.training-page .treino-switch-inner {
  padding: 14px 14px 6px;
}

.training-page .figma-train-screen,
.training-page .traino-hero.workout {
  padding: 0 22px;
}

.training-page .figma-train-screen::before,
.training-page .traino-hero.workout::before {
  right: 22px;
  left: 22px;
}

.training-page .figma-daily-overview {
  padding: 0 14px 14px;
}
.training-page .figma-streak-head small,
.training-page .figma-time-card small {
  font-size: 9.5px;
  letter-spacing: .04em;
}

.training-page .treino-switch-inner {
  padding: 14px 14px 10px;
  border: 1px solid rgba(198, 240, 79, .16);
  border-radius: 24px;
  box-shadow: 0 22px 44px rgba(0, 0, 0, .2), inset 0 1px 0 rgba(255, 255, 255, .07);
}
.training-page .figma-train-screen,
.training-page .traino-hero.workout {
  width: auto;
  margin: 0;
  padding: 0;
  border-radius: 0;
  background: none;
}

.training-page .figma-train-screen::before,
.training-page .traino-hero.workout::before {
  content: none;
}
.training-page .treino-switch-inner .figma-daily-overview,
.training-page .treino-switch-inner .workout-overview {
  margin-top: 12px;
  padding: 0;
}

.training-dashboard-skeleton {
  background: transparent;
}

.training-dashboard-skeleton-hero,
.training-dashboard-skeleton-body {
  border-radius: 24px;
  background: color-mix(in srgb, #050505 5%, transparent);
  animation: treino-skeleton-pulse 1.1s ease-in-out infinite;
}

.training-dashboard-skeleton-hero {
  height: 180px;
  margin-bottom: 12px;
}

:root[data-theme="dark"] .training-dashboard-skeleton-hero,
:root[data-theme="dark"] .training-dashboard-skeleton-body {
  background: rgba(255, 255, 255, .06);
}

@keyframes treino-skeleton-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .55; }
}

@media (prefers-reduced-motion: reduce) {
  .training-dashboard-skeleton-hero,
  .training-dashboard-skeleton-body {
    animation: none;
  }
}

:root[data-theme="dark"] .figma-traino-screen {
  background: #0b0b0c;
  color: #f4f4f5;
}

:root[data-theme="dark"] .figma-goals-area h2,
:root[data-theme="dark"] .figma-goals-title-toggle {
  color: #f4f4f5;
}

:root[data-theme="dark"] .figma-goals-title-toggle i {
  background: rgba(255, 255, 255, .09);
  color: rgba(255, 255, 255, .58);
}

:root[data-theme="dark"] .figma-activity-button {
  border-color: rgba(255, 255, 255, .17);
  background: rgba(255, 255, 255, .05);
  color: #f4f4f5;
  box-shadow: none;
}

:root[data-theme="dark"] .figma-activity-button.active {
  border-color: rgba(244, 244, 245, .62);
  background: rgba(244, 244, 245, .13);
  color: #fff;
  box-shadow:
    0 0 0 2px rgba(244, 244, 245, .08),
    inset 0 -2px 0 #f4f4f5;
}

:root[data-theme="dark"] .figma-activity-button:active {
  background: rgba(244, 244, 245, .2);
}

:root[data-theme="dark"] .figma-activity-button:focus-visible {
  outline-color: #f4f4f5;
}

:root[data-theme="dark"] .figma-plan-button {
  border-color: rgba(255, 255, 255, .12);
  background: rgba(255, 255, 255, .05);
  color: #f4f4f5;
  box-shadow: none;
}

:root[data-theme="dark"] .figma-plan-button svg {
  color: rgba(255, 255, 255, .52);
}

:root[data-theme="dark"] .figma-goal-card {
  border-color: rgba(255, 255, 255, .09);
  background: #131315;
  color: #f4f4f5;
  box-shadow: none;
}

:root[data-theme="dark"] .figma-goal-card.done {
  border-color: rgba(198, 240, 79, .34);
  background:
    radial-gradient(circle at 82% 50%, rgba(198, 240, 79, .10), transparent 40%),
    #131315;
  box-shadow: 0 0 0 1px rgba(198, 240, 79, .10);
}

:root[data-theme="dark"] .figma-goal-photo {
  background: #1d1e21;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .05);
}

:root[data-theme="dark"] .figma-goal-name {
  color: #f4f4f5;
}

:root[data-theme="dark"] .figma-goal-category {
  color: rgba(255, 255, 255, .40);
}

:root[data-theme="dark"] .figma-goal-set-count {
  color: rgba(255, 255, 255, .52);
}
:root[data-theme="dark"] .figma-goal-bars i:not(.done),
:root[data-theme="dark"] .figma-goal-bars i.just-done {
  background: rgba(255, 255, 255, .16);
}

:root[data-theme="dark"] .figma-report-card {
  background: #131315;
  color: #f4f4f5;
  box-shadow: none;
}

:root[data-theme="dark"] .figma-report-subtitle {
  color: rgba(255, 255, 255, .56);
}

:root[data-theme="dark"] .figma-report-mini-grid i {
  background: rgba(255, 255, 255, .10);
}

:root[data-theme="dark"] .figma-report-mini-grid i.rest,
:root[data-theme="dark"] .training-report-year-grid i.rest {
  background: #2a2b2e !important;
}

:root[data-theme="dark"] .figma-report-footer {
  border-top-color: rgba(255, 255, 255, .08);
}

:root[data-theme="dark"] .figma-report-footer b {
  color: #f4f4f5;
}

:root[data-theme="dark"] .figma-report-footer em {
  color: rgba(255, 255, 255, .55);
}

:root[data-theme="dark"] .figma-report-footer i {
  color: rgba(255, 255, 255, .35);
}
.training-page {
  overscroll-behavior-y: none;
}

.training-page:has(.figma-traino-screen) {
  overscroll-behavior-y: none;
}

.day-course-card {
  position: relative;
  display: grid;
  grid-template-columns: 66px minmax(0, 1fr) 42px;
  column-gap: 9px;
  box-sizing: border-box;
  width: 100%;
  min-height: 80px;
  align-items: center;
  border: 1px solid #d9d9d9;
  border-radius: 16px;
  padding: 9px;
  background: #fff;
  color: #0a0a0a;
  font-family: "Satoshi", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  text-align: left;
  box-shadow:
    0 12px 26px rgba(10, 10, 10, .055),
    inset 0 1px 0 rgba(255, 255, 255, .72);
  -webkit-tap-highlight-color: transparent;
}
.day-course-card.live {
  border-color: rgba(198, 240, 79, .78);
  box-shadow:
    0 0 0 1px rgba(198, 240, 79, .20),
    0 12px 26px rgba(10, 10, 10, .05);
  cursor: pointer;
}

.day-course-card.done {
  border-color: rgba(178, 226, 48, .58);
  background:
    radial-gradient(circle at 82% 50%, rgba(198, 240, 79, .12), transparent 40%),
    #fff;
}
.day-course-mark {
  display: grid;
  width: 66px;
  height: 66px;
  align-content: center;
  justify-items: start;
  gap: 6px;
  padding-left: 15px;
  box-sizing: border-box;
  border-radius: 12px;
  background: #101112;
}

.day-course-mark i {
  display: block;
  height: 5px;
  border-radius: 999px;
  background: #c6f04f;
}

.day-course-mark i:nth-child(1) { width: 34px; }
.day-course-mark i:nth-child(2) { width: 26px; opacity: .7; }
.day-course-mark i:nth-child(3) { width: 18px; opacity: .42; }

.day-course-info {
  display: grid;
  min-width: 0;
  gap: 3px;
  align-content: center;
}

.day-course-name {
  overflow: hidden;
  color: #080808;
  font-size: 15px;
  font-weight: var(--type-weight-medium);
  line-height: 1.1;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.day-course-sub {
  overflow: hidden;
  color: #8b8b8b;
  font-size: 11.5px;
  line-height: 1.2;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.day-course-meter {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 14px;
}

.day-course-count {
  color: #747474;
  font-size: 10.5px;
  font-variant-numeric: tabular-nums;
}
.day-course-flag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-style: normal;
  font-size: 10.5px;
  font-weight: var(--type-weight-medium);
  color: #5f7a12;
}

.day-course-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #a8d92a;
  animation: day-course-pulse 1.6s ease-in-out infinite;
}

.day-course-card.paused .day-course-dot {
  animation: none;
  opacity: .5;
}

@keyframes day-course-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.35); opacity: .55; }
}

.day-course-clock {
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
  color: #5a5a5a;
}

.day-course-play {
  display: grid;
  justify-self: end;
  box-sizing: border-box;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 1px solid rgba(198, 240, 79, .92);
  border-radius: 50%;
  padding: 0;
  background: #000;
  color: #c6f04f;
  box-shadow:
    0 10px 18px rgba(0, 0, 0, .12),
    inset 0 1px 0 rgba(255, 255, 255, .08);
  cursor: pointer;
  transition: transform .14s ease, background .14s ease;
}

.day-course-play:disabled {
  opacity: .45;
  cursor: default;
}

.day-course-play.live {
  background: #c6f04f;
  color: #16180f;
  border-color: transparent;
}

.day-course-play span.play {
  width: 0;
  height: 0;
  margin-left: 2px;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 9px solid currentColor;
}

.day-course-play span.pause {
  width: 11px;
  height: 11px;
  border-left: 3px solid currentColor;
  border-right: 3px solid currentColor;
}

.day-course-status {
  position: absolute;
  top: 8px;
  right: 52px;
  font-size: 9.5px;
  color: #6d8b1a;
  letter-spacing: .02em;
}

.day-course-sheet {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: flex;
  align-items: flex-end;
}

.day-course-sheet-scrim {
  position: absolute;
  inset: 0;
  background: var(--scrim);
}

.day-course-sheet-card {
  position: relative;
  box-sizing: border-box;
  display: flex;
  width: 100%;
  flex-direction: column;
  gap: 8px;
  border-radius: 20px 20px 0 0;
  padding: 18px 16px max(16px, env(safe-area-inset-bottom));
  background: var(--top);
  color: var(--text);
  animation: day-course-sheet-in 260ms cubic-bezier(.32, .72, .28, 1) both;
}

@keyframes day-course-sheet-in {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}

.day-course-sheet-card h3 {
  margin: 0;
  font-size: 17px;
  font-weight: var(--type-weight-strong);
}

.day-course-sheet-card p {
  margin: 0 0 6px;
  font-size: 13.5px;
  opacity: .68;
}

.day-course-sheet-error {
  margin: 0 0 6px;
  font-size: 12.5px;
  color: #d64545;
  opacity: 1;
}

.day-course-sheet-main,
.day-course-sheet-alt,
.day-course-sheet-cancel {
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px 16px;
  background: transparent;
  color: inherit;
  font-family: inherit;
  font-size: 14.5px;
  font-weight: var(--type-weight-medium);
  cursor: pointer;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.day-course-sheet-main {
  border-color: transparent;
  background: var(--classic-accent, #c6f04f);
  color: #16180f;
  font-weight: var(--type-weight-strong);
}

.day-course-sheet-cancel {
  border-color: transparent;
  opacity: .6;
}

.day-course-sheet-main:disabled,
.day-course-sheet-alt:disabled,
.day-course-sheet-cancel:disabled {
  opacity: .5;
  cursor: default;
}

:root[data-theme="dark"] .day-course-card {
  border-color: rgba(255, 255, 255, .09);
  background: #131315;
  color: #f4f4f5;
  box-shadow: none;
}

:root[data-theme="dark"] .day-course-card.live {
  border-color: rgba(198, 240, 79, .5);
  box-shadow: 0 0 0 1px rgba(198, 240, 79, .12);
}

:root[data-theme="dark"] .day-course-card.done {
  border-color: rgba(198, 240, 79, .34);
  background:
    radial-gradient(circle at 82% 50%, rgba(198, 240, 79, .10), transparent 40%),
    #131315;
}

:root[data-theme="dark"] .day-course-mark {
  background: #1d1e21;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .05);
}

:root[data-theme="dark"] .day-course-name {
  color: #f4f4f5;
}

:root[data-theme="dark"] .day-course-sub {
  color: rgba(255, 255, 255, .40);
}

:root[data-theme="dark"] .day-course-count,
:root[data-theme="dark"] .day-course-clock {
  color: rgba(255, 255, 255, .52);
}

:root[data-theme="dark"] .day-course-flag {
  color: #c6f04f;
}

:root[data-theme="dark"] .day-course-play {
  background: #0d0d0e;
}

:root[data-theme="dark"] .day-course-play.live {
  background: #c6f04f;
  color: #16180f;
}

@media (prefers-reduced-motion: reduce) {
  .day-course-dot {
    animation: none;
  }

  .day-course-sheet-card {
    animation: none;
  }
}
.day-course-summary {
  margin-left: 8px;
  font-size: 11px;
  color: #7a7a7a;
  font-variant-numeric: tabular-nums;
  font-weight: var(--type-weight-regular);
}

:root[data-theme="dark"] .day-course-summary {
  color: rgba(255, 255, 255, .50);
}
.watch-owner-banner {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 6px 16px 0;
  padding: 7px 10px;
  border-radius: 10px;
  background: #151618;
  color: #c6f04f;
  font-size: 13px;
  font-weight: var(--type-weight-strong);
  line-height: 1.2;
}
.figma-daily-overview {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition:
    grid-template-rows 360ms cubic-bezier(0.32, 0.72, 0, 1),
    min-height 360ms cubic-bezier(0.32, 0.72, 0, 1);
}
.figma-daily-overview .overview-full {
  min-height: 0;
  overflow: hidden;
  visibility: visible;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  opacity: 1;
  transition: opacity 240ms ease 90ms;
}

.figma-daily-overview.overview-compact {
  grid-template-rows: minmax(0, 0fr);
  min-height: 30px;
  transition:
    grid-template-rows 300ms cubic-bezier(0.22, 0.61, 0.36, 1),
    min-height 300ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.figma-daily-overview.overview-compact .overview-full {
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition: opacity 130ms ease, visibility 0s linear 300ms;
}
.overview-compact-bar {
  position: absolute;
  left: 14px;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  height: 5px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
  opacity: 0;
  pointer-events: none;
  transition: opacity 130ms ease;
}

.figma-daily-overview.overview-compact .overview-compact-bar {
  opacity: 1;
  transition: opacity 240ms ease 120ms;
}

.overview-compact-bar i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--classic-accent, #c6f04f);
  transition: width 360ms cubic-bezier(0.32, 0.72, 0, 1);
}

@media (prefers-reduced-motion: reduce) {
  .figma-daily-overview,
  .figma-daily-overview.overview-compact,
  .figma-daily-overview .overview-full,
  .figma-daily-overview.overview-compact .overview-full,
  .overview-compact-bar,
  .figma-daily-overview.overview-compact .overview-compact-bar,
  .overview-compact-bar i {
    transition: none;
  }
}
.figma-streak-card {
  grid-template-columns: minmax(0, 1fr) 30px;
  column-gap: 4px;
  padding: 8px 8px;
}
.horta-shell {
  background: #f5f7f2;
}

.horta-page {
  min-height: 100dvh;
  overflow-y: auto;
  padding: max(18px, calc(env(safe-area-inset-top) + 10px)) 16px calc(var(--bottom-nav-height, 86px) + env(safe-area-inset-bottom) + 24px);
  color: #172016;
  background:
    linear-gradient(180deg, rgba(199, 229, 174, .9) 0 228px, transparent 228px),
    #f5f7f2;
}

.horta-lead {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 2px 18px;
}

.horta-hero p,
.horta-summary small,
.horta-section label span,
.horta-chart-block header h2,
.horta-neem-card small,
.horta-list span,
.horta-list small {
  margin: 0;
  color: rgba(23, 32, 22, .58);
  font-size: 12px;
  font-weight: var(--type-weight-strong);
  letter-spacing: 0;
}

.horta-hero h1 {
  margin: 2px 0 0;
  color: #10170f;
  font-size: 40px;
  line-height: .98;
  font-weight: var(--type-weight-strong);
  letter-spacing: 0;
}

.horta-hero > span {
  display: grid;
  width: 56px;
  height: 56px;
  place-items: center;
  border-radius: 20px;
  background: #ffffff;
  color: #3f7e36;
  box-shadow: 0 16px 30px rgba(42, 78, 38, .14);
}

.horta-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}

.horta-summary article,
.horta-workspace,
.horta-section,
.horta-chart-block,
.horta-neem-card,
.horta-price-card,
.horta-list article {
  border: 1px solid rgba(44, 75, 42, .10);
  background: rgba(255, 255, 255, .88);
  box-shadow: 0 14px 28px rgba(32, 60, 30, .08);
}

.horta-summary article {
  min-width: 0;
  border-radius: 20px;
  padding: 13px;
}

.horta-summary b {
  display: block;
  overflow: hidden;
  margin-top: 4px;
  color: #142112;
  font-size: 21px;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.horta-summary article.good b {
  color: #2e7d32;
}

.horta-summary article.bad b {
  color: #b42318;
}

.horta-workspace {
  border-radius: 26px;
  padding: 12px;
}

.horta-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
  min-height: 46px;
  margin-bottom: 12px;
  padding: 4px;
  border-radius: 999px;
  background: rgba(30, 48, 28, .08);
}

.horta-tabs button,
.horta-quick-actions button,
.horta-varieties button,
.horta-price-card button,
.horta-primary {
  min-width: 0;
  border: 0;
  border-radius: 999px;
  font-weight: var(--type-weight-strong);
  letter-spacing: 0;
}

.horta-tabs button {
  min-height: 38px;
  padding: 0 8px;
  color: rgba(23, 32, 22, .62);
  background: transparent;
  font-size: 12px;
}

.horta-tabs button.active {
  color: #fff;
  background: #243c21;
  box-shadow: 0 10px 20px rgba(36, 60, 33, .20);
}

.horta-section {
  border-radius: 22px;
  padding: 12px;
}

.horta-neem-card {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  border-radius: 20px;
  padding: 12px;
}

.horta-neem-card > span {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 16px;
  background: #dff2d0;
  color: #2d6a2f;
}

.horta-neem-card strong,
.horta-list b,
.horta-list strong {
  display: block;
  color: #152014;
  font-size: 16px;
  line-height: 1.15;
  font-weight: var(--type-weight-strong);
}

.horta-neem-card b {
  color: #2d6a2f;
  font-size: 15px;
  white-space: nowrap;
}

.horta-quick-actions,
.horta-varieties {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0;
}

.horta-quick-actions button,
.horta-varieties button {
  min-height: 38px;
  padding: 0 13px;
  background: #e7f2df;
  color: #243c21;
  font-size: 12px;
}

.horta-form,
.horta-price-card {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 10px;
}

.horta-form label,
.horta-price-card label {
  display: grid;
  min-width: 0;
  gap: 6px;
}

.horta-form label.wide {
  grid-column: 1 / -1;
}

.horta-form input,
.horta-form select,
.horta-price-card input,
.horta-price-card select {
  width: 100%;
  min-width: 0;
  min-height: 44px;
  border: 1px solid rgba(36, 60, 33, .12);
  border-radius: 16px;
  padding: 0 12px;
  background: #fff;
  color: #162114;
  font-size: 15px;
  font-weight: var(--type-weight-strong);
}

.horta-primary,
.horta-price-card button {
  grid-column: 1 / -1;
  min-height: 48px;
  background: #243c21;
  color: #fff;
  font-size: 14px;
  box-shadow: 0 12px 22px rgba(36, 60, 33, .18);
}

.horta-chart-block {
  margin-top: 12px;
  border-radius: 22px;
  padding: 12px;
}

.horta-chart-block header {
  margin-bottom: 8px;
}

.horta-empty-chart,
.horta-loading {
  min-height: 116px;
  display: grid;
  place-items: center;
  color: rgba(23, 32, 22, .54);
  text-align: center;
  font-size: 13px;
  font-weight: var(--type-weight-strong);
}

.horta-loading.error {
  color: #b42318;
}

.horta-line-card svg {
  width: 100%;
  height: auto;
  min-height: 160px;
}

.horta-line-card polyline {
  fill: none;
  stroke: var(--line);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 4;
}

.horta-grid-line {
  fill: none;
  stroke: rgba(36, 60, 33, .12);
  stroke-width: 1;
}

.horta-line-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.horta-line-legend span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: rgba(23, 32, 22, .62);
  font-size: 11px;
  font-weight: var(--type-weight-strong);
}

.horta-line-legend i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--line);
}

.horta-bars {
  display: grid;
  gap: 10px;
}

.horta-bar-row {
  display: grid;
  grid-template-columns: minmax(72px, 1fr) minmax(80px, 1.4fr) auto;
  gap: 8px;
  align-items: center;
}

.horta-bar-row span,
.horta-bar-row b {
  overflow: hidden;
  color: #162114;
  font-size: 12px;
  font-weight: var(--type-weight-strong);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.horta-bar-row i {
  overflow: hidden;
  height: 9px;
  border-radius: 999px;
  background: rgba(36, 60, 33, .10);
}

.horta-bar-row em {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #4f9c45, #c6f04f);
}

.horta-list {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.horta-list article {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 10px;
  border-radius: 18px;
  padding: 11px 12px;
}

.horta-list small,
.horta-list span {
  grid-column: 1 / -1;
}

.horta-list p {
  margin: 0;
  color: rgba(23, 32, 22, .54);
  text-align: center;
  font-size: 13px;
  font-weight: var(--type-weight-strong);
}

:root[data-theme="dark"] .horta-shell,
:root[data-theme="dark"] .horta-page {
  background: #121610;
  color: #f4f7ed;
}

:root[data-theme="dark"] .horta-page {
  background:
    linear-gradient(180deg, rgba(58, 90, 52, .74) 0 228px, transparent 228px),
    #121610;
}

:root[data-theme="dark"] .horta-summary article,
:root[data-theme="dark"] .horta-workspace,
:root[data-theme="dark"] .horta-section,
:root[data-theme="dark"] .horta-chart-block,
:root[data-theme="dark"] .horta-neem-card,
:root[data-theme="dark"] .horta-price-card,
:root[data-theme="dark"] .horta-list article {
  border-color: rgba(255, 255, 255, .08);
  background: rgba(28, 34, 26, .92);
  box-shadow: 0 16px 30px rgba(0, 0, 0, .24);
}

:root[data-theme="dark"] .horta-hero h1,
:root[data-theme="dark"] .horta-summary b,
:root[data-theme="dark"] .horta-neem-card strong,
:root[data-theme="dark"] .horta-list b,
:root[data-theme="dark"] .horta-list strong,
:root[data-theme="dark"] .horta-bar-row span,
:root[data-theme="dark"] .horta-bar-row b {
  color: #f4f7ed;
}

:root[data-theme="dark"] .horta-form input,
:root[data-theme="dark"] .horta-form select,
:root[data-theme="dark"] .horta-price-card input {
  border-color: rgba(255, 255, 255, .10);
  background: #11160f;
  color: #f4f7ed;
}
html.horta-active,
body.horta-active {
  min-height: 100%;
  overflow: hidden;
}

.horta-page {
  height: 100dvh !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  padding: max(14px, calc(env(safe-area-inset-top) + 8px)) 14px max(150px, calc(env(safe-area-inset-bottom) + 132px)) !important;
  background:
    linear-gradient(180deg, rgba(207, 234, 184, .95) 0 188px, transparent 188px),
    #f6f7f2 !important;
}

.horta-lead {
  align-items: center !important;
  padding: 7px 0 12px !important;
}

.horta-hero h1 {
  font-size: clamp(34px, 11vw, 46px) !important;
}

.horta-hero > span {
  width: 58px !important;
  height: 58px !important;
  border-radius: 22px !important;
  background: rgba(255, 255, 255, .72) !important;
  box-shadow: 0 12px 26px rgba(74, 97, 52, .14) !important;
}

.horta-berry-icon {
  width: 48px;
  height: 48px;
  filter: drop-shadow(0 6px 10px rgba(126, 28, 44, .16));
}

.horta-summary {
  gap: 8px !important;
  margin-bottom: 10px !important;
}

.horta-summary article {
  min-height: 74px;
  border-radius: 18px !important;
  padding: 12px 14px !important;
}

.horta-summary b {
  font-size: clamp(19px, 5.8vw, 25px) !important;
}

.horta-workspace {
  overflow: visible;
  border-radius: 22px !important;
  padding: 10px !important;
}

.horta-tabs {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  min-height: 42px !important;
  margin-bottom: 10px !important;
}

.horta-tabs button {
  min-height: 34px !important;
  padding: 0 4px !important;
  font-size: 11px !important;
}

.horta-section {
  border-radius: 20px !important;
  padding: 10px !important;
}

.horta-start-hint {
  margin: 0 0 10px;
  color: rgba(23, 32, 22, .62);
  font-size: 12px;
  line-height: 1.35;
  font-weight: var(--type-weight-strong);
}

.horta-neem-card {
  grid-template-columns: minmax(0, 1fr) auto !important;
  padding: 12px 14px !important;
}

.horta-neem-card > span {
  display: none !important;
}

.horta-form,
.horta-price-card {
  gap: 9px !important;
}

.horta-box-form {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

.horta-form input,
.horta-form select,
.horta-price-card input,
.horta-price-card select {
  min-height: 39px !important;
  border-radius: 15px !important;
  padding: 0 11px !important;
  font-size: 14px !important;
}

.horta-primary,
.horta-price-card button {
  min-height: 44px !important;
  font-size: 14px !important;
}

.horta-quick-actions {
  gap: 7px !important;
  margin: 10px 0 !important;
}

.horta-quick-actions button {
  min-height: 34px !important;
  padding: 0 12px !important;
}

.horta-list article {
  border-radius: 16px !important;
  padding: 10px 11px !important;
}

.horta-item-actions {
  display: flex;
  grid-column: 1 / -1;
  gap: 8px;
  padding-top: 5px;
}

.horta-item-actions button,
.horta-cancel {
  min-height: 34px;
  border: 1px solid rgba(44, 75, 42, .18);
  border-radius: 12px;
  padding: 0 12px;
  background: #fff;
  color: #294c2a;
  font: inherit;
  font-size: 12px;
  font-weight: var(--type-weight-strong);
}

.horta-item-actions .danger {
  border-color: rgba(178, 55, 49, .25);
  color: #aa3933;
}

.horta-cancel {
  grid-column: 1 / -1;
}

:root[data-theme="dark"] .horta-item-actions button,
:root[data-theme="dark"] .horta-cancel {
  border-color: rgba(255, 255, 255, .16);
  background: rgba(255, 255, 255, .06);
  color: #e6f3e1;
}

:root[data-theme="dark"] .horta-item-actions .danger {
  color: #ffaaa3;
}

.horta-chart-block {
  border-radius: 18px !important;
  padding: 10px !important;
}

@media (max-width: 390px) {
  .horta-page {
    padding-inline: 12px !important;
  }
  .horta-summary article {
    min-height: 68px;
    padding: 10px 12px !important;
  }
  .horta-tabs button {
    font-size: 10px !important;
  }
}
.horta-summary article {
  align-content: center !important;
  min-height: 84px !important;
  padding: 13px 14px 14px !important;
  overflow: visible !important;
}

.horta-summary b {
  line-height: 1.18 !important;
  padding-bottom: 2px !important;
  overflow: visible !important;
  text-overflow: clip !important;
}

@media (max-width: 390px) {
  .horta-summary article {
    min-height: 78px !important;
    padding: 11px 12px 12px !important;
  }
}
.horta-reminders-link {
  display: grid;
  grid-template-columns: 34px 1fr 12px;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin-bottom: 10px;
  padding: 12px 14px;
  border: 0;
  border-radius: 16px;
  background: color-mix(in srgb, var(--classic-accent, #c6f04f) 14%, var(--top, #fff));
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.horta-reminders-icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 12px;
  background: var(--top, #fff);
}

.horta-reminders-text {
  display: grid;
  gap: 2px;
  min-width: 0;
  text-align: left;
}

.horta-reminders-text b {
  font-size: 15px;
  font-weight: var(--type-weight-medium);
}

.horta-reminders-text small {
  font-size: 12px;
  font-weight: var(--type-weight-medium);
  color: var(--muted, rgba(0, 0, 0, .6));
}

.horta-reminders-chevron {
  font-size: 20px;
  line-height: 1;
  color: var(--muted, rgba(0, 0, 0, .45));
}

.horta-shell {
  background: #f5f5f5;
}
.horta-page {
  padding: max(8px, calc(env(safe-area-inset-top) + 4px)) 18px calc(var(--bottom-nav-height, 86px) + env(safe-area-inset-bottom) + 40px) !important;
  color: #050505;
  background: #f5f5f5 !important;
}

:root[data-theme="dark"] .horta-shell,
:root[data-theme="dark"] .horta-page {
  color: #f7f7f7;
  background: #111 !important;
}

.horta-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0 14px;
}

.horta-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: #050505;
  font-size: 24px;
  font-weight: var(--type-weight-strong);
  letter-spacing: -0.4px;
}
.horta-title-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #c6f04f;
  color: #16180f;
}

.horta-title-icon svg {
  width: 18px;
  height: 18px;
}

.horta-head-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}
.horta-round {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #f2f2f4;
  color: #1d1d1f;
  cursor: pointer;
}

.horta-round svg {
  width: 22px;
  height: 22px;
}

.horta-bell-dot {
  position: absolute;
  top: 9px;
  right: 10px;
  width: 9px;
  height: 9px;
  border: 2px solid #f2f2f4;
  border-radius: 50%;
  background: #ff5a3d;
}

:root[data-theme="dark"] .horta-title {
  color: #f7f7f7;
}

:root[data-theme="dark"] .horta-round {
  background: #202021;
  color: #f7f7f7;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
}

:root[data-theme="dark"] .horta-bell-dot {
  border-color: #202021;
}
.horta-overdue {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 12px;
  padding: 12px 14px;
  border-radius: 22px;
  background: #fdecea;
  color: #b3271a;
  font-size: 14px;
  font-weight: var(--type-weight-medium);
  line-height: 1.35;
  box-shadow: 0 16px 36px rgba(179, 39, 26, .10);
}

.horta-overdue-dot {
  flex: 0 0 8px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #e5372a;
}

.horta-overdue span {
  flex: 1 1 auto;
}

.horta-overdue-action {
  flex: 0 0 auto;
  min-height: 32px;
  padding: 0 14px;
  border: 0;
  border-radius: 999px;
  background: #e5372a;
  color: #fff;
  font-size: 13px;
  font-weight: var(--type-weight-strong);
  cursor: pointer;
}

:root[data-theme="dark"] .horta-overdue {
  background: rgba(229, 55, 42, .16);
  color: #ff9384;
  box-shadow: inset 0 0 0 1px rgba(229, 55, 42, .28);
}
.horta-tabs {
  grid-template-columns: 1fr 1fr !important;
  gap: 4px !important;
  margin-bottom: 14px !important;
  padding: 4px !important;
  border-radius: 999px !important;
  background: #ececee !important;
  box-shadow: none !important;
}

.horta-tabs button {
  min-height: 34px !important;
  border-radius: 999px !important;
  background: transparent !important;
  color: rgba(5, 5, 5, .56) !important;
  font-size: 14px !important;
  font-weight: var(--type-weight-strong) !important;
  box-shadow: none !important;
}

.horta-tabs button.active {
  background: #fff !important;
  color: #050505 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .10) !important;
}

:root[data-theme="dark"] .horta-tabs {
  background: #1b1b1c !important;
}

:root[data-theme="dark"] .horta-tabs button {
  color: rgba(247, 247, 247, .56) !important;
}

:root[data-theme="dark"] .horta-tabs button.active {
  background: #2c2c2e !important;
  color: #f7f7f7 !important;
  box-shadow: none !important;
}
.horta-card.horta-today {
  margin: 0 0 14px;
  padding: 16px 16px 14px;
  border-radius: 24px;
  background: #101112;
  color: #fff;
  box-shadow: 0 22px 44px rgba(0, 0, 0, .2), inset 0 1px 0 rgba(255, 255, 255, .07);
}
:root[data-theme="dark"] .horta-card.horta-today {
  background: #101112;
  box-shadow: 0 20px 44px rgba(0, 0, 0, .36), inset 0 1px 0 rgba(255, 255, 255, .055);
}

.horta-card.horta-today .horta-card-title {
  margin: 0 0 14px;
  color: rgba(248, 249, 251, .64);
  font-size: 12px;
  font-weight: var(--type-weight-medium);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.horta-counters {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}

.horta-counter {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.horta-counter-top {
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.horta-counter b {
  color: #fff;
  font-size: 38px;
  font-weight: var(--type-weight-medium);
  line-height: 1;
  letter-spacing: -1px;
}
.horta-counter b.late {
  color: #ff7a66;
}
.horta-counter b.never {
  color: rgba(255, 255, 255, .30);
  font-size: 30px;
}

.horta-counter em {
  color: rgba(248, 249, 251, .56);
  font-size: 13px;
  font-style: normal;
  font-weight: var(--type-weight-medium);
}

.horta-counter small {
  overflow: hidden;
  color: #fff;
  font-size: 14px;
  font-weight: var(--type-weight-medium);
  white-space: nowrap;
  text-overflow: ellipsis;
}
.horta-counter-bar {
  position: relative;
  display: block;
  height: 4px;
  margin-top: 2px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .14);
}

.horta-counter-bar::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--fill, 0%);
  border-radius: inherit;
  background: #c6f04f;
}

.horta-counter-bar[data-late="yes"]::after {
  background: #ff7a66;
}

.horta-quick {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}
.horta-quick-btn {
  flex: 1 1 auto;
  min-height: 40px;
  padding: 0 16px;
  border: 0;
  border-radius: 999px;
  background: #c6f04f;
  color: #16180f;
  font-size: 15px;
  font-weight: var(--type-weight-strong);
  cursor: pointer;
}

.horta-quick-btn[disabled] {
  opacity: .5;
}
.horta-quick-btn.ghost {
  flex: 0 0 auto;
  background: rgba(255, 255, 255, .10);
  color: #fff;
  font-weight: var(--type-weight-medium);
}

.horta-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin: 0 0 12px;
  padding: 14px 16px;
  border: 0;
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 16px 36px rgba(0, 0, 0, .09);
  text-align: left;
  cursor: pointer;
}

.horta-row-text {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.horta-row-text b {
  color: #050505;
  font-size: 15px;
  font-weight: var(--type-weight-strong);
}

.horta-row-text small {
  color: rgba(5, 5, 5, .52);
  font-size: 13px;
  font-weight: var(--type-weight-medium);
}

.horta-row-chevron {
  color: rgba(5, 5, 5, .28);
  font-size: 22px;
  line-height: 1;
}

:root[data-theme="dark"] .horta-row {
  background: #202021;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
}

:root[data-theme="dark"] .horta-row-text b {
  color: #f7f7f7;
}

:root[data-theme="dark"] .horta-row-text small,
:root[data-theme="dark"] .horta-row-chevron {
  color: rgba(247, 247, 247, .52);
}

.horta-card {
  margin: 0 0 12px;
  padding: 14px 16px;
  border: 0;
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 16px 36px rgba(0, 0, 0, .09);
}

.horta-card-title {
  margin: 0 0 10px;
  color: rgba(5, 5, 5, .48);
  font-size: 12px;
  font-weight: var(--type-weight-medium);
  letter-spacing: .06em;
  text-transform: uppercase;
}

:root[data-theme="dark"] .horta-card {
  background: #202021;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
}

:root[data-theme="dark"] .horta-card-title {
  color: rgba(247, 247, 247, .48);
}
.horta-totals {
  margin: 0 0 12px;
  padding: 0 6px;
  color: rgba(5, 5, 5, .48);
  font-size: 13px;
  font-weight: var(--type-weight-medium);
  line-height: 1.45;
}

:root[data-theme="dark"] .horta-totals {
  color: rgba(247, 247, 247, .48);
}

.horta-journal {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.horta-journal-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.horta-journal-row b {
  color: #050505;
  font-size: 15px;
  font-weight: var(--type-weight-medium);
}

.horta-journal-row small {
  color: rgba(5, 5, 5, .48);
  font-size: 13px;
  font-weight: var(--type-weight-medium);
}

:root[data-theme="dark"] .horta-journal-row b {
  color: #f7f7f7;
}

:root[data-theme="dark"] .horta-journal-row small {
  color: rgba(247, 247, 247, .48);
}

.horta-empty-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: 18px 16px;
}

.horta-empty-card b {
  color: #050505;
  font-size: 17px;
  font-weight: var(--type-weight-strong);
}

.horta-empty-card small {
  color: rgba(5, 5, 5, .52);
  font-size: 14px;
  font-weight: var(--type-weight-medium);
}
.horta-empty-card .horta-primary {
  margin-top: 10px;
  min-height: 44px;
  padding: 0 20px;
  border-radius: 999px;
  background: #c6f04f !important;
  color: #16180f !important;
  font-size: 15px;
  font-weight: var(--type-weight-strong);
}

:root[data-theme="dark"] .horta-empty-card b {
  color: #f7f7f7;
}

:root[data-theme="dark"] .horta-empty-card small {
  color: rgba(247, 247, 247, .52);
}

.horta-sheet-backdrop {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: flex-end;
  background: rgba(0, 0, 0, .46);
}

.horta-sheet {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-height: 88dvh;
  border-radius: 24px 24px 0 0;
  background: #f5f5f5;
}

.horta-sheet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 18px 10px;
}

.horta-sheet-head b {
  color: #050505;
  font-size: 17px;
  font-weight: var(--type-weight-strong);
}

.horta-sheet-close {
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #ececee;
  color: #1d1d1f;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}
.horta-sheet-body {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0 14px calc(env(safe-area-inset-bottom) + 20px);
}

.horta-sheet-body .horta-section {
  margin-bottom: 12px;
  border-radius: 22px;
}
.horta-sheet-body .horta-primary {
  background: #c6f04f !important;
  color: #16180f !important;
  border-radius: 999px !important;
}

:root[data-theme="dark"] .horta-sheet {
  background: #111;
}

:root[data-theme="dark"] .horta-sheet-head b {
  color: #f7f7f7;
}

:root[data-theme="dark"] .horta-sheet-close {
  background: #2c2c2e;
  color: #f7f7f7;
}

.horta-sheet-body .horta-section,
.horta-sheet-body .horta-chart-block,
.horta-sheet-body .horta-price-card,
.horta-sheet-body .horta-list article {
  border: 0;
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 16px 36px rgba(0, 0, 0, .09);
}

.horta-sheet-body .horta-list article {
  box-shadow: none;
  background: #f5f5f5;
}

.horta-sheet-body label span,
.horta-sheet-body .horta-start-hint,
.horta-sheet-body .horta-list span,
.horta-sheet-body .horta-list small,
.horta-sheet-body .horta-list p,
.horta-sheet-body .horta-chart-block header h2 {
  color: rgba(5, 5, 5, .54);
}

.horta-sheet-body .horta-list b,
.horta-sheet-body .horta-list strong {
  color: #050505;
}

.horta-sheet-body input,
.horta-sheet-body select {
  border: 1px solid rgba(5, 5, 5, .12);
  border-radius: 14px;
  background: #fff;
  color: #050505;
}

:root[data-theme="dark"] .horta-sheet-body .horta-section,
:root[data-theme="dark"] .horta-sheet-body .horta-chart-block,
:root[data-theme="dark"] .horta-sheet-body .horta-price-card {
  background: #202021;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
}

:root[data-theme="dark"] .horta-sheet-body .horta-list article {
  background: #171718;
  box-shadow: none;
}

:root[data-theme="dark"] .horta-sheet-body label span,
:root[data-theme="dark"] .horta-sheet-body .horta-start-hint,
:root[data-theme="dark"] .horta-sheet-body .horta-list span,
:root[data-theme="dark"] .horta-sheet-body .horta-list small,
:root[data-theme="dark"] .horta-sheet-body .horta-list p,
:root[data-theme="dark"] .horta-sheet-body .horta-chart-block header h2 {
  color: rgba(247, 247, 247, .54);
}

:root[data-theme="dark"] .horta-sheet-body .horta-list b,
:root[data-theme="dark"] .horta-sheet-body .horta-list strong {
  color: #f7f7f7;
}

:root[data-theme="dark"] .horta-sheet-body input,
:root[data-theme="dark"] .horta-sheet-body select {
  border-color: rgba(255, 255, 255, .12);
  background: #111;
  color: #f7f7f7;
}
.horta-sheet-body .horta-cancel,
.horta-sheet-body .horta-varieties button {
  border-radius: 999px;
}

.horta-sheet-body .horta-price-card button {
  border-radius: 999px !important;
  background: #ececee !important;
  color: #1d1d1f !important;
}

:root[data-theme="dark"] .horta-sheet-body .horta-price-card button {
  background: #2c2c2e !important;
  color: #f7f7f7 !important;
}

.horta-card.horta-today .horta-quick-btn,
.horta-card.horta-today .horta-quick-btn.ghost {
  border: 1.5px solid #7cb518;
  background: #0b0b0c;
  color: #fff;
  font-weight: var(--type-weight-medium);
}

.horta-card.horta-today .horta-quick-btn.ghost {
  flex: 1 1 auto;
}

.horta-card.horta-today .horta-quick-btn:active {
  background: #17181a;
}

.horta-card-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.horta-card-actions {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

.horta-card-gear {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: currentColor;
  opacity: .72;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.horta-card-gear:active {
  opacity: 1;
}

.horta-card-gear svg {
  width: 19px;
  height: 19px;
}

.horta-card-gear[disabled] {
  opacity: .4;
}

.horta-journal-row.editing {
  display: flex;
  align-items: center;
  gap: 10px;
}

.horta-journal-row.editing b {
  flex: 1 1 auto;
  min-width: 0;
}

.horta-journal-actions {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

.horta-journal-action {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #f2f2f4;
  color: #1d1d1f;
  cursor: pointer;
}

.horta-journal-action svg {
  width: 17px;
  height: 17px;
}
.horta-journal-action.danger {
  color: #c0392b;
}

:root[data-theme="dark"] .horta-journal-action {
  background: #2c2c2e;
  color: #f7f7f7;
}

:root[data-theme="dark"] .horta-journal-action.danger {
  color: #ff6b5e;
}
.horta-journal-date {
  flex: 0 0 auto;
  min-height: 32px;
  padding: 0 8px;
  border: 1.5px solid #7cb518;
  border-radius: 10px;
  background: transparent;
  color: inherit;
  font-size: 13.5px;
  font-weight: var(--type-weight-medium);
}

.horta-care-backdrop {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: rgba(0, 0, 0, .42);
}

.horta-care-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  max-width: 460px;
  max-height: min(72svh, 560px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 16px 16px calc(var(--bottom-nav-height, 86px) + env(safe-area-inset-bottom, 0px) + 18px);
  border-radius: 24px 24px 0 0;
  background: #fff;
  color: #050505;
}

:root[data-theme="dark"] .horta-care-card {
  background: #1b1b1c;
  color: #f7f7f7;
}

.horta-care-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.horta-care-head b {
  font-size: 17px;
  font-weight: var(--type-weight-strong);
}

.horta-care-close {
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #ececee;
  color: #1d1d1f;
  font-size: 19px;
  line-height: 1;
  cursor: pointer;
}

:root[data-theme="dark"] .horta-care-close {
  background: #2c2c2e;
  color: #f7f7f7;
}

.horta-care-hint {
  margin: 0 0 2px;
  color: rgba(5, 5, 5, .55);
  font-size: 13px;
  font-weight: var(--type-weight-medium);
}

:root[data-theme="dark"] .horta-care-hint {
  color: rgba(247, 247, 247, .55);
}

.horta-care-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 52px;
}

.horta-care-task {
  overflow: hidden;
  font-size: 15px;
  font-weight: var(--type-weight-medium);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.horta-care-step {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 10px;
}

.horta-care-step b {
  display: inline-flex;
  align-items: baseline;
  gap: 3px;
  min-width: 62px;
  justify-content: center;
  font-size: 19px;
  font-weight: var(--type-weight-strong);
}

.horta-care-step b em {
  font-size: 12px;
  font-style: normal;
  font-weight: var(--type-weight-medium);
  opacity: .55;
}

.horta-care-step-btn {
  width: 38px;
  height: 38px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #f2f2f4;
  color: #1d1d1f;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}

:root[data-theme="dark"] .horta-care-step-btn {
  background: #2c2c2e;
  color: #f7f7f7;
}

.horta-care-step-btn[disabled] {
  opacity: .4;
}
.horta-title-icon img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.horta-page {
  background: #fff;
}

:root[data-theme="dark"] .horta-page {
  background: #0b0b0c;
}

.horta-page .horta-head {
  padding-bottom: 2px;
}

.horta-page .horta-round {
  border: 1px solid #ededee;
  background: #fff;
  box-shadow: none;
}

:root[data-theme="dark"] .horta-page .horta-round {
  border-color: rgba(255, 255, 255, .1);
  background: #161617;
}

.horta-topline {
  margin: 6px 0 16px;
  text-align: center;
}

.horta-topline-eyebrow {
  margin: 0 0 8px;
  color: #9b9b9f;
  font-size: 11px;
  font-weight: var(--type-weight-medium);
  letter-spacing: .14em;
  text-transform: uppercase;
}

.horta-topline-title {
  margin: 0;
  color: #0b0b0c;
  font-size: 29px;
  font-weight: var(--type-weight-strong);
  line-height: 1.14;
  letter-spacing: -0.02em;
}
.horta-topline-title span {
  display: block;
  color: #7cb518;
}

.horta-topline-title span.late {
  color: #e5484d;
}

:root[data-theme="dark"] .horta-page .horta-topline-title {
  color: #f7f7f7;
}

.horta-topline-sub {
  margin: 10px 0 0;
  color: #86868b;
  font-size: 13.5px;
  font-weight: var(--type-weight-medium);
  line-height: 1.45;
}

.horta-page .horta-tabs {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin: 0 0 16px;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
}

.horta-page .horta-tabs button {
  flex: 0 0 auto;
  min-height: 38px;
  padding: 0 20px;
  border: 1.5px solid #e6e6e8;
  border-radius: 999px;
  background: #fff;
  color: #86868b;
  font-size: 14px;
  font-weight: var(--type-weight-medium);
}

.horta-page .horta-tabs button.active {
  border-color: #7cb518;
  background: #fff;
  color: #7cb518;
  box-shadow: none;
}

:root[data-theme="dark"] .horta-page .horta-tabs button {
  border-color: rgba(255, 255, 255, .12);
  background: #161617;
  color: rgba(247, 247, 247, .6);
}

:root[data-theme="dark"] .horta-page .horta-tabs button.active {
  border-color: #7cb518;
  background: #161617;
  color: #8fd12a;
}

.horta-page .horta-card,
.horta-page .horta-card.horta-today {
  border: 1px solid #ededee;
  border-radius: 22px;
  background: #fff;
  box-shadow: none;
  color: #0b0b0c;
}

:root[data-theme="dark"] .horta-page .horta-card,
:root[data-theme="dark"] .horta-page .horta-card.horta-today {
  border-color: rgba(255, 255, 255, .09);
  background: #161617;
  color: #f7f7f7;
}

.horta-page .horta-card-title {
  color: #9b9b9f;
  font-size: 11px;
  font-weight: var(--type-weight-medium);
  letter-spacing: .12em;
  text-transform: uppercase;
}

.horta-page .horta-counters {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  margin-top: 4px;
}
.horta-page .horta-counter + .horta-counter {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid #f1f1f2;
}

:root[data-theme="dark"] .horta-page .horta-counter + .horta-counter {
  border-top-color: rgba(255, 255, 255, .07);
}

.horta-page .horta-counter small {
  display: block;
  margin-bottom: 2px;
  color: #9b9b9f;
  font-size: 10.5px;
  font-weight: var(--type-weight-medium);
  letter-spacing: .12em;
  text-transform: uppercase;
}

.horta-page .horta-counter-top {
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.horta-page .horta-counter-top b {
  color: #0b0b0c;
  font-size: 40px;
  font-weight: var(--type-weight-medium);
  line-height: 1.05;
  letter-spacing: -0.03em;
}

:root[data-theme="dark"] .horta-page .horta-counter-top b {
  color: #f7f7f7;
}

.horta-counter-top b.late {
  color: #e5484d;
}

.horta-counter-top b.never {
  color: #c7c7cc;
}

.horta-page .horta-counter-top em {
  color: #86868b;
  font-size: 13px;
  font-style: normal;
  font-weight: var(--type-weight-medium);
}

.horta-page .horta-counter-bar {
  display: block;
  height: 4px;
  margin: 10px 0 0;
  border-radius: 999px;
  background: #f0f0f2;
}

:root[data-theme="dark"] .horta-page .horta-counter-bar {
  background: rgba(255, 255, 255, .1);
}
.horta-page .horta-counter-bar::after {
  background: #7cb518;
}

.horta-page .horta-counter-bar[data-late="yes"]::after {
  background: #e5484d;
}

.horta-counter-note {
  display: block;
  margin-top: 7px;
  color: #86868b;
  font-size: 12.5px;
  font-weight: var(--type-weight-medium);
}

.horta-page .horta-quick {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0 16px;
}

.horta-card.horta-today .horta-quick-btn,
.horta-card.horta-today .horta-quick-btn.ghost,
.horta-quick-btn,
.horta-quick-btn.ghost {
  flex: 1 1 calc(50% - 4px);
  min-height: 50px;
  padding: 0 18px;
  border: 1.5px solid #7cb518;
  border-radius: 999px;
  background: #0b0b0c;
  color: #fff;
  font-size: 14.5px;
  font-weight: var(--type-weight-medium);
}
.horta-quick-btn.lead {
  flex: 1 1 100%;
  min-height: 54px;
  font-size: 15.5px;
}

.horta-quick-btn[disabled] {
  opacity: .45;
}

.horta-page .horta-row {
  border: 1px solid #ededee;
  border-radius: 20px;
  background: #fff;
  box-shadow: none;
}

:root[data-theme="dark"] .horta-page .horta-row {
  border-color: rgba(255, 255, 255, .09);
  background: #161617;
}

.horta-page .horta-totals {
  margin: 0 2px 14px;
  color: #86868b;
  font-size: 13px;
  font-weight: var(--type-weight-medium);
  text-align: center;
}

.horta-page .horta-journal-row {
  padding: 12px 0;
  border-bottom: 1px solid #f1f1f2;
}

.horta-journal-row:last-child {
  border-bottom: 0;
}

:root[data-theme="dark"] .horta-page .horta-journal-row {
  border-bottom-color: rgba(255, 255, 255, .07);
}

.horta-journal-row b {
  font-size: 15px;
  font-weight: var(--type-weight-medium);
}

.horta-journal-row small {
  color: #86868b;
  font-size: 13px;
  font-weight: var(--type-weight-medium);
}

.horta-page .horta-overdue {
  border: 1px solid rgba(229, 72, 77, .35);
  border-radius: 16px;
  background: rgba(229, 72, 77, .06);
  color: #c0392b;
}

.horta-overdue-action {
  border-radius: 999px;
  background: #0b0b0c;
  color: #fff;
}

.horta-page .horta-tabs {
  padding: 0 !important;
  background: none !important;
}

.horta-page .horta-tabs button {
  font-size: 14px !important;
  font-weight: var(--type-weight-medium) !important;
  letter-spacing: 0 !important;
}

.horta-page .horta-tabs button.active {
  color: #7cb518 !important;
  background: #fff !important;
}

:root[data-theme="dark"] .horta-page .horta-tabs button.active {
  color: #8fd12a !important;
  background: #161617 !important;
}
.horta-page .horta-counter small,
.horta-page .horta-card-title {
  color: #86868b !important;
}

:root[data-theme="dark"] .horta-page .horta-counter small,
:root[data-theme="dark"] .horta-page .horta-card-title {
  color: rgba(247, 247, 247, .55) !important;
}
.horta-page .horta-card {
  position: relative;
}

.horta-page .horta-card-gear-float {
  position: absolute;
  top: 12px;
  right: 12px;
  color: #86868b;
  opacity: 1;
}

:root[data-theme="dark"] .horta-page .horta-card-gear-float {
  color: rgba(247, 247, 247, .6);
}
.horta-page .horta-card.horta-today .horta-counters {
  padding-right: 34px;
}
.horta-page .horta-topline-sub span {
  display: block;
}
.horta-page .horta-counter-bar::after {
  background: #7cb518 !important;
}

.horta-page .horta-counter-bar[data-late="yes"]::after {
  background: #e5484d !important;
}

.horta-page .horta-money {
  margin-bottom: 12px;
}

.horta-page .horta-money-list {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.horta-page .horta-money-list li {
  display: flex;
  align-items: baseline;
  gap: 10px;
  justify-content: space-between;
}

.horta-page .horta-money-list li::before {
  flex: 0 0 auto;
  align-self: center;
  width: 14px;
  height: 14px;
  background: #7cb518;
  content: "";
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5 10 17.5 19 7'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5 10 17.5 19 7'/%3E%3C/svg%3E") center / contain no-repeat;
}

.horta-page .horta-money-list span {
  flex: 1 1 auto;
  color: #86868b;
  font-size: 13.5px;
  font-weight: var(--type-weight-medium);
}

.horta-page .horta-money-list b {
  flex: 0 0 auto;
  color: #0b0b0c;
  font-size: 15px;
  font-weight: var(--type-weight-strong);
}

:root[data-theme="dark"] .horta-page .horta-money-list b {
  color: #f7f7f7;
}

:root[data-theme="dark"] .horta-page .horta-money-list span {
  color: rgba(247, 247, 247, .6);
}
:root[data-theme="dark"] .horta-page .horta-tabs {
  background: none !important;
  padding: 0 !important;
}

:root[data-theme="dark"] .horta-page .horta-counter-top b.late {
  color: #ff6b5e;
}

:root[data-theme="dark"] .horta-page .horta-counter-top b.never {
  color: rgba(247, 247, 247, .35);
}
.horta-page .horta-topline-title span.muted {
  color: #9b9b9f;
}

:root[data-theme="dark"] .horta-page .horta-topline-title span.muted {
  color: rgba(247, 247, 247, .45);
}
.horta-page .horta-primary,
.horta-page .horta-empty-card .horta-primary {
  background: #0b0b0c !important;
  color: #fff !important;
}

.horta-page .horta-primary {
  min-height: 48px;
  padding: 0 22px;
  border: 1.5px solid #7cb518;
  border-radius: 999px;
  background: #0b0b0c;
  color: #fff;
  font-size: 14.5px;
  font-weight: var(--type-weight-medium);
}
.horta-page .horta-counter-top b.never {
  font-size: 26px;
}
.horta-page .horta-tabs {
  margin: 2px 0 14px;
}
.horta-page .horta-counters {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 0;
}
.horta-page .horta-counter + .horta-counter {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.horta-page .horta-counter {
  min-width: 0;
  padding: 12px 12px 13px;
  border: 1px solid #ededee;
  border-radius: 16px;
}

:root[data-theme="dark"] .horta-page .horta-counter {
  border-color: rgba(255, 255, 255, .09);
}

.horta-page .horta-counter small {
  overflow: hidden;
  margin-bottom: 6px;
  font-size: 10px;
  letter-spacing: .1em;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.horta-page .horta-counter-top b {
  font-size: 15px;
  font-weight: var(--type-weight-medium);
  line-height: 1.25;
  letter-spacing: -0.01em;
}

.horta-page .horta-counter-top b.never {
  font-size: 13.5px;
  font-weight: var(--type-weight-medium);
  color: #9b9b9f;
}

.horta-page .horta-counter-bar {
  margin-top: 9px;
}
.horta-page .horta-card.horta-today {
  padding: 14px;
}

.horta-page .horta-card.horta-today .horta-counters {
  padding-right: 30px;
}
.horta-page .horta-card.horta-today .horta-counters {
  padding-right: 0;
}

.horta-page .horta-card.horta-today .horta-card-gear-float {
  top: 8px;
  right: 8px;
}
.horta-page .horta-card.horta-today .horta-counter:last-child {
  padding-right: 30px;
}

.horta-page .horta-counter-top b {
  font-size: 14px;
}

.horta-page .horta-card.horta-today {
  padding: 10px 14px 14px;
}

.horta-page .horta-card.horta-today .horta-card-gear-float {
  position: static;
  display: block;
  margin: 0 -6px 2px auto;
}

.horta-page .horta-card.horta-today .horta-counter:last-child,
.horta-page .horta-card.horta-today .horta-counters {
  padding-right: 0;
}
.horta-page .horta-counter {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.horta-page .horta-counter small {
  min-height: 13px;
}

.horta-page .horta-counter-top {
  min-height: 36px;
  align-items: flex-start;
}

.horta-page .horta-counter-bar {
  margin-top: auto;
  margin-bottom: 0;
}

.horta-page .horta-form,
.horta-page .horta-price-card {
  gap: 12px 10px !important;
}

.horta-page .horta-form input,
.horta-page .horta-form select,
.horta-page .horta-price-card input,
.horta-page .horta-price-card select {
  border: 1px solid #e2e2e4 !important;
  background: #fafafa !important;
}

:root[data-theme="dark"] .horta-page .horta-form input,
:root[data-theme="dark"] .horta-page .horta-form select,
:root[data-theme="dark"] .horta-page .horta-price-card input,
:root[data-theme="dark"] .horta-page .horta-price-card select {
  border-color: rgba(255, 255, 255, .12) !important;
  background: #202021 !important;
}
.horta-page .horta-form label > span,
.horta-page .horta-price-card label > span {
  color: #86868b;
  font-size: 10.5px;
  font-weight: var(--type-weight-medium);
  letter-spacing: .1em;
  text-transform: uppercase;
}

.horta-page .horta-tabs button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 132px;
  padding: 0 18px;
  line-height: 1;
}

.horta-schedule {
  display: grid;
  gap: 0;
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
}

.horta-schedule-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 0;
  border-bottom: 1px solid #f1f1f2;
}

.horta-schedule-row:last-child {
  border-bottom: 0;
}

:root[data-theme="dark"] .horta-schedule-row {
  border-bottom-color: rgba(255, 255, 255, .07);
}

.horta-schedule-when {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.horta-schedule-when b {
  font-size: 15px;
  font-weight: var(--type-weight-strong);
  text-transform: capitalize;
}

.horta-schedule-when small {
  color: #86868b;
  font-size: 12px;
  font-weight: var(--type-weight-medium);
}

.horta-schedule-task {
  flex: 0 0 auto;
  color: #86868b;
  font-size: 13px;
  font-weight: var(--type-weight-medium);
}
.horta-schedule-row.late b,
.horta-schedule-row.late small {
  color: #e5484d;
}

.horta-schedule-row.never b {
  color: #c7c7cc;
}

.horta-schedule-empty {
  margin: 6px 0 0;
  color: #86868b;
  font-size: 13.5px;
  font-weight: var(--type-weight-medium);
}
.horta-page {
  overscroll-behavior-y: none !important;
}
.horta-page .horta-quick {
  flex-wrap: nowrap;
}

.horta-card.horta-today .horta-quick-btn,
.horta-card.horta-today .horta-quick-btn.ghost,
.horta-page .horta-quick-btn,
.horta-page .horta-quick-btn.ghost,
.horta-page .horta-quick-btn.lead {
  flex: 1 1 0;
  min-width: 0;
  min-height: 50px;
  padding: 0 10px;
  overflow: hidden;
  font-size: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.horta-page .horta-card.horta-today .horta-counter:last-child {
  padding-right: 12px;
}
.horta-page .horta-counter-top {
  height: 34px;
  min-height: 34px;
  overflow: hidden;
}
.horta-page .horta-form input[type="date"],
.horta-page .horta-form select,
.horta-page .horta-price-card input,
.horta-page .horta-price-card select {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  min-width: 0;
  text-align: left;
}
.horta-page .horta-form select {
  padding-right: 30px;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%239b9b9f' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
}
.offline-bar {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 210;
  box-sizing: border-box;
  width: min(440px, 100vw);
  padding: max(6px, calc(env(safe-area-inset-top, 0px) + 5px)) 14px 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  pointer-events: none;
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.25;
  color: var(--text);
  background: var(--panel);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .12);
}
.offline-bar-dot {
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--amber);
}

.offline-bar-title {
  font-weight: var(--type-weight-strong);
}

.offline-bar-when {
  color: var(--muted);
  font-weight: var(--type-weight-medium);
}
html.routine-active,
body.routine-active {
  width: 100%;
  max-width: 100vw;
  height: 100%;
  overflow: hidden;
  overflow-x: hidden;
  overscroll-behavior: none;
  background: #0a0b0d;
}

.app-shell.routine-shell {
  width: min(100%, 440px) !important;
  height: 100dvh !important;
  min-height: 100dvh !important;
  padding: var(--training-top-pad) 0 0 !important;
  overflow: hidden !important;
  background: #0a0b0d !important;
  color: #101113;
  font-family: var(--font-sans);
}

.routine-page {
  box-sizing: border-box;
  height: calc(100dvh - var(--training-top-pad));
  min-height: calc(100dvh - var(--training-top-pad));
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  overflow-anchor: none;
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
  padding: 0 0 calc(var(--bottom-nav-height, 86px) + env(safe-area-inset-bottom, 0px) + 22px);
  background: #f5f6f1;
  color: #101113;
  letter-spacing: 0;
}

.routine-hero {
  padding: calc(env(safe-area-inset-top, 0px) + 16px) 18px 24px;
  border-radius: 0 0 34px 34px;
  background: #131313;
  color: #fff;
}

.routine-hero-top {
  display: grid;
  grid-template-columns: 42px 1fr 42px;
  align-items: center;
  gap: 10px;
}

.routine-hero-top button {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(255,255,255,.08);
  color: #fff;
}

.routine-hero-top div {
  min-width: 0;
  text-align: center;
}

.routine-hero-top p,
.routine-hero-meta,
.routine-card-top p,
.routine-history-card p {
  margin: 0;
  color: rgba(255,255,255,.58);
  font-size: 12px;
  font-weight: var(--type-weight-medium);
}

.routine-hero-top h1 {
  margin: 2px 0 0;
  font-size: 31px;
  line-height: 1;
  font-weight: var(--type-weight-strong);
}

.routine-hero-progress {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px 12px;
  margin-top: 24px;
  align-items: center;
}

.routine-hero-progress strong {
  font-size: 18px;
  font-weight: var(--type-weight-strong);
}

.routine-hero-progress span {
  color: #c6f04f;
  font-weight: var(--type-weight-strong);
}

.routine-hero-progress i,
.routine-card-progress span {
  grid-column: 1 / -1;
  display: block;
  height: 9px;
  overflow: hidden;
  border-radius: 99px;
  background: rgba(255,255,255,.12);
}

.routine-hero-progress em,
.routine-card-progress i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: #c6f04f;
}

.routine-hero-meta {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 11px;
}

.routine-workspace {
  padding: 14px 16px 0;
}

.routine-tabs {
  position: sticky;
  top: 8px;
  z-index: 5;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  margin: 0 0 16px;
  padding: 4px;
  border: 1px solid rgba(17,17,17,.06);
  border-radius: 20px;
  background: rgba(255,255,255,.88);
  box-shadow: 0 12px 30px rgba(15,23,42,.08);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.routine-tabs button {
  min-width: 0;
  min-height: 38px;
  border-radius: 16px;
  background: transparent;
  color: #707276;
  font-size: 13px;
  font-weight: var(--type-weight-strong);
}

.routine-tabs button.active {
  background: #101113;
  color: #fff;
}

.routine-section {
  margin: 0 0 16px;
}

.routine-section > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 9px;
}

.routine-section h2 {
  margin: 0;
  color: #171719;
  font-size: 17px;
  line-height: 1.2;
  font-weight: var(--type-weight-strong);
}

.routine-section header > span {
  display: grid;
  place-items: center;
  min-width: 26px;
  height: 26px;
  border-radius: 13px;
  background: #101113;
  color: #c6f04f;
  font-size: 12px;
  font-weight: var(--type-weight-strong);
}

.routine-list,
.routine-history-list {
  display: grid;
  gap: 10px;
}

.routine-card,
.routine-history-card,
.routine-empty {
  border: 1px solid rgba(17,17,17,.07);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 12px 30px rgba(15,23,42,.07);
}

.routine-card {
  padding: 14px;
}

.routine-swipe {
  border-radius: 18px;
}

.routine-swipe.revealed .routine-swipe-row {
  transform: translateX(-78px);
}

.routine-swipe .routine-card {
  height: 100%;
}

.routine-swipe-delete {
  right: 12px;
  width: 54px;
  height: 54px;
  border-radius: 18px;
  background: #ef4444;
  box-shadow: inset 0 -1px 0 rgba(0,0,0,.12), 0 12px 24px rgba(239,68,68,.2);
}

.routine-swipe-delete svg {
  width: 21px;
  height: 21px;
}

.routine-card-top {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
}

.routine-card-icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 15px;
  background: color-mix(in srgb, var(--routine-color, #c6f04f) 34%, #fff);
  color: #111;
}

.routine-card-top h3,
.routine-history-card h3 {
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
  color: #111;
  font-size: 16px;
  line-height: 1.18;
  font-weight: var(--type-weight-strong);
}

.routine-card-top p,
.routine-history-card p {
  margin-top: 4px;
  color: #74777a;
}

.routine-card-top strong {
  align-self: start;
  padding: 6px 9px;
  border-radius: 999px;
  background: #eff2e6;
  color: #3f6a13;
  font-size: 11px;
  font-weight: var(--type-weight-strong);
}

.routine-card.status-skipped .routine-card-top strong,
.routine-card.status-missed .routine-card-top strong,
.routine-card.status-cancelled .routine-card-top strong {
  background: #f2eeee;
  color: #8b3f3f;
}

.routine-card.status-partial .routine-card-top strong {
  background: #fff3da;
  color: #8a5a00;
}

.routine-card-description {
  margin: 11px 0 0;
  color: #4f5356;
  font-size: 13px;
  line-height: 1.35;
}

.routine-card-progress {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  margin-top: 13px;
}

.routine-card-progress span {
  grid-column: auto;
  height: 8px;
  background: #ecefec;
}

.routine-card-progress i {
  background: var(--routine-color, #c6f04f);
}

.routine-card-progress b {
  color: #18191b;
  font-size: 12px;
  font-weight: var(--type-weight-strong);
  white-space: nowrap;
}

.routine-quick-row,
.routine-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.routine-actions button,
.routine-quick-row button,
.habits-head button,
.routine-empty button,
.routine-create-modal footer button,
.routine-choice-grid button,
.routine-weekday-row button {
  min-width: 0;
  border-radius: 999px;
  font-weight: var(--type-weight-strong);
}

.routine-actions button,
.routine-quick-row button {
  min-height: 38px;
  padding: 0 14px;
  background: #f0f2ef;
  color: #171719;
  font-size: 13px;
}

.routine-actions .primary {
  background: #101113;
  color: #fff;
}

.routine-actions .danger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #fee2e2;
  color: #9f1d1d;
}

.routine-actions .danger svg {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
}

.routine-actions .ghost {
  margin-left: auto;
  color: #7b3f3f;
}

.routine-card-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 11px;
}

.routine-card-badges span {
  min-height: 25px;
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  padding: 0 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--routine-color, #c6f04f) 22%, #f4f5f0);
  color: #273018;
  font-size: 11px;
  font-weight: var(--type-weight-strong);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.routine-chain-banner {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 9px;
  margin: 0 0 14px;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--routine-color, #c6f04f) 32%, transparent);
  border-radius: 18px;
  background: #101113;
  color: #fff;
  box-shadow: 0 16px 38px rgba(15,23,42,.16);
}

.routine-chain-banner > span {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 14px;
  background: var(--routine-color, #c6f04f);
  color: #101113;
}

.routine-chain-banner div {
  min-width: 0;
}

.routine-chain-banner small,
.routine-chain-banner b {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.routine-chain-banner small {
  color: rgba(255,255,255,.62);
  font-size: 11px;
  font-weight: var(--type-weight-strong);
}

.routine-chain-banner b {
  margin-top: 2px;
  font-size: 14px;
}

.routine-chain-banner button {
  min-height: 34px;
  border-radius: 999px;
  background: rgba(255,255,255,.1);
  color: #fff;
  font-size: 12px;
  font-weight: var(--type-weight-strong);
}

.routine-chain-banner button:first-of-type {
  grid-column: 1 / span 2;
  background: var(--routine-color, #c6f04f);
  color: #101113;
}

.routine-year-open {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 36px;
  border-radius: 999px;
  background: #101113;
  color: #fff;
  font-size: 13px;
  font-weight: var(--type-weight-strong);
}

.routine-quick-row button {
  background: #ecf6d8;
  color: #315900;
}

.routine-streak-list {
  display: grid;
  gap: 8px;
}

.routine-streak-list span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  background: #fff;
  color: #141414;
  font-size: 13px;
}

.routine-streak-list em {
  color: #5e651f;
  font-style: normal;
  font-weight: var(--type-weight-strong);
}

.habits-head button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 36px;
  padding: 0 12px;
  background: #101113;
  color: #fff;
  font-size: 13px;
}

.routine-empty {
  display: grid;
  justify-items: center;
  gap: 10px;
  padding: 26px 18px;
  text-align: center;
}

.routine-empty span {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 18px;
  background: #e7f5c7;
  color: #111;
}

.routine-empty p {
  max-width: 260px;
  margin: 0;
  color: #6f7377;
  font-size: 14px;
}

.routine-empty button {
  min-height: 38px;
  padding: 0 14px;
  background: #101113;
  color: #fff;
}

.routine-history-card {
  display: grid;
  gap: 12px;
  padding: 14px;
}

.routine-last7 {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
}

.routine-day-dot {
  height: 22px;
  border-radius: 9px;
  background: #e7e9e4;
}

.routine-day-dot.status-completed {
  background: #c6f04f;
}

.routine-day-dot.status-partial {
  background: #ffd77a;
}

.routine-day-dot.status-skipped,
.routine-day-dot.status-cancelled {
  background: #d5d7d2;
}

.routine-day-dot.status-missed {
  background: #ef9a9a;
}

.routine-history-card footer {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}

.routine-history-card footer span {
  padding: 10px;
  border-radius: 14px;
  background: #f2f3ee;
}

.routine-history-card footer b,
.routine-history-card footer small {
  display: block;
}

.routine-history-card footer b {
  color: #111;
  font-size: 18px;
}

.routine-history-card footer small {
  color: #74777a;
  font-size: 11px;
  font-weight: var(--type-weight-strong);
}

.routine-loading {
  margin: 0 0 12px;
  padding: 12px 14px;
  border-radius: 16px;
  background: #fff;
  color: #5c6267;
  font-size: 13px;
  font-weight: var(--type-weight-strong);
}

.routine-loading.error,
.routine-form-error {
  background: #fff1f1;
  color: #963f3f;
}

.routine-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 70;
  background: rgba(0,0,0,.34);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  touch-action: none;
}

.routine-create-modal {
  position: fixed;
  z-index: 71;
  left: 50%;
  right: auto;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 12px);
  transform: translateX(-50%);
  box-sizing: border-box;
  width: min(456px, calc(100dvw - 24px));
  max-width: calc(100dvw - 24px);
  max-height: min(86svh, 760px);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  overflow-x: hidden;
  overscroll-behavior: contain;
  touch-action: pan-y;
  overflow-anchor: none;
  border-radius: 26px;
  background: #fff;
  color: #111;
  box-shadow: 0 28px 90px rgba(0,0,0,.28);
}

.routine-create-modal > header,
.routine-create-modal footer {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 16px 12px;
  border-bottom: 1px solid #eceeeb;
}

.routine-create-modal > header p {
  margin: 0 0 2px;
  color: #777b80;
  font-size: 12px;
  font-weight: var(--type-weight-strong);
}

.routine-create-modal > header h2 {
  margin: 0;
  font-size: 22px;
  line-height: 1.1;
}

.routine-create-modal > header button {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #f1f2ef;
  color: #111;
}

.routine-wizard {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 14px 16px 16px;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  touch-action: pan-y;
  overflow-anchor: none;
  scrollbar-gutter: stable;
}

.routine-partial-modal {
  position: fixed;
  z-index: 72;
  left: 50%;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 12px);
  display: flex;
  flex-direction: column;
  width: min(560px, calc(100vw - 24px));
  max-height: min(82svh, 660px);
  overflow: hidden;
  overflow-anchor: none;
  border-radius: 28px;
  background: #fff;
  color: #101113;
  box-shadow: 0 24px 70px rgba(0,0,0,.26);
  transform: translateX(-50%);
}

.routine-partial-modal *,
.routine-partial-modal *::before,
.routine-partial-modal *::after {
  box-sizing: border-box;
  max-width: 100%;
}

.routine-partial-modal > header,
.routine-partial-modal footer {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 20px 14px;
  border-bottom: 1px solid #eceeeb;
}

.routine-partial-modal > header p {
  margin: 0 0 2px;
  color: #777b80;
  font-size: 12px;
  font-weight: var(--type-weight-strong);
}

.routine-partial-modal > header h2 {
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 22px;
  line-height: 1.1;
}

.routine-partial-modal > header button {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 999px;
  background: #f0f2ef;
  color: #111;
}

.routine-partial-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  display: grid;
  gap: 14px;
  padding: 16px 20px 18px;
  -webkit-overflow-scrolling: touch;
}

.routine-partial-hint {
  margin: 0;
  color: #73777c;
  font-size: 13px;
  line-height: 1.35;
  font-weight: var(--type-weight-medium);
}

.routine-partial-meter {
  display: grid;
  gap: 8px;
  padding: 14px;
  border-radius: 20px;
  background: #f6f8f3;
}

.routine-partial-meter strong {
  font-size: 34px;
  line-height: 1;
  font-weight: var(--type-weight-medium);
}

.routine-partial-meter span {
  display: block;
  height: 10px;
  overflow: hidden;
  border-radius: 999px;
  background: #e8ece6;
}

.routine-partial-meter i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--routine-color, #c6f04f);
}

.routine-partial-modal label {
  display: grid;
  gap: 7px;
  min-width: 0;
}

.routine-partial-modal label span,
.routine-partial-quick small {
  color: #5d6268;
  font-size: 12px;
  font-weight: var(--type-weight-strong);
}

.routine-partial-modal input,
.routine-partial-modal textarea {
  width: 100%;
  min-width: 0;
  border: 1px solid #dfe3df;
  border-radius: 16px;
  background: #fbfcfa;
  color: #111;
  font: inherit;
  font-size: 15px;
  outline: none;
}

.routine-partial-modal input:not([type="range"]) {
  min-height: 48px;
  padding: 0 14px;
}

.routine-partial-modal input[type="range"] {
  min-height: 44px;
  accent-color: var(--routine-color, #c6f04f);
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}

.routine-partial-modal textarea {
  min-height: 82px;
  resize: vertical;
  padding: 12px 14px;
}

.routine-partial-quick {
  display: grid;
  gap: 8px;
}

.routine-partial-quick div {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.routine-partial-quick button,
.routine-partial-modal footer button {
  min-width: 0;
  border-radius: 999px;
  font-weight: var(--type-weight-strong);
}

.routine-partial-quick button {
  min-height: 38px;
  background: #f0f2ef;
  color: #151719;
}

.routine-partial-quick button.active {
  background: #101113;
  color: #fff;
}

.routine-partial-modal footer {
  padding-top: 12px;
  border-top: 1px solid #eceeeb;
  border-bottom: 0;
}

.routine-partial-modal footer button {
  min-height: 44px;
  padding: 0 14px;
  background: #f0f2ef;
  color: #111;
}

.routine-partial-modal footer .primary {
  flex: 1 1 auto;
  background: #101113;
  color: #fff;
}

.routine-create-modal *,
.routine-create-modal *::before,
.routine-create-modal *::after {
  box-sizing: border-box;
  max-width: 100%;
}

.routine-wizard section {
  display: grid;
  gap: 10px;
  margin-bottom: 18px;
}

.routine-wizard h3 {
  margin: 0;
  color: #171719;
  font-size: 14px;
}

.routine-wizard label {
  display: grid;
  gap: 6px;
}

.routine-wizard label span {
  color: #6e7377;
  font-size: 12px;
  font-weight: var(--type-weight-strong);
}

.routine-wizard input,
.routine-wizard textarea {
  width: 100%;
  min-width: 0;
  border: 1px solid #e1e4df;
  border-radius: 14px;
  padding: 12px 13px;
  background: #f8f9f5;
  color: #111;
  font: inherit;
  font-size: 15px;
  outline: none;
}

.routine-wizard textarea {
  min-height: 72px;
  resize: vertical;
}

.routine-choice-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.routine-choice-grid.small {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.routine-choice-grid button,
.routine-weekday-row button {
  min-width: 0;
  min-height: 38px;
  padding: 0 10px;
  background: #f0f2ef;
  color: #393d40;
  font-size: 12px;
  line-height: 1.15;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  touch-action: manipulation;
}

.routine-icon-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.routine-icon-grid button {
  min-width: 0;
  min-height: 58px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 4px;
  padding: 7px 5px;
  border: 1px solid transparent;
  border-radius: 16px;
  background: #f0f2ef;
  color: #34383b;
  touch-action: manipulation;
}

.routine-icon-grid button svg {
  width: 21px;
  height: 21px;
}

.routine-icon-grid button span {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 10px;
  font-weight: var(--type-weight-strong);
  line-height: 1.05;
}

.routine-icon-grid button.active {
  border-color: #101113;
  background: #101113;
  color: #fff;
}

.routine-choice-grid button.active,
.routine-weekday-row button.active {
  background: #101113;
  color: #fff;
}

.routine-weekday-row {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
}

.routine-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.routine-form-grid .wide {
  grid-column: 1 / -1;
}

.routine-form-error {
  margin: 12px 16px 0;
  padding: 10px 12px;
  border-radius: 14px;
  font-size: 13px;
  font-weight: var(--type-weight-strong);
}

.routine-create-modal footer {
  padding-top: 12px;
  border-top: 1px solid #eceeeb;
  border-bottom: 0;
}

.routine-create-modal footer button {
  min-height: 44px;
  padding: 0 16px;
  background: #f0f2ef;
  color: #111;
}

.routine-create-modal footer .primary {
  flex: 1 1 auto;
  background: #101113;
  color: #fff;
}

.routine-create-modal footer .routine-delete-open {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 44px;
  padding: 0;
  background: #fee2e2;
  color: #9f1d1d;
}

.routine-create-modal footer .routine-delete-open svg {
  width: 18px;
  height: 18px;
}
.routine-delete-confirm {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px 16px;
  border-top: 1px solid #eceeeb;
  background: #fff1f1;
  color: #963f3f;
}

.routine-delete-confirm p,
.routine-delete-confirm small {
  flex: 1 1 100%;
  margin: 0;
}

.routine-delete-confirm p {
  font-size: 14px;
  font-weight: var(--type-weight-strong);
}

.routine-delete-confirm small {
  font-size: 12px;
  font-weight: var(--type-weight-medium);
  opacity: .82;
}

.routine-delete-confirm button {
  min-height: 40px;
  padding: 0 14px;
  border-radius: 999px;
  background: #fff;
  color: #111;
  font-weight: var(--type-weight-strong);
}

.routine-delete-confirm .danger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  background: #9f1d1d;
  color: #fff;
}

.routine-delete-confirm .danger svg {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
}

.routine-year-modal,
.routine-runner-modal {
  position: fixed;
  z-index: 71;
  left: 50%;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 12px);
  transform: translateX(-50%);
  box-sizing: border-box;
  width: min(456px, calc(100dvw - 24px));
  max-width: calc(100dvw - 24px);
  max-height: min(88svh, 780px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  overflow-anchor: none;
  overscroll-behavior: contain;
  touch-action: pan-y;
  border-radius: 28px;
  background: #f5f6f1;
  color: #101113;
  box-shadow: 0 28px 90px rgba(0,0,0,.3);
}

.routine-year-modal > header,
.routine-runner-modal > header {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) 40px;
  gap: 10px;
  align-items: center;
  padding: 15px 16px 12px;
  background: #101113;
  color: #fff;
}

.routine-year-modal > header button,
.routine-runner-modal > header button,
.routine-year-modal > header > span,
.routine-runner-modal > header > span {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255,255,255,.09);
  color: #fff;
}

.routine-year-modal > header div,
.routine-runner-modal > header div {
  min-width: 0;
  text-align: center;
}

.routine-year-modal > header p,
.routine-runner-modal > header p {
  margin: 0 0 3px;
  color: rgba(255,255,255,.62);
  font-size: 11px;
  font-weight: var(--type-weight-strong);
}

.routine-year-modal > header h2,
.routine-runner-modal > header h2 {
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #fff;
  font-size: 19px;
  line-height: 1.1;
}

.routine-year-modal {
  overflow-y: auto;
  padding-bottom: 16px;
  -webkit-overflow-scrolling: touch;
}

.routine-year-head {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) 38px;
  align-items: center;
  gap: 8px;
  padding: 14px 16px 8px;
}

.routine-year-head button {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #fff;
  color: #101113;
}

.routine-year-head strong {
  text-align: center;
  font-size: 17px;
  font-weight: var(--type-weight-strong);
}

.routine-year-stats,
.routine-year-selected-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  padding: 0 16px 12px;
}

.routine-year-stats span,
.routine-year-selected-stats span {
  min-width: 0;
  padding: 10px;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 10px 24px rgba(15,23,42,.06);
}

.routine-year-stats b,
.routine-year-stats small,
.routine-year-selected-stats b,
.routine-year-selected-stats small {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.routine-year-stats b,
.routine-year-selected-stats b {
  font-size: 17px;
  font-weight: var(--type-weight-strong);
}

.routine-year-stats small,
.routine-year-selected-stats small {
  margin-top: 3px;
  color: #74777a;
  font-size: 10px;
  font-weight: var(--type-weight-strong);
}

.routine-year-grid {
  display: grid;
  gap: 12px;
  padding: 0 16px 14px;
}

.routine-year-month {
  padding: 12px;
  border: 1px solid rgba(17,17,17,.07);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 12px 30px rgba(15,23,42,.06);
}

.routine-year-month h3 {
  margin: 0 0 9px;
  font-size: 14px;
  line-height: 1;
  font-weight: var(--type-weight-medium);
  text-transform: uppercase;
}

.routine-year-days {
  display: grid;
  grid-template-columns: repeat(7, 23px);
  justify-content: center;
  justify-items: center;
  align-items: center;
  gap: 6px 5px;
}

.routine-year-spacer,
.routine-year-day {
  width: 23px;
  height: 23px;
  min-width: 23px;
  min-height: 23px;
  border-radius: 999px;
}

.routine-year-day {
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid #e7e7e9;
  background: #f7f8f7;
  color: #111;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  appearance: none;
  touch-action: manipulation;
}

.routine-year-day span {
  display: block;
  font-size: 10px;
  line-height: 1;
  font-weight: var(--type-weight-strong);
}

.routine-year-day.status-completed {
  border-color: #b6e846;
  background: #c6f04f;
}

.routine-year-day.status-partial {
  border-color: #ffd77a;
  background: #ffd77a;
}

.routine-year-day.status-skipped,
.routine-year-day.status-cancelled {
  background: #d5d7d2;
  color: #555b61;
}

.routine-year-day.status-missed {
  border-color: #f0b1b1;
  background: #f8d7d7;
  color: #8b3f3f;
}

.routine-year-day.today:not(.selected) {
  border-color: #101113;
}

.routine-year-day.selected {
  outline: 2px solid #101113;
  outline-offset: 2px;
}

.routine-year-selected {
  margin: 0 16px;
  padding: 13px;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 12px 30px rgba(15,23,42,.07);
}

.routine-year-selected > div:first-child small,
.routine-year-selected > div:first-child h3 {
  display: block;
  margin: 0;
}

.routine-year-selected > div:first-child small {
  color: #74777a;
  font-size: 11px;
  font-weight: var(--type-weight-strong);
}

.routine-year-selected > div:first-child h3 {
  margin-top: 3px;
  font-size: 18px;
}

.routine-year-selected .routine-year-selected-stats {
  padding: 12px 0;
}

.routine-runner-modal {
  max-height: min(82svh, 680px);
  background: #101113;
  color: #fff;
}

.routine-runner-timer {
  display: grid;
  gap: 8px;
  padding: 28px 22px 20px;
  text-align: center;
}

.routine-runner-timer small,
.routine-runner-timer span {
  color: rgba(255,255,255,.62);
  font-weight: var(--type-weight-strong);
}

.routine-runner-timer strong {
  color: #fff;
  font-size: 54px;
  line-height: 1;
  font-weight: var(--type-weight-medium);
  font-variant-numeric: tabular-nums;
}

.routine-runner-timer i {
  display: block;
  height: 10px;
  margin-top: 10px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255,255,255,.12);
}

.routine-runner-timer em {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--routine-color, #c6f04f);
}

.routine-quick-row.runner {
  justify-content: center;
  padding: 0 18px;
}

.routine-runner-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
  padding: 14px 18px 18px;
}

.routine-runner-actions button {
  min-height: 46px;
  border-radius: 999px;
  background: rgba(255,255,255,.1);
  color: #fff;
  font-size: 13px;
  font-weight: var(--type-weight-strong);
}

.routine-runner-actions .primary {
  background: var(--routine-color, #c6f04f);
  color: #101113;
}

:root[data-theme="dark"] .app-shell.routine-shell,
:root[data-theme="dark"] .routine-page {
  background: #0a0b0d !important;
}

:root[data-theme="dark"] .routine-workspace {
  background: #0a0b0d;
}

:root[data-theme="dark"] .routine-tabs,
:root[data-theme="dark"] .routine-card,
:root[data-theme="dark"] .routine-history-card,
:root[data-theme="dark"] .routine-empty,
:root[data-theme="dark"] .routine-loading,
:root[data-theme="dark"] .routine-create-modal,
:root[data-theme="dark"] .routine-partial-modal,
:root[data-theme="dark"] .routine-year-modal,
:root[data-theme="dark"] .routine-year-month,
:root[data-theme="dark"] .routine-year-selected,
:root[data-theme="dark"] .routine-streak-list span {
  border-color: rgba(255,255,255,.1);
  background: #17181a;
  color: #fff;
}

:root[data-theme="dark"] .routine-section h2,
:root[data-theme="dark"] .routine-card-top h3,
:root[data-theme="dark"] .routine-history-card h3,
:root[data-theme="dark"] .routine-card-progress b,
:root[data-theme="dark"] .routine-history-card footer b,
:root[data-theme="dark"] .routine-create-modal > header h2,
:root[data-theme="dark"] .routine-partial-modal > header h2,
:root[data-theme="dark"] .routine-wizard h3,
:root[data-theme="dark"] .routine-year-month h3,
:root[data-theme="dark"] .routine-year-selected h3 {
  color: #fff;
}

:root[data-theme="dark"] .routine-card-top p,
:root[data-theme="dark"] .routine-history-card p,
:root[data-theme="dark"] .routine-card-description,
:root[data-theme="dark"] .routine-history-card footer small,
:root[data-theme="dark"] .routine-wizard label span {
  color: rgba(255,255,255,.58);
}

:root[data-theme="dark"] .routine-card-badges span,
:root[data-theme="dark"] .routine-year-stats span,
:root[data-theme="dark"] .routine-year-selected-stats span,
:root[data-theme="dark"] .routine-year-head button {
  background: #242629;
  color: #fff;
}

:root[data-theme="dark"] .routine-year-day {
  border-color: rgba(255,255,255,.1);
  background: #242629;
  color: #fff;
}

:root[data-theme="dark"] .routine-card-progress span,
:root[data-theme="dark"] .routine-history-card footer span,
:root[data-theme="dark"] .routine-wizard input,
:root[data-theme="dark"] .routine-wizard textarea,
:root[data-theme="dark"] .routine-partial-modal input,
:root[data-theme="dark"] .routine-partial-modal textarea,
:root[data-theme="dark"] .routine-partial-meter,
:root[data-theme="dark"] .routine-choice-grid button,
:root[data-theme="dark"] .routine-weekday-row button,
:root[data-theme="dark"] .routine-create-modal footer button,
:root[data-theme="dark"] .routine-create-modal > header button,
:root[data-theme="dark"] .routine-partial-modal footer button,
:root[data-theme="dark"] .routine-partial-modal > header button,
:root[data-theme="dark"] .routine-partial-quick button {
  background: #242629;
  color: #fff;
  border-color: rgba(255,255,255,.1);
}

:root[data-theme="dark"] .routine-tabs button.active,
:root[data-theme="dark"] .routine-choice-grid button.active,
:root[data-theme="dark"] .routine-weekday-row button.active,
:root[data-theme="dark"] .routine-actions .primary,
:root[data-theme="dark"] .habits-head button,
:root[data-theme="dark"] .routine-empty button,
:root[data-theme="dark"] .routine-create-modal footer .primary,
:root[data-theme="dark"] .routine-partial-modal footer .primary,
:root[data-theme="dark"] .routine-partial-quick button.active {
  background: #c6f04f;
  color: #0b0c0d;
}

:root[data-theme="dark"] .routine-actions .danger {
  background: rgba(239, 68, 68, .16);
  color: #ffb4b4;
}
:root[data-theme="dark"] .routine-create-modal footer .routine-delete-open,
:root[data-theme="dark"] .routine-delete-confirm {
  background: rgba(239, 68, 68, .16);
  color: #ffb4b4;
  border-color: rgba(255,255,255,.1);
}

:root[data-theme="dark"] .routine-delete-confirm button {
  background: #242629;
  color: #fff;
}

:root[data-theme="dark"] .routine-delete-confirm .danger {
  background: #d93636;
  color: #fff;
}

:root[data-theme="dark"] .routine-swipe-delete {
  background: #d93636;
  box-shadow: inset 0 -1px 0 rgba(0,0,0,.2), 0 12px 24px rgba(0,0,0,.22);
}

@media (max-width: 380px) {
  .routine-workspace {
    padding-left: 12px;
    padding-right: 12px;
  }

  .routine-card {
    padding: 12px;
  }

  .routine-card-top {
    grid-template-columns: 38px minmax(0, 1fr);
  }

  .routine-card-top strong {
    grid-column: 2;
    justify-self: start;
    margin-top: 2px;
  }

  .routine-choice-grid.small {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .routine-form-grid {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 390px) {
  .routine-year-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.routine-tabs {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.illness-section > header button,
.illness-archive {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 36px;
  padding: 0 12px;
  border-radius: 999px;
  background: #101113;
  color: #fff;
  font-size: 13px;
  font-weight: var(--type-weight-strong);
}

.illness-year-head {
  display: grid;
  grid-template-columns: 38px 1fr 38px;
  align-items: center;
  gap: 8px;
  margin: 0 0 10px;
}

.illness-year-head button {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #fff;
  color: #101113;
  box-shadow: 0 10px 22px rgba(15,23,42,.08);
}

.illness-year-head strong {
  text-align: center;
  color: #101113;
  font-size: 17px;
  font-weight: var(--type-weight-strong);
}

.illness-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 0 0 12px;
}

.illness-stats span {
  min-width: 0;
  padding: 10px;
  border: 1px solid rgba(17,17,17,.06);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 10px 24px rgba(15,23,42,.06);
}

.illness-stats b,
.illness-stats small {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.illness-stats b {
  color: #101113;
  font-size: 18px;
  font-weight: var(--type-weight-strong);
}

.illness-stats small {
  margin-top: 3px;
  color: #74777a;
  font-size: 10px;
  font-weight: var(--type-weight-strong);
}

.illness-palette {
  display: flex;
  gap: 8px;
  margin: 0 -16px 13px;
  padding: 0 16px 2px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.illness-palette::-webkit-scrollbar {
  display: none;
}

.illness-palette button {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 7px;
  min-height: 36px;
  max-width: 180px;
  padding: 0 12px;
  border: 1px solid rgba(17,17,17,.08);
  border-radius: 999px;
  background: #fff;
  color: #101113;
  box-shadow: 0 8px 20px rgba(15,23,42,.06);
  font-size: 13px;
  font-weight: var(--type-weight-strong);
}

.illness-palette button.active {
  border-color: var(--illness-color, #3b82f6);
  box-shadow: 0 10px 24px color-mix(in srgb, var(--illness-color, #3b82f6) 28%, transparent);
}

.illness-palette i {
  width: 12px;
  height: 12px;
  flex: 0 0 12px;
  border-radius: 50%;
  background: var(--illness-color, #3b82f6);
}

.illness-palette span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.illness-year-grid {
  display: grid;
  gap: 12px;
}

.illness-month {
  padding: 12px;
  border: 1px solid rgba(17,17,17,.07);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 12px 30px rgba(15,23,42,.06);
}

.illness-month h3 {
  margin: 0 0 9px;
  color: #171719;
  font-size: 14px;
  line-height: 1;
  font-weight: var(--type-weight-medium);
  text-transform: uppercase;
}

.illness-month-days {
  display: grid;
  grid-template-columns: repeat(7, 23px);
  justify-content: center;
  justify-items: center;
  align-items: center;
  gap: 6px 5px;
}

.illness-day-spacer,
.illness-day {
  width: 23px;
  height: 23px;
  min-width: 23px;
  min-height: 23px;
  aspect-ratio: auto;
  border-radius: 999px;
}

.illness-day {
  position: relative;
  display: grid;
  place-items: center;
  padding: 0;
  box-sizing: border-box;
  border: 1px solid #e7e7e9;
  background: #f7f8f7;
  color: #111;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  appearance: none;
  touch-action: manipulation;
}

.illness-day.marked {
  border-color: color-mix(in srgb, var(--illness-color, #3b82f6) 62%, #fff);
  background: var(--illness-color, #3b82f6);
  color: #fff;
}

.illness-day.today:not(.selected) {
  border-color: #101113;
}

.illness-day.selected {
  outline: 2px solid #101113;
  outline-offset: 2px;
}

.illness-day span {
  display: block;
  font-size: 10px;
  line-height: 1;
  font-weight: var(--type-weight-strong);
  text-align: center;
}

.illness-selected-day {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 16px;
  background: #fff;
  color: #101113;
  box-shadow: 0 10px 24px rgba(15,23,42,.06);
}

.illness-selected-day b {
  font-size: 13px;
}

.illness-selected-day span {
  padding: 5px 9px;
  border-radius: 999px;
  background: var(--illness-color, #3b82f6);
  color: #fff;
  font-size: 12px;
  font-weight: var(--type-weight-strong);
}

.illness-selected-day small {
  min-width: 0;
  color: #74777a;
  font-size: 11px;
  font-weight: var(--type-weight-strong);
}

.illness-archive {
  width: 100%;
  margin-top: 12px;
  background: #f2eeee;
  color: #8b3f3f;
}

.illness-color-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 9px;
}

.illness-color-grid button {
  display: grid;
  place-items: center;
  min-height: 46px;
  border-radius: 16px;
  background: #f4f5f0;
}

.illness-color-grid button.active {
  box-shadow: inset 0 0 0 2px #101113;
}

.illness-color-grid span {
  display: block;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--illness-color, #3b82f6);
}

:root[data-theme="dark"] .app-shell.routine-shell {
  background: #0a0b0d !important;
}

@media (min-width: 390px) {
  .illness-year-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 390px) and (max-width: 519px) {
  .routine-year-grid,
  .illness-year-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

.routine-create-modal.routine-sheet {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  transform: none !important;
  z-index: 70;
  display: flex !important;
  flex-direction: column;
  gap: 0 !important;
  width: 100% !important;
  max-width: 520px !important;
  max-height: 88dvh !important;
  margin: 0 auto !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 24px 24px 0 0 !important;
  background: #f5f5f5 !important;
  box-shadow: 0 -18px 48px rgba(0, 0, 0, .22) !important;
}

.routine-sheet-head {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 18px 10px !important;
  border: 0 !important;
  background: none !important;
}

.routine-sheet-head h2 {
  margin: 0 !important;
  color: #050505 !important;
  font-size: 20px !important;
  font-weight: var(--type-weight-strong) !important;
  letter-spacing: -0.3px !important;
}

.routine-sheet-close {
  display: grid;
  place-items: center;
  width: 34px !important;
  height: 34px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: #ececee !important;
  color: #1d1d1f !important;
}

.routine-sheet-close svg {
  width: 18px;
  height: 18px;
}

.routine-sheet-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow-y: auto;
  padding: 0 18px 14px !important;
  -webkit-overflow-scrolling: touch;
}

.routine-name-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.routine-icon-button {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 0;
  border-radius: 16px;
  background: #c6f04f;
  color: #16180f;
  cursor: pointer;
}

.routine-icon-button svg {
  width: 22px;
  height: 22px;
}

.routine-name-input {
  flex: 1 1 auto;
  min-width: 0;
  height: 48px;
  padding: 0 14px;
  border: 0;
  border-radius: 16px;
  background: #fff;
  color: #050505;
  font-size: 17px;
  font-weight: var(--type-weight-medium);
}

.routine-sheet-hint {
  margin: -4px 0 0;
  color: rgba(5, 5, 5, .45);
  font-size: 13px;
  font-weight: var(--type-weight-medium);
}

.routine-create-modal .routine-form-error {
  margin: -4px 0 0 !important;
  padding: 0 18px !important;
  color: #c53a2a !important;
  font-size: 13px !important;
  font-weight: var(--type-weight-medium) !important;
}
.routine-icon-picker {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 8px;
  padding: 12px;
  border-radius: 18px;
  background: #fff;
}

.routine-icon-cell {
  display: grid;
  place-items: center;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 14px;
  background: #f2f2f4;
  color: #1d1d1f;
  cursor: pointer;
}

.routine-icon-cell.active {
  background: #c6f04f;
  color: #16180f;
}

.routine-icon-cell svg {
  width: 20px;
  height: 20px;
}

.routine-sheet-label {
  margin: 6px 0 0 !important;
  color: rgba(5, 5, 5, .48) !important;
  font-size: 12px !important;
  font-weight: var(--type-weight-medium) !important;
  letter-spacing: .04em !important;
  text-transform: uppercase;
}

.routine-freq-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.routine-freq-chip {
  min-height: 42px;
  padding: 0 10px;
  border: 0;
  border-radius: 14px;
  background: #fff;
  color: #050505;
  font-size: 14px;
  font-weight: var(--type-weight-medium);
  cursor: pointer;
}

.routine-freq-chip.active {
  background: #16180f;
  color: #c6f04f;
}

.routine-days-row {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
}

.routine-day-chip {
  min-height: 38px;
  padding: 0;
  border: 0;
  border-radius: 12px;
  background: #fff;
  color: #050505;
  font-size: 12px;
  font-weight: var(--type-weight-medium);
  cursor: pointer;
}

.routine-day-chip.active {
  background: #c6f04f;
  color: #16180f;
}

.routine-inline-field {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 14px;
  background: #fff;
  color: rgba(5, 5, 5, .6);
  font-size: 14px;
  font-weight: var(--type-weight-medium);
}

.routine-inline-field input {
  width: 72px;
  height: 38px;
  padding: 0 10px;
  border: 1px solid rgba(5, 5, 5, .12);
  border-radius: 12px;
  background: #f5f5f5;
  color: #050505;
  font-size: 16px;
  font-weight: var(--type-weight-strong);
  text-align: center;
}

.routine-more-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 46px;
  margin-top: 4px;
  padding: 0 14px;
  border: 0;
  border-radius: 16px;
  background: #fff;
  color: #050505;
  font-size: 15px;
  font-weight: var(--type-weight-medium);
  cursor: pointer;
}

.routine-more-toggle svg {
  width: 18px;
  height: 18px;
  transition: transform 200ms ease;
}

.routine-more-toggle.open svg {
  transform: rotate(90deg);
}

.routine-more {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.routine-goal-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.routine-goal-value {
  height: 46px;
  padding: 0 14px;
  border: 0;
  border-radius: 14px;
  background: #fff;
  color: #050505;
  font-size: 17px;
  font-weight: var(--type-weight-strong);
}

.routine-unit-row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
}

.routine-unit-chip,
.routine-cat-chip {
  min-height: 36px;
  padding: 0 6px;
  border: 0;
  border-radius: 12px;
  background: #fff;
  color: #050505;
  font-size: 12px;
  font-weight: var(--type-weight-medium);
  cursor: pointer;
}

.routine-unit-chip.active,
.routine-cat-chip.active {
  background: #c6f04f;
  color: #16180f;
}

.routine-cat-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}

.routine-plain-field {
  height: 46px;
  padding: 0 14px;
  border: 0;
  border-radius: 14px;
  background: #fff;
  color: #050505;
  font-size: 15px;
  font-weight: var(--type-weight-medium);
}

.routine-period-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.routine-period-row label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  color: rgba(5, 5, 5, .5);
  font-size: 12px;
  font-weight: var(--type-weight-medium);
}

.routine-period-row input {
  height: 44px;
  padding: 0 12px;
  border: 0;
  border-radius: 14px;
  background: #fff;
  color: #050505;
  font-size: 14px;
  font-weight: var(--type-weight-medium);
}

.routine-sheet-foot {
  display: flex;
  gap: 10px;
  padding: 12px 18px calc(env(safe-area-inset-bottom) + 16px) !important;
  border: 0 !important;
  background: none !important;
}

/* !important — перенос V1 красит кнопки подвала своим правилом той же
   специфичности и стоит выше по файлу. */
.routine-sheet-save {
  flex: 1 1 auto;
  min-height: 50px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: #c6f04f !important;
  color: #16180f !important;
  font-size: 16px !important;
  font-weight: var(--type-weight-strong) !important;
  cursor: pointer;
}

.routine-sheet-delete {
  flex: 0 0 auto;
  min-height: 50px !important;
  padding: 0 18px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: #ececee !important;
  color: #b3271a !important;
  font-size: 15px;
  font-weight: var(--type-weight-medium);
  cursor: pointer;
}

.routine-sheet-delete.armed {
  background: #e5372a;
  color: #fff;
}

:root[data-theme="dark"] .routine-create-modal.routine-sheet {
  background: #111 !important;
}

:root[data-theme="dark"] .routine-sheet-head h2,
:root[data-theme="dark"] .routine-name-input,
:root[data-theme="dark"] .routine-freq-chip,
:root[data-theme="dark"] .routine-day-chip,
:root[data-theme="dark"] .routine-more-toggle,
:root[data-theme="dark"] .routine-goal-value,
:root[data-theme="dark"] .routine-plain-field,
:root[data-theme="dark"] .routine-unit-chip,
:root[data-theme="dark"] .routine-cat-chip,
:root[data-theme="dark"] .routine-period-row input {
  color: #f7f7f7 !important;
}

:root[data-theme="dark"] .routine-name-input,
:root[data-theme="dark"] .routine-freq-chip,
:root[data-theme="dark"] .routine-day-chip,
:root[data-theme="dark"] .routine-more-toggle,
:root[data-theme="dark"] .routine-goal-value,
:root[data-theme="dark"] .routine-plain-field,
:root[data-theme="dark"] .routine-unit-chip,
:root[data-theme="dark"] .routine-cat-chip,
:root[data-theme="dark"] .routine-period-row input,
:root[data-theme="dark"] .routine-icon-picker,
:root[data-theme="dark"] .routine-inline-field {
  background: #202021 !important;
}

:root[data-theme="dark"] .routine-freq-chip.active {
  background: #c6f04f !important;
  color: #16180f !important;
}

:root[data-theme="dark"] .routine-day-chip.active,
:root[data-theme="dark"] .routine-unit-chip.active,
:root[data-theme="dark"] .routine-cat-chip.active {
  background: #c6f04f !important;
  color: #16180f !important;
}

:root[data-theme="dark"] .routine-icon-cell,
:root[data-theme="dark"] .routine-sheet-close,
:root[data-theme="dark"] .routine-sheet-delete {
  background: #2c2c2e !important;
  color: #f7f7f7 !important;
}

:root[data-theme="dark"] .routine-icon-cell.active {
  background: #c6f04f !important;
  color: #16180f !important;
}

:root[data-theme="dark"] .routine-sheet-hint,
:root[data-theme="dark"] .routine-sheet-label,
:root[data-theme="dark"] .routine-period-row label,
:root[data-theme="dark"] .routine-inline-field {
  color: rgba(247, 247, 247, .5) !important;
}
.routine-view-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 2px;
}

.routine-view-chip {
  min-height: 42px;
  padding: 0 10px;
  border: 0;
  border-radius: 14px;
  background: #fff;
  color: #050505;
  font-size: 14px;
  font-weight: var(--type-weight-medium);
  cursor: pointer;
}

.routine-view-chip.active {
  background: #16180f;
  color: #c6f04f;
}

.routine-stats-panel {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.routine-stats-pick {
  display: flex;
  flex-direction: column;
  gap: 4px;
  color: rgba(5, 5, 5, .48);
  font-size: 12px;
  font-weight: var(--type-weight-medium);
  letter-spacing: .04em;
  text-transform: uppercase;
}

.routine-stats-select {
  width: 100%;
  height: 46px;
  padding: 0 34px 0 14px;
  border: 0;
  border-radius: 14px;
  background-color: #fff;
  background-image: linear-gradient(45deg, transparent 50%, rgba(5, 5, 5, .45) 50%),
    linear-gradient(135deg, rgba(5, 5, 5, .45) 50%, transparent 50%);
  background-position: right 18px center, right 13px center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  color: #050505;
  font-size: 15px;
  font-weight: var(--type-weight-medium);
  letter-spacing: normal;
  text-transform: none;
  appearance: none;
  -webkit-appearance: none;
}

.routine-stats-note {
  margin: 0;
  color: rgba(5, 5, 5, .45);
  font-size: 13px;
  font-weight: var(--type-weight-medium);
}

.routine-stats-note.error {
  color: #c53a2a;
  font-weight: var(--type-weight-medium);
}
.routine-stats-numbers {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.routine-stats-numbers span {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 10px 6px;
  border-radius: 16px;
  background: #fff;
}

.routine-stats-numbers small {
  color: rgba(5, 5, 5, .48);
  font-size: 11px;
  font-weight: var(--type-weight-medium);
  letter-spacing: .03em;
  text-transform: uppercase;
}

.routine-stats-numbers b {
  color: #050505;
  font-size: 20px;
  font-weight: var(--type-weight-strong);
  letter-spacing: -0.3px;
}

.routine-stats-numbers em {
  color: rgba(5, 5, 5, .45);
  font-size: 11px;
  font-style: normal;
  font-weight: var(--type-weight-medium);
}

.routine-stats-month,
.routine-stats-year {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
  border-radius: 18px;
  background: #fff;
}

.routine-stats-month-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.routine-stats-month-head button {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #f2f2f4;
  color: #1d1d1f;
  cursor: pointer;
}

.routine-stats-month-head button svg {
  width: 18px;
  height: 18px;
}

.routine-stats-month-head strong {
  color: #050505;
  font-size: 15px;
  font-weight: var(--type-weight-strong);
  text-transform: capitalize;
}

.routine-stats-weekdays {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  color: rgba(5, 5, 5, .42);
  font-size: 11px;
  font-weight: var(--type-weight-medium);
  text-align: center;
}
.routine-stats-days {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
}

.routine-stats-day {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  padding: 0;
  border: 1.5px solid rgba(5, 5, 5, .10);
  border-radius: 50%;
  background: transparent;
  color: #050505;
  font-size: 13px;
  font-weight: var(--type-weight-strong);
  cursor: pointer;
}
.routine-stats-day.done {
  border-color: #1f8f52;
  background: #1f8f52;
  color: #fff;
}

.routine-stats-day.partial {
  border-color: transparent;
  background: rgba(31, 143, 82, .38);
}

.routine-stats-day.skipped {
  border-style: dashed;
  color: rgba(5, 5, 5, .45);
}

.routine-stats-day.missed {
  border-color: rgba(197, 58, 42, .32);
  color: rgba(5, 5, 5, .45);
}

.routine-stats-day.today {
  border-color: #16180f;
}

.routine-stats-day.selected {
  box-shadow: 0 0 0 3px rgba(22, 24, 15, .14);
}
.routine-stats-day.muted {
  border-color: transparent;
  color: rgba(5, 5, 5, .25);
}
.routine-stats-day[aria-disabled="true"] {
  opacity: .42;
}

.routine-stats-selected {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 10px 14px;
  border-radius: 14px;
  background: #fff;
  font-size: 13px;
}

.routine-stats-selected span {
  color: rgba(5, 5, 5, .48);
  font-weight: var(--type-weight-medium);
}

.routine-stats-selected b {
  color: #050505;
  font-weight: var(--type-weight-strong);
  font-variant-numeric: tabular-nums;
}

.routine-stats-selected em {
  margin-left: auto;
  color: rgba(5, 5, 5, .6);
  font-style: normal;
  font-weight: var(--type-weight-strong);
}

.routine-stats-year h3 {
  margin: 0;
  color: rgba(5, 5, 5, .48);
  font-size: 12px;
  font-weight: var(--type-weight-medium);
  letter-spacing: .04em;
}
.routine-stats-year-grid {
  display: grid;
  grid-template-columns: repeat(31, minmax(0, 1fr));
  gap: 3px;
}
.routine-stats-year-grid i {
  display: block;
  aspect-ratio: 1;
  border-radius: 2px;
  background: #e3e3e5;
}

.routine-stats-year-grid i.done {
  background: #1f8f52;
}

.routine-stats-year-grid i.partial {
  background: rgba(31, 143, 82, .45);
}
.routine-stats-year-grid i.skipped {
  background: #d5d7d2;
}

.routine-stats-year-grid i.future {
  opacity: .45;
}

:root[data-theme="dark"] .routine-view-chip,
:root[data-theme="dark"] .routine-stats-select,
:root[data-theme="dark"] .routine-stats-numbers span,
:root[data-theme="dark"] .routine-stats-month,
:root[data-theme="dark"] .routine-stats-year,
:root[data-theme="dark"] .routine-stats-selected {
  background-color: #202021;
  color: #f7f7f7;
}

:root[data-theme="dark"] .routine-view-chip.active {
  background-color: #c6f04f;
  color: #16180f;
}

:root[data-theme="dark"] .routine-stats-numbers b,
:root[data-theme="dark"] .routine-stats-month-head strong,
:root[data-theme="dark"] .routine-stats-day,
:root[data-theme="dark"] .routine-stats-selected b {
  color: #f7f7f7;
}

:root[data-theme="dark"] .routine-stats-pick,
:root[data-theme="dark"] .routine-stats-note,
:root[data-theme="dark"] .routine-stats-numbers small,
:root[data-theme="dark"] .routine-stats-numbers em,
:root[data-theme="dark"] .routine-stats-weekdays,
:root[data-theme="dark"] .routine-stats-year h3,
:root[data-theme="dark"] .routine-stats-selected span,
:root[data-theme="dark"] .routine-stats-selected em {
  color: rgba(247, 247, 247, .5);
}

:root[data-theme="dark"] .routine-stats-month-head button {
  background: #2c2c2e;
  color: #f7f7f7;
}

:root[data-theme="dark"] .routine-stats-day {
  border-color: rgba(247, 247, 247, .16);
}
:root[data-theme="dark"] .routine-stats-day.done {
  border-color: #1f8f52;
  background: #1f8f52;
  color: #fff;
}

:root[data-theme="dark"] .routine-stats-day.today {
  border-color: #1f8f52;
}

:root[data-theme="dark"] .routine-stats-day.muted {
  border-color: transparent;
  color: rgba(247, 247, 247, .25);
}

:root[data-theme="dark"] .routine-stats-day.selected {
  box-shadow: 0 0 0 3px rgba(31, 143, 82, .35);
}

:root[data-theme="dark"] .routine-stats-year-grid i {
  background: #2c2c2e;
}

:root[data-theme="dark"] .routine-stats-year-grid i.done {
  background: #1f8f52;
}

:root[data-theme="dark"] .routine-stats-year-grid i.partial {
  background: rgba(31, 143, 82, .35);
}

:root[data-theme="dark"] .routine-stats-year-grid i.skipped {
  background: #3a3a3c;
}
.admin-shell {
  --admin-accent: #c6f04f;
  --admin-accent-ink: #14170d;
  --admin-accent-ring: rgba(139, 176, 44, 0.5);

  --admin-bg: #f5f5f5;
  --admin-ink: #1d1d1f;
  --admin-muted: #5c5c60;

  --admin-card: rgba(255, 255, 255, 0.62);
  --admin-card-line: rgba(24, 26, 22, 0.1);
  --admin-card-shadow: 0 2px 6px rgba(26, 28, 24, 0.06), 0 18px 40px rgba(26, 28, 24, 0.12);
  --admin-chip: color-mix(in srgb, var(--admin-ink) 6%, transparent);
  --admin-error: #b0473c;

  background: var(--admin-bg);
  color: var(--admin-ink);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
}

:root[data-theme='dark'] .admin-shell {
  --admin-bg: #0a0b0d;
  --admin-ink: #f7f7f7;
  --admin-muted: #a8a8ab;

  --admin-card: rgba(23, 25, 27, 0.72);
  --admin-card-line: rgba(255, 255, 255, 0.1);
  --admin-card-shadow: 0 18px 44px rgba(0, 0, 0, 0.55);
  --admin-chip: rgba(255, 255, 255, 0.08);
  --admin-accent-ring: rgba(198, 240, 79, 0.55);
  --admin-error: #e08a80;
}
.admin-screen {
  height: 100%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 720px;
  margin-inline: auto;
  width: 100%;
  padding: max(18px, calc(env(safe-area-inset-top) + 10px)) 18px
    calc(env(safe-area-inset-bottom) + 28px);
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.admin-head {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.admin-back {
  align-self: flex-start;
  color: var(--admin-muted);
  font-size: 13px;
  font-weight: var(--type-weight-medium);
  letter-spacing: 0.01em;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
}

.admin-title {
  margin: 6px 0 0;
  font-size: clamp(26px, 7vw, 34px);
  font-weight: var(--type-weight-strong);
  letter-spacing: -0.02em;
  line-height: 1.08;
  display: flex;
  align-items: center;
  gap: 10px;
}

.admin-subtitle {
  margin: 0;
  color: var(--admin-muted);
  font-size: 14px;
  line-height: 1.4;
}

.admin-filter {
  display: flex;
  gap: 8px;
  margin-top: 4px;
}

.admin-filter-btn {
  padding: 6px 14px;
  border: 1px solid var(--admin-card-line);
  border-radius: 999px;
  background: transparent;
  color: var(--admin-muted);
  font-size: 13px;
  font-weight: var(--type-weight-medium);
  cursor: pointer;
}

.admin-filter-btn.active {
  border-color: transparent;
  background: var(--admin-accent);
  color: var(--admin-accent-ink);
}

.admin-openreg {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin-top: 14px;
}

.admin-openreg-title {
  font-size: 14px;
  font-weight: var(--type-weight-medium);
  color: var(--admin-ink);
}

.admin-openreg-switch {
  padding: 6px 16px;
  border: 1px solid var(--admin-card-line);
  border-radius: 999px;
  min-height: 34px;
  background: transparent;
  color: var(--admin-muted);
  font: inherit;
  font-size: 13px;
  font-weight: var(--type-weight-medium);
  cursor: pointer;
}

.admin-openreg-switch.on {
  border-color: transparent;
  background: var(--admin-accent);
  color: var(--admin-accent-ink);
}

.admin-openreg-switch:disabled {
  opacity: 0.55;
  cursor: default;
}

.admin-openreg-switch:focus-visible {
  outline: 2px solid var(--admin-accent-ring);
  outline-offset: 2px;
}

.admin-openreg-hint {
  flex-basis: 100%;
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--admin-muted);
}

.admin-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 7px;
  border-radius: 999px;
  background: var(--admin-accent, #c6f04f);
  color: var(--admin-accent-ink, #14170d);
  font-size: 12px;
  font-weight: var(--type-weight-strong);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.admin-badge-title {
  font-size: 13px;
  height: 24px;
  min-width: 24px;
}

.admin-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.admin-card {
  padding: 14px 15px 13px;
  border-radius: 18px;
  border: 1px solid var(--admin-card-line);
  background: var(--admin-card);
  box-shadow: var(--admin-card-shadow);
  backdrop-filter: blur(18px) saturate(1.4);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
}

.admin-name {
  margin: 0;
  font-size: 18px;
  font-weight: var(--type-weight-medium);
  letter-spacing: -0.01em;
}

.admin-email {
  margin: 2px 0 0;
  font-size: 14px;
  color: var(--admin-muted);
  word-break: break-all;
}

.admin-meta {
  margin: 9px 0 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  color: var(--admin-muted);
}

.admin-source,
.admin-verified {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--admin-chip);
  font-weight: var(--type-weight-medium);
  letter-spacing: 0.01em;
}

.admin-source-google {
  box-shadow: inset 0 0 0 1px var(--admin-accent-ring);
}

.admin-when {
  font-variant-numeric: tabular-nums;
}

.admin-actions {
  margin-top: 12px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.admin-confirm-text {
  flex: 1 1 100%;
  font-size: 13px;
  font-weight: var(--type-weight-medium);
  color: var(--admin-ink);
}

.admin-btn {
  appearance: none;
  border: 0;
  border-radius: 999px;
  min-height: 40px;
  padding: 0 18px;
  font: inherit;
  font-size: 14px;
  font-weight: var(--type-weight-medium);
  cursor: pointer;
  transition: transform 0.16s cubic-bezier(0.2, 0.86, 0.18, 1), opacity 0.16s linear;
}

.admin-btn:active {
  transform: scale(0.97);
}

.admin-btn:disabled {
  opacity: 0.55;
  cursor: default;
  transform: none;
}

.admin-btn-primary {
  background: var(--admin-accent);
  color: var(--admin-accent-ink);
}

.admin-btn-ghost {
  background: transparent;
  color: var(--admin-ink);
  box-shadow: inset 0 0 0 1px var(--admin-card-line);
}

.admin-btn-danger {
  background: var(--admin-error);
  color: #fff;
}
.admin-btn-block {
  margin-top: 8px;
  background: transparent;
  color: var(--admin-error);
  box-shadow: inset 0 0 0 1px var(--admin-error);
}

.admin-btn:focus-visible,
.admin-back:focus-visible {
  outline: 2px solid var(--admin-accent-ring, rgba(139, 176, 44, 0.5));
  outline-offset: 2px;
}

.admin-state {
  margin: 0;
  padding: 22px 4px;
  color: var(--admin-muted);
  font-size: 15px;
}

.admin-empty {
  padding: 34px 18px;
  border-radius: 18px;
  border: 1px dashed var(--admin-card-line);
  text-align: center;
}

.admin-empty-title {
  margin: 0;
  font-size: 18px;
  font-weight: var(--type-weight-medium);
  color: var(--admin-ink);
}

.admin-empty-hint {
  margin: 6px 0 0;
  font-size: 14px;
  color: var(--admin-muted);
}

.admin-error {
  margin: 0;
  color: var(--admin-error);
  font-size: 14px;
  font-weight: var(--type-weight-medium);
}

.admin-state-error {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}

.admin-denied {
  justify-content: center;
  text-align: left;
}
.privacy-page {
  min-height: 100dvh;
  padding: max(18px, env(safe-area-inset-top)) 18px calc(env(safe-area-inset-bottom) + 32px);
  background: #f5f5f5;
}

.privacy-head {
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 560px;
  margin: 0 auto 4px;
}

.privacy-back {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #ececee;
  color: #1d1d1f;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}

.privacy-title {
  margin: 0;
  color: #050505;
  font-size: 22px;
  font-weight: var(--type-weight-strong);
  letter-spacing: -0.3px;
}

.privacy-body {
  max-width: 560px;
  margin: 0 auto;
  padding-top: 14px;
}

.privacy-updated {
  margin: 0 0 10px;
  color: rgba(5, 5, 5, .44);
  font-size: 12px;
  font-weight: var(--type-weight-medium);
}

.privacy-intro {
  margin: 0 0 14px;
  color: rgba(5, 5, 5, .64);
  font-size: 15px;
  font-weight: var(--type-weight-medium);
  line-height: 1.5;
}

.privacy-block {
  margin: 0 0 12px;
  padding: 16px;
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 16px 36px rgba(0, 0, 0, .09);
}

.privacy-block h2 {
  margin: 0 0 8px;
  color: #050505;
  font-size: 17px;
  font-weight: var(--type-weight-strong);
  letter-spacing: -0.2px;
}

.privacy-block p {
  margin: 0 0 8px;
  color: rgba(5, 5, 5, .70);
  font-size: 15px;
  font-weight: var(--type-weight-medium);
  line-height: 1.5;
}

.privacy-block p:last-child {
  margin-bottom: 0;
}

.privacy-footer {
  margin: 4px 0 0;
  color: rgba(5, 5, 5, .44);
  font-size: 13px;
  font-weight: var(--type-weight-medium);
  text-align: center;
}

:root[data-theme="dark"] .privacy-page {
  background: #111;
}

:root[data-theme="dark"] .privacy-back {
  background: #2c2c2e;
  color: #f7f7f7;
}

:root[data-theme="dark"] .privacy-title,
:root[data-theme="dark"] .privacy-block h2 {
  color: #f7f7f7;
}

:root[data-theme="dark"] .privacy-block {
  background: #202021;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
}

:root[data-theme="dark"] .privacy-updated,
:root[data-theme="dark"] .privacy-intro,
:root[data-theme="dark"] .privacy-block p {
  color: rgba(247, 247, 247, .70);
}

:root[data-theme="dark"] .privacy-footer {
  color: rgba(247, 247, 247, .44);
}
:root {
  color-scheme: light dark;
  --bg: #f5f5f5;
  --bg2: #eef4ed;
  --ink: #1d1d1f;
  --muted: #666668;
  --card: #ffffff;
  --card-soft: rgba(255, 255, 255, 0.72);
  --line: #e8e8ea;
  --nav: #ffffff;
  --pill: #ffffff;
  --soft: #f0f0f5;
  --green: #3f8f2b;
  --green2: #78bf42;
  --orange: #ff7a59;
  --orange2: #ffb088;
  --blue: #5d97ff;
  --blue2: #6aaee8;
  --pink: #ff5f8f;
  --amber: #ff9f43;
  --violet: #9b7bd8;
  --shadow: 0 24px 70px rgba(0, 0, 0, 0.13);
  --shadow-strong: 0 -10px 40px rgba(0, 0, 0, 0.08);
  --nav-h: 88px;
  --visual-vh: 100dvh;
  --visual-offset-top: 0px;
  --training-top-pad: max(0px, calc(env(safe-area-inset-top, 0px) - 48px));
  --font-sans: "Satoshi", Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", sans-serif;
  --protein: #ff8267;
  --fat: #ffd05d;
  --carb: #5abc83;
  --text: #050505;
  --faint: #9b9b9e;
  --top: #ffffff;
  --panel: #ffffff;
  --panel-2: #ededee;
  --chip: #e7e7e8;
  --ring: #e3e3e5;
  --sheet: #ffffff;
  --scrim: rgba(0, 0, 0, 0.50);
  --press-fill: rgba(0, 0, 0, 0.075);
  --top-block-h: 282px;
  --bottom-stack-h: 154px;
  --keyboard-inset: 0px;
  --ios-bottom-space: 0px;
  --nav-bottom-pad: 10px;
  --search-dock-bottom: 96px;
  --comida-food-bg: url("/assets/comida-fon.png?v=20260519-bgsoft2");
  --comida-food-bg-tint: linear-gradient(180deg, rgba(250, 250, 247, .94) 0%, rgba(250, 250, 247, .90) 42%, rgba(250, 250, 247, .96) 100%);
  --comida-food-panel: color-mix(in srgb, var(--top) 82%, transparent);
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #111111;
  --bg2: #050506;
  --ink: #ffffff;
  --muted: #a8a8ab;
  --card: rgba(255, 255, 255, 0.04);
  --card-soft: rgba(255, 255, 255, 0.055);
  --line: #3b3b3d;
  --nav: #1f1f20;
  --pill: rgba(255, 255, 255, 0.05);
  --soft: rgba(255, 255, 255, 0.08);
  --green: #19c17d;
  --green2: #59d7aa;
  --orange: #ff2d70;
  --orange2: #ffb020;
  --blue: #00a7d6;
  --blue2: #42d4f0;
  --pink: #ff2d70;
  --amber: #ffb020;
  --violet: #b388ff;
  --shadow: 0 28px 80px rgba(0, 0, 0, 0.55);
  --shadow-strong: 0 -14px 50px rgba(0, 0, 0, 0.7);
  --text: #f7f7f7;
  --faint: #737377;
  --top: #1f1f20;
  --panel: #202021;
  --panel-2: #383839;
  --chip: #343435;
  --ring: #343436;
  --sheet: #1f1f20;
  --scrim: rgba(0, 0, 0, 0.62);
  --press-fill: rgba(255, 255, 255, 0.09);
  --comida-food-bg: url("/assets/comida-fon-dark.png?v=20260520-dark1");
  --comida-food-bg-tint: linear-gradient(180deg, rgba(8, 9, 10, .58) 0%, rgba(8, 9, 10, .62) 46%, rgba(8, 9, 10, .68) 100%);
  --comida-food-panel: color-mix(in srgb, var(--panel) 84%, transparent);
}

.home-classic-shell {
  --classic-accent: #C6F04F !important;
  --classic-accent-soft: rgba(198, 240, 79, .16) !important;
  --classic-ink-soft: rgba(34, 36, 33, .68);
  --classic-hairline: rgba(44, 48, 45, .08);
}

:root[data-theme="dark"] .home-classic-shell {
  --classic-accent: #8ab8a5;
  --classic-accent-soft: rgba(138, 184, 165, .15);
  --classic-ink-soft: rgba(242, 242, 238, .66);
  --classic-hairline: rgba(255,255,255,.08);
}
@supports (padding-top: constant(safe-area-inset-top)) {
  :root {
    --training-top-pad: max(0px, calc(constant(safe-area-inset-top) - 48px));
  }
}
@media (max-height: 760px) {
  :root {
    --top-block-h: 260px;
    --search-dock-bottom: 98px;
  }
}

:root {
  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", system-ui, sans-serif;
}

:root {
  --type-weight-light: 300;
  --type-weight-regular: 400;
  --type-weight-medium: 500;
  --type-weight-strong: 600;
}
b,
strong,
th {
  font-weight: var(--type-weight-strong);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: var(--type-weight-strong);
}
* {
  box-sizing: border-box;
}
html {
  margin: 0;
  width: 100%;
  height: 100% !important;
  min-height: 100% !important;
  overflow: hidden !important;
  background: var(--bg);
  color: var(--text);
  font-family:
    -apple-system,
    BlinkMacSystemFont,
    'SF Pro Display',
    'SF Pro Text',
    'Segoe UI',
    sans-serif;
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
body {
  margin: 0;
  width: 100%;
  height: 100% !important;
  min-height: 100% !important;
  max-width: 100%;
  overflow: hidden !important;
  color: var(--text);
  font-family: var(--font-sans) !important;
  letter-spacing: 0;
  touch-action: manipulation;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: none;
  user-select: none;
  background: var(--bg);
}
body *:not(svg):not(svg *) {
  font-family: var(--font-sans) !important;
}
button {
  border: 0;
  font: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  color: inherit;
  background: transparent;
  font-family: var(--font-sans) !important;
}

input {
  font: inherit;
  font-family: var(--font-sans) !important;
}
textarea,
select {
  font-family: var(--font-sans) !important;
}
html.training-active {
  width: 100%;
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
  background: #0a0b0d;
}
body.modal-open {
  overflow: hidden;
}
body.training-active {
  width: 100%;
  height: 100%;
  overflow: hidden !important;
  overscroll-behavior: none;
  touch-action: manipulation;
  background: #0a0b0d !important;
}
:root[data-theme='dark'] body {
  background:
    radial-gradient(72% 42% at 18% -8%, rgba(25, 193, 125, 0.16), transparent 58%),
    radial-gradient(74% 48% at 96% 18%, rgba(0, 167, 214, 0.12), transparent 62%),
    radial-gradient(72% 50% at 8% 74%, rgba(255, 45, 112, 0.12), transparent 64%),
    linear-gradient(135deg, var(--bg), var(--bg2));
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
:where(button, [role='button'], a[href], input, textarea, select, [tabindex]):focus-visible {
  outline: 2px solid var(--classic-accent, #c6f04f);
  outline-offset: 2px;
}
#app {
  height: 100%;
}
#app {
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
input,
textarea,
select,
[contenteditable="true"],
[data-selectable] {
  -webkit-user-select: text;
  user-select: text;
  -webkit-touch-callout: default;
}

@keyframes vt-enter-from-right {
  from {
    transform: translateX(100%);
  }
}

@keyframes vt-leave-to-left {
  to {
    transform: translateX(-30%);
    opacity: 0.6;
  }
}

@keyframes vt-enter-from-left {
  from {
    transform: translateX(-30%);
    opacity: 0.6;
  }
}

@keyframes vt-leave-to-right {
  to {
    transform: translateX(100%);
  }
}
:root[data-vt='forward']::view-transition-new(root) {
  animation: vt-enter-from-right 320ms cubic-bezier(0.32, 0.72, 0, 1) both;
  z-index: 2;
}

:root[data-vt='forward']::view-transition-old(root) {
  animation: vt-leave-to-left 320ms cubic-bezier(0.32, 0.72, 0, 1) both;
  z-index: 1;
}
:root[data-vt='back']::view-transition-old(root) {
  animation: vt-leave-to-right 320ms cubic-bezier(0.32, 0.72, 0, 1) both;
  z-index: 2;
}

:root[data-vt='back']::view-transition-new(root) {
  animation: vt-enter-from-left 320ms cubic-bezier(0.32, 0.72, 0, 1) both;
  z-index: 1;
}
:root[data-vt] .bottom-nav {
  view-transition-name: comida-nav;
}
:root[data-vt][data-vt-scope='local'] .horta-head {
  view-transition-name: horta-head;
}

:root[data-vt][data-vt-scope='local'] .horta-tabs {
  view-transition-name: horta-tabs;
}
:root[data-vt][data-vt-scope='local'] .treino-top {
  view-transition-name: treino-top;
}

:root[data-vt][data-vt-scope='local'] .treino-switch-card {
  view-transition-name: treino-hero;
}
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
  }
}
.app-icon {
  width: 24px;
  height: 24px;
  color: inherit;
}
button:active:not(:disabled) {
  scale: 0.97;
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}