:root {
  --petrolio: #0b4f63;
  --acqua: #1e9e97;
  --acqua-chiaro: #4fc7bb;
  --grad: linear-gradient(135deg, #062f3b 0%, #0b4f63 45%, #1e9e97 100%);
  --grad-btn: linear-gradient(135deg, #0b4f63 0%, #137a82 60%, #1e9e97 100%);
  --bg: #e6eff0;
  --bg-grad: linear-gradient(180deg, #d9e7e9 0%, #eef5f5 260px);
  --card: #ffffff;
  --text: #0a3541;
  --muted: #5d7c83;
  --line: #cfe0e2;
  --soft: #e3f3f2;
  --input: #eaf2fd;
  --ok: #138a63;
  --warn: #d14343;
  --radius: 22px;
  --radius-sm: 16px;
  --shadow: 0 4px 18px rgba(6, 47, 59, .10);
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #052630;
    --bg-grad: linear-gradient(180deg, #041d25 0%, #052630 260px);
    --card: #0b3844;
    --text: #e6f4f4;
    --muted: #9dbcc1;
    --line: #17505d;
    --soft: #0f4754;
    --input: #0a2f39;
    --shadow: 0 4px 18px rgba(0, 0, 0, .35);
  }
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; }
body {
  font-family: "Jost", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--bg) var(--bg-grad) no-repeat;
  color: var(--text);
  font-size: 16px;
  min-height: 100vh;
  padding-bottom: calc(80px + env(safe-area-inset-bottom));
}
button, input, select, textarea { font: inherit; color: inherit; }
[hidden] { display: none !important; }

/* Barra superiore */
.topbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 10px;
  padding: calc(12px + env(safe-area-inset-top)) 14px 12px;
  background: var(--grad); color: #fff;
  border-radius: 0 0 24px 24px;
  box-shadow: 0 6px 20px rgba(6, 47, 59, .30);
}
.brand { flex: 1; display: flex; align-items: center; gap: 12px; font-weight: 500; font-size: 21px; min-width: 0; letter-spacing: .3px; }
.brand #title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.logo {
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 14px;
  background: #fff; color: var(--petrolio); font-weight: 800; letter-spacing: -1px; flex: none;
}
.icon-btn { background: rgba(255,255,255,.16); border: 0; color: #fff; width: 42px; height: 42px; border-radius: 14px; font-size: 20px; cursor: pointer; flex: none; }

main { padding: 16px 14px 24px; max-width: 760px; margin: 0 auto; }

/* Barra in basso */
.tabbar {
  position: fixed; bottom: 10px; left: 10px; right: 10px; z-index: 20;
  display: grid; grid-template-columns: repeat(5, 1fr);
  background: var(--card); border: 1px solid var(--line); border-radius: 24px;
  box-shadow: 0 6px 22px rgba(6, 47, 59, .18);
  margin-bottom: env(safe-area-inset-bottom);
  max-width: 640px; margin-left: auto; margin-right: auto;
}
.tabbar button {
  border: 0; background: none; padding: 8px 2px 9px; font-size: 12px; color: var(--muted);
  display: flex; flex-direction: column; align-items: center; gap: 2px; cursor: pointer; border-radius: 20px;
}
.tabbar button img { width: 28px; height: 28px; filter: grayscale(.85) opacity(.75); transition: transform .2s, filter .2s; }
.tabbar button.active { color: var(--petrolio); font-weight: 700; background: var(--soft); }
@media (prefers-color-scheme: dark) { .tabbar button.active { color: var(--acqua-chiaro); } }
.tabbar button.active img { filter: none; transform: translateY(-2px) scale(1.12); }

/* Elementi generali */
h2 { font-size: 18px; font-weight: 600; margin: 20px 6px 10px; }
h2:first-child { margin-top: 4px; }
.muted { color: var(--muted); font-size: 14px; }
.card {
  background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 16px; margin-bottom: 12px; border: 1px solid var(--line);
}
.card.click { cursor: pointer; }
.row { display: flex; align-items: center; gap: 10px; }
.row.between { justify-content: space-between; }
.grow { flex: 1; min-width: 0; }
.stack > * + * { margin-top: 10px; }
.empty { text-align: center; padding: 30px 16px; color: var(--muted); }
.empty .big { font-size: 46px; }

.btn {
  border: 0; border-radius: var(--radius-sm); padding: 14px 16px; font-weight: 600; cursor: pointer;
  background: var(--soft); color: var(--petrolio); display: inline-flex; align-items: center; justify-content: center; gap: 6px;
}
@media (prefers-color-scheme: dark) { .btn { color: var(--acqua-chiaro); } }
.btn.primary { background: var(--grad-btn); color: #fff; box-shadow: 0 6px 16px rgba(11, 79, 99, .30); text-transform: uppercase; letter-spacing: .5px; }
.btn.danger { background: #fde4e4; color: var(--warn); }
.btn.wa { background: #22c55e; color: #fff; }
.btn.block { width: 100%; }
.btn.small { padding: 8px 13px; font-size: 14px; border-radius: 12px; text-transform: none; letter-spacing: 0; }
.btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

label.field { display: block; font-size: 13px; color: var(--muted); font-weight: 600; }
.input, select.input, textarea.input {
  width: 100%; margin-top: 5px; padding: 13px 14px; border-radius: 14px; border: 1.5px solid transparent;
  background: var(--input); outline: none;
}
.input:focus { border-color: var(--acqua); }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

.pill { display: inline-block; padding: 3px 10px; border-radius: 99px; background: var(--soft); color: var(--petrolio); font-size: 12px; font-weight: 700; }
.pill.ok { background: #d8f3ea; color: var(--ok); }
.pill.warn { background: #fde4e4; color: var(--warn); }

.progress { height: 10px; background: var(--soft); border-radius: 99px; overflow: hidden; }
.progress > div { height: 100%; background: var(--grad-btn); border-radius: 99px; transition: width .3s; }

.fab {
  position: fixed; right: 20px; bottom: calc(96px + env(safe-area-inset-bottom)); z-index: 15;
  width: 62px; height: 62px; border-radius: 22px; border: 0; background: var(--grad-btn); color: #fff;
  font-size: 32px; box-shadow: 0 8px 20px rgba(11, 79, 99, .40); cursor: pointer;
}

/* Ricerca e chips */
.search-wrap { position: relative; }
.suggest {
  position: absolute; left: 0; right: 0; top: 100%; z-index: 10; margin-top: 6px;
  background: var(--card); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow);
  max-height: 280px; overflow: auto;
}
.suggest button { display: flex; width: 100%; text-align: left; gap: 8px; padding: 12px 14px; border: 0; background: none; border-bottom: 1px solid var(--line); cursor: pointer; align-items: center; }
.suggest button:last-child { border-bottom: 0; }
.chips { display: flex; gap: 8px; overflow-x: auto; padding: 2px 0 6px; scrollbar-width: none; }
.chips.wrap { flex-wrap: wrap; overflow: visible; }
.chip {
  flex: none; border: 1.5px solid var(--line); background: var(--card); border-radius: 99px;
  padding: 8px 14px; font-size: 14px; cursor: pointer; white-space: nowrap;
}
.chip.on { background: var(--grad-btn); color: #fff; border-color: transparent; }
.chip.added { background: var(--soft); color: var(--petrolio); border-color: var(--acqua); }
@media (prefers-color-scheme: dark) { .chip.added { color: var(--acqua-chiaro); } }

/* Articoli */
.cat-title { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; color: var(--acqua); margin: 14px 6px 6px; }
.group { break-inside: avoid; }
.item {
  display: flex; align-items: center; gap: 10px; background: var(--card); border: 1px solid var(--line);
  border-radius: 18px; padding: 10px 12px; margin-bottom: 7px;
}
.item .name { font-weight: 600; }
.item .meta { font-size: 13px; color: var(--muted); }
.item .x { border: 0; background: none; font-size: 20px; color: var(--muted); cursor: pointer; padding: 4px 6px; }
.qty { display: flex; align-items: center; gap: 4px; }
.qty button { width: 32px; height: 32px; border-radius: 11px; border: 0; background: var(--soft); color: var(--petrolio); font-weight: 800; cursor: pointer; }
.qty span { min-width: 46px; text-align: center; font-size: 14px; font-weight: 700; }
.price-tag {
  border: 1.5px dashed var(--acqua); background: var(--soft); color: var(--petrolio); border-radius: 12px;
  padding: 5px 9px; font-size: 13px; font-weight: 700; cursor: pointer; white-space: nowrap; flex: none;
}
@media (prefers-color-scheme: dark) { .price-tag, .qty button { color: var(--acqua-chiaro); } }

/* Modalità spesa */
.check-item { cursor: pointer; padding: 14px 12px; user-select: none; }
.check-item .box {
  width: 30px; height: 30px; border-radius: 10px; border: 2.5px solid var(--acqua); flex: none;
  display: grid; place-items: center; color: #fff; font-weight: 900;
}
.check-item.done { opacity: .55; }
.check-item.done .box { background: var(--grad-btn); border-color: transparent; }
.check-item.done .name { text-decoration: line-through; }
.shop-head { position: sticky; top: 74px; z-index: 5; }

/* Pannello in basso */
.backdrop { position: fixed; inset: 0; background: rgba(4, 29, 37, .55); z-index: 40; }
.sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 41; max-height: 88vh; overflow: auto;
  background: var(--card); border-radius: 28px 28px 0 0; padding: 20px 18px calc(22px + env(safe-area-inset-bottom));
  max-width: 640px; margin: 0 auto; animation: up .2s ease-out;
}
.sheet h3 { margin: 0 0 12px; font-weight: 600; }
@keyframes up { from { transform: translateY(40px); opacity: 0; } }

.toast {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(100px + env(safe-area-inset-bottom)); z-index: 60;
  background: #062f3b; color: #fff; padding: 12px 20px; border-radius: 16px; font-size: 14px; max-width: 90vw;
}

/* Messaggio spesa fatta */
.celebrate { text-align: center; padding: 10px 0; }
.celebrate .emoji { font-size: 70px; animation: pop .6s ease-out; }
.celebrate h3 { font-size: 26px; background: var(--grad-btn); -webkit-background-clip: text; background-clip: text; color: transparent; }
@keyframes pop { 0% { transform: scale(.2); } 70% { transform: scale(1.2); } 100% { transform: scale(1); } }

/* Prezzo rapido */
.price-big { font-size: 40px; font-weight: 700; text-align: center; color: var(--petrolio); margin: 6px 0 12px; }
@media (prefers-color-scheme: dark) { .price-big { color: var(--acqua-chiaro); } }
.price-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }

/* Promemoria */
.rem .when { font-weight: 700; color: var(--acqua); font-size: 14px; }
.rem.past { opacity: .55; }
.rem .check { width: 28px; height: 28px; border-radius: 50%; border: 2.5px solid var(--acqua); background: none; cursor: pointer; flex: none; color: #fff; }
.rem .check.on { background: var(--grad-btn); border-color: transparent; }
.rem.fatto .title { text-decoration: line-through; }

.today-box { background: var(--grad); color: #fff; border: 0; }

.stat { text-align: center; }
.stat b { display: block; font-size: 22px; color: var(--acqua); }
.bar-row { display: flex; align-items: center; gap: 8px; font-size: 14px; margin: 6px 0; }
.bar-row .lbl { width: 42%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar-row .bar { flex: 1; height: 10px; border-radius: 99px; background: var(--soft); overflow: hidden; }
.bar-row .bar > div { height: 100%; background: var(--grad-btn); border-radius: 99px; }

/* Gestione prodotti */
details.cat-box { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 10px; box-shadow: var(--shadow); overflow: hidden; }
details.cat-box summary { list-style: none; padding: 14px 16px; cursor: pointer; display: flex; align-items: center; gap: 10px; font-weight: 600; }
details.cat-box summary::-webkit-details-marker { display: none; }
details.cat-box summary::after { content: '›'; font-size: 22px; color: var(--muted); transition: transform .2s; }
details.cat-box[open] summary::after { transform: rotate(90deg); }
details.cat-box.off { opacity: .5; }
.cat-body { padding: 0 12px 12px; }
.prod-row { display: flex; align-items: center; gap: 8px; padding: 8px 4px; border-top: 1px solid var(--line); }

/* Tablet e schermi larghi (anche in orizzontale) */
@media (min-width: 760px) {
  main { max-width: 1100px; padding: 22px 26px 30px; }
  .cols { columns: 2; column-gap: 18px; }
  .list-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 14px; }
  .sheet { border-radius: 28px; bottom: 16px; left: 16px; right: 16px; }
  .fab { right: max(26px, calc(50% - 530px)); }
  .shop-head { top: 80px; }
}
@media (min-width: 1200px) {
  .cols { columns: 3; }
  .list-cards { grid-template-columns: repeat(3, 1fr); }
}
/* Telefono in orizzontale: barra superiore più bassa */
@media (orientation: landscape) and (max-height: 500px) {
  .topbar { padding-top: 6px; padding-bottom: 6px; }
  .shop-head { position: static; }
}

/* ===== Icone 3D ===== */
.ico, .ico-xs, .ico-s, .ico-m, .ico-l, .ico-xl, .ico-xxl { flex: none; object-fit: contain; display: inline-grid; place-items: center; }
.ico-xs { width: 20px; height: 20px; vertical-align: -4px; font-size: 16px; }
.ico-s { width: 30px; height: 30px; font-size: 22px; }
.ico-m { width: 40px; height: 40px; font-size: 28px; }
.ico-l { width: 54px; height: 54px; font-size: 38px; }
.ico-xl { width: 86px; height: 86px; font-size: 60px; margin: 0 auto 6px; display: block; }
.ico-xxl { width: 110px; height: 110px; font-size: 80px; margin: 0 auto; display: block; }
.pop { animation: pop .6s ease-out; }
.ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.field-label { font-size: 13px; color: var(--muted); font-weight: 600; margin-bottom: 8px; }
.big-input { font-size: 18px; font-weight: 600; }

/* ===== Home ===== */
.hero {
  display: flex; align-items: center; gap: 12px; background: var(--grad); color: #fff;
  border-radius: 28px; padding: 22px 18px 22px 22px; margin-bottom: 16px; position: relative; overflow: hidden;
  box-shadow: 0 10px 28px rgba(6, 47, 59, .35);
}
.hero::before { content: ""; position: absolute; right: -60px; top: -60px; width: 220px; height: 220px; border-radius: 50%; background: radial-gradient(circle, rgba(79,199,187,.45), transparent 70%); }
.hello { font-size: 26px; font-weight: 600; }
.hero-date { opacity: .85; font-size: 14px; margin-top: 2px; }
.hero-img { width: 92px; height: 92px; position: relative; filter: drop-shadow(0 10px 14px rgba(0,0,0,.35)); }
.hero-stats { display: flex; gap: 6px; margin-top: 14px; }
.hero-stats span { background: rgba(255,255,255,.14); border-radius: 14px; padding: 6px 10px; font-size: 12px; display: flex; flex-direction: column; line-height: 1.15; }
.hero-stats b { font-size: 20px; }
.hero-btn { margin-top: 10px; background: #fff; color: var(--petrolio); border: 0; border-radius: 12px; padding: 7px 12px; font-weight: 600; cursor: pointer; }
.today-card .today-row { display: flex; gap: 10px; padding: 7px 4px; border-top: 1px solid var(--line); margin-top: 6px; }
.today-card .today-row b { color: var(--acqua); min-width: 46px; }
.list-title { font-weight: 600; font-size: 17px; }
.store-badge {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; padding: 5px 12px 5px 6px;
  background: var(--grad); color: #fff; border-radius: 99px; font-size: 13px; font-weight: 600;
}

/* ===== Supermercati (sfondo scuro, scritte bianche) ===== */
.store-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 9px; }
.store-tile {
  position: relative; background: var(--grad); color: #fff; border: 2px solid transparent; border-radius: 20px;
  padding: 12px 6px 10px; display: flex; flex-direction: column; align-items: center; gap: 6px;
  font-weight: 600; font-size: 13px; text-align: center; cursor: pointer; min-height: 88px; justify-content: center;
  box-shadow: 0 4px 12px rgba(6, 47, 59, .25); transition: transform .15s;
}
.store-grid.scroll { display: flex; overflow-x: auto; padding: 4px 4px 10px; scrollbar-width: none; }
.store-grid.scroll .store-tile { flex: none; width: 100px; }
.store-tile:active { transform: scale(.96); }
.store-tile.on { border-color: var(--acqua-chiaro); box-shadow: 0 0 0 3px rgba(79,199,187,.45), 0 4px 12px rgba(6,47,59,.25); }
.store-tile.on::after { content: "✓"; position: absolute; top: 6px; right: 8px; width: 20px; height: 20px; border-radius: 50%; background: var(--acqua-chiaro); color: #062f3b; font-size: 12px; display: grid; place-items: center; }
.store-tile.add { background: var(--soft); color: var(--petrolio); border: 2px dashed var(--acqua); box-shadow: none; }
.store-tile .plus { font-size: 26px; line-height: 30px; }
.tile-del { position: absolute; top: 4px; right: 4px; width: 24px; height: 24px; border-radius: 50%; border: 0; background: rgba(255,255,255,.2); color: #fff; cursor: pointer; font-size: 16px; line-height: 1; }

/* ===== Reparti ===== */
.dept-row { display: flex; gap: 9px; overflow-x: auto; padding: 2px 2px 8px; scrollbar-width: none; }
.dept-tile {
  flex: none; width: 92px; background: var(--card); border: 1.5px solid var(--line); border-radius: 20px;
  padding: 10px 6px; display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: pointer;
  font-size: 12px; font-weight: 600; text-align: center; line-height: 1.15; box-shadow: var(--shadow);
}
.dept-tile .plus { font-size: 30px; height: 54px; display: grid; place-items: center; }
.cat-title { display: flex; align-items: center; gap: 6px; }
.search-row { gap: 8px; }
.mic-small { flex: none; width: 48px; height: 48px; border-radius: 16px; border: 0; background: var(--grad-btn); color: #fff; font-size: 20px; cursor: pointer; display: grid; place-items: center; box-shadow: 0 4px 12px rgba(11, 79, 99, .3); }
.mic-small img { width: 30px; height: 30px; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .3)); }
.mic-small.mic-on, .mic-btn.mic-on { animation: pulse 1s infinite; background: linear-gradient(135deg, #d14343, #f07167); }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(209,67,67,.6); } 100% { box-shadow: 0 0 0 16px rgba(209,67,67,0); } }
.total-card { background: var(--grad); color: #fff; border: 0; }
.total-card .muted { color: rgba(255,255,255,.85); }
.total-card .progress { background: rgba(255,255,255,.2); }
.sheet-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.sheet-head h3 { margin: 0; }
.big-count { font-size: 22px; color: var(--acqua); }
.amount { color: var(--acqua); font-size: 17px; }

/* ===== Invio ===== */
.contact-row { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 6px; scrollbar-width: none; }
.contact { flex: none; width: 76px; border: 0; background: none; display: flex; flex-direction: column; align-items: center; gap: 4px; cursor: pointer; color: var(--text); }
.contact .c-name { font-size: 13px; font-weight: 600; max-width: 76px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.contact small { font-size: 11px; color: var(--muted); }
.avatar { width: 54px; height: 54px; border-radius: 50%; background: var(--grad); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 18px; flex: none; box-shadow: 0 4px 10px rgba(6,47,59,.25); }
.avatar.add { background: var(--soft); color: var(--petrolio); border: 2px dashed var(--acqua); box-shadow: none; font-size: 24px; }
.avatar.big { width: 64px; height: 64px; font-size: 22px; }
.prod-row .avatar { width: 42px; height: 42px; font-size: 15px; }
.share-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.share-app { border: 0; background: none; display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; cursor: pointer; color: var(--text); text-align: center; }
.app-ico { width: 58px; height: 58px; border-radius: 18px; display: grid; place-items: center; font-size: 28px; color: #fff; box-shadow: 0 4px 12px rgba(0,0,0,.15); }
.app-ico.wa { background: linear-gradient(135deg, #25d366, #128c7e); }
.app-ico.tg { background: linear-gradient(135deg, #37aee2, #1e96c8); }
.app-ico.ig { background: linear-gradient(45deg, #f9ce34, #ee2a7b 50%, #6228d7); }
.app-ico.tt { background: linear-gradient(135deg, #111, #333); box-shadow: -3px -3px 0 #25f4ee inset, 3px 3px 0 #fe2c55 inset; }
.app-ico.more { background: var(--soft); color: var(--petrolio); font-size: 30px; }
.app-ico.print, .app-ico.img, .app-ico.copy { background: var(--grad); }

/* ===== Note vocali ===== */
.voice-card { display: flex; align-items: center; gap: 16px; background: var(--grad); color: #fff; border-radius: 28px; padding: 20px; margin-bottom: 12px; box-shadow: 0 10px 28px rgba(6,47,59,.3); }
.voice-hint { font-size: 13px; opacity: .88; margin-top: 4px; }
.mic-btn { flex: none; width: 84px; height: 84px; border-radius: 50%; border: 0; background: #fff; display: grid; place-items: center; cursor: pointer; box-shadow: 0 6px 18px rgba(0,0,0,.25); }
.live { font-size: 17px; font-style: italic; }
.note-text { margin: 10px 2px; white-space: pre-wrap; line-height: 1.4; }

/* ===== Storico e impostazioni ===== */
.stats-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 12px; }
.stat-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 12px 6px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.stat-card b { font-size: 18px; color: var(--acqua); }
.stat-card span { font-size: 12px; color: var(--muted); }
.settings-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.set-tile { background: var(--soft); border: 0; border-radius: 20px; padding: 14px 8px; display: flex; flex-direction: column; align-items: center; gap: 4px; cursor: pointer; font-weight: 600; font-size: 14px; color: var(--text); }
.set-tile small { color: var(--muted); font-weight: 400; font-size: 12px; }
.logo-big { width: 58px; height: 58px; border-radius: 18px; flex: none; box-shadow: 0 6px 14px rgba(6, 47, 59, .3); }
.cal-btn { border: 0; background: var(--soft); border-radius: 14px; padding: 6px; cursor: pointer; }
.prod-row .x { border: 0; background: none; font-size: 20px; color: var(--muted); cursor: pointer; }

/* ===== Stampa / PDF ===== */
#print-area { display: none; }
@media print {
  @page { margin: 14mm; }
  body { background: #fff !important; padding: 0; }
  body > *:not(#print-area) { display: none !important; }
  #print-area { display: block; color: #0a3541; font-family: Jost, system-ui, sans-serif; }
  .p-head { display: flex; align-items: center; gap: 14px; border-bottom: 3px solid #1e9e97; padding-bottom: 10px; margin-bottom: 14px; }
  .p-logo { width: 54px; height: 54px; border-radius: 14px; flex: none; }
  .p-head h1 { margin: 0; font-size: 24px; }
  .p-head p { margin: 2px 0 0; color: #5d7c83; }
  .p-cols { columns: 2; column-gap: 24px; }
  .p-group { break-inside: avoid; margin-bottom: 12px; }
  .p-group h2 { font-size: 14px; text-transform: uppercase; color: #1e9e97; margin: 0 0 6px; }
  .p-item { display: flex; gap: 8px; align-items: center; padding: 4px 0; border-bottom: 1px dotted #cfe0e2; font-size: 13px; }
  .p-box { width: 14px; height: 14px; border: 1.5px solid #0b4f63; border-radius: 4px; display: inline-grid; place-items: center; font-size: 11px; flex: none; }
  .p-name { flex: 1; }
  .p-qty { color: #5d7c83; }
  .p-price { min-width: 60px; text-align: right; }
  .p-total { margin-top: 14px; text-align: right; font-size: 16px; }
  .p-foot { margin-top: 20px; font-size: 11px; color: #5d7c83; text-align: center; }
}

/* ===== Sfondo decorato ===== */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(520px 380px at 105% 8%, rgba(30, 158, 151, .18), transparent 60%),
    radial-gradient(480px 480px at -12% 88%, rgba(11, 79, 99, .13), transparent 60%);
}

/* ===== Icone dei prodotti in "pozzetti" colorati ===== */
.pwell {
  --c: #1e9e97; flex: none; width: 50px; height: 50px; border-radius: 16px; display: grid; place-items: center;
  background: linear-gradient(145deg, color-mix(in srgb, var(--c) 24%, #fff), color-mix(in srgb, var(--c) 7%, #fff));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 22%, transparent), 0 3px 8px color-mix(in srgb, var(--c) 18%, transparent);
}
.pwell img { width: 76%; height: 76%; object-fit: contain; filter: drop-shadow(0 3px 3px rgba(0, 0, 0, .2)); }
.pwell .emo { font-size: 26px; }
.pwell.sm { width: 38px; height: 38px; border-radius: 12px; }
.pwell.sm .emo { font-size: 20px; }
.pwell.xs { width: 28px; height: 28px; border-radius: 50%; box-shadow: none; }
.pwell.lg { width: 66px; height: 66px; border-radius: 22px; }
@media (prefers-color-scheme: dark) {
  .pwell { background: linear-gradient(145deg, color-mix(in srgb, var(--c) 40%, #0b3844), color-mix(in srgb, var(--c) 12%, #0b3844)); }
}

/* ===== Titoli reparto colorati ===== */
.cat-title {
  --c: #1e9e97; gap: 8px; margin: 18px 2px 8px; padding: 6px 8px 6px 6px; border-radius: 14px;
  color: color-mix(in srgb, var(--c) 70%, #0a3541); background: color-mix(in srgb, var(--c) 13%, transparent);
  font-size: 13px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase;
}
@media (prefers-color-scheme: dark) { .cat-title { color: color-mix(in srgb, var(--c) 65%, #fff); } }
.cat-count { background: var(--c); color: #fff; border-radius: 99px; padding: 1px 9px; font-size: 12px; letter-spacing: 0; }

/* ===== Righe prodotto ===== */
.item { padding: 10px; border-radius: 20px; box-shadow: 0 2px 10px rgba(6, 47, 59, .06); transition: transform .15s; }
.item:active { transform: scale(.985); }
.check-item .pwell { transition: filter .25s, opacity .25s; }
.check-item.done .pwell { filter: grayscale(1); opacity: .55; }
.check-item.done .box { animation: pop .35s ease-out; }
.icon-chip { display: inline-flex; align-items: center; gap: 7px; padding: 4px 13px 4px 4px; }
.hist-row { display: flex; align-items: center; gap: 10px; padding: 5px 4px; }
.suggest button { padding: 8px 12px; }

/* ===== Reparti colorati ===== */
.dept-tile {
  --c: #1e9e97; width: 98px; border-color: color-mix(in srgb, var(--c) 25%, var(--line));
  background: linear-gradient(170deg, color-mix(in srgb, var(--c) 15%, var(--card)), var(--card) 75%);
}
.dept-ico {
  display: grid; place-items: center; width: 62px; height: 62px; border-radius: 50%; flex: none;
  background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--c) 32%, #fff), color-mix(in srgb, var(--c) 12%, #fff));
  box-shadow: 0 6px 14px color-mix(in srgb, var(--c) 28%, transparent);
}
.dept-ico .ico-l { width: 42px; height: 42px; }
.dept-ico.big { width: 74px; height: 74px; }
.dept-ico.big .ico-l { width: 52px; height: 52px; }
details.cat-box summary .dept-ico { width: 46px; height: 46px; }
details.cat-box summary .dept-ico .ico-m { width: 32px; height: 32px; }
.dept-head { --c: #1e9e97; background: linear-gradient(120deg, color-mix(in srgb, var(--c) 20%, transparent), transparent 80%); padding: 10px; border-radius: 22px; }

/* ===== Griglia prodotti (pannello reparto) ===== */
.prod-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(98px, 1fr)); gap: 10px; }
.prod-tile {
  position: relative; background: var(--card); border: 2px solid var(--line); border-radius: 22px; color: var(--text);
  padding: 12px 6px 10px; display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: pointer;
  transition: transform .15s, border-color .2s, background .2s;
}
.prod-tile:active { transform: scale(.94); }
.pt-name { font-size: 13px; font-weight: 600; text-align: center; line-height: 1.15; }
.pt-price { font-size: 11px; color: var(--muted); }
.prod-tile.added { border-color: var(--acqua); background: linear-gradient(170deg, var(--soft), var(--card)); }
.prod-tile.added::after {
  content: "✓"; position: absolute; top: 6px; right: 6px; width: 24px; height: 24px; border-radius: 50%;
  background: var(--grad-btn); color: #fff; font-size: 13px; display: grid; place-items: center; animation: pop .3s ease-out;
}

/* ===== Card della home ===== */
.list-card { position: relative; overflow: hidden; }
.list-card::after {
  content: ""; position: absolute; right: -50px; top: -50px; width: 140px; height: 140px; border-radius: 50%;
  background: radial-gradient(circle, rgba(30, 158, 151, .16), transparent 70%); pointer-events: none;
}

/* ===== Coriandoli ===== */
.confetti { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 100; }

/* ===== Schermata di benvenuto ===== */
#splash {
  position: fixed; inset: 0; z-index: 200; background: var(--grad); color: #fff; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center; transition: opacity .55s, transform .55s;
}
#splash.out { opacity: 0; transform: scale(1.06); pointer-events: none; }
.splash-glow { position: absolute; width: 440px; height: 440px; border-radius: 50%; background: radial-gradient(circle, rgba(79, 199, 187, .5), transparent 65%); animation: glow 1.6s ease-in-out infinite alternate; }
.splash-mark { position: relative; width: 176px; height: 176px; filter: drop-shadow(0 12px 20px rgba(0, 0, 0, .3)); }
.enso-draw { stroke-dasharray: 100; stroke-dashoffset: 100; animation: draw 1.15s .15s cubic-bezier(.65, 0, .35, 1) forwards; }
.splash-bag { transform-box: fill-box; transform-origin: 50% 80%; animation: bagIn .55s .85s cubic-bezier(.2, 1.5, .4, 1) both; }
.splash-leaf { transform-box: fill-box; transform-origin: center; animation: leafIn .6s 1.15s cubic-bezier(.2, 1.6, .4, 1) both; }
.splash-name { position: relative; font-size: 44px; margin-top: 18px; animation: fadeUp .7s 1.2s both; }
.splash-sub { position: relative; margin-top: 6px; font-size: 13px; letter-spacing: 3.5px; text-transform: uppercase; opacity: .85; animation: fadeUp .7s 1.45s both; }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes bagIn { from { transform: translateY(26px) scale(.5); opacity: 0; } }
@keyframes leafIn { from { transform: scale(0) rotate(-70deg); opacity: 0; } }

/* ===== Marchio SpesaZen ===== */
.wordmark { font-weight: 600; letter-spacing: .01em; white-space: nowrap; }
.wm-zen {
  position: relative; font-weight: 300; color: var(--acqua-chiaro); letter-spacing: .04em; margin-left: .02em;
}
.wm-zen::after {
  content: ""; position: absolute; left: -.04em; right: -.1em; bottom: -.16em; height: .26em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 12' preserveAspectRatio='none'%3E%3Cpath d='M1 5.5 Q45 12.5 99 2.5 Q47 8.5 1 5.5Z' fill='%234fc7bb'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
}
.sheet .wm-zen, .card .wm-zen { color: var(--acqua); }
.logo-img { width: 42px; height: 42px; border-radius: 13px; flex: none; box-shadow: 0 4px 12px rgba(0, 0, 0, .25); }
.brand #title .wordmark { font-size: 23px; }
@keyframes fadeUp { from { transform: translateY(14px); opacity: 0; } }
@keyframes glow { from { transform: scale(.88); } to { transform: scale(1.1); } }

/* ===== Volantino ===== */
.flyer-btn {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; cursor: pointer; color: var(--text);
  background: linear-gradient(120deg, #fff4dc, var(--card) 70%); border: 1.5px solid #f6d58e; border-radius: 18px; padding: 10px 14px;
}
.flyer-btn small { display: block; color: var(--muted); font-size: 12px; }
.flyer-ico { width: 40px; height: 40px; border-radius: 12px; background: #fde7b0; display: grid; place-items: center; font-size: 22px; flex: none; }
.flyer-go { font-size: 26px; color: #c58a12; }
@media (prefers-color-scheme: dark) {
  .flyer-btn { background: linear-gradient(120deg, #3a2f12, var(--card) 70%); border-color: #6b5520; }
  .flyer-ico { background: #5a4716; }
}
.flyer-mini { flex: none; width: 40px; height: 40px; border-radius: 12px; border: 0; background: #fde7b0; font-size: 20px; cursor: pointer; }
.tile-flyer { font-size: 10px; opacity: .8; font-weight: 500; }
.tile-link { position: absolute; top: 4px; left: 4px; width: 24px; height: 24px; border-radius: 50%; border: 0; background: rgba(255,255,255,.2); color: #fff; cursor: pointer; font-size: 12px; line-height: 1; }

/* ===== Interruttore ===== */
.switch-row { display: flex; align-items: center; gap: 12px; background: var(--soft); border-radius: 20px; padding: 12px 14px; cursor: pointer; }
.switch-row small { display: block; color: var(--muted); font-size: 12px; font-weight: 400; margin-top: 2px; }
.switch {
  appearance: none; -webkit-appearance: none; flex: none; width: 52px; height: 30px; border-radius: 99px; margin: 0;
  background: #b9cbcf; position: relative; cursor: pointer; transition: background .2s;
}
.switch::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .25); transition: transform .2s cubic-bezier(.3, 1.4, .5, 1);
}
.switch:checked { background: var(--grad-btn); }
.switch:checked::after { transform: translateX(22px); }

/* ===== Confronto tra supermercati ===== */
.cmp-card { border: 1.5px solid color-mix(in srgb, var(--acqua) 35%, var(--line)); }
.cmp-row { margin-top: 12px; padding: 10px 12px; border-radius: 16px; background: var(--soft); }
.cmp-row.best { background: linear-gradient(120deg, color-mix(in srgb, #f6c445 25%, var(--card)), var(--soft)); box-shadow: inset 0 0 0 1.5px #f0c24b; }
.cmp-bar { height: 8px; border-radius: 99px; background: color-mix(in srgb, var(--acqua) 15%, transparent); margin-top: 8px; overflow: hidden; }
.cmp-bar > div { height: 100%; border-radius: 99px; background: var(--grad-btn); }
.cmp-row.best .cmp-bar > div { background: linear-gradient(90deg, #f0b429, #f6c445); }
.cmp-note { font-size: 12px; margin-top: 4px; }
.store-prices { display: flex; flex-wrap: wrap; gap: 6px; margin: -2px 0 6px; }
.sp-chip { background: var(--soft); border-radius: 99px; padding: 5px 11px; font-size: 13px; }
.sp-chip.best { background: #fdf0c8; color: #7a5a06; }
.sp-chip.here { box-shadow: inset 0 0 0 1.5px var(--acqua); }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }