/*
 * MADRE · schermate dell'app in HTML/CSS, dentro una cornice di telefono.
 *
 * .ph-*   cornice (bordo, foro fotocamera, status bar 9:41, barra gesture)
 * .app-*  interfaccia dell'app (templates in partials/screens.html)
 *
 * Tutto è misurato in punti dell'app: 1 pt = var(--u), con lo schermo largo
 * 390 pt come un telefono vero. --u deriva da --ph-w (default 300px), quindi
 * il telefono scala nitido da 220 a 380px impostando solo --ph-w (sulla .ph
 * o su un antenato).
 *
 * Colori, raggi e font copiati da src/theme/tokens.ts (fondo pagina bianco,
 * card su surface). Font: Archivo 500 (titoli, maiuscolo, -0.01em) e Inter.
 */

/* ── Token ─────────────────────────────────────────────────────────────────── */

.ph {
  --app-bg: #ffffff;
  --app-surface: #f5f5f4;
  --app-surface-muted: #eaeae8;
  --app-ink: #141414;
  --app-ink-muted: #5f5f5f;
  --app-ink-subtle: #8e8e8e;
  --app-green: #244533;
  --app-green-pressed: #1b3828;
  --app-green-soft: #e3ebe5;
  --app-terracotta: #b5603f;
  --app-ochre: #c69a4a;
  --app-border: #e6e6e4;
  --app-danger: #a64235;
  --app-on-photo: #ffffff;
  --app-on-photo-muted: rgba(255, 255, 255, 0.8);
  --app-band: rgba(16, 16, 16, 0.82);
  --app-band-divider: rgba(255, 255, 255, 0.22);
  --app-rail-muted: rgba(255, 255, 255, 0.35);
  --app-chip-on-photo: rgba(255, 255, 255, 0.9);
  --app-backdrop: rgba(0, 0, 0, 0.35);
  --app-scrim-ink: 10, 10, 10;

  --app-font-title: 'Archivo', 'Helvetica Neue', Arial, system-ui, sans-serif;
  --app-font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* Phone geometry: outer width, bezel, and the app point. */
  --_w: var(--ph-w, 300px);
  --_bezel: calc(var(--_w) * 0.03);
  --u: calc((var(--_w) - 2 * var(--_bezel)) / 390);
}

/* ── Cornice ───────────────────────────────────────────────────────────────── */

.ph {
  position: relative;
  box-sizing: border-box;
  width: var(--_w);
  aspect-ratio: 9 / 19.5;
  flex: none;
  border-radius: calc(var(--_w) * 0.147);
  background: linear-gradient(160deg, #2b2b2b 0%, #0d0d0d 38%, #050505 100%);
  box-shadow:
    inset 0 0 0 calc(var(--_w) * 0.004) rgba(255, 255, 255, 0.14),
    inset 0 0 0 calc(var(--_w) * 0.009) #0a0a0a,
    0 calc(var(--_w) * 0.012) calc(var(--_w) * 0.03) rgba(0, 0, 0, 0.12),
    0 calc(var(--_w) * 0.07) calc(var(--_w) * 0.16) rgba(0, 0, 0, 0.16);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Punch-hole camera. */
.ph::before {
  content: '';
  position: absolute;
  z-index: 40;
  top: calc(var(--_bezel) + var(--u) * 13);
  left: 50%;
  width: calc(var(--u) * 12);
  height: calc(var(--u) * 12);
  border-radius: 50%;
  transform: translateX(-50%);
  background: radial-gradient(circle at 35% 35%, #2a2f3a 0 18%, #07080a 40%);
  box-shadow: 0 0 0 calc(var(--u) * 1.5) #000;
  pointer-events: none;
}

/* Side keys: volume and power, on the right edge. */
.ph::after {
  content: '';
  position: absolute;
  right: calc(var(--_w) * -0.008);
  top: 21%;
  width: calc(var(--_w) * 0.01);
  height: 13%;
  border-radius: 0 3px 3px 0;
  background: #1c1c1c;
  box-shadow: 0 calc(var(--_w) * 0.36) 0 -0.5px #1c1c1c;
}

.ph-screen {
  position: absolute;
  inset: var(--_bezel);
  overflow: hidden;
  border-radius: calc(var(--_w) * 0.147 - var(--_bezel));
  background: var(--app-bg);
  isolation: isolate;
}

/*
 * Status bar and gesture bar belong to the screen, so each template carries
 * its own clock (--app-time) and tone (data-status="light" on photo or dark
 * screens). --ph-time on any ancestor overrides the clock everywhere.
 */
.app-screen {
  --app-status: #141414;
  --app-status-icons: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 62 14'%3E%3Cg fill='%23141414'%3E%3Cpath d='M8 13 0.6 4.6a11.6 11.6 0 0 1 14.8 0Z'/%3E%3Cpath d='M20 13h11V2Z'/%3E%3Crect x='37.6' y='2.6' width='20.8' height='8.8' rx='2.4' fill='none' stroke='%23141414' stroke-width='1.2' opacity='.45'/%3E%3Crect x='39.4' y='4.4' width='14' height='5.2' rx='1.2'/%3E%3Crect x='59.4' y='5.2' width='1.6' height='3.6' rx='.8' opacity='.45'/%3E%3C/g%3E%3C/svg%3E");
}
.app-screen[data-status='light'] {
  --app-status: #ffffff;
  --app-status-icons: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 62 14'%3E%3Cg fill='%23ffffff'%3E%3Cpath d='M8 13 0.6 4.6a11.6 11.6 0 0 1 14.8 0Z'/%3E%3Cpath d='M20 13h11V2Z'/%3E%3Crect x='37.6' y='2.6' width='20.8' height='8.8' rx='2.4' fill='none' stroke='%23ffffff' stroke-width='1.2' opacity='.55'/%3E%3Crect x='39.4' y='4.4' width='14' height='5.2' rx='1.2'/%3E%3Crect x='59.4' y='5.2' width='1.6' height='3.6' rx='.8' opacity='.55'/%3E%3C/g%3E%3C/svg%3E");
}
.app-screen::before {
  content: var(--ph-time, var(--app-time, '9:41'));
  position: absolute;
  z-index: 30;
  top: 0;
  left: 0;
  right: 0;
  height: calc(var(--u) * 40);
  padding: calc(var(--u) * 3) calc(var(--u) * 28) 0;
  display: flex;
  align-items: center;
  font: 600 calc(var(--u) * 14.5) / 1 var(--app-font-sans);
  letter-spacing: calc(var(--u) * 0.1);
  font-variant-numeric: tabular-nums;
  color: var(--app-status);
  background: var(--app-status-icons) no-repeat right calc(var(--u) * 26) center / calc(var(--u) * 60) calc(var(--u) * 13.5);
  pointer-events: none;
}
.app-screen::after {
  content: '';
  position: absolute;
  z-index: 30;
  left: 50%;
  bottom: calc(var(--u) * 8);
  width: calc(var(--u) * 116);
  height: calc(var(--u) * 4.5);
  border-radius: 99px;
  transform: translateX(-50%);
  background: var(--app-status);
  opacity: 0.88;
  pointer-events: none;
}
/* A sheet covers the bottom: the gesture bar is dark again there. */
.app-dosi::after {
  background: #141414;
}

/* ── Base dell'app ─────────────────────────────────────────────────────────── */

.app-screen {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: var(--app-bg);
  color: var(--app-ink);
  font-family: var(--app-font-sans);
  font-size: calc(var(--u) * 16);
  line-height: 1.4;
  text-align: left;
  -webkit-font-smoothing: antialiased;
  font-synthesis: none;
  user-select: none;
}
.app-screen *,
.app-screen *::before,
.app-screen *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
.app-screen ol,
.app-screen ul {
  list-style: none;
}
.app-screen img {
  display: block;
}
.app-screen--dark {
  background: var(--app-ink);
  color: var(--app-on-photo);
}
.app-screen--black {
  background: #000;
  color: #fff;
}

/* Scroll position: set --scroll (in app points) to show a screen scrolled. */
.app-scroll {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  transform: translateY(calc(var(--u) * var(--scroll, 0) * -1));
  will-change: transform;
}
.app-pad {
  padding: calc(var(--u) * 56) calc(var(--u) * 24) 0;
}
.app-pad-x {
  padding-left: calc(var(--u) * 24);
  padding-right: calc(var(--u) * 24);
}

.app-num {
  font-variant-numeric: tabular-nums;
}
.app-ic {
  display: block;
  flex: none;
  width: calc(var(--u) * 24);
  height: calc(var(--u) * 24);
}

/* Archivo Medium in capitals, tracking -10. */
.app-t {
  font-family: var(--app-font-title);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  line-height: 1.04;
}
.app-display {
  font-size: calc(var(--u) * 44);
  line-height: calc(var(--u) * 41);
}
.app-screentitle {
  font-size: calc(var(--u) * 30);
  line-height: calc(var(--u) * 31);
}
.app-cardtitle {
  font-size: calc(var(--u) * 22);
  line-height: calc(var(--u) * 23);
}
.app-sectitle {
  font-size: calc(var(--u) * 18);
  line-height: calc(var(--u) * 19);
}
.app-timer {
  font-size: calc(var(--u) * 27);
  line-height: calc(var(--u) * 28);
}
.app-grams {
  font-size: calc(var(--u) * 19);
  line-height: calc(var(--u) * 20);
}

.app-eyebrow {
  font-weight: 500;
  font-size: calc(var(--u) * 11);
  line-height: calc(var(--u) * 14);
  letter-spacing: calc(var(--u) * 1.6);
  text-transform: uppercase;
  color: var(--app-ink-muted);
}
.app-eyebrow--green {
  color: var(--app-green);
}
.app-eyebrow--onDark {
  color: var(--app-on-photo-muted);
}
.app-micro {
  font-weight: 500;
  font-size: calc(var(--u) * 10);
  line-height: calc(var(--u) * 14);
  letter-spacing: calc(var(--u) * 2.2);
  text-transform: uppercase;
  color: var(--app-ink-muted);
}
.app-meta {
  display: block;
  font-size: calc(var(--u) * 12);
  line-height: calc(var(--u) * 16);
  color: var(--app-ink-muted);
}
.app-body-sm {
  font-size: calc(var(--u) * 14);
  line-height: calc(var(--u) * 20);
  color: var(--app-ink-muted);
}
.app-label {
  font-weight: 600;
  font-size: calc(var(--u) * 11);
  line-height: calc(var(--u) * 14);
  letter-spacing: calc(var(--u) * 1.8);
  text-transform: uppercase;
  color: var(--app-ink);
}
.app-label--muted {
  color: var(--app-ink-muted);
}
.app-tablehead {
  font-weight: 600;
  font-size: calc(var(--u) * 10.5);
  line-height: calc(var(--u) * 14);
  letter-spacing: calc(var(--u) * 1.4);
  text-transform: uppercase;
}

/* Photography with a dark placeholder while it loads. */
.app-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #2a2622;
}
.app-scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.app-scrim--left {
  background:
    linear-gradient(180deg, rgba(var(--app-scrim-ink), 0) 35%, rgba(var(--app-scrim-ink), 0.78) 100%),
    linear-gradient(90deg, rgba(var(--app-scrim-ink), 0.82) 0%, rgba(var(--app-scrim-ink), 0.5) 45%, rgba(var(--app-scrim-ink), 0.05) 100%);
}
.app-scrim--bottom {
  background: linear-gradient(
    180deg,
    rgba(var(--app-scrim-ink), 0.5) 0%,
    rgba(var(--app-scrim-ink), 0) 22%,
    rgba(var(--app-scrim-ink), 0.08) 50%,
    rgba(var(--app-scrim-ink), 0.72) 100%
  );
}

/* Buttons */
.app-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(var(--u) * 12);
  min-height: calc(var(--u) * 52);
  padding: 0 calc(var(--u) * 22);
  border-radius: 999px;
  font-weight: 500;
  font-size: calc(var(--u) * 16);
  line-height: calc(var(--u) * 20);
  white-space: nowrap;
}
.app-btn-side {
  width: calc(var(--u) * 20);
  display: flex;
  justify-content: center;
}
.app-btn .app-ic {
  width: calc(var(--u) * 20);
  height: calc(var(--u) * 20);
}
.app-btn--primary {
  background: var(--app-green);
  color: #fff;
  font-size: calc(var(--u) * 17);
}
.app-btn--secondary {
  border: calc(var(--u) * 1) solid var(--app-border);
  color: var(--app-ink);
}
.app-btn--grow {
  flex: 1;
}

.app-iconbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: calc(var(--u) * 44);
  height: calc(var(--u) * 44);
  border-radius: 999px;
  color: var(--app-ink);
  flex: none;
}
.app-iconbtn--photo {
  color: var(--app-on-photo);
}
.app-iconbtn--filled {
  background: var(--app-green);
  color: #fff;
}
.app-iconbtn--outline {
  width: calc(var(--u) * 34);
  height: calc(var(--u) * 34);
  border: calc(var(--u) * 1) solid var(--app-border);
}
.app-iconbtn--outline .app-ic {
  width: calc(var(--u) * 16);
  height: calc(var(--u) * 16);
}

.app-chips {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--u) * 8);
}
.app-chip {
  display: inline-flex;
  align-items: center;
  min-height: calc(var(--u) * 40);
  padding: 0 calc(var(--u) * 16);
  border-radius: 999px;
  border: calc(var(--u) * 1) solid var(--app-border);
  background: var(--app-surface);
  font-weight: 500;
  font-size: calc(var(--u) * 14);
  color: var(--app-ink);
}
.app-chip.is-active {
  background: var(--app-green-soft);
  border-color: var(--app-green);
  color: var(--app-green);
}

/* Bottom tab bar (64 pt + safe area). */
.app-tabbar {
  position: absolute;
  z-index: 10;
  left: 0;
  right: 0;
  bottom: 0;
  height: calc(var(--u) * 88);
  display: flex;
  padding: calc(var(--u) * 8) calc(var(--u) * 6) calc(var(--u) * 24);
  background: var(--app-bg);
  border-top: calc(var(--u) * 1) solid var(--app-border);
}
.app-tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(var(--u) * 3);
  font-weight: 500;
  font-size: calc(var(--u) * 12);
  line-height: calc(var(--u) * 15);
  color: var(--app-ink-muted);
}
.app-tab.is-active {
  color: var(--app-green);
}
.app-tabbar--dark {
  background: #000;
  border-top-color: rgba(255, 255, 255, 0.08);
}
.app-tabbar--dark .app-tab {
  color: rgba(255, 255, 255, 0.5);
}
.app-tabbar--dark .app-tab.is-active {
  color: #fff;
}

/* ── Home ──────────────────────────────────────────────────────────────────── */

.app-home .app-scroll {
  padding-top: calc(var(--u) * 52);
}
.app-home-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 calc(var(--u) * 24);
}
.app-logo {
  display: block;
  height: calc(var(--u) * 34);
  width: calc(var(--u) * 98.6);
  fill: var(--app-green);
}
.app-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(var(--u) * 42);
  height: calc(var(--u) * 42);
  border-radius: 50%;
  background: var(--app-green);
  color: #fff;
  font-family: var(--app-font-title);
  font-weight: 500;
  font-size: calc(var(--u) * 21);
  line-height: 1;
}
.app-home-headline {
  display: flex;
  align-items: center;
  padding: 0 calc(var(--u) * 24);
  margin-top: calc(var(--u) * 24);
}
.app-home-headline .app-display {
  flex: 1;
  min-width: 0;
  padding-top: calc(var(--u) * 4);
}
.app-side {
  width: calc(var(--u) * 122);
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin: calc(var(--u) * 12) 0;
  padding-left: calc(var(--u) * 16);
  border-left: calc(var(--u) * 1) solid var(--app-border);
}
.app-side-eyebrow {
  color: var(--app-ink);
  line-height: calc(var(--u) * 15);
}
.app-side-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(var(--u) * 4);
  margin-top: calc(var(--u) * 12);
}
.app-side-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(var(--u) * 34);
  height: calc(var(--u) * 34);
  border-radius: 50%;
  background: var(--app-green);
  color: #fff;
}
.app-side-btn .app-ic {
  width: calc(var(--u) * 18);
  height: calc(var(--u) * 18);
}

.app-bakecard {
  position: relative;
  height: calc(var(--u) * 200);
  margin: calc(var(--u) * 22) calc(var(--u) * 12) 0;
  border-radius: calc(var(--u) * 20);
  overflow: hidden;
  background: #1d1a17;
  color: var(--app-on-photo);
}
.app-bakecard-text {
  position: relative;
  padding: calc(var(--u) * 16) calc(var(--u) * 22) 0;
}
.app-photochip {
  display: inline-flex;
  align-items: center;
  height: calc(var(--u) * 22);
  padding: 0 calc(var(--u) * 14);
  border-radius: 999px;
  background: var(--app-chip-on-photo);
  color: var(--app-ink);
  font-weight: 500;
  font-size: calc(var(--u) * 10);
  letter-spacing: calc(var(--u) * 2.4);
  text-transform: uppercase;
}
.app-bakecard-title {
  margin-top: calc(var(--u) * 12);
  font-size: calc(var(--u) * 28);
  line-height: calc(var(--u) * 29);
  white-space: nowrap;
}
.app-bakecard-meta {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 8);
  margin-top: calc(var(--u) * 4);
  font-size: calc(var(--u) * 13.5);
  line-height: calc(var(--u) * 18);
  color: var(--app-on-photo-muted);
  white-space: nowrap;
}
.app-bakecard-meta .app-ic {
  width: calc(var(--u) * 13);
  height: calc(var(--u) * 13);
}

/* Phase rail (BakeTimeline): 4 equal columns, rail between node centres. */
.app-rail {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(var(--u) * 14);
  overflow: hidden;
}
.app-rail-seg {
  position: absolute;
  top: calc(var(--u) * 10);
  width: 25%;
  height: calc(var(--u) * 2);
  background: var(--app-rail-muted);
}
.app-rail-seg.is-reached {
  background: var(--app-on-photo);
}
.app-rail-nodes {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.app-rail-node {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 calc(var(--u) * 2);
  min-width: 0;
}
.app-dot {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(var(--u) * 22);
  height: calc(var(--u) * 22);
  border-radius: 50%;
  margin-bottom: calc(var(--u) * 8);
}
.app-dot--done {
  background: var(--app-on-photo);
  color: var(--app-ink);
}
.app-dot--done .app-ic {
  width: calc(var(--u) * 13);
  height: calc(var(--u) * 13);
}
.app-dot--active {
  border: calc(var(--u) * 2.5) solid var(--app-on-photo);
  background: #161616;
}
.app-dot--active span {
  width: calc(var(--u) * 13);
  height: calc(var(--u) * 13);
  border-radius: 50%;
  background: var(--app-green);
}
.app-dot--pending {
  border: calc(var(--u) * 1.5) solid rgba(255, 255, 255, 0.5);
  background: #1b1b1b;
}
.app-rail-title {
  font-weight: 500;
  font-size: calc(var(--u) * 12.5);
  line-height: calc(var(--u) * 16);
  white-space: nowrap;
}
.app-rail-sub {
  font-size: calc(var(--u) * 11.5);
  line-height: calc(var(--u) * 15);
  color: var(--app-on-photo-muted);
  white-space: nowrap;
}

.app-home-sec {
  margin-top: calc(var(--u) * 26);
}
.app-home-sec--flour {
  margin-top: calc(var(--u) * 32);
}
.app-sechead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 calc(var(--u) * 20);
  margin-bottom: calc(var(--u) * 14);
}
.app-carousel {
  display: flex;
  gap: calc(var(--u) * 10);
  padding: 0 calc(var(--u) * 20);
}
.app-covertile {
  position: relative;
  flex: none;
  width: calc(var(--u) * 235);
  height: calc(var(--u) * 132);
  border-radius: calc(var(--u) * 8);
  overflow: hidden;
  color: var(--app-on-photo);
}
.app-covertile-body {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: calc(var(--u) * 14);
}
.app-covertile-arrow {
  align-self: flex-end;
  width: calc(var(--u) * 18);
  height: calc(var(--u) * 18);
}
.app-covertile-title {
  font-size: calc(var(--u) * 24);
  line-height: calc(var(--u) * 25);
}
.app-covertile-meta {
  margin-top: calc(var(--u) * 2);
  font-size: calc(var(--u) * 12.5);
  color: var(--app-on-photo-muted);
}
.app-recipecard {
  flex: none;
  width: calc(var(--u) * 116);
}
.app-recipecard-img {
  width: 100%;
  height: calc(var(--u) * 88);
  border-radius: calc(var(--u) * 8);
  object-fit: cover;
  background: var(--app-surface-muted);
}
.app-recipecard-name {
  margin-top: calc(var(--u) * 9);
  font-size: calc(var(--u) * 13.5);
  line-height: calc(var(--u) * 18);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.app-recipecard-meta {
  margin-top: calc(var(--u) * 1);
  font-size: calc(var(--u) * 11);
  line-height: calc(var(--u) * 15);
  color: var(--app-ink-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.app-flourcard {
  flex: none;
  width: calc(var(--u) * 112);
  height: calc(var(--u) * 132);
  border-radius: calc(var(--u) * 8);
  overflow: hidden;
  background: var(--app-surface);
}
.app-flourcard-img {
  width: 100%;
  height: calc(var(--u) * 58);
  object-fit: cover;
  background: var(--app-surface-muted);
}
.app-flourcard-body {
  padding: calc(var(--u) * 8) calc(var(--u) * 10) 0;
}
.app-flourcard-name {
  font-size: calc(var(--u) * 14);
  line-height: calc(var(--u) * 18);
}
.app-flourcard-qty {
  margin: calc(var(--u) * 2) 0 calc(var(--u) * 8);
  font-size: calc(var(--u) * 12);
  line-height: calc(var(--u) * 16);
  color: var(--app-ink-muted);
}
.app-stockbar {
  display: block;
  height: calc(var(--u) * 4);
  border-radius: 99px;
  background: var(--app-surface-muted);
  overflow: hidden;
}
.app-stockbar span {
  display: block;
  height: 100%;
  border-radius: 99px;
  background: var(--app-green);
}

/* ── Ricetta ───────────────────────────────────────────────────────────────── */

.app-hero {
  position: relative;
  height: calc(var(--u) * 371);
  overflow: hidden;
  background: #1d1a17;
  color: var(--app-on-photo);
}
.app-herobar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  padding: calc(var(--u) * 44) calc(var(--u) * 12) 0;
}
.app-herobar-actions {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 8);
}
.app-recipe .app-herobar-actions {
  gap: 0;
}
.app-hero-text {
  position: absolute;
  left: calc(var(--u) * 22);
  right: calc(var(--u) * 24);
  bottom: calc(var(--u) * 84);
}
.app-hero-eyebrow {
  margin-bottom: calc(var(--u) * 16);
  font-weight: 500;
  font-size: calc(var(--u) * 11);
  line-height: calc(var(--u) * 14);
  letter-spacing: calc(var(--u) * 2.4);
  text-transform: uppercase;
  opacity: 0.85;
}
.app-hero-title {
  font-size: calc(var(--u) * 54);
  line-height: calc(var(--u) * 50);
}
.app-hero-title--44 {
  font-size: calc(var(--u) * 44);
  line-height: calc(var(--u) * 46);
}
.app-hero-sub {
  margin-top: calc(var(--u) * 16);
  font-weight: 500;
  font-size: calc(var(--u) * 11.5);
  line-height: calc(var(--u) * 14);
  letter-spacing: calc(var(--u) * 2.4);
  text-transform: uppercase;
}
.app-band {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: calc(var(--u) * 60);
  display: flex;
  align-items: center;
  padding: 0 calc(var(--u) * 12);
  background: var(--app-band);
}
.app-band-div {
  flex: none;
  width: calc(var(--u) * 1);
  height: calc(var(--u) * 30);
  background: var(--app-band-divider);
}
.app-stat {
  flex: 1 0 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--u) * 9);
}
.app-stat--press {
  flex: 1 0 auto;
  justify-content: flex-start;
  gap: calc(var(--u) * 7);
}
.app-stat .app-ic {
  width: calc(var(--u) * 24);
  height: calc(var(--u) * 24);
}
.app-stat .app-stat-chev {
  width: calc(var(--u) * 16);
  height: calc(var(--u) * 16);
  margin-left: calc(var(--u) * -2);
  margin-right: calc(var(--u) * 2);
}
.app-stat-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.app-stat-top,
.app-stat-bottom {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.app-stat-top {
  font-weight: 500;
  font-size: calc(var(--u) * 14);
  line-height: calc(var(--u) * 18);
}
.app-stat-bottom {
  font-size: calc(var(--u) * 12);
  line-height: calc(var(--u) * 16);
  color: var(--app-on-photo-muted);
}

.app-tabs {
  display: flex;
  justify-content: space-between;
  padding: 0 calc(var(--u) * 20);
  border-bottom: calc(var(--u) * 1) solid var(--app-border);
}
.app-tabs-item {
  display: flex;
  align-items: center;
  min-height: calc(var(--u) * 52);
  padding: 0 calc(var(--u) * 10);
  margin-bottom: calc(var(--u) * -1);
  border-bottom: calc(var(--u) * 2) solid transparent;
  font-size: calc(var(--u) * 15.5);
  color: var(--app-ink-muted);
  white-space: nowrap;
}
.app-tabs-item.is-active {
  font-weight: 600;
  color: var(--app-ink);
  border-bottom-color: var(--app-ink);
}

.app-recipe-body {
  padding-top: calc(var(--u) * 22);
  padding-bottom: calc(var(--u) * 120);
}
.app-calc {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 12);
  margin: 0 calc(var(--u) * 20) calc(var(--u) * 20);
  padding: calc(var(--u) * 16);
  border-radius: calc(var(--u) * 20);
  background: var(--app-surface);
}
.app-calc-eyebrow {
  font-weight: 600;
  font-size: calc(var(--u) * 11);
  line-height: calc(var(--u) * 20);
  letter-spacing: calc(var(--u) * 1.6);
  text-transform: uppercase;
}
.app-calc-row {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 12);
}
.app-stepper,
.app-hold {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: calc(var(--u) * 48);
  height: calc(var(--u) * 48);
  border-radius: 50%;
  border: calc(var(--u) * 1) solid var(--app-border);
  background: var(--app-bg);
}
.app-stepper .app-ic {
  width: calc(var(--u) * 20);
  height: calc(var(--u) * 20);
}
.app-calc-value {
  flex: 1;
  text-align: center;
  font-weight: 600;
  font-size: calc(var(--u) * 36);
  line-height: calc(var(--u) * 44);
  letter-spacing: calc(var(--u) * -1.2);
}
.app-calc-value small {
  margin-left: calc(var(--u) * 4);
  font-weight: 400;
  font-size: calc(var(--u) * 18);
  letter-spacing: 0;
  color: var(--app-ink-muted);
}
.app-calc-hint {
  font-size: calc(var(--u) * 12.5);
  line-height: calc(var(--u) * 17);
  color: var(--app-ink-muted);
}
.app-ing-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 calc(var(--u) * 28) calc(var(--u) * 12);
}
.app-ing-scale {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 8);
  min-height: calc(var(--u) * 28);
}
.app-ing-scale .app-ic {
  width: calc(var(--u) * 15);
  height: calc(var(--u) * 15);
}
.app-ing-row {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 12);
  padding-left: calc(var(--u) * 28);
}
.app-thumb {
  flex: none;
  width: calc(var(--u) * 38);
  height: calc(var(--u) * 38);
  border-radius: calc(var(--u) * 6);
  object-fit: cover;
  background: var(--app-surface-muted);
}
.app-ing-line {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 8);
  min-height: calc(var(--u) * 50);
  padding-right: calc(var(--u) * 28);
  border-top: calc(var(--u) * 1) solid var(--app-border);
}
.app-ing-name {
  flex: 1;
  min-width: 0;
  font-size: calc(var(--u) * 16);
  line-height: calc(var(--u) * 21);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.app-ing-pct {
  width: calc(var(--u) * 58);
  text-align: right;
  font-size: calc(var(--u) * 15);
  line-height: calc(var(--u) * 20);
  color: var(--app-ink-muted);
}
.app-ing-grams {
  min-width: calc(var(--u) * 92);
  display: flex;
  justify-content: flex-end;
}
.app-ing-grams .app-grams {
  border-bottom: calc(var(--u) * 1) solid var(--app-border);
  white-space: nowrap;
}
.app-ing-total {
  padding: calc(var(--u) * 12) calc(var(--u) * 28) 0;
  border-top: calc(var(--u) * 1) solid var(--app-border);
  font-size: calc(var(--u) * 12);
  line-height: calc(var(--u) * 16);
  color: var(--app-ink-muted);
}
.app-nextcard {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 16);
  margin: calc(var(--u) * 20) calc(var(--u) * 20) 0;
  padding: calc(var(--u) * 18) calc(var(--u) * 20);
  border-radius: calc(var(--u) * 18);
  background: var(--app-surface-muted);
}
.app-nextcard > .app-ic:first-child {
  width: calc(var(--u) * 22);
  height: calc(var(--u) * 22);
}
.app-nextcard-chev {
  color: var(--app-ink-muted);
  width: calc(var(--u) * 20) !important;
  height: calc(var(--u) * 20) !important;
}
.app-nextcard > div {
  flex: 1;
}
.app-nextcard-title {
  font-size: calc(var(--u) * 17);
  line-height: calc(var(--u) * 18);
}
.app-nextcard-body {
  margin-top: calc(var(--u) * 4);
  font-size: calc(var(--u) * 14);
  line-height: calc(var(--u) * 19);
  color: var(--app-ink-muted);
}

