/* Account chip in the header + the /entrar page. Loaded on demand by
   js/auth.js so it stays out of site.css. */

/* ---------- header ---------- */
.acct { position: relative; display: inline-flex; }
.acct--login {
  align-items: center;
  min-height: 36px;
  padding: 0 14px;
  margin-right: 2px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.35);
  color: #fff;
  font-weight: 800;
  font-size: 13px;
  text-decoration: none;
}
@media (hover: hover), (min-width: 640px) { .acct--login:hover { background: rgba(255, 255, 255, 0.24); } }

.acct__btn {
  width: 36px; height: 36px;
  display: inline-grid; place-items: center;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.55);
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  overflow: hidden;
  padding: 0;
}
@media (hover: hover), (min-width: 640px) { .acct__btn:hover { background: rgba(255, 255, 255, 0.26); } }
.acct__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.acct__initial { font-family: var(--font-display); font-weight: 800; font-size: 15px; }

.acct__menu {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  z-index: 60;
  min-width: 230px;
  padding: 6px;
  background: var(--white);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
}
.acct__menu[hidden] { display: none; }
.acct__who { display: grid; gap: 2px; padding: 10px 12px 12px; border-bottom: 1px solid var(--line); margin-bottom: 4px; }
.acct__who strong { font-size: 14px; }
.acct__who span { font-size: 12.5px; color: var(--ink-3); overflow-wrap: anywhere; }
.acct__out {
  width: 100%;
  text-align: left;
  padding: 10px 12px;
  border-radius: 10px;
  font-weight: 700;
  font-size: 13.5px;
  color: var(--red-ink);
}
@media (hover: hover), (min-width: 640px) { .acct__out:hover { background: var(--gray-50); } }

/* ---------- /entrar ---------- */
.auth [hidden] { display: none !important; } /* the display rules below would otherwise beat the attribute */
.auth { max-width: 420px; margin: 8px auto 64px; }
.auth__card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 26px 24px 24px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.06);
}
.auth h1 { font-family: var(--font-display); font-weight: 800; font-size: 26px; margin: 0 0 4px; }
.auth__sub { margin: 0 0 20px; color: var(--ink-3); font-size: 14px; }

.auth__tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; margin-bottom: 20px; background: var(--gray-50); border-radius: var(--r-pill); }
.auth__tab { min-height: 38px; border-radius: var(--r-pill); font-weight: 800; font-size: 13.5px; color: var(--ink-3); }
.auth__tab[aria-selected="true"] { background: var(--white); color: var(--ink); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12); }

.auth__google { gap: 10px; text-transform: none; letter-spacing: normal; font-family: var(--font-ui); font-weight: 700; font-size: 14.5px; }
.auth__or { display: flex; align-items: center; gap: 12px; margin: 18px 0; color: var(--ink-3); font-size: 12.5px; }
.auth__or::before, .auth__or::after { content: ""; flex: 1; height: 1px; background: var(--line); }

.auth__field { display: grid; gap: 6px; margin-bottom: 14px; font-size: 13px; font-weight: 700; color: var(--ink-2); }
.auth__field input {
  min-height: 46px;
  padding: 0 14px;
  border: 2px solid var(--line);
  border-radius: 12px;
  background: var(--white);
  color: var(--ink);
  font-size: 15px;
  font-weight: 500;
}
.auth__field input:focus-visible { outline: 3px solid var(--red); outline-offset: 1px; border-color: var(--red); }
.auth__hint { font-weight: 500; font-size: 12px; color: var(--ink-3); }

.auth__msg { margin: 0 0 14px; padding: 10px 12px; border-radius: 10px; background: var(--red-tint); color: var(--red-ink); font-size: 13.5px; font-weight: 600; }
.auth__msg[hidden] { display: none; }
.auth__submit[disabled] { opacity: 0.6; pointer-events: none; }
.auth__fine { margin: 16px 0 0; font-size: 12px; color: var(--ink-3); text-align: center; }

