/* FoodClone — screens.css · réplicas DOM das telas de produção (escala em em) */
.app-screen, .m-screen .app-screen {
  font-size: calc(var(--phone-w) / 22.5);
  font-family: var(--font-body);
  color: var(--color-espresso);
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(circle at 30% 12%,
      color-mix(in oklch, var(--color-cream) 94%, white) 0%,
      var(--color-cream) 64%);
}

/* Status bar */
.scr-status {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1em 1.6em .2em;
  font-size: .82em;
  font-weight: 600;
}
.scr-status .bat {
  display: inline-flex;
  align-items: center;
  gap: .3em;
  font-size: .8em;
  letter-spacing: .04em;
}
.scr-status .bat i {
  width: 1.7em; height: .9em;
  border: 1px solid currentColor;
  border-radius: .25em;
  position: relative;
  opacity: .8;
}
.scr-status .bat i::after {
  content: '';
  position: absolute;
  inset: 1px 25% 1px 1px;
  background: currentColor;
  border-radius: .12em;
}

/* Header comum */
.scr-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .7em 1.1em .8em;
  border-bottom: 1px solid var(--border-subtle);
}
.scr-header .hamb { display: grid; gap: .26em; width: 1.25em; }
.scr-header .hamb i { height: .14em; background: var(--color-espresso); border-radius: 1em; }
.scr-header .scr-logo { height: 2.1em; width: auto; }
.scr-header .scr-right { display: flex; align-items: center; gap: .5em; }
.scr-header .free-pill {
  font-size: .68em;
  font-weight: 600;
  letter-spacing: .08em;
  padding: .35em .9em;
  border-radius: var(--radius-pill);
  background: color-mix(in oklch, var(--color-mango) 22%, var(--color-cream-deep));
  color: var(--color-espresso-mid);
}
.scr-header .avatar {
  width: 1.9em; height: 1.9em;
  border-radius: 50%;
  background: #F2C9B8;
  color: var(--color-tomato);
  font-weight: 700;
  font-size: .9em;
  display: grid;
  place-items: center;
}

.scr-body {
  flex: 1;
  padding: 1.3em 1.45em;
  overflow: hidden;
  position: relative;
}

/* Bottom nav */
.scr-nav {
  display: flex;
  align-items: flex-end;
  justify-content: space-around;
  padding: .55em 1em .9em;
  border-top: 1px solid var(--border-subtle);
  background: color-mix(in oklch, var(--color-cream) 96%, white);
  position: relative;
}
.scr-nav .nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .3em;
  font-size: .66em;
  color: var(--color-espresso-soft);
  min-width: 3.4em;
}
.scr-nav .nav-item svg { width: 2em; height: 2em; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.scr-nav .nav-item.active { color: var(--color-tomato); font-weight: 600; }
.scr-nav .sos-orb {
  width: 3.4em; height: 3.4em;
  margin-top: -1.9em;
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 28%, #fffdf6 0%, #f3e7cf 35%, #ddc9a4 70%, #c9b488 100%);
  box-shadow:
    inset 0 -2px 5px rgba(26,22,18,.18),
    inset 2px 3px 6px rgba(255,255,255,.7),
    0 3px 9px rgba(26,22,18,.18);
  display: grid;
  place-items: center;
  font-size: .8em;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--color-espresso-mid);
}