.app-actionbar {
  position: absolute;
  z-index: 5;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  gap: calc(var(--u) * 8);
  padding: calc(var(--u) * 12) calc(var(--u) * 24) calc(var(--u) * 32);
  background: var(--app-bg);
  border-top: calc(var(--u) * 1) solid var(--app-border);
}

/* ── Dosi (bottom sheet) ───────────────────────────────────────────────────── */

.app-backdrop {
  position: absolute;
  inset: 0;
  z-index: 8;
  background: var(--app-backdrop);
}
.app-sheet {
  position: absolute;
  z-index: 9;
  left: 0;
  right: 0;
  bottom: 0;
  padding: calc(var(--u) * 30) calc(var(--u) * 24) calc(var(--u) * 48);
  border-radius: calc(var(--u) * 24) calc(var(--u) * 24) 0 0;
  background: var(--app-surface);
  box-shadow: 0 calc(var(--u) * -6) calc(var(--u) * 24) rgba(0, 0, 0, 0.08);
}
.app-sheet-handle {
  position: absolute;
  top: calc(var(--u) * 10);
  left: 50%;
  width: calc(var(--u) * 40);
  height: calc(var(--u) * 4);
  margin-left: calc(var(--u) * -20);
  border-radius: 99px;
  background: var(--app-border);
}
.app-sheet .app-cardtitle {
  margin-top: calc(var(--u) * 4);
}
.app-sheet-lead {
  margin: calc(var(--u) * 20) 0 calc(var(--u) * 12);
}
.app-dose-input {
  display: flex;
  align-items: center;
  min-height: calc(var(--u) * 64);
  margin: calc(var(--u) * 20) 0 calc(var(--u) * 12);
  border-bottom: calc(var(--u) * 1) solid var(--app-ink);
}
.app-dose-value {
  flex: 1;
  font-size: calc(var(--u) * 48);
  line-height: calc(var(--u) * 56);
  padding: calc(var(--u) * 4) 0;
}
.app-dose-unit {
  margin-left: calc(var(--u) * 12);
  font-weight: 500;
  font-size: calc(var(--u) * 16);
  color: var(--app-ink-muted);
}
.app-dose-preview {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 8);
  margin: calc(var(--u) * 20) 0;
  padding: calc(var(--u) * 16);
  border-radius: calc(var(--u) * 14);
  background: var(--app-bg);
}
.app-dose-preview div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.app-dose-preview dt {
  font-size: calc(var(--u) * 14);
  line-height: calc(var(--u) * 20);
  color: var(--app-ink-muted);
}
.app-dose-preview dd {
  font-weight: 500;
  font-size: calc(var(--u) * 16);
  line-height: calc(var(--u) * 20);
}

/* ── Pianifica ─────────────────────────────────────────────────────────────── */

.app-plan-lead {
  margin-top: calc(var(--u) * 4);
}
.app-plan .app-label {
  margin: calc(var(--u) * 24) 0 calc(var(--u) * 12);
}
.app-plan-recipes,
.app-plan-days {
  display: flex;
  gap: calc(var(--u) * 8);
  margin: 0 calc(var(--u) * -24);
  padding: 0 calc(var(--u) * 24);
}
.app-plan-recipe {
  flex: none;
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 12);
  max-width: calc(var(--u) * 220);
  padding: calc(var(--u) * 8) calc(var(--u) * 16) calc(var(--u) * 8) calc(var(--u) * 8);
  border: calc(var(--u) * 1.5) solid var(--app-border);
  border-radius: calc(var(--u) * 14);
}
.app-plan-recipe.is-active {
  border-color: var(--app-ink);
}
.app-plan-thumb {
  width: calc(var(--u) * 44);
  height: calc(var(--u) * 44);
  border-radius: calc(var(--u) * 10);
  object-fit: cover;
  background: var(--app-surface-muted);
}
.app-plan-rname {
  display: block;
  font-weight: 500;
  font-size: calc(var(--u) * 15);
  line-height: calc(var(--u) * 20);
  color: var(--app-ink-muted);
  white-space: nowrap;
}
.app-plan-recipe.is-active .app-plan-rname {
  color: var(--app-ink);
}
.app-plan-rmeta {
  display: block;
  font-size: calc(var(--u) * 12);
  line-height: calc(var(--u) * 16);
  color: var(--app-ink-subtle);
  white-space: nowrap;
}
.app-day {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: calc(var(--u) * 64);
  padding: calc(var(--u) * 12) 0;
  border: calc(var(--u) * 1) solid var(--app-border);
  border-radius: calc(var(--u) * 14);
}
.app-day.is-active {
  background: var(--app-ink);
  border-color: var(--app-ink);
  color: #fff;
}
.app-day-top {
  font-weight: 500;
  font-size: calc(var(--u) * 12);
  line-height: calc(var(--u) * 16);
  color: var(--app-ink-muted);
}
.app-day.is-active .app-day-top {
  color: #fff;
}
.app-day-num {
  margin-top: calc(var(--u) * 2);
  font-weight: 600;
  font-size: calc(var(--u) * 20);
  line-height: calc(var(--u) * 24);
}
.app-plan-time {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: calc(var(--u) * 20);
}
.app-hold {
  width: calc(var(--u) * 52);
  height: calc(var(--u) * 52);
  background: transparent;
}
.app-hold .app-ic {
  width: calc(var(--u) * 22);
  height: calc(var(--u) * 22);
}
.app-plan-clock {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.app-plan-clock-value {
  font-weight: 600;
  font-size: calc(var(--u) * 64);
  line-height: calc(var(--u) * 70);
  letter-spacing: calc(var(--u) * -2.5);
}
.app-plan-clock-rule {
  width: calc(var(--u) * 48);
  height: calc(var(--u) * 2);
  margin-top: calc(var(--u) * 2);
  border-radius: 1px;
  background: var(--app-border);
}
.app-plan-answer {
  margin-top: calc(var(--u) * 24);
  padding-top: calc(var(--u) * 20);
  border-top: calc(var(--u) * 1.5) solid var(--app-ink);
}
.app-plan .app-plan-answer .app-label {
  margin: 0;
}
.app-plan-start {
  margin-top: calc(var(--u) * 4);
  font-size: calc(var(--u) * 36);
  line-height: calc(var(--u) * 37);
}
.app-plan-body {
  margin-top: calc(var(--u) * 8);
  font-size: calc(var(--u) * 15);
  line-height: calc(var(--u) * 21);
  color: var(--app-ink-muted);
}
.app-plan-line {
  margin-top: calc(var(--u) * 20);
}
.app-plan-row {
  display: flex;
  min-height: calc(var(--u) * 56);
}
.app-plan-when {
  width: calc(var(--u) * 68);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  padding-top: calc(var(--u) * 1);
}
.app-plan-day {
  margin-bottom: calc(var(--u) * 2);
  font-weight: 600;
  font-size: calc(var(--u) * 10.5);
  line-height: calc(var(--u) * 13);
  letter-spacing: calc(var(--u) * 1.2);
  text-transform: uppercase;
  color: var(--app-ink-muted);
}
.app-plan-at {
  font-weight: 600;
  font-size: calc(var(--u) * 15);
  line-height: calc(var(--u) * 19);
}
.app-plan-rail {
  width: calc(var(--u) * 28);
  display: flex;
  flex-direction: column;
  align-items: center;
}
.app-plan-dot {
  width: calc(var(--u) * 9);
  height: calc(var(--u) * 9);
  margin-top: calc(var(--u) * 5);
  border-radius: 50%;
  border: calc(var(--u) * 1.5) solid var(--app-ink);
  background: var(--app-bg);
}
.app-plan-seg {
  flex: 1;
  width: calc(var(--u) * 1);
  margin: calc(var(--u) * 3) 0;
  background: var(--app-border);
}
.app-plan-what {
  flex: 1;
  padding-bottom: calc(var(--u) * 16);
}
.app-plan-title {
  display: block;
  font-weight: 500;
  font-size: calc(var(--u) * 15.5);
  line-height: calc(var(--u) * 19);
}
.app-plan-meta {
  display: block;
  margin-top: calc(var(--u) * 1);
  font-size: calc(var(--u) * 13);
  line-height: calc(var(--u) * 17);
  color: var(--app-ink-muted);
}
.app-plan-row.is-end .app-plan-at,
.app-plan-row.is-end .app-plan-title {
  color: var(--app-green);
}
.app-plan-row.is-end .app-plan-dot {
  background: var(--app-green);
  border-color: var(--app-green);
}

/* ── Timer ─────────────────────────────────────────────────────────────────── */

.app-back {
  width: calc(var(--u) * 40);
  height: calc(var(--u) * 40);
  margin: 0 0 calc(var(--u) * 8) calc(var(--u) * -10);
}
.app-timer-title {
  margin-top: calc(var(--u) * 4);
}
.app-clockcard {
  margin-top: calc(var(--u) * 20);
  padding: calc(var(--u) * 20);
  border: calc(var(--u) * 1) solid var(--app-border);
  border-radius: calc(var(--u) * 24);
  background: var(--app-surface);
}
.app-timer-large {
  font-size: calc(var(--u) * 76);
  line-height: calc(var(--u) * 79);
  letter-spacing: -0.01em;
}
.app-folds {
  display: flex;
  gap: calc(var(--u) * 8);
  margin-top: calc(var(--u) * 16);
}
.app-fold {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(var(--u) * 28);
  height: calc(var(--u) * 28);
  border-radius: 50%;
  border: calc(var(--u) * 1.5) solid var(--app-ink-subtle);
  font-weight: 500;
  font-size: calc(var(--u) * 12);
  color: var(--app-ink-muted);
}
.app-fold.is-done {
  background: var(--app-green);
  border-color: var(--app-green);
  color: #fff;
}
.app-fold .app-ic {
  width: calc(var(--u) * 12);
  height: calc(var(--u) * 12);
}
.app-clockcard-cta {
  margin-top: calc(var(--u) * 20);
}
.app-quick {
  display: flex;
  justify-content: space-between;
  margin-top: calc(var(--u) * 16);
}
.app-quick-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--u) * 4);
  min-height: calc(var(--u) * 56);
  padding: calc(var(--u) * 8) 0;
  font-size: calc(var(--u) * 12);
  line-height: calc(var(--u) * 16);
  color: var(--app-ink-muted);
}
.app-quick-item .app-ic {
  width: calc(var(--u) * 20);
  height: calc(var(--u) * 20);
  color: var(--app-ink);
}
.app-handsfree {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 12);
  margin-top: calc(var(--u) * 20);
  padding: calc(var(--u) * 16);
  border-radius: calc(var(--u) * 20);
  background: var(--app-green-soft);
}
.app-handsfree-mic {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: calc(var(--u) * 44);
  height: calc(var(--u) * 44);
  border-radius: 50%;
  background: var(--app-green);
  color: #fff;
}
.app-handsfree-mic .app-ic {
  width: calc(var(--u) * 20);
  height: calc(var(--u) * 20);
}
.app-handsfree-title {
  display: block;
  font-weight: 500;
  font-size: calc(var(--u) * 16);
  line-height: calc(var(--u) * 23);
}
.app-phases-title {
  margin: calc(var(--u) * 32) 0 calc(var(--u) * 4);
}
.app-phases {
  margin-top: calc(var(--u) * 12);
}
.app-phase {
  display: flex;
  min-height: calc(var(--u) * 56);
}
.app-phase-rail {
  width: calc(var(--u) * 22);
  display: flex;
  flex-direction: column;
  align-items: center;
}
.app-phase-dot {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: calc(var(--u) * 22);
  height: calc(var(--u) * 22);
  border-radius: 50%;
  border: calc(var(--u) * 1.5) solid var(--app-ink-subtle);
  background: var(--app-bg);
  color: #fff;
}
.app-phase-dot .app-ic {
  width: calc(var(--u) * 12);
  height: calc(var(--u) * 12);
}
.app-phase.is-done .app-phase-dot {
  background: var(--app-green);
  border-color: var(--app-green);
}
.app-phase.is-active .app-phase-dot {
  border: calc(var(--u) * 6) solid var(--app-green);
}
.app-phase-line {
  flex: 1;
  width: calc(var(--u) * 1.5);
  margin: calc(var(--u) * 4) 0;
  background: var(--app-border);
}
.app-phase-body {
  flex: 1;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: calc(var(--u) * 12);
  margin-left: calc(var(--u) * 16);
  padding-bottom: calc(var(--u) * 16);
}
.app-phase-title {
  display: block;
  font-weight: 500;
  font-size: calc(var(--u) * 14);
  line-height: calc(var(--u) * 18);
}
.app-phase.is-active .app-phase-title {
  font-weight: 600;
}
.app-phase-at {
  font-size: calc(var(--u) * 15);
  line-height: calc(var(--u) * 20);
  color: var(--app-ink-muted);
}
.app-phase.is-active .app-phase-at {
  color: var(--app-ink);
}

