* { box-sizing: border-box; }
:root {
  --purple: #741cfd;
  --ink: #242424;
  --muted: #666;
  --surface: #fff;
  --soft: #f6f6f6;
}
html, body { margin: 0; min-height: 100%; background: #ededed; }
body { font-family: "Montserrat", Arial, sans-serif; color: var(--ink); }
button, input { font: inherit; }
button { cursor: pointer; }
.app-shell {
  width: min(100%, 412px); min-height: 100vh; margin: 0 auto;
  background: var(--surface); position: relative; overflow: hidden;
  padding: 32px 16px 28px;
}
.app-bar {
  height: 64px; border-radius: 100px; background: var(--soft);
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 12px; margin: 0 8px 32px;
}
.app-bar h1 { font-size: 22px; font-weight: 500; color: #111; margin: 0; flex: 1; text-align: center; }
.back-button { border: 0; background: transparent; width: 48px; height: 48px; font-size: 34px; line-height: 1; color: #222; }
.bar-spacer { width: 48px; }
.screen { display: none; }
.screen.active { display: block; }
.intro { margin: 28px 8px 40px; }
.intro h2 { font-size: 24px; line-height: 32px; margin: 0 0 8px; font-weight: 600; }
.intro p { font-size: 20px; line-height: 28px; margin: 0; color: #626262; font-weight: 500; }
.profile-list { display: flex; flex-direction: column; gap: 16px; margin: 0 8px; }
.profile-card {
  min-height: 86px; width: 100%; border: .5px solid var(--purple);
  border-radius: 24px; background: white; padding: 20px;
  display: flex; align-items: center; justify-content: space-between; text-align: left;
}
.profile-card.selected { min-height: 102px; }
.profile-copy { display: flex; flex-direction: column; gap: 4px; }
.profile-copy strong { font-size: 16px; line-height: 24px; font-weight: 500; }
.profile-copy small { font-size: 12px; line-height: 16px; color: var(--muted); }
.profile-arrow { color: var(--purple); font-size: 28px; }
.profile-card.unavailable { opacity: .4; }
.primary-button { border: 0; background: var(--purple); color: white; border-radius: 100px; min-height: 52px; padding: 14px 24px; font-weight: 600; }
.continue-button { display: block; width: calc(100% - 16px); margin: 28px 8px 0; }
.registration-content { max-height: calc(100vh - 140px); overflow-y: auto; padding: 0 8px 24px; }
.profile-heading { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; }
.avatar { width: 96px; height: 96px; border-radius: 16px; flex: 0 0 96px; display: grid; place-items: center; background: #eee center/cover no-repeat; color: var(--purple); font-size: 38px; font-weight: 600; box-shadow: 0 1px 3px rgba(0,0,0,.25); }
.profile-welcome { display: flex; flex-direction: column; gap: 4px; }
.profile-welcome span { font-size: 16px; color: #111; }
.profile-welcome strong { font-size: 20px; color: #111; }
.upload-button { display: inline-flex; align-items: center; gap: 8px; margin-top: 8px; background: #fafafa; border-radius: 100px; padding: 10px 16px; font-size: 12px; font-weight: 500; box-shadow: 0 1px 3px rgba(0,0,0,.2); }
.upload-button input { display: none; }
.form-section { padding: 0 0 12px; margin: 0 0 8px; }
.form-section h2 { font-size: 16px; font-weight: 600; margin: 0; height: 56px; display: flex; align-items: center; }
.field { position: relative; min-height: 56px; height: auto; border: 1px solid rgba(0,0,0,.5); border-radius: 8px; display: flex; align-items: center; padding: 8px 16px; margin: 0 0 16px; }

.field { display: block; height: 56px; min-height: 56px; padding: 0; overflow: visible; }
.field > span:not(.field-support) {
  display: block;
  position: absolute;
  left: 16px;
  top: 16px;
  z-index: 1;
  margin: 0;
  padding: 0;
  color: rgba(0,0,0,.5);
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  pointer-events: none;
  transform-origin: left top;
  transition: top .14s ease, font-size .14s ease, line-height .14s ease, color .14s ease;
}
.field input {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 5px;
  width: calc(100% - 32px);
  height: 28px;
  min-width: 0;
  border: 0;
  outline: 0;
  padding: 0;
  background: transparent;
  font-size: 16px;
  line-height: 24px;
  color: #222;
}
.field:focus-within > span:not(.field-support),
.field:has(input:not(:placeholder-shown)) > span:not(.field-support) {
  top: 5px;
  font-size: 12px;
  line-height: 16px;
}
.field:focus-within input,
.field:has(input:not(:placeholder-shown)) input { bottom: 5px; }
.field input::placeholder { color: transparent; }

.field:focus-within { border-color: var(--purple); box-shadow: 0 0 0 1px var(--purple); }
.field input::placeholder { color: rgba(0,0,0,.5); }
.field-support { display: block; position: absolute; top: calc(100% + 4px); left: 16px; right: 16px; min-height: 16px; color: rgba(0,0,0,.5); font-size: 12px; line-height: 16px; font-weight: 500; }
.field.has-error { border-color: #d92d20; box-shadow: none; }
.field.has-error:focus-within { border-color: #d92d20; box-shadow: 0 0 0 1px #d92d20; }
.field.has-error .field-support { color: #d92d20; }
.field:has(.field-support:not(:empty)) { margin-bottom: 32px; }
.consents { display: flex; flex-direction: column; gap: 8px; margin: 4px 0 16px; }
.check-row { display: flex; align-items: center; gap: 8px; min-height: 40px; font-size: 14px; }
.check-row input { width: 18px; height: 18px; accent-color: var(--purple); }
.check-row a { color: var(--purple); text-decoration: underline; }
.form-error { color: #b42318; font-size: 13px; min-height: 18px; }
.submit-button { width: 100%; transition: background-color .18s ease, color .18s ease; }
.submit-button:disabled { background: transparent; color: #741cfd; border: 1px solid #741cfd; opacity: .55; cursor: not-allowed; }
.submit-button.is-ready { background: #e6d6ff; color: #313131; border-radius: 16px; }

/* Home — reproduz a composição do frame Page Home (412 × 917) do Figma. */
.home-screen { padding: 10px 0 100px; }
.home-app-bar { display: none; }
.home-topbar {
  min-height: 64px;
  border-radius: 100px;
  background: #fafafa;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 8px;
  margin: 0 0 18px;
  box-shadow: 0 1px 3px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.18);
}
.home-user {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 auto;
  min-width: 0;
}
.home-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  flex: 0 0 48px;
  background: #e9e3df center/cover no-repeat;
  display: grid;
  place-items: center;
  font-size: 18px;
  font-weight: 600;
  color: #402078;
  overflow: hidden;
}
.home-user-copy {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  justify-content: center;
}
.home-user-copy strong {
  font-size: 18px;
  line-height: 20px;
  font-weight: 600;
  color: #111;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.home-user-copy span {
  font-size: 14px;
  line-height: 16px;
  font-weight: 500;
  color: #111;
}
.home-top-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  flex: 0 0 auto;
}
.round-action {
  border: 0;
  background: transparent;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  padding: 6px;
  flex: 0 0 32px;
}
.round-action .ui-icon {
  width: 20px;
  height: 20px;
}
.bar-switch {
  height: 32px;
  width: 60px;
  flex: 0 0 60px;
  border: 0;
  border-radius: 100px;
  background: #001328;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 4px;
  overflow: hidden;
  cursor: pointer;
}
.bar-switch-photo {
  display: block;
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  border-radius: 50%;
  object-fit: cover;
  opacity: .48;
  transition: opacity 180ms ease;
}
.bar-switch-photo.is-selected {
  opacity: 1;
}
.bar-switch:focus-visible {
  outline: 2px solid #741cfd;
  outline-offset: 3px;
}
.section-heading { display: flex; align-items: center; justify-content: space-between; color: #111; }
.section-heading button { border: 0; background: transparent; font-size: 24px; width: 32px; height: 32px; color: #222; }
.shortcuts-heading { margin: 0 0 10px; font-size: 14px; }
.shortcut-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.shortcut { height: 56px; border: 0; border-radius: 10px; background: #f8f8f8; box-shadow: 0 1px 0 #ddd; display: flex; align-items: center; gap: 12px; padding: 0 14px; text-align: left; font-size: 13px; white-space: nowrap; }
.shortcut-icon { width: 24px; height: 24px; border: 1px solid #ddd; border-radius: 7px; display: grid; place-items: center; font-size: 17px; color: #333; }
.service-heading { margin: 22px 0 8px; }
.service-heading strong { font-size: 16px; font-weight: 600; }
.date-filter { height: 32px; width: 160px; margin: 0 4px 16px auto; border-radius: 100px; background: #f4f4f4; display: flex; align-items: center; justify-content: space-between; overflow: hidden; font-size: 12px; padding-left: 12px; }
.date-filter button { width: 42px; height: 32px; border: 0; border-left: 1px solid #ddd; background: #f4f4f4; font-size: 18px; }
.analytics-card { background: #f5f5f5; border-radius: 18px; padding: 24px 16px 16px; }
.analytics-main { min-height: 214px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.legend { display: flex; flex-direction: column; gap: 24px; padding-left: 2px; }
.legend div { display: grid; grid-template-columns: 22px auto; column-gap: 8px; align-items: center; }
.legend .dot { width: 20px; height: 10px; border-radius: 100px; grid-row: 1 / span 2; }
.legend span { font-size: 12px; color: #444; }
.legend strong { font-size: 18px; font-weight: 400; margin-top: 4px; }
.dot.cocktails { background: #741cfd; }
.dot.beers { background: #182cff; }
.dot.softs { background: #48df65; }
.donut { width: 186px; height: 186px; flex: 0 0 186px; border-radius: 50%; background: conic-gradient(#d9d9d9 0 100%); display: grid; place-items: center; }
.donut div { width: 124px; height: 124px; border-radius: 50%; background: #fff; display: grid; place-items: center; font-size: 16px; color: #333; }
.metrics { min-height: 64px; background: #fff; border-radius: 10px; display: grid; grid-template-columns: repeat(3, 1fr); align-items: center; margin-top: 16px; }
.metrics div { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 12px; }
.metrics div + div { border-left: 1px solid #ccc; }
.metrics strong { font-size: 12px; font-weight: 400; }
.bottom-nav { position: absolute; left: 48px; right: 48px; bottom: 44px; height: 64px; border-radius: 100px; border: 1px solid #ddd; background: #fafafa; display: flex; align-items: center; justify-content: space-around; padding: 4px; }
.nav-item { border: 0; background: transparent; height: 56px; min-width: 48px; display: flex; align-items: center; justify-content: center; gap: 8px; color: #666; border-radius: 100px; padding: 0 14px; }
.nav-item span { font-size: 25px; line-height: 1; }
.nav-item small { display: none; font-size: 13px; }
.nav-item.active { background: #c59aff; color: white; flex: 1; }
.nav-item.active small { display: inline; }
@media (max-width: 360px) {
  .donut { width: 150px; height: 150px; flex-basis: 150px; }
  .donut div { width: 100px; height: 100px; }
  .bottom-nav { left: 28px; right: 28px; }
}
@media (min-width: 600px) {
  body { padding: 24px 0; }
  .app-shell { min-height: 917px; border-radius: 28px; box-shadow: 0 8px 36px rgba(0,0,0,.12); }
}


/* Telas internas adicionais inspiradas nos frames reais do Figma */
.detail-screen { padding: 0 0 30px; min-height: calc(100vh - 60px); }
.detail-header { height: 64px; border-radius: 100px; background: #f6f6f6; display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; margin: 0 0 28px; }
.detail-header > span:nth-child(2) { font-size: 22px; font-weight: 500; color: #111; }
.detail-back { width: 36px; height: 42px; border: 0; background: transparent; font-size: 32px; color: #111; line-height: 1; }
.mini-avatar { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: #d6c1f4; color: #45217a; font-weight: 600; }
.detail-screen > h2 { font-size: 22px; font-weight: 600; margin: 0 0 24px; }
.recipe-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 0 0 30px; }
.recipe-stats div { height: 80px; border-radius: 16px; background: #fafafa; padding: 12px 10px 8px; display: flex; flex-direction: column; justify-content: space-between; }
.recipe-stats span { font-size: 12px; white-space: nowrap; }
.recipe-stats strong { font-size: 22px; font-weight: 500; text-align: right; }
.detail-screen > h3 { font-size: 21px; font-weight: 600; margin: 0 0 16px; }
.recipe-list { display: flex; flex-direction: column; gap: 16px; padding-bottom: 24px; }
.recipe-card { min-height: 100px; border: 1px solid #e1e1e1; border-radius: 16px; padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; }
.recipe-card small { font-size: 12px; color: #333; }
.recipe-card strong { font-size: 16px; font-weight: 600; }
.recipe-card p { display: flex; gap: 12px; margin: 12px 0 0; font-size: 12px; }
.floating-add { position: fixed; right: max(calc((100vw - 412px)/2 + 16px), 16px); bottom: 54px; width: 56px; height: 56px; border: 0; border-radius: 16px; background: #c59aff; color: #111; font-size: 28px; }
.search-header { height: 64px; display: flex; align-items: center; gap: 10px; margin: 0 -16px 12px; padding: 0 16px; box-shadow: 0 1px 3px #ddd; }
.search-header .detail-back { flex: 0 0 30px; }
.search-header input { height: 56px; flex: 1; min-width: 0; border: 0; border-radius: 100px; background: #f6f6f6; padding: 0 20px; outline: 0; font-size: 16px; }
.filter-button { width: 34px; height: 34px; border: 0; border-radius: 50%; background: #050505; color: white; font-weight: 600; }
.ingredient-screen { margin: 0 -16px; }
.ingredient-list { overflow-y: auto; max-height: calc(100vh - 150px); }
.ingredient-group h3 { height: 54px; display: flex; align-items: center; padding: 0 22px; margin: 0; font-size: 16px; font-weight: 600; }
.ingredient-group article { min-height: 68px; border-bottom: .5px solid #d8d8d8; display: grid; grid-template-columns: 1fr 78px 82px; gap: 4px; align-items: center; padding: 8px 16px; }
.ingredient-group article div { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ingredient-group article small { font-size: 12px; }
.ingredient-group article strong { font-size: 16px; font-weight: 500; }
.ingredient-group article span, .ingredient-group article b { font-size: 14px; font-weight: 400; white-space: nowrap; }
.list-screen { padding-bottom: 70px; }
.header-mark { color: #ee3443; font-size: 22px; }
.quick-links { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: -6px 0 40px; }
.quick-links button { height: 96px; border: 0; border-radius: 12px; background: #f6f6f6; display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; padding: 12px 8px; font-size: 22px; }
.quick-links small { font-size: 13px; color: #111; }
.list-title { display: flex; align-items: center; justify-content: space-between; margin: 0 0 14px; }
.list-title h2 { font-size: 21px; margin: 0; font-weight: 600; }
.add-pill { border: 0; border-radius: 100px; background: #6e50aa; color: white; padding: 8px 14px; font-size: 12px; }
.filter-pills { display: flex; gap: 8px; overflow-x: auto; margin: 0 0 16px; padding-bottom: 2px; }
.filter-pills button { flex: 0 0 auto; border: 0; border-radius: 100px; background: #f6f6f6; padding: 9px 14px; font-size: 12px; color: #111; }
.task-list { display: flex; flex-direction: column; gap: 16px; }
.task-list article { min-height: 112px; border-radius: 16px; background: #f6f6f6; padding: 16px; display: flex; align-items: center; gap: 8px; }
.task-list article > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.task-list article small { font-size: 12px; color: #555; }
.task-list article strong { font-size: 16px; font-weight: 600; }
.task-list article span { font-size: 21px; font-weight: 300; margin-top: 12px; }
.status-pill { flex: 0 0 auto; min-width: 88px; border: 0; border-radius: 100px; background: #6e50aa; color: white; padding: 9px 12px; font-size: 12px; }
.more-button { width: 28px; height: 32px; border: 0; border-radius: 100px; background: #e6e6e6; color: #777; font-size: 20px; }
@media (max-width: 360px) {
  .quick-links { gap: 6px; }
  .quick-links small { font-size: 11px; }
  .task-list article { padding: 12px; }
  .status-pill { min-width: 76px; }
}

.app-bar.detail-app-bar { display: none; }


/* Page Main — tela inicial de abertura do Figma */
.app-bar.main-app-bar { display:none; }
.main-screen { min-height: calc(100vh - 60px); }
.main-body { min-height: calc(100vh - 60px); display:flex; flex-direction:column; gap:20px; padding: 4px 8px 20px; }
.welcome-wallpaper { position:relative; flex:1 1 auto; min-height:390px; border:1px solid #111; border-radius:32px; overflow:hidden; box-shadow:0 4px 4px rgba(0,0,0,.1); display:flex; align-items:flex-end; justify-content:center; padding:30px 32px; background-image:linear-gradient(180deg,rgba(0,0,0,.02),rgba(0,0,0,.3)),url("./assets/welcome-cocktail.jpg"); background-size:cover; background-position:center; }
.welcome-title { color:#fff; font-size:32px; line-height:1.15; font-weight:600; width:100%; }
.login-fields { display:flex; flex-direction:column; gap:16px; }
.login-field { display:flex; align-items:center; height:56px; border:1px solid #949494; border-radius:8px; padding:8px 16px; }
.login-field input { width:100%; border:0; outline:0; background:transparent; font-size:16px; color:#313131; }
.login-field input::placeholder { color:#5e5e5e; opacity:1; }
.password-wrap { display:flex; flex-direction:column; gap:8px; }
.forgot-password { align-self:flex-end; background:transparent; border:0; color:#313131; font-size:12px; padding:0; }
.main-actions { display:flex; gap:16px; }
.main-actions button { flex:1; height:56px; border:0; border-radius:16px; padding:10px 20px; font-size:14px; font-weight:500; }
.main-register { background:#fafafa; color:#313131; }
.main-login { background:#9049fd; color:#fff; }
@media(max-height:760px) { .welcome-wallpaper { min-height:300px; } .main-body { min-height:auto; } }


/* Ajustes de fidelidade — Page Cadastro (Figma node 100:529, frame 412 × 917) */
@media (max-width: 599px) {
  html, body { background: #fff; }
  .app-shell { width: 100%; max-width: 412px; min-height: 917px; padding: 32px 16px 0; margin: 0 auto; overflow: hidden; background: #fff; }
}
#profileScreen { position: relative; min-height: 789px; }
#profileScreen .intro { margin: 28px 8px 40px; }
#profileScreen .intro h2 { font-size: 24px; line-height: 32px; letter-spacing: .024px; color: #313131; }
#profileScreen .intro p { font-size: 22px; line-height: 28px; letter-spacing: .022px; color: #626262; }
#profileScreen .profile-list { gap: 16px; margin: 0 8px; }
#profileScreen .profile-card { min-height: 86px; width: 100%; padding: 20px; border: .5px solid #741cfd; border-radius: 24px; background: #fff; justify-content: flex-start; }
#profileScreen .profile-card.selected {
  min-height: 86px;
  height: auto;
  box-sizing: border-box;
  padding: 20px;
  background: #e6d6ff;
  border: 2px solid #741cfd;
}
#profileScreen .profile-copy { gap: 4px; }
#profileScreen .profile-copy strong { font-size: 16px; line-height: 26px; font-weight: 500; color: #626262; }
#profileScreen .profile-copy small { font-size: 12px; line-height: 16px; font-weight: 500; color: #626262; }
#profileScreen .profile-card.unavailable { opacity: .4; }
#profileScreen .profile-confirm {
  position: absolute; right: 0; top: 696px; min-width: 56px; width: 56px; height: 56px;
  border: 0; border-radius: 100px; background: #fdfdfd; color: #777; opacity: .4;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 16px; font-size: 14px; font-weight: 500; line-height: 1;
  transition: width 180ms ease, background-color 180ms ease, opacity 180ms ease, color 180ms ease;
}
#profileScreen .profile-confirm .confirm-label { display: none; white-space: nowrap; }
#profileScreen .profile-confirm .confirm-icon { font-size: 24px; line-height: 1; }
#profileScreen .profile-confirm.is-ready {
  width: auto; min-width: 148px; background: #741cfd; color: #fff; opacity: 1;
}
#profileScreen .profile-confirm.is-ready .confirm-label { display: inline; }
#profileScreen .profile-confirm.is-ready .confirm-icon { font-size: 20px; }
#profileScreen .profile-confirm:focus-visible, #profileScreen .profile-card:focus-visible { outline: 2px solid #741cfd; outline-offset: 3px; }
.app-bar .back-button:not([hidden]) { display: block; }

/* Page Main — reprodução fiel do frame mobile do Figma (node 379:157) */
@media (max-width: 599px) {
  body:has(#mainScreen.active) { background: #fdfdfd; }
  .app-shell:has(#mainScreen.active) {
    width: 100%; max-width: 412px; min-height: 100svh; height: 100svh;
    margin: 0 auto; padding: 0; overflow: hidden; border-radius: 0;
    box-shadow: none; background: #fdfdfd;
  }
  .app-shell:has(#mainScreen.active) > .app-bar { display: none !important; }
  #mainScreen.active { display: block; height: 100%; min-height: 0; }
  #mainScreen .main-body {
    height: 100%; min-height: 0; width: 100%;
    padding: 36px 24px; gap: 20px;
    display: flex; flex-direction: column;
  }
  #mainScreen .welcome-wallpaper {
    flex: 1 1 0; min-height: 0; width: 100%;
    border: 1px solid #000; border-radius: 32px;
    padding: 30px 32px; display: flex; align-items: flex-end;
    background-image: linear-gradient(180deg, transparent 58%, rgba(0,0,0,.18)), url("./assets/welcome-cocktail.jpg");
    background-position: center; background-size: cover;
    box-shadow: 0 4px 4px rgba(0,0,0,.1);
  }
  #mainScreen .welcome-title {
    width: 100%; color: #fff; font-family: Montserrat, sans-serif;
    font-size: 32px; line-height: 1.0; font-weight: 600;
  }
  #mainScreen .login-fields {
    flex: 0 0 152px; height: 152px; display: flex;
    flex-direction: column; gap: 16px; margin: 0;
  }
  #mainScreen .login-field { height: 56px; min-height: 56px; width: 100%; border: 1px solid #949494; border-radius: 8px; padding: 8px 16px; }
  #mainScreen .login-field input { font-size: 16px; line-height: 24px; }
  #mainScreen .password-wrap { display: flex; flex-direction: column; gap: 8px; }
  #mainScreen .forgot-password { font-size: 12px; line-height: 16px; color: #313131; }
  #mainScreen .main-actions { flex: 0 0 56px; height: 56px; display: flex; gap: 16px; }
  #mainScreen .main-actions button { height: 56px; min-width: 0; border-radius: 16px; font-size: 14px; font-weight: 500; }
  #mainScreen .main-register { background: #fafafa; color: #313131; }
  #mainScreen .main-login { background: #9049fd; color: #fdfdfd; }
}
@media (max-width: 599px) and (max-height: 760px) {
  #mainScreen .main-body { padding-top: 24px; padding-bottom: 24px; }
  #mainScreen .welcome-title { font-size: 28px; }
}


/* Icones oficiais exportados do Figma — Pacote de Icones */
.ui-icon { width: 24px; height: 24px; flex: 0 0 24px; display: inline-block; object-fit: contain; vertical-align: middle; }
.upload-button .ui-icon { width: 18px; height: 18px; flex-basis: 18px; }
.detail-back .ui-icon { width: 24px; height: 24px; }
.filter-button .ui-icon { filter: invert(1); }
.quick-links button > .ui-icon { width: 24px; height: 24px; flex-basis: 24px; }
.quick-links button { align-items: flex-start; }
.ingredient-group h3 .ui-icon { margin-right: 8px; }
.shortcut-icon .ui-icon { width: 24px; height: 24px; }
.nav-item .ui-icon { width: 24px; height: 24px; }
.more-button .ui-icon { width: 20px; height: 20px; }
.header-mark .ui-icon { width: 24px; height: 24px; }


/* Correção definitiva do estado selecionado dos perfis */
#profileScreen .profile-card.selected,
#profileScreen .profile-card[aria-pressed="true"] {
  background-color: #e6d6ff !important;
  border: 2px solid #741cfd !important;
  color: #313131;
}
#profileScreen .profile-card.selected .profile-copy strong,
#profileScreen .profile-card.selected .profile-copy small,
#profileScreen .profile-card[aria-pressed="true"] .profile-copy strong,
#profileScreen .profile-card[aria-pressed="true"] .profile-copy small {
  color: #313131;
}

/* Estado selecionado dos cartões de perfil */
#profileScreen button.profile-card.selected,
#profileScreen button.profile-card[aria-pressed="true"] {
  appearance: none;
  -webkit-appearance: none;
  background: #e6d6ff !important;
  background-color: #e6d6ff !important;
  border: 2px solid #741cfd !important;
}


/* Ajustes finais FAB Effect e dimensões constantes dos cartões */
#profileScreen .profile-card,
#profileScreen .profile-card.selected,
#profileScreen button.profile-card[aria-pressed="true"] {
  box-sizing: border-box !important;
  min-height: 86px !important;
  height: auto !important;
  padding: 20px !important;
}
#profileScreen .profile-card.selected,
#profileScreen button.profile-card[aria-pressed="true"] {
  background-color: #e6d6ff !important;
  border: 2px solid #741cfd !important;
}
#profileScreen .profile-confirm {
  box-sizing: border-box !important;
  border-radius: 50% !important;
  background: transparent !important;
}
#profileScreen .profile-confirm.is-ready,
#profileScreen .profile-confirm[data-state="true"] {
  width: auto !important;
  min-width: 148px !important;
  height: 56px !important;
  border-radius: 16px !important;
  background: #e6d6ff !important;
  background-color: #e6d6ff !important;
  color: #313131 !important;
  opacity: 1 !important;
}
#profileScreen .profile-confirm.is-ready .confirm-icon,
#profileScreen .profile-confirm[data-state="true"] .confirm-icon {
  color: #313131 !important;
}


/* FAB Effect fix: fixo à viewport e ícone SVG original do projeto */
#profileScreen .profile-confirm {
  position: fixed !important;
  top: auto !important;
  right: max(24px, calc((100vw - 412px) / 2 + 24px)) !important;
  bottom: calc(24px + env(safe-area-inset-bottom, 0px)) !important;
  left: auto !important;
  z-index: 1000 !important;
}
#profileScreen .profile-confirm .confirm-icon {
  display: block;
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  object-fit: contain;
  font-size: 0;
}
#profileScreen .profile-confirm.is-ready .confirm-icon,
#profileScreen .profile-confirm[data-state="true"] .confirm-icon {
  width: 24px;
  height: 24px;
  flex-basis: 24px;
}


/* Cadastro por perfil — telas Bartender e Bar */
.registration-screen { min-height: calc(100vh - 128px); }
.registration-screen .registration-content {
  max-height: calc(100dvh - 140px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0 8px 32px;
  scrollbar-width: none;
}
.registration-screen .registration-content::-webkit-scrollbar { display: none; }
.registration-screen .profile-heading { min-height: 96px; align-items: center; }
.registration-screen .avatar { width: 96px; height: 96px; flex: 0 0 96px; }
.registration-screen .bar-avatar {
  background-image: url("assets/welcome-cocktail.jpg");
  background-size: cover;
  background-position: center;
}
.registration-screen .form-section {
  border-radius: 16px;
  padding: 0;
  margin: 0 0 8px;
}
.registration-screen .form-section h2 {
  height: 56px;
  padding: 0 0;
  font-size: 16px;
  line-height: 24px;
  font-weight: 600;
}
.registration-screen .field {
  width: 100%;
  height: 56px;
  margin-bottom: 8px;
  border-radius: 8px;
  padding: 8px 16px;
}
.registration-screen .consents { padding-top: 4px; }
.registration-screen .submit-button { margin: 8px 0 16px; }
@media (max-height: 760px) {
  .registration-screen .registration-content { max-height: calc(100dvh - 112px); }
}


/* Cadastro — Text Fields: estado de erro Red/400 e retorno ao foco */
.registration-screen .field.has-error {
  border-color: #f87171 !important;
  box-shadow: none !important;
}
.registration-screen .field.has-error .field-support {
  color: #f87171 !important;
}
.registration-screen .field.has-error:not(:focus-within) input,
.registration-screen .field.has-error:not(:focus-within) input::placeholder {
  color: #f87171 !important;
}
.registration-screen .field.has-error:focus-within input,
.registration-screen .field.has-error:focus-within input::placeholder {
  color: #222 !important;
}
.registration-screen .field.has-error:focus-within {
  border-color: #f87171 !important;
  box-shadow: 0 0 0 1px #f87171 !important;
}

/* Cadastro — botão Concluir com o mesmo FAB Effect da seleção de perfil */
.registration-screen .submit-button {
  position: fixed !important;
  top: auto !important;
  right: max(24px, calc((100vw - 412px) / 2 + 24px)) !important;
  bottom: calc(24px + env(safe-area-inset-bottom, 0px)) !important;
  left: auto !important;
  z-index: 1000 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  width: 56px !important;
  min-width: 56px !important;
  height: 56px !important;
  min-height: 56px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: transparent !important;
  color: #741cfd !important;
  box-shadow: none !important;
  opacity: 1 !important;
  transition: width .18s ease, min-width .18s ease, border-radius .18s ease, background-color .18s ease !important;
}
.registration-screen .submit-button:disabled {
  cursor: default !important;
  opacity: .65 !important;
}
.registration-screen .submit-button .confirm-label {
  display: none !important;
  white-space: nowrap !important;
}
.registration-screen .submit-button .confirm-icon {
  display: block !important;
  width: 24px !important;
  height: 24px !important;
  flex: 0 0 24px !important;
  object-fit: contain !important;
}
.registration-screen .submit-button.is-ready,
.registration-screen .submit-button[data-state="true"] {
  width: auto !important;
  min-width: 148px !important;
  height: 56px !important;
  border-radius: 16px !important;
  padding: 0 20px !important;
  background: #e6d6ff !important;
  color: #313131 !important;
  opacity: 1 !important;
}
.registration-screen .submit-button.is-ready .confirm-label,
.registration-screen .submit-button[data-state="true"] .confirm-label {
  display: inline !important;
}
.registration-screen .submit-button.is-ready .confirm-icon,
.registration-screen .submit-button[data-state="true"] .confirm-icon {
  width: 24px !important;
  height: 24px !important;
  flex-basis: 24px !important;
}

/* Floating label — Text Fields component states */
.registration-screen .field.has-error > span:not(.field-support) {
  color: #f87171;
}
.registration-screen .field.has-error:focus-within > span:not(.field-support) {
  color: rgba(0,0,0,.5);
}
.registration-screen .field.has-error:not(:focus-within) input {
  color: #f87171;
}
.registration-screen .field.has-error:focus-within input {
  color: #222;
}

/* AppNav — reprodução do componente Figma 2191:2289 */
.bottom-nav {
  display: none;
  position: fixed;
  z-index: 50;
  left: 50%;
  right: auto;
  bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  box-sizing: border-box;
  width: min(318px, calc(100vw - 32px));
  height: 64px;
  padding: 4px;
  border: 1px solid #dddddd; /* borda pertence ao componente inteiro */
  border-radius: 100px;
  background: #fafafa; /* Gray/300 */
  box-shadow: 0 1px 0.5px rgba(98, 98, 98, 0.45);
  align-items: center;
  justify-content: space-between;
  gap: 0;
}
.bottom-nav.visible { display: flex; }
.bottom-nav::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: 4px;
  left: var(--pill-x, 4px);
  width: var(--pill-width, 60px);
  height: 56px;
  border-radius: 100px;
  background: #c7a4fe; /* Purple/200 */
  pointer-events: none;
  transition:
    left 300ms cubic-bezier(0, 0, 0.2, 1),
    width 300ms cubic-bezier(0, 0, 0.2, 1);
  will-change: left, width;
}
.bottom-nav .nav-item {
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  flex: 0 0 auto;
  min-width: 60px;
  width: auto;
  height: 56px;
  padding: 16px;
  border: 0;
  border-radius: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: #626262; /* Gray/800 */
  background: transparent;
  font-family: 'Montserrat', sans-serif;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.bottom-nav .nav-item span {
  display: grid;
  place-items: center;
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  font-size: 0;
}
.bottom-nav .nav-item .ui-icon {
  display: block;
  width: 24px;
  height: 24px;
  object-fit: contain;
}
.bottom-nav .nav-item small {
  display: none;
  margin: 0;
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 24px;
  white-space: nowrap;
}
.bottom-nav .nav-item.active {
  /* O fundo roxo é desenhado pelo pseudo-elemento do componente e desliza entre itens. */
  position: relative;
  z-index: 1;
  display: inline-flex;
  flex: 0 0 auto;
  width: max-content;
  min-width: 0;
  max-width: calc(100% - 8px);
  padding: 16px;
  border: 0;
  background: transparent;
  color: #fdfdfd; /* Gray/100 */
}
.bottom-nav .nav-item.active small { display: inline; }
.bottom-nav .nav-item:not(.active) {
  /* Os três itens inativos dividem o espaço que sobra.
     Assim o selecionado continua fit-content sem empurrar a borda externa. */
  flex: 1 1 0;
  min-width: 0;
}
.bottom-nav .nav-item.active > span { flex: 0 0 28px; }
.bottom-nav .nav-item.active > small { flex: 0 0 auto; }
.bottom-nav .nav-item.active .ui-icon { filter: brightness(0) invert(1); }
.bottom-nav .nav-item:focus-visible {
  outline: 2px solid #626262;
  outline-offset: 2px;
}
.app-shell.app-area-open { padding-bottom: 112px; }
.home-screen { padding-bottom: 110px; }
.detail-screen { padding-bottom: 112px; }
@media (min-width: 600px) {
  .bottom-nav { bottom: 40px; }
}


@media (max-width: 380px) {
  .home-topbar { gap: 10px; padding: 8px; }
  .home-top-actions { gap: 8px; }
  .home-user-copy strong { font-size: 16px; }
  .bar-switch { width: 60px; flex-basis: 60px; }
}