/* ============================================
   Sbirú - Design System
   ============================================ */
:root {
  --font-main: 'Poppins', 'Segoe UI', Roboto, Arial, sans-serif;
  --color-bg: #f6f4ef;
  --color-surface: #ffffff;
  --color-surface-alt: #fbf9f5;
  --color-primary: #f2a900;
  --color-primary-dark: #c98700;
  --color-primary-darker: #8a5c00;
  --color-primary-light: #fff3d9;
  --color-text: #20261f;
  --color-text-muted: #667066;
  --color-border: #e7e2d8;
  --color-green: #1f8a52;
  --color-yellow: #c9a300;
  --color-orange: #d97706;
  --color-red: #c0392b;
  --radius-xl: 24px;
  --radius-lg: 18px;
  --radius-md: 14px;
  --radius-sm: 10px;
  --shadow-sm: 0 1px 2px rgba(20,20,10,0.05), 0 1px 3px rgba(20,20,10,0.04);
  --shadow-md: 0 8px 24px rgba(20,20,10,0.08);
  --shadow-lg: 0 16px 40px rgba(20,20,10,0.12);
  --transition-fast: 0.15s ease;
  --transition-med: 0.25s ease;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-main);
  background: var(--color-bg);
  color: var(--color-text);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-family: var(--font-main); color: var(--color-text); }

/* ---------- Topbar & Navigation ---------- */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: linear-gradient(135deg, #ffc23d 0%, #f2a900 55%, #e08e00 100%);
  color: #2b2200;
  padding: 18px 22px;
  box-shadow: 0 4px 18px rgba(178,128,0,0.25);
  position: sticky;
  top: 0;
  z-index: 50;
}
.logo {
  font-size: 23px;
  font-weight: 700;
  letter-spacing: 0.3px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.topnav { display: flex; gap: 6px; background: rgba(0,0,0,0.08); padding: 4px; border-radius: 999px; }
.navBtn {
  background: transparent;
  border: none;
  color: #4a3900;
  padding: 9px 16px;
  border-radius: 999px;
  cursor: pointer;
  font-family: var(--font-main);
  font-size: 13.5px;
  font-weight: 600;
  min-height: 38px;
  transition: background var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast);
}
.navBtn:hover { background: rgba(255,255,255,0.35); }
.navBtn.active { background: #ffffff; color: #a06600; box-shadow: var(--shadow-sm); }
.langSwitcher {
  background: rgba(0,0,0,0.12);
  border: none;
  color: #2b2200;
  padding: 8px 12px;
  border-radius: 999px;
  cursor: pointer;
  font-family: var(--font-main);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.5px;
  min-height: 38px;
  margin-left: 8px;
  transition: background var(--transition-fast);
}
.langSwitcher:hover { background: rgba(0,0,0,0.22); }
select.langSwitcher {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-right: 28px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27%232b2200%27><path d=%27M7 10l5 5 5-5z%27/></svg>");
  background-repeat: no-repeat;
  background-position: right 8px center;
  background-size: 16px;
}

/* ---------- Layout ---------- */
#app { max-width: 540px; margin: 0 auto; padding: 24px 18px 70px; }
.view { display: none; }
.view.active { display: block; animation: fadeIn 0.25s ease; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

/* Ingresso animato per la schermata di registrazione: arriva da sinistra e si ingrandisce leggermente */
@keyframes registerEnter {
  0% { opacity: 0; transform: translateX(-60px) scale(0.9); }
  60% { opacity: 1; transform: translateX(6px) scale(1.02); }
  100% { opacity: 1; transform: translateX(0) scale(1); }
}
#view-register.active { animation: registerEnter 0.55s cubic-bezier(.22,1,.36,1) both; }

/* ---------- Cards ---------- */
.scanCard, .manualCard, .photoCard {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 22px;
  margin-bottom: 18px;
  box-shadow: var(--shadow-sm);
  text-align: center;
  transition: box-shadow var(--transition-med);
}
.scanCard:hover, .manualCard:hover { box-shadow: var(--shadow-md); }
.manualCard { text-align: left; }
.manualCard > h3 { text-align: center; margin-top: 0; }

.reader { width: 100%; border-radius: var(--radius-md); overflow: hidden; }
.readerPlaceholder { color: var(--color-text-muted); font-size: 14px; padding: 34px 12px; line-height: 1.5; }
.hidden { display: none !important; }

/* ---------- Buttons ---------- */
.btnPrimary {
  background: linear-gradient(135deg, #ffc23d, #f2a900);
  color: #2b2200;
  border: none;
  padding: 13px 20px;
  border-radius: var(--radius-sm);
  font-family: var(--font-main);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  width: 100%;
  margin-top: 6px;
  box-shadow: 0 4px 14px rgba(242,169,0,0.35);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), filter var(--transition-fast);
}
.btnPrimary:hover { filter: brightness(1.04); box-shadow: 0 6px 18px rgba(242,169,0,0.45); transform: translateY(-1px); }
.btnPrimary:active { transform: translateY(0); }

.btnSecondary {
  background: var(--color-primary-light);
  color: var(--color-primary-darker);
  border: 1px solid #f2d999;
  padding: 12px 18px;
  border-radius: var(--radius-sm);
  font-family: var(--font-main);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  width: 100%;
  margin-top: 10px;
  transition: background var(--transition-fast), transform var(--transition-fast);
}
.btnSecondary:hover { background: #ffe9b8; transform: translateY(-1px); }

/* ---------- Forms ---------- */
.manualCard label { display: block; font-size: 13.5px; font-weight: 600; color: var(--color-text-muted); margin-bottom: 8px; text-align: left; }
.inlineForm { display: flex; gap: 10px; flex-wrap: wrap; }
.inlineForm input {
  flex: 1;
  min-width: 120px;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  font-size: 14.5px;
  font-family: var(--font-main);
  background: #fdfcfa;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.inlineForm input:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(242,169,0,0.15); }
.inlineForm .btnPrimary { width: auto; margin-top: 0; padding: 0 20px; white-space: nowrap; flex-shrink: 0; }

.nameResults { margin-top: 14px; text-align: left; }
.nameResultItem {
  display: flex; align-items: center; gap: 12px;
  padding: 10px; border-radius: var(--radius-sm); cursor: pointer;
  transition: background var(--transition-fast);
}
.nameResultItem:hover { background: var(--color-surface-alt); }
.nameResultItem img { width: 42px; height: 42px; object-fit: contain; border-radius: 8px; background: #f4f7f5; border: 1px solid var(--color-border); }

/* ---------- Loading / Error ---------- */
.view-loading, .view-error { text-align: center; padding-top: 50px; }
.spinner {
  width: 46px; height: 46px; border-radius: 50%;
  border: 4px solid var(--color-border); border-top-color: var(--color-primary);
  margin: auto; animation: spin 0.9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.errorMessage { color: var(--color-red); font-size: 15px; margin-bottom: 20px; line-height: 1.5; }
.onlineVerifiedHint { color: var(--color-green); font-size: 13.5px; margin-bottom: 20px; line-height: 1.5; background: rgba(31, 138, 82, 0.08); border-radius: 8px; padding: 8px 12px; }
.fieldHint { color: var(--color-text-muted); font-size: 13px; margin: -10px 0 16px; line-height: 1.4; }

/* ---------- Result header ---------- */
.resultHeader { display: flex; gap: 14px; align-items: center; margin-bottom: 20px; }
.resultHeaderInfo { flex: 1; min-width: 0; }
.resultImage { width: 76px; height: 76px; object-fit: contain; border-radius: var(--radius-md); background: #fff; border: 1px solid var(--color-border); box-shadow: var(--shadow-sm); }
.resultHeader h2 { margin: 0 0 2px; font-size: 19px; font-weight: 700; }
.resultBrand { margin: 0; color: var(--color-text-muted); font-size: 13.5px; }
.sourceBadge { margin-top: 6px; display: inline-block; padding: 4px 11px; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: 0.3px; text-transform: uppercase; background: var(--color-primary-light); color: var(--color-primary-darker); }

/* ---------- Score badge ---------- */
.scoreBadgeWrap { display: flex; flex-direction: column; align-items: center; margin-bottom: 22px; }
.scoreBadgeRow { display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 12px; }
.scoreMascot { width: 104px; height: 104px; object-fit: contain; }
@media (max-width: 400px) { .scoreMascot { width: 84px; height: 84px; } }
.scoreBadge {
  width: 116px; height: 116px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 34px; font-weight: 800; color: #fff;
  box-shadow: 0 10px 28px rgba(0,0,0,0.18);
  border: 5px solid rgba(255,255,255,0.55);
  position: relative;
}
.scoreBadge.green  { background: linear-gradient(135deg, #2fa968, var(--color-green)); }
.scoreBadge.yellow { background: linear-gradient(135deg, #e0bd2f, var(--color-yellow)); }
.scoreBadge.orange { background: linear-gradient(135deg, #ea9540, var(--color-orange)); }
.scoreBadge.red    { background: linear-gradient(135deg, #d1594a, var(--color-red)); }
.scoreBadge.gray   { background: linear-gradient(135deg, #9ca3af, #6b7280); }
.scoreLabel { margin-top: 12px; font-size: 17px; font-weight: 700; letter-spacing: 0.2px; }

/* ---------- Breakdown ---------- */
.breakdown { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 20px; margin-bottom: 18px; box-shadow: var(--shadow-sm); }
.breakdownRow { margin-bottom: 16px; font-size: 13.5px; color: #33423a; }
.breakdownRow:last-child { margin-bottom: 0; }
.breakdownRow span { display: block; margin-bottom: 6px; font-weight: 600; }
.barTrack { background: #edf1ec; border-radius: 999px; height: 9px; overflow: hidden; }
.barFill { height: 100%; background: linear-gradient(90deg, #ffc23d, var(--color-primary)); border-radius: 999px; transition: width 0.5s ease; }

/* ---------- Additives ---------- */
.additivesList { margin-bottom: 6px; }
.additiveChip {
  display: flex; justify-content: space-between; align-items: center;
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md);
  padding: 12px 14px; margin-bottom: 10px; font-size: 13.5px; border-left: 4px solid #ccc;
}
.additiveChip.none { border-left-color: var(--color-green); }
.additiveChip.limited { border-left-color: var(--color-yellow); }
.additiveChip.moderate { border-left-color: var(--color-orange); }
.additiveChip.high { border-left-color: var(--color-red); }
.additiveChip .riskTag { font-size: 11px; font-weight: 700; color: var(--color-text-muted); text-transform: uppercase; }

/* ---------- Reasons ---------- */
.reasonsSection { margin-top: 22px; }
.reasonsSection h3 { font-size: 16.5px; margin-bottom: 12px; }
.reasonItem {
  background: var(--color-surface-alt); border-radius: var(--radius-md); padding: 13px 15px;
  margin-bottom: 10px; border-left: 4px solid #999;
}
.reasonItem p { margin: 0; font-size: 13.5px; line-height: 1.5; color: #444; }
.reasonItem strong { font-size: 13.5px; }
.reasonItem .riskTag { font-size: 11px; font-weight: 700; color: var(--color-text-muted); margin-left: 6px; }
.reasonItem.reason-nutrition { border-left-color: #2f8f4e; }
.reasonItem.reason-processing { border-left-color: var(--color-orange); }
.reasonItem.reason-additive { border-left-color: var(--color-red); }
.reasonItem.reason-recall { border-left-color: var(--color-red); background: #fff2f2; font-weight: 600; }

/* ---------- Alternatives (list) & History ---------- */
.alternativesSection h3 { font-size: 16.5px; margin-bottom: 12px; }
.alternativesList { display: flex; flex-direction: column; gap: 12px; margin-bottom: 6px; }

.alternativeItem {
  display: flex; align-items: center; gap: 12px; background: var(--color-surface);
  border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 12px; cursor: pointer;
  transition: box-shadow var(--transition-fast), transform var(--transition-fast);
}
.alternativeItem:hover { box-shadow: var(--shadow-sm); transform: translateY(-1px); }
.alternativeItem img { width: 46px; height: 46px; object-fit: contain; border-radius: 8px; background: #f4f7f5; }
.alternativeItem .altGrade { margin-left: auto; font-weight: 700; font-size: 15px; color: var(--color-primary-darker); text-transform: uppercase; }

.historyList { display: flex; flex-direction: column; gap: 12px; }
.historyItem {
  display: flex; align-items: center; gap: 12px; background: var(--color-surface);
  border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 12px; cursor: pointer;
  box-shadow: var(--shadow-sm); transition: box-shadow var(--transition-fast), transform var(--transition-fast);
}
.historyItem:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.historyItem img { width: 46px; height: 46px; object-fit: contain; border-radius: 8px; background: #f4f7f5; }
.historyItem .historyScore {
  margin-left: auto; width: 40px; height: 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: 14px;
}
.historyEmpty { color: var(--color-text-muted); text-align: center; margin-top: 40px; font-size: 14px; }

/* ---------- Alternative card (best pick) ---------- */
.alternativeCard {
  border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 16px; margin-bottom: 14px;
  background: var(--color-surface); box-shadow: var(--shadow-sm);
}
.altLabel { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; color: #6b7280; margin-bottom: 10px; }
.altTop { display: flex; align-items: center; gap: 12px; }
.altTop img { width: 54px; height: 54px; object-fit: contain; border-radius: var(--radius-sm); background: #f5f5f5; }
.altInfo { flex: 1; display: flex; flex-direction: column; }
.altName { font-weight: 600; font-size: 14.5px; }
.altBrand { font-size: 12.5px; color: #888; }
.altPrice { font-size: 14px; font-weight: 700; color: var(--color-primary-darker); }
.altScore { font-size: 22px; font-weight: 800; }
.altActions { display: flex; gap: 10px; margin-top: 14px; }
.altViewBtn, .altAmazonBtn {
  flex: 1; text-align: center; padding: 11px; border-radius: var(--radius-sm); font-size: 13.5px; font-weight: 600;
  cursor: pointer; text-decoration: none; border: none; min-height: 42px; display: flex; align-items: center; justify-content: center;
  transition: filter var(--transition-fast), transform var(--transition-fast);
}
.altViewBtn:hover, .altAmazonBtn:hover { transform: translateY(-1px); }
.altViewBtn { background: #f0f0f0; color: #333; }
.altAmazonBtn { background: #ff9900; color: #111; }

/* ---------- Modal ---------- */
.modalOverlay {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(20,20,10,0.6);
  display: flex; align-items: center; justify-content: center; z-index: 1000; padding: 20px;
  overflow-y: auto; -webkit-overflow-scrolling: touch;
}
.modalCard { background: #fff; border-radius: var(--radius-xl); padding: 26px; max-width: 340px; width: 100%; text-align: center; position: relative; box-shadow: var(--shadow-lg); max-height: calc(100vh - 40px); overflow-y: auto; margin: auto; }
.modalClose { position: absolute; top: 12px; right: 14px; background: none; border: none; font-size: 22px; line-height: 1; cursor: pointer; color: #666; width: 32px; height: 32px; }
.modalImage { max-width: 100%; max-height: 160px; object-fit: contain; margin: auto; display: block; }

/* ---------- Ritaglio foto ingredienti (wizard prodotto sconosciuto) ---------- */
.cropModalCard { max-width: 480px; }
.cropStage {
  position: relative;
  width: 100%;
  max-height: 60vh;
  overflow: hidden;
  background: #111;
  border-radius: var(--radius-md);
  margin: 14px 0;
  touch-action: none;
  user-select: none;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cropStage img {
  display: block;
  max-width: 100%;
  max-height: 60vh;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
}
.cropBox {
  position: absolute;
  border: 2px solid #f7a600;
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.55);
  touch-action: none;
  cursor: move;
}
.cropHandle {
  position: absolute;
  width: 20px;
  height: 20px;
  background: #f7a600;
  border: 2px solid #fff;
  border-radius: 50%;
  touch-action: none;
}
.cropHandleTL { top: -11px; left: -11px; cursor: nwse-resize; }
.cropHandleTR { top: -11px; right: -11px; cursor: nesw-resize; }
.cropHandleBL { bottom: -11px; left: -11px; cursor: nesw-resize; }
.cropHandleBR { bottom: -11px; right: -11px; cursor: nwse-resize; }
.cropActions { display: flex; gap: 10px; justify-content: center; }
.cropActions .btnSecondary, .cropActions .btnPrimary { flex: 1; margin-top: 0; }

/* ---------- Image lightbox (ingrandimento miniature) ---------- */
.lightboxImage { max-width: 90vw; max-height: 85vh; object-fit: contain; margin: auto; display: block; border-radius: var(--radius-md); background: #fff; box-shadow: var(--shadow-lg); }
#imageLightbox { cursor: zoom-out; }
.resultImage, #altModalImage, .historyItem img, .nameResultItem img { cursor: zoom-in; }
.modalBuyBtn { display: block; margin-top: 16px; text-decoration: none; text-align: center; }

/* ---------- Add product view ---------- */
.addIntro { font-size: 13.5px; color: #5c4b00; margin-bottom: 14px; line-height: 1.5; }
.addStep { display: flex; flex-direction: column; }
.addStep.hidden { display: none; }
.photoCard label { display: block; font-size: 13.5px; font-weight: 600; color: #2b2200; margin-bottom: 8px; }
.photoCard input[type="file"] { width: 100%; font-size: 13.5px; }
.addHint { font-size: 12.5px; color: #5c4b00; margin: 8px 0 0; }
#view-add textarea { width: 100%; border: 1px solid #eadfb5; border-radius: var(--radius-sm); padding: 12px; font-size: 14px; font-family: inherit; resize: vertical; }
#view-add .btnSecondary { margin-top: 14px; }
#view-add .btnPrimary { margin-top: 14px; }

/* ---------- Pet profile: personalized score section ---------- */
.petProfileScore { background: #f4faf7; border: 1px solid #d9ece3; border-radius: var(--radius-lg); padding: 18px; margin: 4px 0 20px; }
.petProfileScoreHeader { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.petProfileScoreTitle { font-size: 14.5px; font-weight: 700; color: #33423a; }
.petProfileBadge.scoreBadge { width: 56px; height: 56px; font-size: 18px; border-width: 3px; }
.petProfileLabel { font-size: 14px; color: #5c6b62; margin: 12px 0; }
.petDisclaimer { font-size: 11px; color: var(--color-text-muted); margin: 6px 0 0; font-style: italic; line-height: 1.4; }
.generalDisclaimer { font-size: 11px; color: var(--color-text-muted); margin: 10px auto 0; font-style: italic; line-height: 1.4; text-align: center; max-width: 340px; }
.petProfileReasons { display: flex; flex-direction: column; gap: 8px; }
.petReasonItem { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; line-height: 1.45; padding: 10px 12px; border-radius: var(--radius-sm); background: #fff; box-shadow: var(--shadow-sm); }
.petReasonIcon { flex: none; width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; color: #fff; }
.petReason-positive .petReasonIcon { background: var(--color-green); }
.petReason-negative .petReasonIcon { background: var(--color-red); }
.petReason-neutral .petReasonIcon { background: #8a939a; }
.petReasonText { color: #33423a; }

/* ---------- Pet profile: form view ---------- */
.pathologyGrid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; margin: 12px 0 4px; }
.pathologyOption { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: #33423a; }
#view-profile select, #view-profile input[type="text"], #view-profile input[type="number"], #view-profile textarea {
  width: 100%; padding: 11px 13px; margin-bottom: 14px; border: 1px solid #d6ddd9; border-radius: var(--radius-sm);
  font-size: 14px; font-family: var(--font-main); box-sizing: border-box; background: #fdfcfa;
}
#view-profile select:focus, #view-profile input:focus, #view-profile textarea:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(242,169,0,0.15); }

/* ---------- Alternatives: personalized tag ---------- */
.altPersonalTag { font-size: 12.5px; font-weight: 600; margin-top: 8px; }

/* ---------- Mobile optimization ---------- */
html, body { overflow-x: hidden; width: 100%; }
#app { max-width: 100vw; overflow-x: hidden; }
svg, video, canvas { max-width: 100%; height: auto; }
#reader, #reader * { max-width: 100% !important; box-sizing: border-box; }

img { max-width: 100%; }
button, input { -webkit-tap-highlight-color: transparent; }
.topbar { padding-top: calc(14px + env(safe-area-inset-top)); flex-wrap: wrap; gap: 10px; }
#app { padding-bottom: calc(70px + env(safe-area-inset-bottom)); }

@media (max-width: 400px) {
  .logo { font-size: 19px; }
  .navBtn { padding: 8px 12px; font-size: 12.5px; }
  .scoreBadge { width: 96px; height: 96px; font-size: 28px; }
  .resultImage { width: 60px; height: 60px; }
  #app { padding-left: 14px; padding-right: 14px; }
  .altActions { flex-wrap: wrap; }
  .altViewBtn, .altAmazonBtn { flex-basis: 100%; }
}
@media (max-width: 340px) {
  .scoreBadge { width: 86px; height: 86px; font-size: 24px; }
}


/* ---------- Back navigation button ---------- */
.btnBack {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(0,0,0,0.05);
  border: none;
  color: var(--color-text);
  padding: 8px 16px;
  border-radius: 999px;
  font-family: var(--font-main);
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  margin-bottom: 14px;
  transition: background var(--transition-fast), transform var(--transition-fast);
}
.btnBack:hover { background: rgba(0,0,0,0.1); transform: translateX(-2px); }

.btnRow {
  display: flex;
  gap: 8px;
  margin-top: 8px;
  flex-wrap: wrap;
}
.errorMsg {
  color: #b3261e;
}
#accountBox input {
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 8px;
}

/* ---------- Account: top-right controls and login popover ---------- */
.topRightWrap {
display: flex;
align-items: center;
gap: 8px;
}
.btnCreateAccountTop {
background: rgba(255,255,255,0.85);
border: none;
color: #a06600;
padding: 8px 14px;
border-radius: 999px;
cursor: pointer;
font-family: var(--font-main);
font-size: 12.5px;
font-weight: 700;
min-height: 38px;
transition: background var(--transition-fast);
}
.btnCreateAccountTop:hover { background: #ffffff; }
.accountMenuWrap { }
.accountToggleBtn {
background: rgba(0,0,0,0.12);
border: none;
color: #2b2200;
padding: 8px 14px;
border-radius: 999px;
cursor: pointer;
font-family: var(--font-main);
font-size: 12.5px;
font-weight: 700;
min-height: 38px;
transition: background var(--transition-fast);
}
.accountToggleBtn:hover { background: rgba(0,0,0,0.22); }
.accountPopover {
position: absolute;
top: calc(100% + 10px);
right: 16px;
background: #fff;
border-radius: var(--radius-lg);
box-shadow: var(--shadow-lg);
border: 1px solid var(--color-border);
padding: 18px;
width: 260px; max-width: calc(100vw - 32px);
z-index: 200;
color: var(--color-text);
text-align: left;
}
.accountPopover input {
width: 100%;
box-sizing: border-box;
margin-bottom: 10px;
padding: 10px 12px;
border-radius: var(--radius-sm);
border: 1px solid var(--color-border);
font-size: 14px;
font-family: var(--font-main);
}
.popoverTitle { font-weight: 700; margin: 0 0 10px; font-size: 14.5px; }
.rememberRow { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--color-text-muted); margin-bottom: 10px; }
.rememberRow input { width: auto; margin-bottom: 0; }
.popoverRegisterLink { font-size: 12.5px; margin: 10px 0 0; text-align: center; color: var(--color-text-muted); }
.popoverRegisterLink a { color: var(--color-primary-darker); font-weight: 700; text-decoration: none; }
.popoverRegisterLink a:hover { text-decoration: underline; }

/* ---------- Register view / pet register prompt ---------- */
#view-register input {
width: 100%;
box-sizing: border-box;
margin-bottom: 14px;
padding: 11px 13px;
border-radius: var(--radius-sm);
border: 1px solid #d6ddd9;
font-size: 14px;
font-family: var(--font-main);
background: #fdfcfa;
}
#view-register input:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(242,169,0,0.15); }
#petRegisterPrompt { text-align: left; }

.nutrientAlertsSection { margin: 16px 0; }
.nutrientAlertCard { border-left: 4px solid var(--color-orange); background: #fff8ec; border-radius: 8px; padding: 12px 14px; margin-bottom: 10px; }
.nutrientAlertCard strong { display: block; font-size: 14.5px; color: #7a4a00; margin-bottom: 4px; }
.nutrientAlertCard p { margin: 0; font-size: 13.5px; line-height: 1.5; color: #444; }

/* ---------- Profile / Pet tabs (bottom nav) ---------- */
.profileTabPanel { display: none; }
.profileTabPanel.active { display: block; }

.profileBottomNav {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  gap: 8px;
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
  box-shadow: 0 -6px 18px rgba(20,20,10,0.08);
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  z-index: 80;
}
.profileBottomNavBtn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: transparent;
  border: none;
  padding: 10px 8px;
  border-radius: var(--radius-md);
  font-family: var(--font-main);
  font-size: 13.5px;
  font-weight: 700;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.profileBottomNavBtn.active {
  background: var(--color-primary-light);
  color: var(--color-primary-darker);
}

/* --- Gating profilo/pet dietro login (accesso libero alla scansione) --- */
.profileAuthGate {
max-width: 420px;
margin: 0 auto;
}
.profileAuthGate input[type="email"],
.profileAuthGate input[type="password"] {
width: 100%;
box-sizing: border-box;
margin-bottom: 10px;
padding: 10px 12px;
border-radius: var(--radius-sm);
border: 1px solid var(--color-border);
font-size: 14px;
font-family: var(--font-main);
}
.loggedInBar {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
font-size: 13px;
color: var(--color-text-muted);
margin-bottom: 16px;
padding-bottom: 12px;
border-bottom: 1px solid var(--color-border);
}
.loggedInBar strong {
color: var(--color-text);
}
.btnLinkLike {
background: transparent;
border: none;
color: var(--color-primary-darker);
font-weight: 700;
font-size: 13px;
cursor: pointer;
padding: 0;
margin-left: auto;
text-decoration: none;
}
.btnLinkLike:hover {
text-decoration: underline;
}

/* Pulsante "Compra su Amazon" sul prodotto principale scansionato */
.mainAmazonWrap {
  margin: 14px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.amazonDisclosure {
  font-size: 11px;
  color: var(--color-text-muted);
  text-align: center;
  max-width: 340px;
  line-height: 1.4;
}
.btnAmazonMain {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: #ff9900;
  color: #111;
  font-weight: 700;
  font-size: 15px;
  padding: 12px 24px;
  border-radius: var(--radius-sm);
  text-decoration: none;
  min-height: 46px;
  transition: filter var(--transition-fast), transform var(--transition-fast);
}
#btnNewScan {
  background: #ff9900;
  color: #111;
}
.btnAmazonMain:hover {
  transform: translateY(-1px);
  filter: brightness(0.96);
}

/* ---------- Mobile header/nav fix (buttons overflowing off-screen on phones) ---------- */
@media (max-width: 600px) {
  .topbar { row-gap: 8px; }
  .logo { order: 1; }
  .topRightWrap { order: 2; margin-left: auto; }
  .topnav {
    order: 3;
    flex: 1 1 100%;
    width: 100%;
    max-width: 100%;
    justify-content: flex-start;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .topnav::-webkit-scrollbar { display: none; }
  .navBtn { flex: 0 0 auto; white-space: nowrap; }
}

@media (max-width: 360px) {
  .navBtn { padding: 7px 10px; font-size: 12px; }
}

/* ---------- Sbiru+ paywall ---------- */
.sbiruPlusPaywall {
margin-top: 16px;
padding: 24px 20px;
background: var(--color-primary-light);
border: 1px solid var(--color-primary);
border-radius: var(--radius-lg);
text-align: center;
}
.sbiruPlusBadge {
display: inline-block;
padding: 4px 12px;
border-radius: 999px;
background: var(--color-primary);
color: #2b2200;
font-weight: 700;
font-size: 13px;
letter-spacing: 0.3px;
margin-bottom: 10px;
}
.sbiruPlusPaywallText {
color: var(--color-text);
font-size: 14px;
line-height: 1.5;
margin: 0 0 14px;
}
.sbiruPlusPricing {
display: flex;
justify-content: center;
gap: 12px;
margin-bottom: 16px;
flex-wrap: wrap;
}
.sbiruPlusPriceBox {
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
padding: 10px 18px;
min-width: 88px;
}
.sbiruPlusPriceBox strong {
display: block;
font-size: 20px;
color: var(--color-primary-darker);
}
.sbiruPlusPriceBox span {
display: block;
font-size: 12px;
color: var(--color-text-muted);
}
.sbiruPlusSubscribeBtn {
width: 100%;
max-width: 280px;
}
.sbiruPlusPaywallFooter {
margin: 12px 0 0;
font-size: 12px;
color: var(--color-text-muted);
}
.sbiruPlusTrialBanner {
margin-bottom: 14px;
padding: 10px 14px;
border-radius: var(--radius-md);
background: var(--color-primary-light);
color: var(--color-primary-darker);
font-size: 13px;
font-weight: 600;
text-align: center;
}

.pendingApprovalBanner {
  margin-bottom: 14px;
  padding: 12px 14px;
  border-radius: var(--radius-md);
  background: #fff7e0;
  border: 1px solid #f0c14b;
  color: #8a6100;
}
.pendingApprovalBanner strong {
  display: block;
  font-size: 14px;
  margin-bottom: 4px;
}
.pendingApprovalBanner p {
  margin: 0;
  font-size: 13px;
  line-height: 1.4;
}
.missingIngredientsBanner {
  margin-bottom: 14px;
  padding: 12px 14px;
  border-radius: var(--radius-md);
  background: #eaf4ff;
  border: 1px solid #a9d3ff;
  color: #0b4a8f;
}
.missingIngredientsBanner p {
  margin: 0 0 10px;
  font-size: 13px;
  line-height: 1.4;
}
.scoreIngredientsDisclaimer {
  font-size: 12px;
  font-weight: 600;
  color: #8a6100;
  margin: 6px auto 0;
  line-height: 1.4;
  text-align: center;
  max-width: 340px;
}
.sbiruPlusPaywallNoticeActive {
color: var(--color-primary-darker);
font-weight: 600;
}
.sbiruPlusBonusHint {
color: var(--color-primary-darker);
font-weight: 600;
}

/* ---------- Sbiru+ Welcome (bolla post-registrazione) ---------- */
.plusWelcomeOverlay {
  position: fixed;
  inset: 0;
  z-index: 2100;
  background: linear-gradient(160deg, #fff8ec 0%, #fef3dc 45%, #fde9c2 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.plusWelcomeOverlay.hidden { display: none; }
.plusWelcomeCard {
  width: 100%;
  max-width: 420px;
  background: var(--color-surface);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  padding: 32px 26px 30px;
  text-align: center;
  max-height: calc(100vh - 48px);
  overflow-y: auto;
}
.plusWelcomeEmoji { font-size: 44px; margin-bottom: 6px; }
.plusWelcomeTitle {
  margin: 6px 0 10px;
  font-size: 22px;
  color: var(--color-text);
}
.plusWelcomeSubtitle {
  color: var(--color-text-muted);
  font-size: 15px;
  line-height: 1.5;
  margin: 0 0 18px;
}
.plusWelcomeSubtitle strong { color: var(--color-primary-darker); }
.plusWelcomeBenefits {
  list-style: none;
  margin: 0 0 22px;
  padding: 0;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.plusWelcomeBenefits li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  color: var(--color-text);
  line-height: 1.4;
}
.plusWelcomeBenefitIcon { font-size: 18px; flex-shrink: 0; }
body.pwLock { overflow: hidden; }

/* ---------- Ingredient Alert Modal (bolla ingredienti/patologie da monitorare) ---------- */
.ingredientAlertOverlay {
  position: fixed;
  inset: 0;
  z-index: 2400;
  background: linear-gradient(160deg, #fff3f0 0%, #ffe6da 45%, #ffd3c2 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.ingredientAlertCard {
  width: 100%;
  max-width: 440px;
  background: var(--color-surface);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  padding: 32px 26px 28px;
  text-align: center;
  max-height: calc(100vh - 48px);
  overflow-y: auto;
}
.ingredientAlertEmoji { font-size: 44px; margin-bottom: 6px; }
.ingredientAlertTitle {
  margin: 6px 0 10px;
  font-size: 21px;
  font-weight: 700;
  color: var(--color-text);
}
.ingredientAlertSubtitle {
  color: var(--color-text-muted);
  font-size: 14px;
  line-height: 1.5;
  margin: 0 0 18px;
}
.ingredientAlertList {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0 0 20px;
  text-align: left;
}
.ingredientAlertItem {
  padding: 12px 14px;
  border-radius: var(--radius-md);
  border-left: 4px solid #e0a030;
  background: #fff7ec;
}
.ingredientAlertItem strong {
  display: block;
  font-size: 14px;
  color: var(--color-text);
  margin-bottom: 4px;
}
.ingredientAlertItem p {
  margin: 0;
  font-size: 13px;
  color: var(--color-text-muted);
  line-height: 1.4;
}
.ingredientAlertItem.iaSeverityHigh {
  border-left-color: #d94f3d;
  background: #fdefec;
}
.ingredientAlertDisclaimer {
  font-size: 11.5px;
  color: var(--color-text-muted);
  line-height: 1.5;
  margin: 0 0 20px;
  padding-top: 14px;
  border-top: 1px solid var(--color-border);
}
.ingredientAlertCloseBtn { width: 100%; }
body.iaLock { overflow: hidden; }

.manualCard.sbiruPlusLocked {
  position: relative;
  overflow: hidden;
  min-height: 96px;
}

.manualCard.sbiruPlusLocked > *:not(.sbiruPlusSearchLock) {
  opacity: 0.25;
  pointer-events: none;
  filter: blur(1px);
}

.sbiruPlusSearchLock {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
  padding: 16px;
  background: rgba(255, 255, 255, 0.9);
  border-radius: var(--radius-lg, 16px);
  z-index: 2;
}

.sbiruPlusSearchLock p {
  margin: 0;
  font-size: 13px;
  color: #555;
}

/* Contributi utente e classifica community */
.contributionsSummary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin: 10px 0;
}
.contributionsCount strong {
  font-size: 22px;
  color: var(--color-primary-darker);
  margin-right: 6px;
}
.contributionsCount span {
  font-size: 13px;
  color: var(--color-text-muted);
}
.contributionsBadge {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: var(--radius-lg);
  background: var(--color-primary-light);
  font-weight: 600;
  color: var(--color-primary-darker);
}
.contributionsBadgeEmoji {
  font-size: 18px;
}
.leaderboardList {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 12px 0;
  max-height: 320px;
  overflow-y: auto;
}
.leaderboardRow {
  display: grid;
  grid-template-columns: 32px 1fr 28px 40px;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: var(--radius-md);
  background: var(--color-surface-alt);
}
.leaderboardRowYou {
  background: var(--color-primary-light);
  font-weight: 600;
}
.leaderboardRank {
  font-size: 15px;
  text-align: center;
}
.leaderboardName {
  font-size: 14px;
  color: var(--color-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.leaderboardBadgeEmoji {
  font-size: 15px;
  text-align: center;
}
.leaderboardCount {
  font-size: 14px;
  font-weight: 700;
  color: var(--color-primary-darker);
  text-align: right;
}
.leaderboardYouRow {
  font-size: 13px;
  color: var(--color-text-muted);
  text-align: center;
}

/* Impostazioni account: zona pericolosa / eliminazione account */
.dangerZoneCard {
  border: 1px solid rgba(192,57,43,0.35);
  background: rgba(192,57,43,0.05);
}
.dangerZoneCard h3 {
  color: var(--color-red);
}
.dangerZoneCard p {
  color: var(--color-text-muted);
  font-size: 14px;
  line-height: 1.5;
  margin-bottom: 14px;
}
.btnDanger {
  background: linear-gradient(135deg, #e05d4c, var(--color-red));
  color: #ffffff;
  border: none;
  padding: 13px 20px;
  border-radius: var(--radius-sm);
  font-family: var(--font-main);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  width: 100%;
  margin-top: 6px;
  box-shadow: 0 4px 14px rgba(192,57,43,0.3);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), filter var(--transition-fast);
}
.btnDanger:hover { filter: brightness(1.05); box-shadow: 0 6px 18px rgba(192,57,43,0.4); transform: translateY(-1px); }
.btnDanger:active { transform: translateY(0); }

/* Menu account (rotella impostazioni accanto a "Esci") */
.accountMenuWrap {
  position: relative;
  display: inline-flex;
}
.iconButton {
  background: transparent;
  border: none;
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: var(--radius-sm);
  transition: background var(--transition-fast);
}
.iconButton:hover { background: rgba(0,0,0,0.06); }
.accountMenuDropdown {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 6px;
  background: #ffffff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  box-shadow: 0 8px 24px rgba(0,0,0,0.14);
  min-width: 190px;
  z-index: 30;
  overflow: hidden;
}
.accountMenuItem {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  padding: 12px 14px;
  font-family: var(--font-main);
  font-size: 14px;
  color: var(--color-red);
  cursor: pointer;
  transition: background var(--transition-fast);
}
.accountMenuItem:hover { background: rgba(192,57,43,0.08); }

/* Recap profilo / pet: intestazione con matita di modifica */
.cardHeaderRow,
.panelHeaderRow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.cardHeaderRow h3,
.panelHeaderRow h2 {
  margin: 0;
}
.editPencilBtn {
  font-size: 18px;
  flex-shrink: 0;
}
.profileRecapView .manualCard {
  margin: 0;
}
.recapRow {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--color-border);
  flex-wrap: wrap;
}
.recapRow:last-child {
  border-bottom: none;
}
.recapLabel {
  color: #6b6b6b;
  font-size: 14px;
  flex-shrink: 1;
  min-width: 0;
  word-break: break-word;
}
.recapValue {
  font-family: var(--font-main);
  font-weight: 600;
  text-align: right;
  word-break: break-word;
  flex: 1 1 auto;
  min-width: 0;
}

/* ---------- Profile Wizard (questionario iniziale) ---------- */
.profileWizardOverlay {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: linear-gradient(160deg, #fff8ec 0%, #fef3dc 45%, #fde9c2 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.profileWizardOverlay.hidden { display: none; }
body.pwLock { overflow: hidden; }

.profileWizardCard {
  width: 100%;
  max-width: 460px;
  background: var(--color-surface);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  padding: 28px 26px 30px;
  position: relative;
  max-height: calc(100vh - 48px);
  overflow-y: auto;
}

.profileWizardHeader {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 22px;
}

.profileWizardProgress {
  flex: 1;
  height: 8px;
  background: var(--color-surface-alt);
  border-radius: 999px;
  overflow: hidden;
  border: 1px solid var(--color-border);
}
.profileWizardProgressFill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #ffc23d, var(--color-primary));
  border-radius: 999px;
  transition: width 0.35s ease;
}

.profileWizardClose {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: var(--color-surface-alt);
  color: var(--color-text-muted);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  flex-shrink: 0;
  transition: background var(--transition-fast);
}
.profileWizardClose:hover { background: var(--color-border); }

.pwStepCount {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-primary-dark);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 8px;
}

.pwQuestion {
  font-size: 22px;
  line-height: 1.3;
  margin: 0 0 8px;
  color: var(--color-text);
}

.pwSubtext {
  font-size: 14px;
  color: var(--color-text-muted);
  margin: 0 0 20px;
  line-height: 1.5;
}

.pwOptions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 18px 0 6px;
}
.pwOptionsMulti {
  flex-direction: row;
  flex-wrap: wrap;
}

.pwOptionBtn {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  width: 100%;
  text-align: left;
  padding: 14px 16px;
  border-radius: var(--radius-md);
  border: 1.5px solid var(--color-border);
  background: var(--color-surface-alt);
  cursor: pointer;
  transition: border-color var(--transition-fast), background var(--transition-fast), transform var(--transition-fast);
  font-family: var(--font-main);
}
.pwOptionBtn:hover {
  border-color: var(--color-primary);
  background: #fff6e2;
  transform: translateY(-1px);
}
.pwOptionLabel {
  font-size: 16px;
  font-weight: 600;
  color: var(--color-text);
}
.pwOptionHint {
  font-size: 12.5px;
  color: var(--color-text-muted);
}

.pwOptionBtnMulti {
  width: auto;
  padding: 10px 16px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
}
.pwOptionBtnMulti.active {
  border-color: var(--color-primary);
  background: linear-gradient(135deg, #ffc23d, var(--color-primary));
  color: #3a2400;
}

.pwInputWrap {
  position: relative;
  margin: 18px 0 6px;
}
.pwInput {
  width: 100%;
  padding: 14px 16px;
  font-size: 17px;
  border-radius: var(--radius-md);
  border: 1.5px solid var(--color-border);
  background: var(--color-surface-alt);
  font-family: var(--font-main);
  color: var(--color-text);
}
.pwInput:focus {
  outline: none;
  border-color: var(--color-primary);
  background: #fff;
}
.pwInputSuffix {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-text-muted);
  font-size: 14px;
  font-weight: 600;
  pointer-events: none;
}

.pwPrimaryBtn {
  width: 100%;
  margin-top: 14px;
  padding: 14px;
  border: none;
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, #ffc23d 0%, #f2a900 55%, #e08e00 100%);
  color: #3a2400;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: filter var(--transition-fast), transform var(--transition-fast);
}
.pwPrimaryBtn:hover { filter: brightness(1.05); transform: translateY(-1px); }

.pwSkipBtn {
  display: block;
  margin: 14px auto 0;
  background: none;
  border: none;
  color: var(--color-text-muted);
  font-size: 13.5px;
  text-decoration: underline;
  cursor: pointer;
}

.pwBackBtn {
  background: none;
  border: none;
  color: var(--color-text-muted);
  font-size: 13.5px;
  cursor: pointer;
  padding: 0;
  margin-bottom: 14px;
  display: block;
}
.pwBackBtn:hover { color: var(--color-primary-dark); }

.pwError {
  margin-top: 10px;
  color: var(--color-red);
  font-size: 13px;
  font-weight: 600;
}

@media (max-width: 480px) {
  .profileWizardCard { padding: 24px 18px 26px; border-radius: var(--radius-lg); }
  .pwQuestion { font-size: 19px; }
}

.readonlyField { background: var(--color-surface-alt); color: var(--color-text-muted); cursor: not-allowed; }
.reviewLockedHint { font-size: 12.5px; color: var(--color-text-muted); margin: 6px 0 0; }


/* --- Animazioni wizard "aggiungi prodotto" e reazione bottoni (aggiunto) --- */
@keyframes wizardSlideFwd {
  from { opacity: 0; transform: translateX(28px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes wizardSlideBack {
  from { opacity: 0; transform: translateX(-28px); }
  to { opacity: 1; transform: translateX(0); }
}
.wizard-anim-fwd { animation: wizardSlideFwd 0.32s ease; }
.wizard-anim-back { animation: wizardSlideBack 0.32s ease; }
@keyframes btnPulse {
  0% { transform: scale(1); }
  35% { transform: scale(0.93); }
  65% { transform: scale(1.06); }
  100% { transform: scale(1); }
}
.btn-pulse { animation: btnPulse 0.35s ease; }

/* ===== Modern upload control (Phase 4 redesign) ===== */
.photoCard input[type="file"] {
  display: none;
}
.uploadDrop {
  display: flex;
  align-items: center;
  gap: 14px;
  border: 2px dashed var(--color-border);
  border-radius: var(--radius-lg);
  padding: 14px 16px;
  background: var(--color-surface-alt);
  cursor: pointer;
  transition: border-color var(--transition-fast), background var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
  position: relative;
  overflow: hidden;
}
.uploadDrop:hover {
  border-color: var(--color-primary);
  background: var(--color-primary-light);
  box-shadow: var(--shadow-sm);
}
.uploadDrop:active {
  transform: scale(0.99);
}
.uploadDrop input[type="file"] {
  display: block;
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
  width: 100%;
  height: 100%;
  margin: 0;
}
.uploadIconWrap {
  flex: none;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(242, 169, 0, 0.35);
  transition: transform var(--transition-fast), background var(--transition-fast), box-shadow var(--transition-fast);
  position: relative;
}
.uploadDrop:hover .uploadIconWrap {
  transform: scale(1.07);
}
.uploadPlusIcon {
  width: 22px;
  height: 22px;
}
.uploadPreviewImg {
  display: none;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  position: absolute;
  top: 0;
  left: 0;
}
.uploadTextWrap {
  flex: 1;
  min-width: 0;
}
.uploadHint {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--color-text);
  margin: 0 0 2px 0;
}
.uploadSubhint {
  font-size: 12px;
  color: var(--color-text-muted);
  margin: 0;
}
.uploadCheckBadge {
  position: absolute;
  bottom: -2px;
  right: -2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--color-green);
  border: 2px solid var(--color-surface-alt);
  display: none;
  align-items: center;
  justify-content: center;
}
.uploadCheckBadge svg {
  width: 10px;
  height: 10px;
}
.uploadDrop.hasImage {
  border-style: solid;
  border-color: var(--color-green);
  background: #f1faf5;
}
.uploadDrop.hasImage .uploadIconWrap {
  background: var(--color-green);
  box-shadow: 0 4px 12px rgba(31, 138, 82, 0.3);
}
.uploadDrop.hasImage .uploadPlusIcon {
  display: none;
}
.uploadDrop.hasImage .uploadPreviewImg {
  display: block;
}
.uploadDrop.hasImage .uploadCheckBadge {
  display: flex;
}
.uploadDrop.hasImage .uploadHint {
  color: var(--color-green);
}

/* ===== Broader modernization pass: consistent hover/press feedback ===== */
.btnPrimary,
.btnSecondary,
.btnAmazonMain,
.btnCreateAccountTop,
.navBtn,
.btnAdminSave,
.btnAdminApprove,
.btnAdminReject {
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), filter var(--transition-fast), background var(--transition-fast);
}
.btnPrimary:hover,
.btnAmazonMain:hover,
.btnAdminApprove:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
  filter: brightness(1.03);
}
.btnPrimary:active,
.btnAmazonMain:active,
.btnAdminApprove:active,
.btnSecondary:active,
.btnAdminSave:active,
.btnAdminReject:active {
  transform: translateY(0);
}
.btnSecondary:hover,
.btnAdminSave:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}
.btnAdminReject:hover {
  filter: brightness(1.05);
  box-shadow: 0 6px 18px rgba(192, 57, 43, 0.3);
  transform: translateY(-1px);
}
.scanCard,
.manualCard,
.photoCard {
  transition: box-shadow var(--transition-med);
}


/* --- Sezione "Il tuo piano per perdere peso" (profilo personale) --- */
.nutritionCard .addHint { margin-bottom: 14px; }
.nutritionResultsBox { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin-top: 18px; }
.nutritionResultsBox.hidden { display: none; }
#nutritionEmptyHint.hidden { display: none; }
.nutritionItem { background: linear-gradient(135deg, #fff8ec, #ffffff); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 14px 16px; transition: box-shadow var(--transition-med), transform var(--transition-med); }
.nutritionItem:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }
.nutritionItemHead { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.nutritionIcon { font-size: 18px; line-height: 1; }
.nutritionItemLabel { font-size: 12.5px; font-weight: 600; color: var(--color-text-muted); }
.nutritionItemValue { font-size: 22px; font-weight: 700; color: var(--color-primary); }
.nutritionItemExplain { font-size: 12px; color: var(--color-text-muted); margin: 8px 0 0; line-height: 1.45; }
.nutritionItem--calories { grid-column: 1 / -1; background: linear-gradient(135deg, #fff3d9, #ffffff); display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; }
.nutritionItem--calories .nutritionItemHead { margin-bottom: 0; }
.nutritionItem--calories .nutritionItemValue { font-size: 28px; }


.goalAlertsSection { margin: 16px 0; }
.goalAlertsTitle { display: block; font-size: 12.5px; font-weight: 700; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.03em; margin-bottom: 8px; }
.goalAlertCard { border-left: 4px solid var(--color-orange); background: #fff8ec; border-radius: 8px; padding: 12px 14px; margin-bottom: 10px; }
.goalAlertCard strong { display: block; font-size: 14.5px; color: #7a4a00; margin-bottom: 4px; }
.goalAlertCard p { margin: 0; font-size: 13.5px; line-height: 1.5; color: #444; }
.goalAlertCard.positive { border-left-color: var(--color-green); background: #f0f9f4; }
.goalAlertCard.positive strong { color: #1f6f43; }
.goalAlertCard.negative { border-left-color: var(--color-orange); background: #fff8ec; }
.goalAlertCard.negative strong { color: #7a4a00; }


/* ---------- Profilo unificato: dati personali + piano nutrizionale ---------- */
.profileUnifiedCard { padding-bottom: 22px; }
.profileUnifiedCard .addHint { margin-bottom: 16px; }
.profileDataGrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px 16px; margin-bottom: 18px; }
.profileField { display: flex; flex-direction: column; }
.profileField label { display: block; font-size: 12.5px; font-weight: 600; color: var(--color-text-muted); margin-bottom: 6px; text-align: left; }
.profileField input, .profileField select {
  width: 100%;
  font-family: var(--font-main);
  font-size: 14.5px;
  color: var(--color-text);
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.profileField input:focus, .profileField select:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(242,169,0,0.15);
}
.profileField--wide { grid-column: 1 / -1; }
@media (max-width: 420px) {
  .profileDataGrid { grid-template-columns: 1fr; }
}
.profileUnifiedCard #btnSaveFitProfile { width: 100%; margin-top: 4px; }
.profileUnifiedCard #fitProfileSavedMsg { text-align: center; margin-top: 10px; }
.profileDivider { height: 1px; background: var(--color-border); margin: 24px 0 18px; border: none; }
.nutritionPlanTitle { font-size: 15px; font-weight: 700; color: var(--color-text); margin: 0 0 4px; text-align: left; }

.btnShareIcon {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #ff9900;
  color: #fff;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  box-shadow: 0 3px 10px rgba(255, 153, 0, 0.45);
  transition: background var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
}
.btnShareIcon:hover { background: #e68a00; transform: translateY(-1px); box-shadow: 0 5px 14px rgba(255, 153, 0, 0.55); }
.btnShareIcon svg { display: block; }
.srOnly {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ================================================================
   Sbirù — Design Refresh 2026
   Estetica rivista dopo il confronto di 10 design expert (colore,
   micro-interazioni stile Yuka, tipografia, profondità/ombre, score
   badge, navigazione, form, loading/empty state, mobile touch,
   coesione generale). Interviene SOLO su regole visive: nessuna
   struttura HTML, classe, ID o funzionalità viene modificata.
   Tutte le regole qui sotto si aggiungono/sovrascrivono quelle
   esistenti più in alto nel file (stessi selettori, stessa
   specificità => l'ultima dichiarazione vince).
================================================================= */

:root {
  /* --- Standard condivisi (max 2 curve di easing in tutta l'app) --- */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast: 120ms;
  --dur-med: 220ms;
  --dur-slow: 400ms;

  /* --- Palette: arancio/oro reso più "premium", stessa famiglia calda --- */
  --gradient-primary: linear-gradient(135deg, #ffc933 0%, #f2a900 45%, #d98a00 100%);
  --gradient-primary-hover: linear-gradient(135deg, #ffd35c 0%, #f7b500 45%, #c98700 100%);
  --color-accent-amber-deep: #d68910;
  --shadow-primary-glow: 0 4px 14px rgba(242, 169, 0, 0.35);
  --shadow-primary-glow-strong: 0 6px 18px rgba(242, 169, 0, 0.45);

  /* --- Colori semantici punteggio salute: coppie gradiente ad alto contrasto --- */
  --gradient-green: linear-gradient(135deg, #34c97e 0%, #12915a 100%);
  --shadow-green-glow: 0 0 0 0 rgba(18, 145, 90, 0.45), 0 10px 28px rgba(0, 0, 0, 0.18);
  --gradient-yellow: linear-gradient(135deg, #f0c23d 0%, #c9a300 100%);
  --gradient-orange: linear-gradient(135deg, #f2984a 0%, #d97706 100%);
  --gradient-red: linear-gradient(135deg, #e15d4c 0%, #b02d20 100%);
  --gradient-gray: linear-gradient(135deg, #b4b8ae 0%, #8a8f86 100%);

  /* --- Ombre: stessa scala, ma calde invece di neutre/fredde --- */
  --shadow-sm: 0 1px 2px rgba(120, 80, 10, 0.06), 0 1px 3px rgba(120, 80, 10, 0.05);
  --shadow-md: 0 8px 22px rgba(120, 80, 10, 0.10);
  --shadow-lg: 0 16px 40px rgba(90, 60, 10, 0.15);
}

/* ---------- Base tipografica ---------- */
body {
  font-size: 15px;
  line-height: 1.55;
  letter-spacing: -0.005em;
  text-rendering: optimizeLegibility;
}
h1 { font-size: 25px; font-weight: 700; letter-spacing: -0.02em; }
h2 { font-size: 20px; font-weight: 700; letter-spacing: -0.015em; }
h3 { font-size: 16px; font-weight: 600; letter-spacing: -0.01em; }
.logo { letter-spacing: -0.02em; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.25); }
.resultHeader h2 { letter-spacing: -0.015em; }
.resultBrand { font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase; font-size: 12px; }
.scoreLabel { letter-spacing: -0.005em; }
.breakdownRow span, .nutritionItemValue, .altPrice, .contributionsCount strong,
.leaderboardCount, .historyItem .historyScore, .scoreBadge {
  font-variant-numeric: tabular-nums;
}
.manualCard label, .profileField label {
  letter-spacing: 0.03em;
  text-transform: uppercase;
  font-size: 12px;
}
.sourceBadge { letter-spacing: 0.04em; }

/* ---------- Topbar & navigazione (glass con fallback solido) ---------- */
.topbar {
  background: linear-gradient(135deg, #ffc23d 0%, #f2a900 55%, #e08e00 100%);
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .topbar {
    background: linear-gradient(135deg, rgba(255, 194, 61, 0.92) 0%, rgba(242, 169, 0, 0.92) 55%, rgba(224, 142, 0, 0.92) 100%);
    backdrop-filter: blur(14px) saturate(150%);
    -webkit-backdrop-filter: blur(14px) saturate(150%);
  }
}
.navBtn {
  position: relative;
  transition: background var(--dur-med) var(--ease-standard), color var(--dur-med) var(--ease-standard),
    box-shadow var(--dur-med) var(--ease-standard), transform var(--dur-fast) var(--ease-spring);
}
.navBtn:active { transform: scale(0.94); }
.navBtn.active { box-shadow: 0 2px 10px rgba(160, 102, 0, 0.22), var(--shadow-sm); }
.navBtn.active::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 4px;
  width: 14px;
  height: 3px;
  border-radius: 999px;
  background: var(--color-accent-amber-deep);
  transform: translateX(-50%) scaleX(1);
  animation: sbiruNavIndicator var(--dur-med) var(--ease-spring);
}
@keyframes sbiruNavIndicator {
  from { transform: translateX(-50%) scaleX(0); opacity: 0; }
  to { transform: translateX(-50%) scaleX(1); opacity: 1; }
}
.langSwitcher, .accountToggleBtn, .btnCreateAccountTop {
  transition: background var(--dur-med) var(--ease-standard), transform var(--dur-fast) var(--ease-spring);
}
.langSwitcher:active, .accountToggleBtn:active, .btnCreateAccountTop:active { transform: scale(0.94); }

.profileBottomNav {
  box-shadow: 0 -6px 20px rgba(90, 60, 10, 0.10);
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .profileBottomNav {
    background: rgba(255, 255, 255, 0.88);
    backdrop-filter: blur(16px) saturate(160%);
    -webkit-backdrop-filter: blur(16px) saturate(160%);
  }
}
.profileBottomNavBtn {
  transition: background var(--dur-med) var(--ease-standard), color var(--dur-med) var(--ease-standard),
    transform var(--dur-fast) var(--ease-spring);
}
.profileBottomNavBtn.active { transform: translateY(-2px); }
.profileBottomNavBtn:active { transform: scale(0.95); }

/* ---------- Pulsanti: feedback tattile unificato stile Yuka ---------- */
.btnPrimary, .btnSecondary, .btnDanger, .btnAmazonMain, .pwPrimaryBtn,
.cropActions .btnPrimary, .cropActions .btnSecondary, .modalClose, .editPencilBtn,
.iconButton, .pwOptionBtn, .pwOptionBtnMulti, .uploadDrop, .altViewBtn, .altAmazonBtn,
.btnAdminSave, .btnAdminApprove, .btnAdminReject, .btnBack {
  transition: transform var(--dur-fast) var(--ease-spring), box-shadow var(--dur-med) var(--ease-standard),
    filter var(--dur-med) var(--ease-standard), background var(--dur-med) var(--ease-standard),
    border-color var(--dur-med) var(--ease-standard);
}
.btnPrimary { background: var(--gradient-primary); box-shadow: var(--shadow-primary-glow); }
.btnPrimary:hover { background: var(--gradient-primary-hover); box-shadow: var(--shadow-primary-glow-strong); }
.btnPrimary:active, .btnAmazonMain:active, .pwPrimaryBtn:active, .cropActions .btnPrimary:active {
  transform: scale(0.96) translateY(0);
}
.btnSecondary:active, .btnDanger:active, .cropActions .btnSecondary:active,
.altViewBtn:active, .altAmazonBtn:active, .btnAdminSave:active, .btnAdminReject:active {
  transform: scale(0.96);
}
.modalClose:active, .editPencilBtn:active, .iconButton:active { transform: scale(0.88); }
.pwOptionBtn:active, .pwOptionBtnMulti:active { transform: scale(0.97); }
.pwOptionBtnMulti.active { background: linear-gradient(135deg, #ffc23d, var(--color-primary)); box-shadow: 0 3px 10px rgba(242, 169, 0, 0.28); }
.uploadDrop:active { transform: scale(0.98); }
.btnBack:active { transform: scale(0.95) translateX(-2px); }
.historyItem, .alternativeItem, .nameResultItem {
  transition: box-shadow var(--dur-med) var(--ease-standard), transform var(--dur-fast) var(--ease-spring);
}
.historyItem:active, .alternativeItem:active, .nameResultItem:active { transform: scale(0.98); }

/* ---------- Card & profondità (ombre calde, lift più marcato) ---------- */
.scanCard, .manualCard, .photoCard, .breakdown, .alternativeCard,
.modalCard, .profileWizardCard, .plusWelcomeCard, .ingredientAlertCard {
  transition: box-shadow var(--dur-slow) var(--ease-standard), transform var(--dur-med) var(--ease-standard);
}
.scanCard:hover, .manualCard:hover, .alternativeCard:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
.modalCard, .profileWizardCard, .plusWelcomeCard, .ingredientAlertCard { box-shadow: var(--shadow-lg); }

/* ---------- Score badge: protagonista della schermata risultato ---------- */
@keyframes sbiruBadgePopIn {
  0% { transform: scale(0.4); opacity: 0; }
  55% { transform: scale(1.1); opacity: 1; }
  75% { transform: scale(0.95); }
  100% { transform: scale(1); }
}
@keyframes sbiruBadgeGlowPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(18, 145, 90, 0.45), 0 10px 28px rgba(0, 0, 0, 0.18); }
  50% { box-shadow: 0 0 0 9px rgba(18, 145, 90, 0), 0 10px 28px rgba(0, 0, 0, 0.18); }
}
.view.active .scoreBadge {
  animation: sbiruBadgePopIn var(--dur-slow) var(--ease-spring) both;
  transform-origin: center;
}
.scoreBadge::before {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background: linear-gradient(155deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.1) 35%, rgba(255, 255, 255, 0) 55%, rgba(0, 0, 0, 0.08) 100%);
  pointer-events: none;
}
.scoreBadge.green { background: var(--gradient-green); }
.scoreBadge.yellow { background: var(--gradient-yellow); }
.scoreBadge.orange { background: var(--gradient-orange); }
.scoreBadge.red { background: var(--gradient-red); }
.scoreBadge.gray { background: var(--gradient-gray); }
.view.active .scoreBadge.green { animation: sbiruBadgePopIn var(--dur-slow) var(--ease-spring) both, sbiruBadgeGlowPulse 2.4s ease-in-out 0.4s infinite; }

.barFill { background-size: 200% 100%; position: relative; overflow: hidden; }
.barFill::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 25%, rgba(255, 255, 255, 0.5) 50%, transparent 75%);
  background-size: 60% 100%;
  animation: sbiruShimmer 2.6s ease-in-out infinite;
}
@keyframes sbiruShimmer {
  0% { background-position: -120% 0; }
  100% { background-position: 220% 0; }
}
.historyItem .historyScore { transition: transform var(--dur-fast) var(--ease-spring); }
.historyItem:active .historyScore { transform: scale(0.9); }

/* ---------- Form & input: stati uniformi e tattili ---------- */
.inlineForm input, .profileField input, .profileField select, #view-profile select,
#view-profile input, #view-profile textarea, .accountPopover input, #view-register input, .pwInput {
  transition: border-color var(--dur-med) var(--ease-standard), box-shadow var(--dur-med) var(--ease-standard),
    background-color var(--dur-med) var(--ease-standard), transform var(--dur-fast) var(--ease-standard);
}
.inlineForm input:hover, .profileField input:hover, .profileField select:hover,
#view-profile select:hover, #view-profile input:hover, #view-register input:hover {
  border-color: #f0c96b;
}
.inlineForm input:focus, .profileField input:focus, .profileField select:focus,
#view-profile select:focus, #view-profile input:focus, #view-profile textarea:focus,
.accountPopover input:focus, #view-register input:focus, .pwInput:focus {
  box-shadow: 0 0 0 4px rgba(242, 169, 0, 0.16);
  transform: translateY(-1px);
}
.profileField select, #view-profile select {
  appearance: none;
  -webkit-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--color-text-muted) 50%), linear-gradient(135deg, var(--color-text-muted) 50%, transparent 50%);
  background-position: calc(100% - 18px) 55%, calc(100% - 13px) 55%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 34px;
}
.pwOptionBtn:hover { border-color: #f0c96b; transform: translateY(-1px); }
.rememberRow input[type="checkbox"], .pathologyOption input[type="checkbox"], .pathologyOption input[type="radio"] {
  accent-color: var(--color-primary);
}

/* ---------- Loading & stati vuoti: più vivi, mai statici ---------- */
.spinner {
  border-width: 3px;
  border-color: transparent;
  background: conic-gradient(from 0deg, var(--color-primary), transparent 65%);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 4px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 4px));
  position: relative;
}
.spinner::after {
  content: "";
  position: absolute;
  inset: 9px;
  border-radius: 50%;
  border: 2px solid var(--color-border);
  border-bottom-color: var(--color-primary);
  opacity: 0.55;
  animation: sbiruSpinReverse 1.3s linear infinite;
}
@keyframes sbiruSpinReverse { to { transform: rotate(-360deg); } }
.view-loading p { animation: sbiruTextPulse 1.8s ease-in-out infinite; }
@keyframes sbiruTextPulse { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } }
.historyEmpty { animation: sbiruBreathe 3.2s ease-in-out infinite; }
@keyframes sbiruBreathe { 0%, 100% { transform: translateY(0); opacity: 0.85; } 50% { transform: translateY(-3px); opacity: 1; } }
.plusWelcomeEmoji, .ingredientAlertEmoji {
  display: inline-block;
  animation: sbiruEmojiPop 0.6s var(--ease-spring) both;
}
@keyframes sbiruEmojiPop {
  0% { transform: scale(0.4) rotate(-8deg); opacity: 0; }
  60% { transform: scale(1.15) rotate(4deg); opacity: 1; }
  100% { transform: scale(1) rotate(0deg); }
}

/* ---------- Mobile touch: target comodi, niente hover "appiccicoso" ---------- */
.historyItem, .alternativeItem, .nameResultItem, .navBtn, .altViewBtn, .altAmazonBtn {
  min-height: 44px;
  box-sizing: border-box;
}
@media (hover: none), (pointer: coarse) {
  .historyItem:hover, .alternativeItem:hover, .navBtn:hover, .altViewBtn:hover, .altAmazonBtn:hover,
  .scanCard:hover, .manualCard:hover, .alternativeCard:hover {
    transform: none;
    box-shadow: inherit;
  }
}

/* ---------- Accessibilità: rispetta prefers-reduced-motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .view.active .scoreBadge, .view.active .scoreBadge.green, .barFill::after,
  .spinner::after, .view-loading p, .historyEmpty, .plusWelcomeEmoji, .ingredientAlertEmoji,
  .navBtn.active::after {
    animation: none !important;
  }
}

.btnShareBig{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;margin:14px 0 6px;padding:13px 16px;border:2px solid #f5a400;background:#fff8e1;color:#7a4a00;font-weight:700;font-size:1rem;border-radius:14px;font-family:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
.btnShareBig:active{background:#ffecb3}
.btnShareBig svg{flex:0 0 auto}

.scoreHowLink{display:block;text-align:center;margin:4px 0 10px;font-size:.88rem;font-weight:600;color:#b87400;text-decoration:underline}