/* ---------- Tela 1: Home ---------- */
.scr-greet { font-size: .72em; font-weight: 700; letter-spacing: .22em; color: var(--color-tomato); margin-bottom: .9em; }
.scr-home h4 {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -.035em;
  font-size: 1.85em;
  line-height: 1.06;
  margin-bottom: .45em;
}
.scr-home .home-sub { font-size: .92em; color: var(--color-espresso-mid); margin-bottom: 1.2em; }
.scr-home .home-field {
  background: color-mix(in oklch, var(--color-cream-light) 88%, white);
  border: 1px solid var(--border-subtle);
  border-radius: 1.1em;
  padding: 1em 1.1em 2.6em;
  font-size: .95em;
  box-shadow: inset 0 1px 2px rgba(26,22,18,.04);
  margin-bottom: 1.1em;
}
.scr-home .home-clone-btn {
  display: block;
  width: 100%;
  text-align: center;
  padding: .95em;
  border-radius: var(--radius-pill);
  background: linear-gradient(165deg, #E2603B 0%, var(--color-tomato) 50%, #C2401E 100%);
  color: var(--color-cream-light);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.05em;
  box-shadow: inset 0 1px 0 rgba(255,251,244,.35), 0 .35em .7em rgba(217,79,42,.3);
  margin-bottom: 1.1em;
}
.scr-home .home-or {
  display: flex;
  align-items: center;
  gap: .8em;
  color: var(--color-espresso-soft);
  font-family: var(--font-serif);
  font-style: italic;
  font-size: .85em;
  margin-bottom: 1.1em;
}
.scr-home .home-or::before, .scr-home .home-or::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border-subtle);
}
.scr-home .home-shortcuts { display: grid; grid-template-columns: 1fr 1fr; gap: .8em; }
.scr-home .shortcut {
  border-radius: 1.1em;
  padding: 1.5em 1em;
  text-align: center;
  color: var(--color-cream-light);
  display: grid;
  gap: .3em;
  box-shadow: inset 0 1px 0 rgba(255,251,244,.18), 0 .3em .6em rgba(26,22,18,.16);
}
.scr-home .shortcut b { font-family: var(--font-display); font-weight: 700; font-size: .98em; }
.scr-home .shortcut span { font-family: var(--font-serif); font-style: italic; font-size: .8em; opacity: .85; }
.scr-home .shortcut.decide { background: linear-gradient(160deg, #4A382B, #33261C); }
.scr-home .shortcut.improv { background: linear-gradient(160deg, #A4793A, #846026); }

/* ---------- Tela 2: Receita ---------- */
.scr-recipe .tm-badge { font-size: .95em; margin-bottom: .9em; }
.scr-recipe h4 {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -.035em;
  font-size: 1.62em;
  line-height: 1.04;
  margin-bottom: .5em;
}
.scr-recipe .rec-sub {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 340;
  font-size: .95em;
  line-height: 1.4;
  color: var(--color-espresso-mid);
  margin-bottom: 1.1em;
}
.scr-recipe .rec-macros {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background: color-mix(in oklch, var(--color-cream-deep) 70%, transparent);
  border-radius: 1em;
  padding: .9em .3em;
  margin-bottom: .7em;
}
.scr-recipe .rec-macro { text-align: center; position: relative; }
.scr-recipe .rec-macro + .rec-macro::before {
  content: '';
  position: absolute;
  left: 0; top: 15%; bottom: 15%;
  width: 1px;
  background: var(--border-subtle);
}
.scr-recipe .rec-macro b { font-family: var(--font-mono); font-weight: 700; font-size: 1.05em; }
.scr-recipe .rec-macro b small { font-size: .6em; font-weight: 400; color: var(--color-espresso-soft); }
.scr-recipe .rec-macro span {
  display: block;
  font-size: .52em;
  font-weight: 600;
  letter-spacing: .1em;
  color: var(--color-espresso-soft);
  margin-top: .4em;
}
.scr-recipe .rec-portion {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: .78em;
  text-align: center;
  color: var(--color-espresso-soft);
  margin-bottom: 1.2em;
}
.scr-recipe h5 {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 380;
  font-size: 1.25em;
  margin-bottom: .7em;
}
.scr-recipe .ing-row {
  display: grid;
  grid-template-columns: 5.2em auto 1fr;
  align-items: baseline;
  gap: .6em;
  padding-block: .34em;
  font-size: .92em;
}
.scr-recipe .ing-qty { text-align: right; font-family: var(--font-mono); font-weight: 600; }
.scr-recipe .ing-qty small { font-size: .68em; font-weight: 400; color: var(--color-espresso-soft); margin-left: .15em; }
.scr-recipe .ing-row::before { display: none; }
.scr-recipe .ing-dot { width: .28em; height: .28em; border-radius: 50%; background: color-mix(in oklch, var(--color-espresso) 30%, transparent); align-self: center; }

/* ---------- Tela 3: O porquê ---------- */
.scr-why .why-card {
  background: color-mix(in oklch, var(--color-cream-deep) 80%, transparent);
  border-radius: 1.3em;
  padding: 1.4em 1.3em;
}
.scr-why .why-label {
  font-size: .68em;
  font-weight: 600;
  letter-spacing: .18em;
  color: color-mix(in oklch, var(--color-mango-deep) 70%, var(--color-espresso));
  margin-bottom: 1.4em;
}
.scr-why .why-item {
  display: grid;
  grid-template-columns: 2em 1fr;
  gap: .9em;
  padding-block: 1em;
}
.scr-why .why-item + .why-item { border-top: 1px solid var(--border-subtle); }
.scr-why .why-num {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 340;
  font-size: 2em;
  line-height: 1;
}
.scr-why .why-item b {
  display: block;
  font-size: .78em;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-bottom: .4em;
}
.scr-why .why-item p { font-size: .88em; line-height: 1.45; color: var(--color-espresso-mid); }

/* ---------- Tela 4: Refinar ---------- */
.scr-refine .ref-head { display: flex; align-items: center; gap: .7em; flex-wrap: wrap; margin-bottom: 1.1em; }
.scr-refine h4 { font-family: var(--font-display); font-weight: 800; letter-spacing: -.03em; font-size: 1.5em; }
.scr-refine .ref-count {
  font-size: .62em;
  font-weight: 600;
  padding: .5em 1em;
  border-radius: var(--radius-pill);
  border: 1px solid color-mix(in oklch, var(--color-mango-deep) 40%, transparent);
  background: color-mix(in oklch, var(--color-mango) 12%, transparent);
  color: color-mix(in oklch, var(--color-mango-deep) 80%, var(--color-espresso));
}
.scr-refine .ref-label {
  font-size: .68em;
  font-weight: 600;
  letter-spacing: .16em;
  color: color-mix(in oklch, var(--color-mango-deep) 75%, var(--color-espresso));
  margin-bottom: .8em;
}
.scr-refine .ref-chips { display: flex; gap: .55em; flex-wrap: wrap; margin-bottom: 1.2em; }
.scr-refine .chip {
  font-size: .78em;
  padding: .5em 1.05em;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-default);
  background: var(--color-cream-light);
  white-space: nowrap;
}
.scr-refine .chip.rose {
  border-color: color-mix(in oklch, var(--color-tomato) 35%, transparent);
  background: color-mix(in oklch, var(--color-tomato) 10%, var(--color-cream-light));
  color: var(--color-tomato-deep);
}
.scr-refine .chip.green {
  border-color: color-mix(in oklch, var(--color-sage-deep) 40%, transparent);
  background: color-mix(in oklch, var(--color-sage-deep) 10%, var(--color-cream-light));
  color: var(--color-sage-deep);
}
.scr-refine .ref-textarea {
  border: 1px solid var(--border-subtle);
  border-radius: 1em;
  background: color-mix(in oklch, var(--color-cream-light) 88%, white);
  padding: .9em 1em 2.2em;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: .88em;
  color: var(--color-espresso-soft);
  position: relative;
  margin-bottom: 1.1em;
}
.scr-refine .ref-textarea i { position: absolute; right: 1em; bottom: .7em; font-style: normal; font-family: var(--font-mono); font-size: .8em; }
.scr-refine .ref-btn {
  display: block;
  width: 100%;
  text-align: center;
  padding: .9em;
  border-radius: var(--radius-pill);
  background: linear-gradient(165deg, #E2603B, var(--color-tomato) 55%, #C2401E);
  color: var(--color-cream-light);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1em;
  box-shadow: inset 0 1px 0 rgba(255,251,244,.35), 0 .35em .7em rgba(217,79,42,.28);
  margin-bottom: 1.3em;
}
.scr-refine .swap-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5em;
  padding-block: .42em;
  font-size: .85em;
}
.scr-refine .swap-actions { display: flex; gap: .4em; }
.scr-refine .swap-actions span {
  font-size: .72em;
  padding: .4em .8em;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-default);
  white-space: nowrap;
}
.scr-refine .swap-actions .sub {
  background: color-mix(in oklch, var(--color-mango) 18%, var(--color-cream-light));
  border-color: color-mix(in oklch, var(--color-mango-deep) 35%, transparent);
}

/* ---------- Tela 5: Improvisar ---------- */
.scr-improv .imp-badge {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  padding: .45em 1.1em;
  border-radius: var(--radius-pill);
  border: 1px solid color-mix(in oklch, var(--color-sage-deep) 45%, transparent);
  background: color-mix(in oklch, var(--color-sage-deep) 10%, transparent);
  color: var(--color-sage-deep);
  font-size: .68em;
  font-weight: 600;
  letter-spacing: .22em;
  margin-bottom: 1em;
}
.scr-improv .imp-badge svg { width: 1.5em; height: 1.5em; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; }
.scr-improv h4 {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -.03em;
  font-size: 1.35em;
  margin-bottom: .5em;
}
.scr-improv .imp-h2 { margin-top: 1em; }
.scr-improv .imp-note {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 340;
  font-size: .88em;
  line-height: 1.45;
  color: var(--color-espresso-mid);
  margin-bottom: .9em;
}
.scr-improv .imp-box {
  border: 1px solid var(--border-subtle);
  border-radius: 1.2em;
  background: color-mix(in oklch, var(--color-cream-deep) 55%, transparent);
  padding: .9em;
  display: flex;
  flex-wrap: wrap;
  gap: .55em;
  min-height: 5.2em;
  align-content: flex-start;
}
.scr-improv .imp-chip {
  display: inline-flex;
  align-items: center;
  gap: .55em;
  padding: .5em 1em;
  border-radius: var(--radius-pill);
  border: 1px solid color-mix(in oklch, var(--color-tomato) 35%, transparent);
  background: color-mix(in oklch, var(--color-tomato) 14%, var(--color-cream-light));
  font-size: .92em;
  color: var(--color-espresso);
}
.scr-improv .imp-help {
  display: flex;
  justify-content: space-between;
  gap: 1em;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: .76em;
  color: var(--color-espresso-soft);
  margin-top: .6em;
}
.scr-improv .imp-help .imp-count { color: var(--color-sage-deep); }
.scr-improv .imp-field {
  border: 1px solid var(--border-subtle);
  border-radius: 1em;
  background: color-mix(in oklch, var(--color-cream-deep) 60%, transparent);
  padding: .9em 1em 2em;
  font-size: .92em;
  margin-top: .2em;
}
.scr-improv .imp-chars {
  text-align: right;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: .74em;
  color: var(--color-espresso-soft);
  margin-block: .5em 1em;
}
.scr-improv .imp-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .6em;
  width: 100%;
  padding: .95em;
  border-radius: var(--radius-pill);
  background: linear-gradient(165deg, #E2603B 0%, var(--color-tomato) 50%, #C2401E 100%);
  color: var(--color-cream-light);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.05em;
  box-shadow: inset 0 1px 0 rgba(255,251,244,.35), 0 .35em .7em rgba(217,79,42,.3);
}
.scr-improv .imp-btn svg { width: 1.2em; height: 1.2em; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Tela 6: S.O.S. ---------- */
.scr-sos {
  background:
    radial-gradient(120% 90% at 50% 110%, color-mix(in oklch, var(--color-bruise) 80%, var(--color-mango)) 0%, transparent 40%),
    radial-gradient(circle at 50% 30%, color-mix(in oklch, var(--color-bruise) 92%, white) 0%, var(--color-bruise) 60%, var(--color-bruise-deep) 100%);
  color: var(--color-cream-light);
}
.scr-sos .scr-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 1.1em;
  padding-top: 2.5em;
}
.scr-sos .sos-close { align-self: flex-end; font-size: 1.2em; opacity: .6; margin-top: -1.5em; }
.scr-sos .sos-kicker { font-size: .72em; letter-spacing: .38em; opacity: .55; }
.scr-sos .sos-orb {
  width: 7.5em; height: 7.5em;
  border-radius: 50%;
  position: relative;
  margin-block: 1em;
  background:
    radial-gradient(circle at 34% 30%,
      rgba(255,253,246,.85) 0%,
      rgba(214,222,228,.45) 30%,
      rgba(150,170,188,.25) 60%,
      rgba(110,135,158,.15) 100%);
  box-shadow:
    0 0 3em rgba(214,222,228,.25),
    inset 0 0 1.2em rgba(255,253,246,.25);
}
.scr-sos .sos-orb::before {
  content: '';
  position: absolute;
  top: 22%; left: 26%;
  width: 28%; height: 14%;
  border-radius: 50%;
  background: rgba(255,253,246,.75);
  filter: blur(2px);
}
.scr-sos .sos-orb .dot {
  position: absolute;
  width: .32em; height: .32em;
  border-radius: 50%;
  background: rgba(255,253,246,.8);
}
.scr-sos h4 {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 330;
  font-size: 1.85em;
  letter-spacing: -.01em;
}
.scr-sos .sos-sub { font-size: .92em; opacity: .8; }
.scr-sos .sos-btn {
  margin-top: 1em;
  padding: .85em 1.9em;
  border-radius: var(--radius-pill);
  background: linear-gradient(160deg, #E8B45A, #C8923B);
  color: #2b2415;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: .95em;
  box-shadow: inset 0 1px 0 rgba(255,251,244,.4), 0 .4em 1em rgba(0,0,0,.3);
}