/* ── Mani in pasta ─────────────────────────────────────────────────────────── */

.app-hands .app-pad {
  padding-top: calc(var(--u) * 52);
}
.app-hands-top {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 12);
}
.app-hands-top > div {
  flex: 1;
  min-width: 0;
}
.app-hands-phase {
  margin-top: calc(var(--u) * 2);
  font-size: calc(var(--u) * 26);
  line-height: calc(var(--u) * 27);
  white-space: nowrap;
}
.app-hands-close {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: calc(var(--u) * 48);
  height: calc(var(--u) * 48);
  border-radius: 50%;
  border: calc(var(--u) * 1) solid var(--app-band-divider);
}
.app-hands-clock {
  margin-top: calc(var(--u) * 20);
  font-size: calc(var(--u) * 112);
  line-height: calc(var(--u) * 116);
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.app-hands-label {
  font-weight: 500;
  font-size: calc(var(--u) * 17);
  line-height: calc(var(--u) * 24);
  color: var(--app-on-photo-muted);
}
.app-hands-voice {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 16);
  margin-top: calc(var(--u) * 32);
}
.app-mic {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: calc(var(--u) * 72);
  height: calc(var(--u) * 72);
}
.app-mic-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--app-green);
  opacity: 0.35;
}
[data-voice='listening'] .app-mic-ring {
  animation: app-mic-breathe 1.8s ease-in-out infinite;
}
.app-mic-core {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(var(--u) * 60);
  height: calc(var(--u) * 60);
  border-radius: 50%;
  background: var(--app-green);
}
.app-mic-core .app-ic {
  width: calc(var(--u) * 28);
  height: calc(var(--u) * 28);
}
.app-hands-status {
  display: block;
  font-size: calc(var(--u) * 30);
  line-height: calc(var(--u) * 31);
}
.app-hands-heard {
  display: block;
  margin-top: calc(var(--u) * 2);
  font-style: italic;
  font-size: calc(var(--u) * 16);
  line-height: calc(var(--u) * 22);
  color: var(--app-on-photo-muted);
}
.app-hands-reply {
  margin-top: calc(var(--u) * 16);
  font-weight: 500;
  font-size: calc(var(--u) * 21);
  line-height: calc(var(--u) * 29);
}
.app-hands-say {
  margin-top: calc(var(--u) * 32);
}
.app-hands-tiles {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--u) * 8);
  margin-top: calc(var(--u) * 12);
}
.app-hands-tile {
  display: flex;
  align-items: center;
  width: calc(50% - var(--u) * 4);
  min-height: calc(var(--u) * 72);
  padding: calc(var(--u) * 12) calc(var(--u) * 16);
  border-radius: calc(var(--u) * 14);
  border: calc(var(--u) * 1) solid var(--app-band-divider);
  font-weight: 500;
  font-size: calc(var(--u) * 18);
  line-height: calc(var(--u) * 24);
}
.app-hands-tile.is-first {
  width: 100%;
  background: var(--app-green);
  border-color: var(--app-green);
  font-size: calc(var(--u) * 22);
  line-height: calc(var(--u) * 28);
}

/* ── Lievito (mascotte) ────────────────────────────────────────────────────── */

.app-petscreen {
  display: flex;
  flex-direction: column;
  padding: calc(var(--u) * 52) 0 calc(var(--u) * 88);
}
.app-pet-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.app-roundbtn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(var(--u) * 38);
  height: calc(var(--u) * 38);
  border-radius: 50%;
  border: calc(var(--u) * 1) solid rgba(255, 255, 255, 0.55);
}
.app-roundbtn .app-ic {
  width: calc(var(--u) * 16);
  height: calc(var(--u) * 16);
}
.app-pet-head {
  margin-top: calc(var(--u) * 16);
}
.app-pet-name {
  font-size: calc(var(--u) * 28);
  line-height: calc(var(--u) * 29);
}
.app-pet-meta {
  margin-top: calc(var(--u) * 2);
  font-size: calc(var(--u) * 13);
  line-height: calc(var(--u) * 18);
  color: rgba(255, 255, 255, 0.55);
}

/* Palette per state (expressions.ts → paletteFor). Switch data-mood / data-asleep. */
.app-pet {
  --app-eye: #2ee6b0;
  --app-pupil: #0b4d40;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.app-pet[data-mood='newborn'] { --app-eye: #f3efe7; --app-pupil: #e5487f; }
.app-pet[data-mood='satiated'] { --app-eye: #ffd23f; --app-pupil: #c0391b; }
.app-pet[data-mood='active'] { --app-eye: #2ee6b0; --app-pupil: #0b4d40; }
.app-pet[data-mood='calm'] { --app-eye: #6cb4ff; --app-pupil: #12306b; }
.app-pet[data-mood='peckish'] { --app-eye: #ff9136; --app-pupil: #6b2508; }
.app-pet[data-mood='hungry'] { --app-eye: #ff7a93; --app-pupil: #5c0f24; }
.app-pet[data-mood='starving'] { --app-eye: #b5949c; --app-pupil: #2a1a1f; }
.app-pet[data-mood='dormant'] { --app-eye: #5b626e; --app-pupil: #1a1d22; }
.app-pet[data-asleep] { --app-eye: #8c86ff; --app-pupil: #f5d45e; }
.app-pet[data-expression='annoyed'],
.app-pet[data-expression='grumpy'] { --app-eye: #ff3b30; --app-pupil: #ffe14a; }

.app-pet-stage {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.app-pet-eyes {
  position: relative;
  display: block;
  width: calc(var(--u) * 312);
  height: calc(var(--u) * 234);
  overflow: visible;
}
.app-eye-shape {
  fill: var(--app-eye);
  transition: fill 0.45s ease;
}
.app-pupil {
  fill: var(--app-pupil);
  transition:
    fill 0.45s ease,
    transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
  /* Gaze: set --look-x / --look-y (-1..1) on .app-pet; the pupil stays inside the eye. */
  transform: translate(calc(var(--look-x, 0) * var(--reach-x) * 1px), calc(var(--look-y, 0) * var(--reach-y) * 1px));
}
/* The closed eye ‿ (shown during a blink, or for data-expression="sleep"). */
.app-lid {
  fill: none;
  stroke: var(--app-eye);
  stroke-width: 6;
  stroke-linecap: round;
  opacity: var(--closed, 0);
  transition: stroke 0.45s ease;
}
.app-eye {
  transform-box: fill-box;
  transform-origin: 50% 57.5%;
}
.app-pet-line {
  position: relative;
  min-height: calc(var(--u) * 56);
  margin-top: calc(var(--u) * 12);
  padding: 0 calc(var(--u) * 24);
  display: flex;
  align-items: center;
  font-weight: 500;
  font-size: calc(var(--u) * 19);
  line-height: calc(var(--u) * 25);
  text-align: center;
}
.app-bubbles {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.app-bubble {
  position: absolute;
  left: calc(var(--x) * 100%);
  bottom: 0;
  width: calc(var(--u) * var(--r) * 2);
  height: calc(var(--u) * var(--r) * 2);
  border-radius: 50%;
  background: var(--app-eye);
  opacity: 0;
}

.app-pet-bottom {
  padding-bottom: calc(var(--u) * 12);
}
.app-pet-status {
  font-size: calc(var(--u) * 13.5);
  line-height: calc(var(--u) * 19);
  text-align: center;
  color: rgba(255, 255, 255, 0.55);
}
.app-meters {
  display: flex;
  align-items: flex-end;
  gap: calc(var(--u) * 20);
  margin-top: calc(var(--u) * 16);
}
.app-meter {
  flex: 1;
}
.app-blocks {
  display: flex;
  gap: calc(var(--u) * 4);
}
.app-blocks i {
  flex: 1;
  height: calc(var(--u) * 9);
  border-radius: calc(var(--u) * 2);
  border: calc(var(--u) * 1.5) solid rgba(255, 255, 255, 0.55);
}
.app-blocks i.on {
  background: #fff;
  border-color: #fff;
}
.app-meter-label {
  display: block;
  margin-top: calc(var(--u) * 6);
  font-weight: 500;
  font-size: calc(var(--u) * 10.5);
  line-height: calc(var(--u) * 13);
  letter-spacing: calc(var(--u) * 1.3);
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}
.app-streak {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: calc(var(--u) * 44);
}
.app-streak-value {
  font-weight: 600;
  font-size: calc(var(--u) * 22);
  line-height: calc(var(--u) * 24);
}
.app-feed {
  display: flex;
  align-items: center;
  justify-content: center;
  height: calc(var(--u) * 56);
  margin-top: calc(var(--u) * 20);
  border-radius: 999px;
  background: #fff;
  color: var(--app-ink);
  font-weight: 600;
  font-size: calc(var(--u) * 17);
}

/* ── Farine ────────────────────────────────────────────────────────────────── */

.app-hero--flour {
  height: calc(var(--u) * 340);
}
.app-hero-text--flour {
  left: calc(var(--u) * 24);
  bottom: calc(var(--u) * 20);
}
.app-hero-text--flour .app-hero-eyebrow {
  margin-bottom: calc(var(--u) * 8);
}
.app-flours-summary {
  display: flex;
  align-items: baseline;
  gap: calc(var(--u) * 12);
  margin-top: calc(var(--u) * 12);
}
.app-flours-total {
  font-size: calc(var(--u) * 30);
  line-height: calc(var(--u) * 31);
  white-space: nowrap;
}
.app-flours-total small {
  font-family: var(--app-font-sans);
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  font-size: calc(var(--u) * 16);
  color: var(--app-on-photo-muted);
}
.app-flours-meta {
  font-size: calc(var(--u) * 14);
  line-height: calc(var(--u) * 20);
  color: var(--app-on-photo-muted);
}
.app-flourgrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: calc(var(--u) * 12);
  padding: calc(var(--u) * 20) calc(var(--u) * 24) calc(var(--u) * 48);
}
.app-flour {
  padding: calc(var(--u) * 16) calc(var(--u) * 16) calc(var(--u) * 14);
  border-radius: calc(var(--u) * 22);
  border: calc(var(--u) * 1) solid rgba(0, 0, 0, 0.06);
  background: var(--app-surface);
  min-width: 0;
}
.app-flour.is-low {
  background: var(--app-green);
  border-color: var(--app-green);
  color: #fff;
}
.app-flour-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.app-ringwrap {
  position: relative;
  display: block;
  width: calc(var(--u) * 84);
  height: calc(var(--u) * 84);
}
.app-ring {
  display: block;
  width: 100%;
  height: 100%;
}
.app-ring-track {
  fill: none;
  stroke: var(--app-surface-muted);
  stroke-width: 6;
}
.app-ring-arc {
  fill: none;
  stroke: var(--app-green);
  stroke-width: 6;
  stroke-linecap: round;
}
.app-ring-tick {
  stroke: var(--app-ink);
  stroke-opacity: 0.55;
  stroke-width: 1.5;
  stroke-linecap: round;
}
.is-low .app-ring-track {
  stroke: var(--app-band-divider);
}
.is-low .app-ring-arc {
  stroke: #fff;
}
.is-low .app-ring-tick {
  stroke: #fff;
  stroke-opacity: 0.8;
}
.app-ring-label {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.app-ring-value {
  font-size: calc(var(--u) * 22);
  line-height: calc(var(--u) * 23);
}
.app-ring-unit {
  font-weight: 500;
  font-size: calc(var(--u) * 11);
  line-height: calc(var(--u) * 13);
  letter-spacing: calc(var(--u) * 0.6);
  text-transform: uppercase;
  color: var(--app-ink-muted);
}
.app-lowbadge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(var(--u) * 32);
  height: calc(var(--u) * 32);
  border-radius: 50%;
  background: var(--app-band-divider);
}
.app-lowbadge .app-ic {
  width: calc(var(--u) * 16);
  height: calc(var(--u) * 16);
}
.app-flour-name {
  margin-top: calc(var(--u) * 16);
  font-size: calc(var(--u) * 20);
  line-height: calc(var(--u) * 21);
}
.app-flour-meta {
  min-height: calc(var(--u) * 32);
  margin-top: calc(var(--u) * 3);
  font-size: calc(var(--u) * 12.5);
  line-height: calc(var(--u) * 16);
  color: var(--app-ink-muted);
}
.app-specs {
  display: flex;
  gap: calc(var(--u) * 6);
  margin-top: calc(var(--u) * 12);
  padding-top: calc(var(--u) * 12);
  border-top: calc(var(--u) * 1) solid var(--app-border);
}
.app-specs > span {
  flex: 1 1 auto;
  min-width: 0;
}
.app-spec-value {
  display: block;
  font-weight: 600;
  font-size: calc(var(--u) * 14.5);
  letter-spacing: -0.015em;
  line-height: calc(var(--u) * 19);
  white-space: nowrap;
}
.app-spec-value.is-muted {
  color: var(--app-ink-muted);
}
.app-spec-label {
  display: block;
  margin-top: calc(var(--u) * 1);
  font-size: calc(var(--u) * 11);
  line-height: calc(var(--u) * 14);
  color: var(--app-ink-muted);
}
.is-low .app-ring-unit,
.is-low .app-flour-meta,
.is-low .app-spec-label,
.is-low .app-spec-value.is-muted {
  color: var(--app-on-photo-muted);
}
.is-low .app-specs {
  border-top-color: var(--app-band-divider);
}

/* ── Teglia ────────────────────────────────────────────────────────────────── */

.app-pan .app-scroll {
  padding-top: calc(var(--u) * 44);
}
.app-pan-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 calc(var(--u) * 24) 0 calc(var(--u) * 8);
}
.app-editpill {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 6);
  min-height: calc(var(--u) * 36);
  padding: 0 calc(var(--u) * 14);
  border: calc(var(--u) * 1) solid var(--app-ink);
  border-radius: 999px;
  font-weight: 500;
  font-size: calc(var(--u) * 14);
}
.app-editpill .app-ic {
  width: calc(var(--u) * 15);
  height: calc(var(--u) * 15);
}
.app-pan-drawing {
  display: block;
  width: 100%;
  height: calc(var(--u) * 312);
  margin-top: calc(var(--u) * 8);
  overflow: visible;
}
.app-pan-floor {
  fill: none;
  stroke: var(--app-ink);
  stroke-opacity: 0.35;
  stroke-width: 1.08;
  stroke-linejoin: round;
}
.app-pan-walls {
  fill: none;
  stroke: var(--app-ink);
  stroke-width: 1.35;
  stroke-linecap: round;
}
.app-pan-rim {
  fill: none;
  stroke: var(--app-ink);
  stroke-width: 1.55;
  stroke-linejoin: round;
}
.app-pan-label {
  font-family: var(--app-font-sans);
  font-weight: 500;
  font-size: 13px;
  fill: var(--app-ink);
  fill-opacity: 0.85;
  text-anchor: middle;
}
.app-pan-title {
  padding: 0 calc(var(--u) * 24);
  margin-top: calc(var(--u) * 16);
}
.app-pan-name {
  font-weight: 600;
  font-size: calc(var(--u) * 13);
  line-height: calc(var(--u) * 18);
  letter-spacing: calc(var(--u) * 2.2);
  text-transform: uppercase;
}
.app-pan-headline {
  margin-top: calc(var(--u) * 4);
  font-weight: 600;
  font-size: calc(var(--u) * 64);
  line-height: calc(var(--u) * 72);
  letter-spacing: calc(var(--u) * -2.6);
  white-space: nowrap;
}
.app-pan-times {
  font-weight: 400;
  font-size: calc(var(--u) * 44);
  letter-spacing: 0;
  color: var(--app-ink-subtle);
}
.app-pan-unit {
  font-weight: 400;
  font-size: calc(var(--u) * 24);
  letter-spacing: 0;
  color: var(--app-ink-muted);
}
.app-pan-sub {
  font-size: calc(var(--u) * 15);
  line-height: calc(var(--u) * 21);
  color: var(--app-ink-muted);
}
.app-pan-sec {
  margin-top: calc(var(--u) * 40);
  padding: 0 calc(var(--u) * 24);
}
.app-pan-sectitle {
  margin-bottom: calc(var(--u) * 12);
  font-weight: 600;
  font-size: calc(var(--u) * 12);
  line-height: calc(var(--u) * 16);
  letter-spacing: calc(var(--u) * 2);
  text-transform: uppercase;
}
.app-pan-table {
  border-top: calc(var(--u) * 1.5) solid var(--app-ink);
}
.app-pan-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: calc(var(--u) * 54);
  border-bottom: calc(var(--u) * 1) solid var(--app-border);
  font-size: calc(var(--u) * 16);
}
.app-pan-row span:last-child {
  font-weight: 600;
  font-size: calc(var(--u) * 17);
}
.app-leaders {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 16);
  padding: calc(var(--u) * 16) 0;
}
.app-leader {
  display: flex;
  align-items: flex-end;
  font-size: calc(var(--u) * 16);
  line-height: calc(var(--u) * 22);
}
.app-leader i {
  flex: 1;
  height: calc(var(--u) * 2);
  margin: 0 calc(var(--u) * 8) calc(var(--u) * 6);
  background: radial-gradient(circle, var(--app-ink-subtle) 0 calc(var(--u) * 1), transparent calc(var(--u) * 1.2)) left center / calc(var(--u) * 8) 100% repeat-x;
}
.app-leader span:last-child {
  font-weight: 600;
}

/* ── Moduli: Importa (Ricetta importata) e Registra prova ──────────────────── */

.app-form .app-pad {
  padding-top: calc(var(--u) * 52);
  padding-bottom: calc(var(--u) * 48);
}
.app-form-close.app-iconbtn--outline {
  width: calc(var(--u) * 44);
  height: calc(var(--u) * 44);
}
.app-form-close .app-ic {
  width: calc(var(--u) * 24) !important;
  height: calc(var(--u) * 24) !important;
}
.app-form-eyebrow {
  margin-top: calc(var(--u) * 16);
}
.app-form-title {
  margin: calc(var(--u) * 4) 0 calc(var(--u) * 24);
}
.app-form-body {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 20);
}
.app-form-eyebrow-gap {
  margin-top: calc(var(--u) * 8);
}
.app-form-row {
  display: flex;
  gap: calc(var(--u) * 12);
}
.app-form-row > .app-field {
  flex: 1;
  min-width: 0;
}
.app-form-row > .app-field--pieces {
  flex: none;
  width: calc(var(--u) * 110);
}
.app-field,
.app-form-group {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 8);
}
.app-field-box {
  display: flex;
  align-items: center;
  min-height: calc(var(--u) * 50);
  padding: 0 calc(var(--u) * 16);
  border: calc(var(--u) * 1) solid var(--app-border);
  border-radius: calc(var(--u) * 14);
  background: var(--app-surface);
}
.app-field-value {
  flex: 1;
  min-width: 0;
  padding: calc(var(--u) * 12) 0;
  font-size: calc(var(--u) * 16);
  line-height: calc(var(--u) * 22);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-variant-numeric: tabular-nums;
}
.app-field-box.is-multi {
  align-items: flex-start;
  padding: calc(var(--u) * 12) calc(var(--u) * 16);
}
.app-field-box.is-multi .app-field-value {
  min-height: calc(var(--u) * 88);
  padding: 0;
  white-space: normal;
}
.app-field-unit {
  margin-left: calc(var(--u) * 8);
  font-weight: 500;
  font-size: calc(var(--u) * 15);
  color: var(--app-ink-muted);
}
.app-form-photo {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: calc(var(--u) * 20);
  overflow: hidden;
  background: var(--app-surface-muted);
}
.app-form-photo-x {
  position: absolute;
  top: calc(var(--u) * 8);
  right: calc(var(--u) * 8);
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(var(--u) * 36);
  height: calc(var(--u) * 36);
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.75);
  color: #fff;
}
.app-form-photo-x .app-ic {
  width: calc(var(--u) * 16);
  height: calc(var(--u) * 16);
}
.app-form-sechead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-top: calc(var(--u) * 16);
}
.app-form-note {
  margin-top: calc(var(--u) * -12);
}
.app-ingblock {
  padding: calc(var(--u) * 12);
  border: calc(var(--u) * 1) solid var(--app-border);
  border-radius: calc(var(--u) * 14);
  background: var(--app-surface);
}
.app-ingblock-top {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 8);
}
.app-ingblock-name {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  min-height: calc(var(--u) * 44);
  font-weight: 500;
  font-size: calc(var(--u) * 16);
}
.app-ingblock-grams {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 4);
  border-bottom: calc(var(--u) * 1) solid var(--app-border);
}
.app-ingblock-grams > span {
  width: calc(var(--u) * 72);
  padding: calc(var(--u) * 4) 0;
  text-align: right;
  font-weight: 500;
  font-size: calc(var(--u) * 16);
  line-height: calc(var(--u) * 36);
}
.app-ingblock-grams u,
.app-ingblock-meta u {
  text-decoration: underline;
  text-underline-offset: 0.15em;
}
.app-ingblock-grams u {
  font-size: calc(var(--u) * 12);
  color: var(--app-ink-muted);
}
.app-ingblock-trash {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(var(--u) * 36);
  height: calc(var(--u) * 36);
}
.app-ingblock-trash .app-ic {
  width: calc(var(--u) * 16);
  height: calc(var(--u) * 16);
}
.app-ingblock-meta {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 8);
  margin-top: calc(var(--u) * 8);
}
.app-ingblock-meta .app-meta {
  flex: 1;
  min-width: 0;
}
.app-ingblock-pct {
  min-width: calc(var(--u) * 56);
  text-align: right;
  font-size: calc(var(--u) * 15);
  line-height: calc(var(--u) * 20);
  color: var(--app-ink-muted);
}
.app-ingblock-pantry {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 4);
  margin-top: calc(var(--u) * 8);
}
.app-minichips {
  display: flex;
  gap: calc(var(--u) * 4);
  overflow: hidden;
}
.app-minichip {
  flex: none;
  padding: calc(var(--u) * 6) calc(var(--u) * 12);
  border-radius: 999px;
  border: calc(var(--u) * 1) solid var(--app-border);
  background: var(--app-bg);
  font-weight: 500;
  font-size: calc(var(--u) * 13);
  line-height: calc(var(--u) * 16);
  color: var(--app-ink-muted);
}
.app-minichip.is-active {
  border-color: var(--app-green);
  background: var(--app-green-soft);
  color: var(--app-green);
}