/* ---------- header account menu (signed in) ---------- */
.acct--login { gap: 6px; }
.acct__badge {
  position: absolute; top: -3px; right: -4px;
  min-width: 18px; height: 18px; padding: 0 5px;
  display: grid; place-items: center;
  border-radius: var(--r-pill);
  background: #fff; color: var(--red-dark);
  font-size: 11px; font-weight: 900;
  box-shadow: 0 0 0 2px var(--red);
  pointer-events: none;
}
.acct__item {
  display: flex; align-items: center; gap: 10px;
  width: 100%;
  padding: 10px 12px;
  border-radius: 10px;
  font-weight: 700; font-size: 13.5px;
  color: var(--ink);
  text-align: left;
  text-decoration: none;
}
@media (hover: hover), (min-width: 640px) { .acct__item:hover { background: var(--gray-50); } }
.acct__item .ico { color: var(--ink-3); }
.acct__count { margin-left: auto; min-width: 20px; padding: 1px 7px; border-radius: var(--r-pill); background: var(--red); color: #fff; font-size: 11.5px; font-weight: 900; text-align: center; }
.acct__out { color: var(--red-ink); border-top: 1px solid var(--line); border-radius: 0 0 10px 10px; margin-top: 4px; }
.acct__out .ico { color: currentColor; }

/* ---------- toast ---------- */
.toast {
  position: fixed; left: 50%; bottom: 24px; z-index: 200;
  display: flex; align-items: center; gap: 14px;
  max-width: calc(100vw - 32px);
  padding: 12px 18px;
  border-radius: var(--r-pill);
  background: var(--brown); color: #fff;
  font-weight: 700; font-size: 14px;
  box-shadow: var(--shadow-float);
  transform: translate(-50%, 140%); opacity: 0;
  transition: transform var(--t-base) var(--ease-out), opacity var(--t-base);
  pointer-events: none;
}
:root[data-theme="dark"] .toast { background: #F7EFEB; color: #1E1714; }
.toast[data-show="true"] { transform: translate(-50%, 0); opacity: 1; pointer-events: auto; }
.toast a { color: inherit; text-decoration: underline; font-weight: 900; white-space: nowrap; }

/* ---------- save heart on product cards ---------- */
/* top-left of the photo: the card's share button owns the top-right */
.save-heart {
  position: absolute; top: 8px; left: 8px; z-index: 2;
  width: 32px; height: 32px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.94);
  color: #6D4B43;
  box-shadow: 0 2px 8px rgba(59, 39, 35, 0.18);
  opacity: 0.9;
  transition: transform var(--t-fast) var(--ease-spring), opacity var(--t-fast), color var(--t-fast);
}
@media (hover: hover), (min-width: 640px) { .save-heart:hover { transform: scale(1.08); opacity: 1; color: var(--red); } }
.save-heart:active { transform: scale(0.9); }
.save-heart[aria-pressed="true"] { color: var(--red); opacity: 1; }
.save-heart[aria-pressed="true"] svg { fill: currentColor; }
@media (hover: hover) {
  .product-card .save-heart:not([aria-pressed="true"]) { opacity: 0; }
  .product-card:hover .save-heart, .product-card:focus-within .save-heart, .save-heart:focus-visible { opacity: 0.95; }
}

/* ---------- like / dislike on offers and coupons ---------- */
/* A quiet pair on the attribution line, left of the star chip: muted until
   hovered, so it never competes with price or the save heart. Pressed like
   is the site's green, pressed dislike the brown ink. */
.vote { display: inline-flex; align-items: center; gap: 2px; margin-left: auto; flex: none; font-style: normal; }
.vote + .stars { margin-left: 0; }
.vote__btn {
  display: grid; place-items: center;
  width: 24px; height: 24px; padding: 0;
  border-radius: 50%;
  color: var(--ink-3);
  transition: transform var(--t-fast) var(--ease-spring), color var(--t-fast), background var(--t-fast);
}
/* like is the site's green, dislike the brand red, each as a soft tint at rest
   and solid once chosen (same soft-to-solid step as the expiry pill and buttons) */
.vote__btn--like { color: var(--green); background: var(--green-soft); }
.vote__btn--dislike { color: var(--red-ink); background: var(--red-soft); }
@media (hover: hover), (min-width: 640px) { .vote__btn:hover { transform: scale(1.08); } }
@media (hover: hover), (min-width: 640px) { .vote__btn--like:hover { background: color-mix(in srgb, var(--green) 22%, var(--green-soft)); } }
@media (hover: hover), (min-width: 640px) { .vote__btn--dislike:hover { background: color-mix(in srgb, var(--red) 22%, var(--red-soft)); } }
.vote__btn:active { transform: scale(0.9); }
.vote__btn:focus-visible { outline: 2px solid var(--red); outline-offset: 1px; }
.vote__btn--like[aria-pressed="true"] { color: #fff; background: var(--green); }
.vote__btn--dislike[aria-pressed="true"] { color: #fff; background: var(--red); }
.vote__btn[aria-pressed="true"] svg { fill: currentColor; }
.vote.is-busy { opacity: 0.6; pointer-events: none; }

/* ---------- product page actions ---------- */
.pd-actions { margin-top: 16px; }
.pd-total { margin: 14px 0 0; padding: 10px 12px; border-radius: 10px; background: var(--surface-2, #f6f4f0); font-size: 14px; line-height: 1.4; }
.pd-total a { font-weight: 600; }
.pd-actions__row { display: flex; flex-wrap: wrap; gap: 10px; }
.pd-action {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 42px; padding: 0 16px;
  border: 2px solid var(--line); border-radius: var(--r-pill);
  background: var(--white); color: var(--ink);
  font-weight: 800; font-size: 13.5px;
  transition: border-color var(--t-fast), color var(--t-fast);
}
@media (hover: hover), (min-width: 640px) { .pd-action:hover { border-color: var(--gray-300); } }
.pd-action[aria-pressed="true"], .pd-action.is-on { border-color: var(--red); color: var(--red-ink); }
.pd-action[aria-pressed="true"] svg { fill: currentColor; }
.pd-alert { margin-top: 12px; padding: 16px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--gray-25); }
.pd-alert__label { display: grid; gap: 8px; font-weight: 800; font-size: 14px; }
.pd-alert__field { display: inline-flex; align-items: center; gap: 8px; max-width: 220px; min-height: 44px; padding: 0 12px; border: 2px solid var(--line); border-radius: 12px; background: var(--white); font-weight: 700; color: var(--ink-3); }
.pd-alert__field:focus-within { border-color: var(--red); }
.pd-alert__field input { flex: 1; min-width: 0; border: 0; background: transparent; font-size: 17px; font-weight: 800; color: var(--ink); outline: none; }
.pd-alert__note { margin: 10px 0 0; font-size: 12.5px; color: var(--ink-3); }
.pd-alert__note a { color: var(--red-ink); font-weight: 700; }
.pd-alert__row { display: flex; align-items: center; gap: 14px; margin-top: 12px; }
.pd-alert__remove { font-size: 13px; font-weight: 700; color: var(--ink-3); text-decoration: underline; }

/* ---------- /conta ---------- */
.account { display: grid; gap: 20px; margin: 4px 0 64px; }
@media (min-width: 900px) { .account { grid-template-columns: 260px 1fr; gap: 32px; align-items: start; } }
.account__side { display: grid; gap: 12px; min-width: 0; }
@media (min-width: 900px) { .account__side { position: sticky; top: 16px; } }
.account__me { display: flex; align-items: center; gap: 12px; padding: 16px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--white); min-width: 0; }
.account__avatar { width: 48px; height: 48px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--red); color: #fff; overflow: hidden; }
.account__img { width: 100%; height: 100%; object-fit: cover; }
.account__initial { font-family: var(--font-display); font-weight: 800; font-size: 20px; }
.account__who { display: grid; min-width: 0; }
.account__who strong { font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account__who span { font-size: 12.5px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.account__nav { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); }
.account__nav::-webkit-scrollbar { display: none; }
@media (min-width: 900px) { .account__nav { flex-direction: column; margin: 0; padding: 8px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--white); } }
.account__link { display: flex; align-items: center; gap: 10px; flex: none; min-height: 42px; padding: 0 14px; border-radius: var(--r-pill); font-weight: 700; font-size: 14px; color: var(--ink-2); white-space: nowrap; background: var(--white); border: 1px solid var(--line); }
@media (min-width: 900px) { .account__link { border: 0; border-radius: 12px; } }
@media (hover: hover), (min-width: 640px) { .account__link:hover { background: var(--gray-50); } }
.account__link[aria-current="page"] { background: var(--red-tint); color: var(--red-ink); border-color: var(--red-soft); }
.account__link .ico { color: currentColor; opacity: 0.85; }
.account__count { margin-left: auto; min-width: 22px; padding: 1px 7px; border-radius: var(--r-pill); background: var(--gray-100); color: var(--ink-2); font-size: 12px; font-weight: 800; text-align: center; }
.account__count.is-hot { background: var(--red); color: #fff; }

.account__main { min-width: 0; }
.account__loading { padding: 40px 0; color: var(--ink-3); }
.account__head { margin-bottom: 18px; }
.account__head h1 { font-family: var(--font-display); font-weight: 800; font-size: clamp(24px, 3vw, 30px); margin: 0; }
.account__sub { margin: 6px 0 0; color: var(--ink-3); font-size: 14px; max-width: 70ch; }
.account__h2 { font-family: var(--font-display); font-weight: 800; font-size: 18px; margin: 28px 0 12px; }
.account__fine { margin: 10px 0 0; font-size: 12.5px; color: var(--ink-3); }
.account__quiet { margin: 22px 0 0; color: var(--ink-3); font-size: 14px; }
.account__toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; font-size: 13px; font-weight: 700; color: var(--ink-3); }
.account__sort { min-height: 38px; padding: 0 12px; border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--white); color: var(--ink); font-weight: 700; font-size: 13px; }
.account__hint { margin-top: 24px; padding: 24px; border: 2px dashed var(--line); border-radius: var(--r-lg); display: grid; gap: 10px; justify-items: start; }
.account__hint p { margin: 0; color: var(--ink-2); font-size: 14px; }
.account__hint .ico { vertical-align: -2px; color: var(--red); }
.account__hint .account__hint-title { font-weight: 800; font-size: 16px; color: var(--ink); }

.stat-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.stat-tile { display: grid; gap: 4px; padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--white); color: var(--ink); text-decoration: none; transition: box-shadow var(--t-base), border-color var(--t-fast); }
@media (hover: hover), (min-width: 640px) { .stat-tile:hover { box-shadow: 0 8px 22px rgba(59, 39, 35, 0.1); border-color: var(--gray-300); } }
.stat-tile__label { font-size: 12.5px; font-weight: 800; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.04em; }
.stat-tile__value { font-family: var(--font-display); font-size: 32px; font-weight: 800; line-height: 1.1; }
.stat-tile__sub { font-size: 13px; color: var(--ink-3); }
.stat-tile--hot { border-color: var(--red); background: var(--red-tint); }
.stat-tile--hot .stat-tile__value, .stat-tile--hot .stat-tile__sub { color: var(--red-ink); }

/* one row per saved product / alert */
.ulist { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.uitem {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  grid-template-areas: "media body" "media price" "actions actions";
  gap: 6px 14px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--white);
}
@media (min-width: 720px) {
  .uitem { grid-template-columns: 88px minmax(0, 1fr) auto auto; grid-template-areas: "media body price actions"; align-items: center; gap: 18px; }
}
.uitem--hot { border-color: var(--green); box-shadow: inset 4px 0 0 var(--green); }
.uitem__media { grid-area: media; width: 72px; height: 72px; display: grid; place-items: center; border-radius: 12px; background: #fff; overflow: hidden; border: 1px solid var(--gray-100); }
@media (min-width: 720px) { .uitem__media { width: 88px; height: 88px; } }
:root[data-theme="dark"] .uitem__media { background: #f4efed; }
.uitem__media img { width: 100%; height: 100%; object-fit: contain; padding: 6px; }
.uitem__letter { font-family: var(--font-display); font-weight: 800; font-size: 28px; color: #6D4B43; }
.uitem__body { grid-area: body; min-width: 0; display: grid; gap: 4px; }
.uitem__name { font-weight: 800; font-size: 14.5px; color: var(--ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
@media (hover: hover), (min-width: 640px) { .uitem__name:hover { text-decoration: underline; } }
.uitem__meta { margin: 0; font-size: 12.5px; color: var(--ink-3); }
.uitem__meta strong { color: var(--ink); }
.uitem__store { margin: 0; display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; color: var(--ink-2); }
.uitem__store--none { color: var(--ink-3); font-weight: 600; }
/* storeMark() can return a bare brand-logo <img>, sized only by its context */
.uitem__store img { height: 16px; width: auto; max-width: 72px; object-fit: contain; flex: none; }
.uitem__price { grid-area: price; display: grid; gap: 4px; justify-items: start; }
@media (min-width: 720px) { .uitem__price { justify-items: end; text-align: right; min-width: 150px; } }
.uitem__price strong { font-family: var(--font-display); font-size: 20px; font-weight: 800; }
.uitem__price strong.is-muted { color: var(--ink-3); }
.uitem__was { font-size: 12px; color: var(--ink-3); }
.uitem__actions { grid-area: actions; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
@media (min-width: 720px) { .uitem__actions { flex-wrap: nowrap; justify-content: flex-end; } }
.uitem__icon { width: 38px; height: 38px; flex: none; display: grid; place-items: center; border-radius: 50%; color: var(--ink-3); }
@media (hover: hover), (min-width: 640px) { .uitem__icon:hover { background: var(--gray-50); color: var(--red-ink); } }
.uitem__edit { display: flex; align-items: center; gap: 8px; margin-top: 6px; font-weight: 700; color: var(--ink-3); }
.uitem__edit input { width: 120px; min-height: 38px; padding: 0 10px; border: 2px solid var(--line); border-radius: 10px; background: var(--white); color: var(--ink); font-weight: 800; font-size: 15px; }

.chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: var(--r-pill); font-size: 12px; font-weight: 800; white-space: nowrap; }
.chip--down { background: var(--green-soft); color: var(--green); }
.chip--up { background: var(--red-tint); color: var(--red-ink); }

.meter { height: 6px; margin: 4px 0 2px; border-radius: var(--r-pill); background: var(--gray-100); overflow: hidden; max-width: 320px; }
.meter span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--red), var(--green)); }

.panel { display: grid; gap: 4px; justify-items: start; padding: 20px; margin-bottom: 16px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--white); }
.panel .auth__field { width: 100%; max-width: 420px; }
.panel__title { font-family: var(--font-display); font-weight: 800; font-size: 17px; margin: 0 0 12px; }
.panel input[readonly] { background: var(--gray-50); color: var(--ink-3); }
.panel--danger { border-color: var(--red-soft); }
.panel--danger .panel__title { color: var(--red-ink); }
.panel__danger-form { width: 100%; margin-top: 12px; }
.btn--danger { background: var(--red-dark); box-shadow: 0 4px 0 #8f0d17; }

.form-msg { margin: 0 0 12px; padding: 10px 12px; border-radius: 10px; background: var(--red-tint); color: var(--red-ink); font-size: 13.5px; font-weight: 600; }
.form-msg--ok { background: var(--green-soft); color: var(--green); }

.methods { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; width: 100%; }
.method { display: flex; align-items: flex-start; gap: 12px; }
.method div { display: grid; gap: 2px; font-size: 13px; color: var(--ink-3); }
.method strong { font-size: 14px; color: var(--ink); }
.method a { color: var(--red-ink); font-weight: 700; }
.method__dot { width: 12px; height: 12px; margin-top: 4px; flex: none; border-radius: 50%; border: 2px solid var(--gray-300); }
.method--on .method__dot { background: var(--green); border-color: var(--green); }

.sessions { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 10px; width: 100%; }
.session { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--gray-100); }
.session:last-child { border-bottom: 0; }
.session .ico { color: var(--ink-3); }
.session div { display: grid; gap: 2px; flex: 1; min-width: 0; }
.session strong { font-size: 14px; }
.session div span { font-size: 12.5px; color: var(--ink-3); }

/* ---------- "Salvar busca" on busca.html ---------- */
.save-search {
  display: inline-flex; align-items: center; gap: 7px;
  min-height: 38px; padding: 0 14px;
  border: 2px solid var(--line); border-radius: var(--r-pill);
  background: var(--white); color: var(--ink);
  font-weight: 800; font-size: 13px;
  transition: border-color var(--t-fast), color var(--t-fast);
}
@media (hover: hover), (min-width: 640px) { .save-search:hover { border-color: var(--gray-300); } }
.save-search.is-on { border-color: var(--red); color: var(--red-ink); }

/* ---------- Buscas salvas ---------- */
.nl-search__row { display: flex; gap: 10px; width: 100%; max-width: 640px; }
.nl-search__row input {
  flex: 1; min-width: 0; min-height: 44px; padding: 0 14px;
  border: 2px solid var(--line); border-radius: 12px;
  background: var(--white); color: var(--ink); font-size: 15px;
}
.nl-search__row input:focus-visible { outline: 3px solid var(--red); outline-offset: 1px; border-color: var(--red); }
.nl-search .form-msg { margin-top: 10px; max-width: 640px; }

.slist { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.scard { padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--white); display: grid; gap: 12px; min-width: 0; }
.scard--hot { border-color: var(--green); box-shadow: inset 4px 0 0 var(--green); }
.scard__head { display: grid; gap: 10px; }
@media (min-width: 720px) { .scard__head { grid-template-columns: minmax(0, 1fr) auto; align-items: start; } }
.scard__text { display: grid; gap: 4px; min-width: 0; }
.scard__title { margin: 0; font-size: 16px; font-weight: 800; overflow-wrap: anywhere; }
.scard__rename { min-height: 36px; padding: 0 10px; border: 2px solid var(--red); border-radius: 10px; background: var(--white); color: var(--ink); font-size: 15px; font-weight: 800; width: 100%; max-width: 420px; }
.scard__desc { margin: 0; font-size: 13px; color: var(--ink-2); overflow-wrap: anywhere; }
.scard__explain { color: var(--ink-3); }
.scard__meta { margin: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 4px; font-size: 12.5px; color: var(--ink-3); }
.scard__actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.scard__results .product-grid { margin-top: 4px; }

.mini-row { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 640px) { .mini-row { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.mini { display: grid; gap: 4px; color: var(--ink); text-decoration: none; min-width: 0; }
.mini__media { position: relative; aspect-ratio: 1; display: grid; place-items: center; border: 1px solid var(--gray-100); border-radius: 12px; background: #fff; overflow: hidden; }
:root[data-theme="dark"] .mini__media { background: #f4efed; }
.mini__media img { width: 100%; height: 100%; object-fit: contain; padding: 8px; }
.mini__media .uitem__letter { font-size: 24px; }
.mini__tag { position: absolute; top: 6px; left: 6px; padding: 2px 7px; border-radius: var(--r-pill); background: var(--green); color: #fff; font-size: 11px; font-weight: 900; }
.mini__name { font-size: 12.5px; font-weight: 600; color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
@media (hover: hover), (min-width: 640px) { .mini:hover .mini__name { text-decoration: underline; } }
.mini__price { font-family: var(--font-display); font-size: 15px; font-weight: 800; }

/* ---------- "Para você" on the home (js/foryou.js) ----------
   Rides on the home's own .panel / .shelf / .shelf__track styles, so it
   sits in the page like its sibling shelves; only the header, the "why"
   line, the Novidade badge, the skeleton and the invite are its own. */
.foryou {
  position: relative;
  background:
    radial-gradient(120% 70% at 0% 0%, var(--red-tint) 0%, transparent 55%),
    var(--white);
  box-shadow: 0 1px 2px rgba(59, 39, 35, 0.08), inset 0 0 0 1px var(--red-soft);
}
.foryou:not(.foryou--loading) { opacity: 0; transform: translateY(8px); transition: opacity var(--t-slow) var(--ease-out), transform var(--t-slow) var(--ease-out); }
.foryou.foryou--in { opacity: 1; transform: none; }
.foryou.foryou--leaving { opacity: 0; transform: translateY(-4px); transition-duration: var(--t-base); }

/* the panel can be a grid (shelf styles); its implicit column would size
   to the header's content and spill past the panel on narrow screens */
.foryou { grid-template-columns: minmax(0, 1fr); }
.foryou__head { align-items: center; flex-wrap: nowrap; gap: 12px; min-width: 0; }
.foryou__badge {
  flex: none;
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--red);
  color: #fff;
  box-shadow: 0 3px 10px rgba(234, 29, 44, 0.28);
}
.foryou__titles { display: grid; gap: 3px; min-width: 0; flex: 1; }
/* title + link pill side by side, like the home's other panels */
.foryou__titleRow { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; }
.foryou__sub { margin: 0; font-size: 13px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.foryou__sub--why strong { color: var(--ink-2); font-weight: 700; }
@media (max-width: 559.98px) {
  .foryou__sub { white-space: normal; }
}

/* why this card is here — a quiet line at the foot of the card */
.foryou-why {
  display: flex; align-items: flex-start; gap: 5px;
  margin: 6px 0 0; padding-top: 7px;
  border-top: 1px dashed var(--gray-200);
  font-size: 11.5px; line-height: 1.35; color: var(--ink-3);
}
.foryou-why .ico { color: var(--red); margin-top: 1px; }
.foryou-why span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.foryou-why strong { font-weight: 700; color: var(--ink-2); }
.foryou-card .product-card__media { position: relative; }
.foryou-new {
  position: absolute; bottom: 8px; left: 8px; z-index: 1;
  padding: 3px 8px;
  border-radius: var(--r-pill);
  background: var(--green); color: #fff;
  font-size: 11px; font-weight: 800; letter-spacing: 0.02em;
  box-shadow: 0 2px 6px rgba(30, 142, 78, 0.3);
}

/* loading: the same footprint as the shelf, so nothing jumps when it lands */
.foryou-skel { display: block; border-radius: 8px; background: var(--gray-100); animation: pulse 1.3s ease-in-out infinite; }
.foryou-skel--line { height: 12px; width: 70%; }
.foryou-skel--short { width: 40%; }
.foryou-skel--media { aspect-ratio: 1; width: 100%; border-radius: var(--r-md); }
.foryou__sub.foryou-skel { width: 240px; max-width: 60vw; height: 12px; }
.foryou-skel-row { display: grid; grid-auto-flow: column; gap: 16px; overflow: hidden; grid-auto-columns: calc((100% - 80px) / 6); }
@media (max-width: 959.98px) { .foryou-skel-row { grid-auto-columns: calc((100% - 16px) / 2.3); } }
.foryou-skel-card { display: grid; gap: 8px; }

/* cold start: a slim invite instead of a shelf */
.foryou--invite { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 12px 20px; padding-top: 18px; padding-bottom: 18px; }
.foryou-invite__art img { display: block; width: 88px; height: 88px; object-fit: contain; }
.foryou-invite__text .panel__title { font-size: 18px; }
.foryou-invite__text p { margin: 4px 0 0; font-size: 14px; color: var(--ink-2); max-width: 62ch; }
.foryou-invite__text .ico { color: var(--red); vertical-align: -2px; }
.foryou-invite__actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; }
@media (min-width: 760px) {
  .foryou--invite { grid-template-columns: auto minmax(0, 1fr) auto; }
  .foryou-invite__actions { grid-column: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .foryou:not(.foryou--loading), .foryou.foryou--leaving { transition: none; transform: none; }
  .foryou-skel { animation: none; }
}

/* ---------- cashback rates per store (website/js/cashback.js) ---------- */
/* #cashback is a grid whose items don't stretch; take the full row */
.cbrates { margin: 0 0 18px; justify-self: stretch; width: 100%; min-width: 0; }
.cbrates__lead { margin: 0 0 10px; font-size: 13.5px; color: var(--ink-3); }
.cbrates__lead strong { color: var(--ink); font-weight: 700; }
.cbrates__list {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px;
}
.cbrate { display: flex; }
.cbrate__link {
  display: flex; align-items: center; gap: 14px; min-width: 0; flex: 1;
  min-height: 92px; padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--r-md);
  color: inherit; text-decoration: none; background: transparent;
  transition: border-color var(--t-fast, .15s) ease, transform var(--t-fast, .15s) ease;
}
@media (hover: hover), (min-width: 640px) { .cbrate__link:not(.is-static):hover { border-color: var(--green); transform: translateY(-1px); } }
.cbrate__link:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
/* icon slot: a fixed 60px square with no visible frame — the logo alone */
.cbrate__mark {
  flex: none; width: 60px; height: 60px; overflow: hidden;
  display: grid; place-items: center; box-sizing: border-box;
  background: transparent; border: 0;
}
.cbrate__mark img { width: 100%; height: 100%; object-fit: contain; border-radius: 0; }
.cbrate__mono {
  width: 100%; height: 100%; display: grid; place-items: center;
  font-size: 22px; font-weight: 800; color: var(--ink-3); background: var(--gray-100, #f2eeec); border-radius: 3px;
}
.cbrate__body { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.cbrate__store {
  font-size: 16px; font-weight: 700; line-height: 1.25; color: var(--ink);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere;
}
.cbrate__desc {
  font-size: 13px; line-height: 1.4; color: var(--ink-3);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.cbrate__value {
  flex: none; font-size: 16px; font-weight: 800; color: var(--green);
  background: var(--green-soft); border-radius: 999px; padding: 6px 12px; white-space: nowrap;
}
.cbrate__value--upto { font-weight: 700; }
/* phones: one swipeable row instead of 12 stacked cards pushing the
   offers a screen down; the scroller is contained, the page never scrolls
   sideways because of it */
@media (max-width: 600px) {
  .cbrates__list {
    grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 74%;
    overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
    padding-bottom: 6px; scrollbar-width: none;
  }
  .cbrates__list::-webkit-scrollbar { display: none; }
  .cbrate { scroll-snap-align: start; }
}

/* ---------- cashback.html ---------- */
/* .panel is a grid whose items don't stretch (same as #cashback on the
   home): every child of this page's panels takes the full row */
.cbhow > *, .cbstores > * { justify-self: stretch; width: 100%; min-width: 0; }
.cbrates__all { display: inline-block; margin-top: 10px; font-size: 13.5px; font-weight: 700; color: var(--green); text-decoration: none; }
@media (hover: hover), (min-width: 640px) { .cbrates__all:hover { text-decoration: underline; } }
.cbhow__steps {
  list-style: none; margin: 12px 0 0; padding: 0; counter-reset: cbstep;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px;
}
.cbhow__steps li { counter-increment: cbstep; display: grid; grid-template-columns: 34px minmax(0, 1fr); column-gap: 12px; align-items: start; }
.cbhow__steps li::before {
  content: counter(cbstep); grid-row: span 2; width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center; font-weight: 800; color: var(--green); background: var(--green-soft);
}
.cbhow__steps strong { font-size: 14.5px; color: var(--ink); }
.cbhow__steps span { font-size: 13.5px; color: var(--ink-3); line-height: 1.5; }
.cbstores__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.cbstores__tools { display: flex; gap: 8px; flex-wrap: wrap; min-width: 0; }
.cbstores__tools input, .cbstores__tools select {
  height: 38px; padding: 0 12px; border: 1px solid var(--line); border-radius: var(--r-sm);
  background: transparent; color: var(--ink); font: inherit; font-size: 14px; min-width: 0;
}
.cbstores__tools input { width: 220px; max-width: 100%; }
.cbstores__tools input:focus, .cbstores__tools select:focus { outline: 2px solid var(--green); outline-offset: 1px; }
#cbStoresBody { margin-top: 14px; }
/* the full page lists every store in a grid on phones too (no swipe row) */
@media (max-width: 600px) {
  .cbrates__list.cbrates__list--page {
    grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: minmax(0, 1fr);
    overflow: visible; scroll-snap-type: none; padding-bottom: 0;
  }
  .cbstores__tools, .cbstores__tools label { width: 100%; }
  .cbstores__tools label:first-child { flex: 1 1 100%; }
  .cbstores__tools input, .cbstores__tools select { width: 100%; }
}
.cbstores__note { margin: 14px 0 0; font-size: 12.5px; color: var(--ink-3); line-height: 1.5; max-width: 80ch; }
.cbstores__none, .cbstores__loading { margin: 6px 0; font-size: 14px; color: var(--ink-3); }

/* cashback cards: every program's rate when more than one pays */
.cbrate__cmp { font-size: 12px; font-weight: 700; color: var(--green); }

/* product page (offerextras.js): price-history verdicts and per-offer
   cashback across programs */
.oxbadge {
  display: inline-block; margin-top: 6px; padding: 3px 9px; border-radius: 999px;
  font: 700 11.5px/1.35 var(--font-ui); white-space: normal;
}
.oxbadge--good { background: var(--green-soft); color: var(--green); }
.oxbadge--warn { background: var(--red-soft); color: var(--red-ink); }
.product-detail__best .oxbadge { margin: 4px 0 2px; font-size: 12.5px; }
.oxcb { display: flex; flex-direction: column; gap: 2px; margin-top: 2px; }
.oxcb__best { font-weight: 700; color: var(--green); }
.oxcb__alt { font-size: 12px; color: var(--ink-3); }

/* home "Oferta do dia": the card fills its whole panel (it sat in a
   content-width column, half the panel wide), photo and CTA included */
.deal-day > #dealOfDay { flex: 1; align-self: stretch; width: 100%; display: flex; flex-direction: column; }
.deal-day > #dealOfDay > .feature-card { flex: 1; width: 100%; }
.deal-day .feature-card__media { width: 100%; }
.deal-day .feature-card__cta { width: 100%; }

/* cashback.html cards: one size for all — logo, name and rate on a header
   row, the full description under it at the card's width (never clamped);
   every row takes the tallest card's height, so every card matches */
.cbrates__list.cbrates__list--page { grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); grid-auto-rows: 1fr; gap: 16px; }
.cbrates__list--page .cbrate__link {
  flex-wrap: wrap; align-items: center; align-content: flex-start;
  gap: 12px 14px; min-height: 0; padding: 18px;
}
.cbrates__list--page .cbrate__body { display: contents; }
.cbrates__list--page .cbrate__mark { width: 64px; height: 64px; }
.cbrates__list--page .cbrate__store { flex: 1 1 0; min-width: 0; font-size: 16.5px; }
.cbrates__list--page .cbrate__value { order: 1; }
.cbrates__list--page .cbrate__desc {
  order: 2; flex: 1 1 100%;
  display: block; -webkit-line-clamp: unset; overflow: visible;
  font-size: 13.5px; line-height: 1.5;
}
.cbrates__list--page .cbrate__cmp { order: 3; flex: 1 1 100%; }

/* "Ir à loja" on product cards (storelinks.js): straight to the store */
.store-go {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 5px;
  margin-top: 8px; padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px;
  background: var(--white, #fff); color: var(--ink); font: 700 12.5px/1.2 var(--font-ui); cursor: pointer;
  transition: border-color var(--t-fast, .15s), color var(--t-fast, .15s), background var(--t-fast, .15s);
}
@media (hover: hover), (min-width: 640px) { .store-go:hover { border-color: var(--red); color: var(--red-ink); } }
.store-go:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
.store-go--wide {
  align-self: stretch; justify-content: center; min-height: 40px; margin-top: 8px;
  border-radius: var(--r-sm); font-size: 13.5px;
}

/* ---------- sign-in popup (js/login-dialog.js) ---------- */
html.ldlg-open { overflow: hidden; }
.ldlg {
  width: min(420px, calc(100vw - 24px));
  max-height: calc(100vh - 24px);
  padding: 0;
  border: 0;
  border-radius: var(--r-lg, 20px);
  background: var(--white, #fff);
  color: var(--ink, #1a1a1a);
  overflow: hidden auto;
  box-shadow: 0 30px 80px -10px rgba(0, 0, 0, 0.45);
}
.ldlg[open] { animation: ldlg-in 260ms ease-out both; }
.ldlg::backdrop {
  background: rgba(20, 14, 10, 0.45);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.ldlg[open]::backdrop { animation: ldlg-fade 220ms ease-out both; }
@keyframes ldlg-in { from { opacity: 0; transform: translateY(18px) scale(0.97); } to { opacity: 1; transform: none; } }
@keyframes ldlg-fade { from { opacity: 0; } to { opacity: 1; } }
.ldlg__card { box-shadow: none; border: 0; margin: 0; max-width: none; }
.ldlg__title { margin: 0 0 4px; font-family: var(--font-display); font-weight: 800; font-size: 26px; }
.ldlg__close {
  position: absolute; top: 10px; right: 10px; z-index: 2;
  width: 34px; height: 34px; border-radius: 50%;
  border: 0; cursor: pointer; font-size: 22px; line-height: 1;
  background: var(--line, #eee); color: inherit;
}
@media (hover: hover), (min-width: 640px) { .ldlg__close:hover { filter: brightness(0.94); } }

/* "Sua área" plan panel */
.plan-panel { margin: 0 0 20px; padding: 14px 16px; border: 1px solid var(--line, #e5e2dc); border-radius: 12px; display: grid; gap: 6px; }
.plan-panel--premium { border-color: #e0b800; background: rgba(255, 212, 59, 0.12); }
.plan-panel__name { font-size: 15px; }
.plan-panel__text, .plan-panel__links { margin: 0; font-size: 14px; line-height: 1.4; }
.plan-panel__cta { justify-self: start; font-weight: 600; font-size: 14px; }
.plan-panel__links a { font-weight: 600; }
@media (prefers-reduced-motion: reduce) { .ldlg[open], .ldlg[open]::backdrop { animation: none; } }

/* ---------- Avisos e lembretes ---------- */
.nsec { margin-top: 22px; padding: 18px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--white); }
.nsec:first-of-type { margin-top: 0; }
.nsec__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.nsec__head h2 { margin: 0; font-family: var(--font-display); font-weight: 800; font-size: 18px; }
.nlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.nitem { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 12px; border: 1px solid var(--gray-100); border-radius: var(--r-md, 12px); background: var(--white); }
.nitem--new { border-color: var(--green); box-shadow: inset 4px 0 0 var(--green); }
.nitem__ico { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; background: var(--gray-50); color: var(--ink-2); }
.nitem__body { min-width: 0; display: grid; gap: 2px; }
.nitem__title { font-weight: 800; font-size: 14.5px; color: var(--ink); overflow-wrap: anywhere; }
a.nitem__title:hover { text-decoration: underline; }
.nitem__text { margin: 0; font-size: 13px; color: var(--ink-2); overflow-wrap: anywhere; }
.nitem__when { margin: 0; font-size: 12px; color: var(--ink-3); }
.nitem__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--green); }
.nform { display: grid; gap: 8px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--gray-100); }
.nform input { min-width: 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--white); color: var(--ink); font: inherit; }
@media (min-width: 720px) { .nform { grid-template-columns: minmax(0, 1fr) 220px auto; align-items: center; } }

/* reminder popup shortcuts (js/remind-dialog.js) */
.rdlg__presets { display: flex; flex-wrap: wrap; gap: 6px; margin: -4px 0 14px; }
.rdlg__presets .btn { border: 1px solid var(--line); }

/* ---------- header bell (js/bell.js) ---------- */
.bell { position: relative; display: inline-flex; }
.bell__badge {
  position: absolute; top: 3px; right: 2px;
  min-width: 16px; height: 16px; padding: 0 4px;
  display: grid; place-items: center;
  border-radius: var(--r-pill);
  background: #fff; color: var(--red-dark);
  font-size: 10.5px; font-weight: 900;
  box-shadow: 0 0 0 2px var(--red);
  pointer-events: none;
}
.bell__panel {
  position: absolute; right: -8px; top: calc(100% + 8px); z-index: 60;
  width: min(380px, calc(100vw - 24px)); max-height: min(72vh, 560px); overflow: hidden;
  display: flex; flex-direction: column;
  background: var(--white); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
}
.bell__body { flex: 1; min-height: 0; overflow-y: auto; padding: 14px; display: grid; gap: 14px; }
.bell__title { margin: 0 0 8px; font-family: var(--font-display); font-weight: 800; font-size: 15px; }
.bell__empty { margin: 0; font-size: 13px; color: var(--ink-3); }
.bell__panel > .bell__empty { padding: 14px; }
.bell__foot { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border-top: 1px solid var(--gray-100); background: var(--white); }
.bell__all { font-weight: 700; font-size: 13.5px; }
@media (max-width: 640px) {
  .bell__panel { position: fixed; left: 12px; right: 12px; top: 68px; width: auto; }
}

/* === 4d-account start === */
@media (max-width: 639.98px) {
  /* -- login popup: one big primary Google button -- */
  .ldlg { width: calc(100vw - 24px); }
  .ldlg__close { width: 44px; height: 44px; top: 8px; right: 8px; font-size: 26px; }
  .ldlg__title { padding-right: 48px; }
  .auth__google.btn {
    min-height: 52px; font-size: 16px; font-weight: 800;
    background: var(--red); color: #fff; border: 0; box-shadow: 0 4px 0 var(--red-dark);
  }
  .auth__google.btn:active { transform: translateY(4px); box-shadow: 0 0 0 var(--red-dark); }
  .auth__google svg { box-sizing: content-box; width: 20px; height: 20px; padding: 5px; border-radius: 50%; background: #fff; flex: none; }
  .auth__msg { padding: 12px 14px; font-size: 14.5px; line-height: 1.4; border: 1px solid var(--red-soft); }
  .auth__tab { min-height: 44px; }
  .auth__field input { min-height: 48px; font-size: 16px; }
  .auth__submit.btn { min-height: 52px; }

  /* -- /conta: stacked panels, no horizontal overflow -- */
  .account { grid-template-columns: minmax(0, 1fr); gap: 12px; margin-bottom: calc(24px + var(--tabbar-space, 0px)); }
  .account__me { padding: 14px 16px; }
  .account__nav {
    display: grid; grid-template-columns: 1fr 1fr; gap: 4px; overflow: visible;
    margin: 0; padding: 6px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--white);
  }
  .account__link { min-height: 48px; padding: 0 12px; border: 0; border-radius: 12px; min-width: 0; }
  .account__link span:not(.account__count) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .account__head {
    margin-bottom: 12px; padding: 16px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--white);
  }
  .account__head h1 { font-size: 24px; }
  .account__h2 { margin: 20px 0 10px; }
  .account__quiet { padding: 16px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--white); margin-top: 12px; }
  .account__toolbar { flex-wrap: wrap; }
  .account__sort, .account__toolbar .btn, .account .btn--sm { min-height: 44px; }
  .account__hint { background: var(--white); }
  .plan-panel { background: var(--white); margin: 0 0 12px; padding: 16px; }
  .plan-panel--premium { background: #fff8dc; }
  .plan-panel__cta, .plan-panel__links a { display: inline-flex; align-items: center; min-height: 44px; }
  .stat-tiles { grid-template-columns: 1fr 1fr; }
  .stat-tile { padding: 14px; min-width: 0; }
  .uitem__icon { width: 44px; height: 44px; }
  .uitem__edit input { min-height: 44px; font-size: 16px; }
  .panel { padding: 16px; }
  .panel .auth__field { max-width: none; }
  .account .auth__field input, .account .panel input, .account .panel select, .account .panel textarea { min-height: 48px; font-size: 16px; }
  .account .panel .btn { min-height: 48px; }
}
/* === 4d-account end === */