/* ── Movimento ─────────────────────────────────────────────────────────────── */

/* Blink: every ~5 s, the right eye leads the left by 28 ms (PetEyes). */
.app-pet:not([data-asleep]):not([data-expression='sleep']) .app-eye {
  animation: app-blink 5.2s cubic-bezier(0.3, 0, 0.2, 1) infinite;
}
.app-pet:not([data-asleep]):not([data-expression='sleep']) .app-eye--l {
  animation-delay: 0.028s;
}
.app-pet:not([data-asleep]):not([data-expression='sleep']) .app-lid {
  animation: app-lid 5.2s linear infinite;
}
@keyframes app-blink {
  0%,
  91%,
  100% {
    transform: scaleY(1);
  }
  92.25% {
    transform: scaleY(0.04);
  }
  95.2% {
    transform: scaleY(1);
  }
}
@keyframes app-lid {
  0%,
  91.7%,
  93.4%,
  100% {
    opacity: 0;
  }
  92.25% {
    opacity: 1;
  }
}

/* Idle glances, opt-in: add .app-pet--wander (or drive --look-x / --look-y yourself). */
.app-pet--wander .app-pupil {
  animation: app-glance 9s cubic-bezier(0.22, 1, 0.36, 1) infinite;
}
@keyframes app-glance {
  0%,
  18% {
    transform: translate(0, 0);
  }
  22%,
  40% {
    transform: translate(calc(var(--reach-x) * -0.7px), calc(var(--reach-y) * 0.15px));
  }
  44%,
  62% {
    transform: translate(calc(var(--reach-x) * 0.55px), calc(var(--reach-y) * -0.45px));
  }
  66%,
  84% {
    transform: translate(calc(var(--reach-x) * 0.2px), calc(var(--reach-y) * 0.5px));
  }
  88%,
  100% {
    transform: translate(0, 0);
  }
}

/* Bubbles rising behind the eyes, faster when the starter is active. */
.app-pet .app-bubble {
  animation: app-bubble calc(2.6s / var(--speed, 1) * 2.4) linear infinite;
  animation-delay: calc(var(--phase, 0) * -6s);
}
@keyframes app-bubble {
  0% {
    transform: translate(0, 0) scale(0.9);
    opacity: 0;
  }
  15% {
    opacity: 0.32;
  }
  50% {
    transform: translate(calc(var(--u) * 6), calc(var(--u) * -180)) scale(1.25);
  }
  78% {
    opacity: 0.32;
  }
  100% {
    transform: translate(calc(var(--u) * -4), calc(var(--u) * -380)) scale(1.6);
    opacity: 0;
  }
}

@keyframes app-mic-breathe {
  0%,
  100% {
    transform: scale(1);
    opacity: 0.45;
  }
  50% {
    transform: scale(1.32);
    opacity: 0.08;
  }
}

@media (prefers-reduced-motion: reduce) {
  .app-pet .app-eye,
  .app-pet .app-lid,
  .app-pet .app-pupil,
  .app-pet .app-bubble,
  [data-voice='listening'] .app-mic-ring {
    animation: none !important;
  }
  .app-pet .app-bubble {
    opacity: 0.2;
    transform: translateY(calc(var(--u) * -1 * (60 + var(--phase, 0) * 220)));
  }
  .app-pupil {
    transition: none;
  }
}