:root {
  --bg: #fff8ef;
  --card: #ffffff;
  --ink: #231a12;
  --muted: #96897a;
  --accent: #ff6b57;
  --accent-dark: #e8503d;
  --sunny: #ffc94d;
  --sunny-soft: #fff1d0;
  --green: #4fc57f;
  --candy-pink: #ff8fab;
  --border: #f0e5d6;
  --radius: 22px;
  --shadow: 0 6px 24px rgba(210, 140, 60, 0.13);
  font-size: 16px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1c1611;
    --card: #29211a;
    --ink: #f5ede2;
    --muted: #a3968a;
    --border: #3a3128;
    --sunny-soft: #3a2f1c;
    --shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
  }
}

* { box-sizing: border-box; }

/* Se il telefono lascia una striscia di schermo fuori dalla finestra dell'app
   (succede su iPhone finché l'icona non viene rifatta), quella striscia prende
   questo colore: bianco come la barra dei menu, così le si attacca sotto e
   sembra parte di lei invece di un buco. */
html { height: 100%; background: var(--card); }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: var(--bg);
  color: var(--ink);
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
  -webkit-tap-highlight-color: transparent;
}

/* L'altezza è quella della finestra dell'app, né più né meno: allungarla oltre
   (con 100vh o con l'altezza dello schermo) fa finire i menu fuori dalla parte
   visibile su iPhone. Non va misurata da JavaScript: all'avvio iPhone dichiara
   ancora tutto lo schermo e si corregge un istante dopo. */
#app {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  height: 100vh;
  height: 100dvh;
  max-width: 480px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  /* Spazio per la barra di stato dell'iPhone (ora, batteria, wifi) */
  padding-top: calc(env(safe-area-inset-top, 0px) + 6px);
}

/* Lo scorrimento avviene dentro la schermata, non nella pagina:
   la barra in basso resta sempre al suo posto. */
.screen { display: none; padding: 16px; animation: fadeIn .22s ease; }
.screen.active {
  display: block;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 26px;
}
@keyframes fadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

h1 { margin: 0; font-size: 24px; font-weight: 800; }
h2 { margin: 0; font-size: 20px; font-weight: 800; }
h3 { margin: 18px 0 6px; font-size: 16px; font-weight: 700; }
p { margin: 0 0 12px; color: var(--muted); }
.hint-text { font-size: 13px; line-height: 1.45; }

input, select, textarea {
  width: 100%;
  padding: 13px 14px;
  border-radius: 16px;
  border: 1.5px solid var(--border);
  background: var(--card);
  font-size: 16px;
  margin-bottom: 12px;
  color: var(--ink);
  font-family: inherit;
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent); border-color: var(--accent); }
textarea { resize: vertical; }
label { font-size: 12.5px; font-weight: 700; color: var(--muted); display: block; margin-bottom: 5px; text-transform: uppercase; letter-spacing: .4px; }

button { font-family: inherit; cursor: pointer; }

.btn {
  width: 100%;
  padding: 15px;
  border-radius: 40px;
  border: none;
  background: var(--accent);
  color: white;
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 10px;
  transition: transform .1s ease;
  box-shadow: 0 4px 14px rgba(232, 80, 61, .3);
}
.btn:active { transform: scale(0.97); }
.btn.secondary { background: transparent; color: var(--accent-dark); font-weight: 600; box-shadow: none; }
.btn.ghost { background: var(--card); color: var(--ink); border: 1.5px solid var(--border); box-shadow: none; }
.btn.half { width: calc(50% - 5px); display: inline-block; }
.btn.done-btn { background: var(--green); box-shadow: 0 4px 14px rgba(79, 197, 127, .35); }
.btn.free-btn { background: var(--green); box-shadow: none; }
.btn.busy-btn { background: var(--accent); box-shadow: none; }
.two-btns { display: flex; gap: 10px; }

.error-msg { color: var(--accent-dark); font-size: 14px; margin: -4px 0 10px; min-height: 18px; }
.icon-btn {
  background: var(--card);
  border: 1.5px solid var(--border);
  border-radius: 14px;
  width: 40px; height: 40px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; color: var(--ink);
}

/* ───────── Auth ───────── */
.auth-wrap { min-height: 92vh; display: flex; flex-direction: column; justify-content: center; padding: 10px; }
.logo-bounce { font-size: 56px; text-align: center; margin-bottom: 6px; animation: bounce 2.2s ease infinite; }
/* La clessidra dell'accesso: sale girando su se stessa e riscende
   completando il giro. L'animazione sta sullo <span> interno perché il
   contenitore deve restare fermo, se no traballa anche il testo sotto. */
.logo-bounce.clessidra { animation: none; }
.logo-bounce.clessidra span { display: inline-block; animation: clessidraGira 2.6s ease-in-out infinite; }
@keyframes clessidraGira {
  0%   { transform: translateY(0) rotate(0deg); }
  50%  { transform: translateY(-18px) rotate(180deg); }
  100% { transform: translateY(0) rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .logo-bounce.clessidra span { animation: none; }
}
@keyframes bounce { 0%,100% { transform: translateY(0);} 50% { transform: translateY(-8px);} }
.auth-title { text-align: center; font-size: 32px; font-weight: 800; margin-bottom: 4px; }
.auth-sub { text-align: center; margin-bottom: 26px; color: var(--muted); }

/* ───────── Onboarding ───────── */
.ob-wrap { min-height: 88vh; display: flex; flex-direction: column; justify-content: center; }
.ob-progress { height: 8px; background: var(--border); border-radius: 8px; margin-bottom: 24px; overflow: hidden; }
#ob-progress-fill { height: 100%; width: 10%; background: linear-gradient(90deg, var(--sunny), var(--accent)); border-radius: 8px; transition: width .3s ease; }
.ob-nav { display: flex; gap: 10px; margin-top: 8px; }
.ob-question { font-size: 22px; font-weight: 800; margin-bottom: 6px; }
.ob-hint { color: var(--muted); margin-bottom: 18px; font-size: 14px; }
.ob-emoji { font-size: 44px; margin-bottom: 10px; }

.day-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.day-chips button {
  flex: 1; min-width: 52px;
  padding: 11px 4px; border-radius: 14px;
  border: 1.5px solid var(--border); background: var(--card);
  font-weight: 700; font-size: 13.5px; color: var(--ink);
}
.day-chips button.selected { background: var(--accent); border-color: var(--accent); color: white; }

/* ───────── La settimana del turnista ─────────
   Una riga per giorno, gli orari a destra. Chi fa i turni deve poter
   leggere la sua settimana tutta insieme, come il foglio che gli danno. */
.turni-griglia { margin-bottom: 14px; }
.tn-riga {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 9px 0; border-bottom: 1px solid var(--border);
}
.tn-riga:last-child { border-bottom: 0; }
.tn-riga.riposo { opacity: .65; }
.tn-giorno {
  flex: 0 0 44px; padding-top: 8px;
  font-weight: 800; font-size: 13px; text-transform: uppercase;
  color: var(--muted); letter-spacing: .4px;
}
.tn-blocchi { flex: 1; min-width: 0; }
.tn-blocco { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 6px; }
.tn-blocco input[type=time] {
  flex: 1; min-width: 88px; margin: 0; padding: 9px 8px;
  border-radius: 12px; font-size: 15px;
}
.tn-blocco > span { color: var(--muted); font-weight: 700; }
.tn-via {
  flex: 0 0 34px; height: 34px; border-radius: 50%;
  border: 1.5px solid var(--border); background: var(--card);
  color: var(--muted); font-size: 14px; line-height: 1;
}
.tn-notte {
  flex-basis: 100%; font-size: 11.5px; font-weight: 700;
  color: #8a6100; margin-top: -2px;
}
@media (prefers-color-scheme: dark) { .tn-notte { color: #f0c565; } }
.tn-riposo { display: inline-block; padding-top: 9px; margin-right: 12px; font-size: 14px; color: var(--muted); }
.tn-piu {
  background: none; border: 0; padding: 4px 0; cursor: pointer;
  color: var(--accent-dark); font-family: inherit;
  font-size: 13px; font-weight: 700;
}
/* L'interruttore "faccio i turni" non è un "importante": colore suo */
.imp-toggle.turni.on { border-color: #2f6f70; background: #ddf0ef; color: #23595a; }
@media (prefers-color-scheme: dark) { .imp-toggle.turni.on { background: #16332f; color: #7fd0c9; } }

.chip-row { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 14px; }
.chip-row button {
  padding: 9px 13px; border-radius: 20px;
  border: 1.5px solid var(--border); background: var(--card);
  font-weight: 600; font-size: 13.5px; color: var(--ink);
}
.chip-row button.selected { background: var(--sunny); border-color: var(--sunny); color: #4a3200; }

/* ───────── Home ───────── */
.home-head { display: flex; align-items: flex-start; justify-content: space-between; padding: 8px 2px 12px; }
.home-head p { margin: 3px 0 0; }
.mini-candy {
  background: var(--sunny-soft); border: none; border-radius: 40px;
  padding: 9px 14px; font-size: 15px; font-weight: 800; color: var(--ink);
}

.sugg-card {
  background: linear-gradient(135deg, var(--sunny-soft), var(--card));
  border-radius: var(--radius);
  padding: 14px 16px;
  box-shadow: var(--shadow);
  margin-bottom: 14px;
}
.sugg-card:empty { display: none; }
.sugg-title { font-weight: 800; font-size: 15px; margin-bottom: 8px; }
.sugg-item {
  display: flex; align-items: center; gap: 10px; width: 100%;
  background: var(--card); border: 1.5px solid var(--border); border-radius: 16px;
  padding: 10px 12px; margin-bottom: 8px; text-align: left; color: var(--ink);
}
.sugg-item:last-child { margin-bottom: 0; }
.sugg-time { font-weight: 800; font-size: 13px; color: var(--accent-dark); white-space: nowrap; }
.sugg-text { flex: 1; font-weight: 600; font-size: 14px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sugg-cat { font-size: 18px; }
.sugg-empty { color: var(--muted); font-size: 14px; }

.quick-time { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; flex-wrap: wrap; padding: 0 2px; }
.quick-label { font-size: 13px; font-weight: 700; color: var(--muted); }
.quick-chips { display: flex; gap: 6px; }
.quick-chips button, .cal-quick button {
  padding: 8px 13px; border-radius: 20px; border: none;
  background: var(--sunny); color: #4a3200; font-weight: 800; font-size: 13px;
}

/* ───────── Ruota categorie (stile Glovo) ───────── */
/* La ruota sta un po' più in alto e i pallini un po' più in basso: fra i due
   ci deve stare il numerino della seconda pagina, che prima finiva addosso
   alla categoria in fondo alla ruota (segnalato provando sul telefono). */
.wheel-wrap { display: flex; justify-content: center; padding: 2px 0 2px; }
#wheel {
  position: relative;
  width: min(88vw, 400px);
  height: min(88vw, 400px);
}
#wheel-center {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 96px; height: 96px; border-radius: 50%;
  border: none;
  background: radial-gradient(circle at 30% 25%, #ff8a72, var(--accent) 60%, var(--accent-dark));
  color: white;
  box-shadow: 0 10px 28px rgba(232, 80, 61, .45);
  display: flex; align-items: center; justify-content: center;
  z-index: 5;
  transition: transform .12s ease;
}
#wheel-center:active { transform: translate(-50%, -50%) scale(0.93); }
/* La pressione lunga (cattura rapida) non deve selezionare testo intorno */
#wheel-center, .h2-galla {
  -webkit-user-select: none; user-select: none;
  -webkit-touch-callout: none; touch-action: none;
}
#wheel-center span { font-size: 52px; font-weight: 300; line-height: 1; margin-top: -4px; }
.wheel-cat {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 70px; height: 70px; border-radius: 50%;
  border: none;
  background: var(--card);
  box-shadow: var(--shadow);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  z-index: 4; color: var(--ink);
  transition: transform .12s ease;
}
.wheel-cat:active { transform: translate(-50%, -50%) scale(0.92); }
.wheel-cat.small { width: 60px; height: 60px; }
.wheel-cat .w-icon { font-size: 26px; line-height: 1.1; }
.wheel-cat.small .w-icon { font-size: 22px; }
.wheel-cat .w-name {
  position: absolute; top: calc(100% + 3px); left: 50%; transform: translateX(-50%);
  font-size: 10.5px; font-weight: 700; white-space: nowrap; color: var(--muted);
  max-width: 84px; overflow: hidden; text-overflow: ellipsis;
}
.wheel-cat .w-count {
  position: absolute; top: -3px; right: -3px;
  background: var(--accent); color: white;
  font-size: 11px; font-weight: 800;
  border-radius: 20px; min-width: 20px; height: 20px;
  display: flex; align-items: center; justify-content: center; padding: 0 5px;
  border: 2px solid var(--bg);
}
.wheel-empty { text-align: center; color: var(--muted); padding: 30px 20px; }

/* ───────── Breadcrumb / liste ───────── */
.breadcrumb { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.breadcrumb h2 { flex: 1; }
/* Titolo della schermata e, a destra, il "?" della guida di sezione */
.topbar-line { padding: 8px 2px 12px; display: flex; align-items: center; gap: 10px; }
.topbar-line h2 { flex: 1; margin: 0; }

/* Il "?" c'è in ogni schermata: piccolo, sempre nello stesso posto, così
   uno impara dove cercarlo invece di andare a caccia nel Profilo. */
.aiuto-btn {
  flex: 0 0 30px; width: 30px; height: 30px; border-radius: 50%;
  border: 1.5px solid var(--border); background: var(--card);
  color: var(--muted); font-family: inherit; font-size: 15px; font-weight: 800;
  line-height: 1; padding: 0; cursor: pointer;
}
.aiuto-btn:active { transform: scale(.92); }
.home-head .aiuto-btn { align-self: center; }

/* Guida aperta su una sola sezione */
.gu-sezione {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: var(--sunny-soft); border-radius: 14px;
  padding: 10px 12px; margin-bottom: 12px; font-size: 13.5px;
}
.gu-sezione span { flex: 1; min-width: 130px; }
.gu-sezione.hidden { display: none; }

.subcats { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.subcat-chip {
  background: var(--card); border: 1.5px solid var(--border);
  border-radius: 20px; padding: 8px 14px; font-size: 14px; font-weight: 600; color: var(--ink);
}
.subcat-chip.add { border-style: dashed; color: var(--muted); }

.filter-tabs { display: flex; gap: 8px; margin-bottom: 14px; }
.filter-tabs button {
  flex: 1; padding: 10px; border-radius: 30px;
  border: 1.5px solid var(--border); background: var(--card);
  font-weight: 700; font-size: 14px; color: var(--muted);
}
.filter-tabs button.active { background: var(--ink); border-color: var(--ink); color: var(--bg); }

.task-item {
  background: var(--card);
  border: 1.5px solid var(--border);
  border-radius: 18px;
  padding: 12px 14px;
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 10px;
  box-shadow: var(--shadow);
}
.task-check {
  width: 28px; height: 28px; border-radius: 50%;
  border: 2.5px solid var(--accent);
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: transparent; color: white; font-size: 15px;
}
.task-check.done { background: var(--green); border-color: var(--green); }
.task-body { flex: 1; min-width: 0; text-align: left; background: none; border: none; color: var(--ink); padding: 0; }
.task-title { font-weight: 700; font-size: 15px; word-break: break-word; }
.task-item.done .task-title { text-decoration: line-through; color: var(--muted); }
.task-meta { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 5px; }
.tag {
  font-size: 11.5px; background: var(--bg); border-radius: 8px; padding: 3px 8px;
  color: var(--muted); font-weight: 600;
}
.tag.urgent { background: #ffe3de; color: var(--accent-dark); }
.tag.cat-tag { background: var(--sunny-soft); color: var(--ink); }
.task-photo { width: 46px; height: 46px; border-radius: 12px; object-fit: cover; flex-shrink: 0; }
.empty-state { text-align: center; padding: 36px 20px; color: var(--muted); }
.empty-state .big-emoji { font-size: 44px; display: block; margin-bottom: 10px; }

/* ───────── Calendario ───────── */
.cal-date-row { display: flex; gap: 8px; align-items: center; margin-bottom: 10px; }
.cal-date-row input { margin-bottom: 0; text-align: center; font-weight: 700; }
.cal-quick { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin-bottom: 12px; }
.cal-block {
  display: flex; align-items: center; gap: 10px;
  border-radius: 16px; padding: 11px 13px; margin-bottom: 8px;
  border: 1.5px solid var(--border); background: var(--card);
}
.cal-block .cb-time { font-weight: 800; font-size: 13px; white-space: nowrap; min-width: 92px; }
.cal-block .cb-label { flex: 1; font-weight: 600; font-size: 14px; }
.cal-block.free { background: #e9f9ef; border-color: #bfe9cf; }
.cal-block.free .cb-time { color: #1e7c45; }
.cal-block.busy-ov { background: #ffe9e5; border-color: #ffc9c0; }
.cal-block.busy-ov .cb-time { color: var(--accent-dark); }
/* Il sonno dopo il turno di notte: azzurrino, si distingue dal lavoro */
.cal-block.rest-blk { background: #eaeefb; border-color: #c8d3f0; }
.cal-block.rest-blk .cb-time { color: #46589c; }
.cal-block .cb-del { background: none; border: none; color: var(--muted); font-size: 16px; padding: 4px; }
@media (prefers-color-scheme: dark) {
  .cal-block.free { background: #1d3327; border-color: #2c5340; }
  .cal-block.free .cb-time { color: #6fdd9a; }
  .cal-block.busy-ov { background: #3d221d; border-color: #6b3229; }
  .cal-block.rest-blk { background: #232a44; border-color: #3b4877; }
  .cal-block.rest-blk .cb-time { color: #9fb0e8; }
  .tag.urgent { background: #532620; }
}

.cm-item {
  background: var(--card); border: 1.5px solid var(--border); border-radius: 18px;
  padding: 13px 15px; margin-bottom: 10px; width: 100%; text-align: left; color: var(--ink);
  box-shadow: var(--shadow);
}
.cm-item .cm-row1 { display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: 15px; }
.cm-item .cm-row2 { color: var(--muted); font-size: 13px; margin-top: 4px; font-weight: 600; }
.kind-toggle { display: flex; gap: 8px; margin-bottom: 14px; }
.kind-toggle button {
  flex: 1; padding: 11px; border-radius: 30px; border: 1.5px solid var(--border);
  background: var(--card); font-weight: 700; color: var(--ink);
}
.kind-toggle button.selected { border-color: var(--ink); background: var(--ink); color: var(--bg); }

/* ───────── Bottom nav ───────── */
.bottom-nav {
  position: relative;
  flex: 0 0 auto;
  background: var(--card);
  border-top: 1px solid var(--border);
  display: flex;
  padding: 8px 0 calc(8px + env(safe-area-inset-bottom));
  z-index: 20;
  border-radius: 22px 22px 0 0;
  box-shadow: 0 -4px 20px rgba(0,0,0,0.06);
}
.bottom-nav button {
  flex: 1; background: none; border: none; font-size: 11.5px;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  color: var(--muted); font-weight: 700;
}
.bottom-nav button.active { color: var(--accent-dark); }
.bottom-nav .nav-icon { font-size: 21px; }

/* ───────── Modali ───────── */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(25, 15, 8, 0.45);
  display: none; align-items: flex-end; justify-content: center; z-index: 50;
}
.modal-overlay.active { display: flex; }
.modal-sheet {
  background: var(--bg);
  width: 100%; max-width: 480px;
  border-radius: 26px 26px 0 0;
  padding: 20px 20px calc(24px + env(safe-area-inset-bottom));
  max-height: 90vh; overflow-y: auto;
  animation: slideUp .22s ease;
}
@keyframes slideUp { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
.modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }

.emoji-row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.emoji-choice {
  width: 42px; height: 42px; border-radius: 14px; border: 1.5px solid var(--border);
  background: var(--card); font-size: 21px; display: flex; align-items: center; justify-content: center;
}
.emoji-choice.selected { border-color: var(--accent); background: var(--sunny-soft); }

.managecat-item {
  display: flex; align-items: center; gap: 10px; width: 100%;
  background: var(--card); border: 1.5px solid var(--border); border-radius: 16px;
  padding: 11px 13px; margin-bottom: 8px; text-align: left; color: var(--ink);
  font-weight: 700; font-size: 15px;
}
.managecat-item .mc-sub { color: var(--muted); font-weight: 600; font-size: 12.5px; }
.managecat-item.child { margin-left: 22px; width: calc(100% - 22px); }

/* ───────── Profilo ───────── */
.card {
  background: var(--card); border: 1.5px solid var(--border); border-radius: var(--radius);
  padding: 16px; margin-bottom: 14px; box-shadow: var(--shadow);
}
.card h3 { margin-top: 0; }
.pf-email { color: var(--muted); font-size: 13px; }
.time-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }

/* ───────── Livello: clessidre, titoli, personaggi ───────── */
/* La scena: la fascia col titolo onorifico e il Franklin che indossi */
.liv-scena {
  position: relative; text-align: center; margin: 4px 0 12px;
  background: linear-gradient(180deg, var(--card), transparent);
  border-radius: 22px; padding: 14px 10px 4px;
}
/* Titolo al centro e, di fianco, la scritta piccola che apre i nove gradini:
   è una cosa che si guarda ogni tanto, non un pulsante da primo piano. */
.liv-fascia { display: flex; align-items: center; justify-content: center; gap: 8px; }
.liv-titolo {
  display: inline-block; padding: 6px 18px; border-radius: 999px;
  font-weight: 800; font-size: 15px; letter-spacing: .3px;
  box-shadow: var(--shadow); min-height: 16px;
}
.liv-titoli-link {
  background: none; border: 0; padding: 4px 6px; cursor: pointer;
  color: var(--muted); font-family: inherit; font-size: 12.5px;
  font-weight: 700; text-decoration: underline; text-underline-offset: 3px;
}
.liv-fr {
  display: block; width: 170px; max-width: 52%; height: auto; margin: 2px auto 0;
  animation: livIn .35s ease;
}
@keyframes livIn { from { opacity: 0; transform: translateY(8px) scale(.96); } to { opacity: 1; transform: none; } }

.liv-conti { display: flex; gap: 10px; text-align: center; padding: 12px; }
.liv-num { flex: 1; }
.liv-num b { display: block; font-size: 26px; font-weight: 800; line-height: 1.1; }
.liv-num small { display: block; font-size: 11.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .4px; margin-top: 2px; }

.liv-prog { height: 10px; background: var(--border); border-radius: 999px; overflow: hidden; margin: 12px 0 4px; }
.liv-prog i { display: block; height: 100%; width: 0; border-radius: 999px; transition: width .45s ease; }

/* Il negozio */
.shop-fascia {
  display: flex; align-items: center; justify-content: space-between;
  margin: 16px 0 8px;
}
.shop-fascia small { color: var(--muted); font-size: 12px; font-weight: 700; }
.rar {
  display: inline-block; padding: 3px 11px; border-radius: 999px;
  font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .5px;
}
.rar-base { background: #e9e2d8; color: #7b7167; }
.rar-comune { background: #d9ecd6; color: #3f6b45; }
.rar-raro { background: #d3e3f7; color: #2f5f93; }
.rar-epico { background: #e2d6f5; color: #5b3f93; }
.rar-leggendario { background: #ffe6a1; color: #8a6100; }

.shop-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
.shop-card {
  position: relative; background: var(--card); border: 1.5px solid var(--border);
  border-radius: 16px; padding: 8px 4px 7px; text-align: center; cursor: pointer;
  font-family: inherit; color: var(--ink); transition: transform .12s ease;
}
.shop-card:active { transform: scale(.96); }
/* Altezza fissa e larghezza libera: i personaggi hanno sagome diverse ma
   nella griglia devono poggiare tutti sulla stessa riga di terra. */
.shop-card img { height: 96px; width: auto; max-width: 100%; display: block; margin: 0 auto; }
.shop-card b { display: block; font-size: 12px; line-height: 1.2; margin-top: 2px; }
.shop-card small { display: block; font-size: 11.5px; color: var(--muted); font-weight: 700; margin-top: 2px; }
/* Non tuo: spento, ma si vede lo stesso — serve a farlo desiderare */
.shop-card:not(.avuto) img { filter: grayscale(1) opacity(.42); }
.shop-lock { position: absolute; top: 6px; right: 7px; font-size: 13px; opacity: .55; }
.shop-card.indossato { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(255, 107, 87, .22); }
.shop-card.indossato small { color: var(--accent-dark); }

/* ── Il negozio dei bauli ── */
.bauli-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.baule-card {
  position: relative; background: var(--card); border: 1.5px solid var(--border);
  border-radius: 18px; padding: 10px 8px 12px; text-align: center; cursor: pointer;
  font-family: inherit; color: var(--ink); transition: transform .12s ease;
}
.baule-card:active { transform: scale(.96); }
.baule-card img { width: 100%; height: auto; display: block; margin-bottom: 6px; }
.baule-card b { display: block; font-size: 15px; margin-top: 6px; }
.baule-card small { display: block; font-size: 11.5px; color: var(--muted); font-weight: 700; margin-top: 2px; }
/* Chiuso: si vede, ma si capisce che non è ancora tuo */
.baule-card.chiuso img { filter: grayscale(1) opacity(.45); }
.baule-card.finito { border-color: var(--green); }
.baule-card.finito b { color: var(--green); }

.baule-testa { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.baule-testa img { width: 96px; height: 96px; flex: 0 0 96px; }
.baule-testa p { margin: 6px 0 0; font-size: 13.5px; }

/* Le sagome: sai quanti costumi ci sono, non quali */
.shop-grid.misteri .shop-card { cursor: default; }
.shop-card.mistero img { filter: none; opacity: .8; }
.shop-card.mistero b { color: var(--muted); letter-spacing: 2px; }

/* ── L'apertura del baule ── */
.apertura {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(20, 14, 8, .93);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.apertura.hidden { display: none; }
.ap-dentro { position: relative; text-align: center; width: 100%; max-width: 340px; }
/* Palco ad altezza fissa: baule e carta stanno uno sopra l'altro nello stesso
   punto, e il titolo col pulsante restano fermi sotto mentre l'uno diventa
   l'altro. */
.ap-palco { position: relative; height: 366px; }
.ap-baule {
  position: absolute; left: 50%; top: 90px; margin-left: -90px;
  width: 180px; height: 180px; display: block;
  transform-origin: 50% 85%;
}
.apertura.attiva .ap-baule { animation: bauleTrema .7s ease-in-out; }
.apertura.scoppio .ap-baule { animation: bauleApre .45s ease forwards; }
@keyframes bauleTrema {
  0%, 100% { transform: rotate(0) scale(1); }
  15% { transform: rotate(-7deg) scale(1.04); }
  30% { transform: rotate(7deg) scale(1.04); }
  45% { transform: rotate(-9deg) scale(1.07); }
  60% { transform: rotate(9deg) scale(1.07); }
  80% { transform: rotate(-4deg) scale(1.1); }
}
@keyframes bauleApre {
  to { transform: scale(2.2); opacity: 0; }
}

.ap-fuochi { position: absolute; inset: 0; pointer-events: none; }
.ap-fuochi i {
  position: absolute; left: 50%; top: 50%;
  width: 9px; height: 9px; border-radius: 50%;
  opacity: 0; animation: scintilla 1.5s ease-out forwards;
}
@keyframes scintilla {
  0%   { opacity: 0; transform: translate(0, 0) scale(.4); }
  12%  { opacity: 1; transform: translate(calc(var(--x) * .35), calc(var(--y) * .35)) scale(1.1); }
  100% { opacity: 0; transform: translate(var(--x), calc(var(--y) + 70px)) scale(.3); }
}

.ap-titolo {
  color: #ffd95e; font-size: 22px; font-weight: 800; letter-spacing: .5px;
  margin: 10px 0 16px; opacity: 0; transition: opacity .4s ease .1s;
}
.apertura.carta .ap-titolo { opacity: 1; }
.apertura #ap-chiudi { opacity: 0; pointer-events: none; transition: opacity .4s ease .2s; }
.apertura.carta #ap-chiudi { opacity: 1; pointer-events: auto; }

/* La carta del costume: entra girandosi, come si scopre una figurina */
.ap-carta {
  position: absolute; left: 50%; top: 8px; width: 240px; margin-left: -120px;
  background: var(--card); border-radius: 22px; padding: 16px 14px 18px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .5);
  opacity: 0; transform: rotateY(90deg) scale(.8); pointer-events: none;
}
.apertura.carta .ap-carta {
  animation: cartaGira .6s cubic-bezier(.2, .9, .3, 1.2) forwards;
}
@keyframes cartaGira {
  0%   { opacity: 0; transform: rotateY(90deg) scale(.8); }
  60%  { opacity: 1; transform: rotateY(-12deg) scale(1.05); }
  100% { opacity: 1; transform: rotateY(0) scale(1); }
}
.ap-carta img { height: 196px; width: auto; display: block; margin: 8px auto 6px; }
.ap-carta b { display: block; font-size: 18px; }
.ap-carta small { display: block; font-size: 12.5px; color: var(--muted); margin-top: 4px; line-height: 1.35; }

@media (prefers-reduced-motion: reduce) {
  .apertura .ap-baule, .apertura .ap-carta, .ap-fuochi i { animation: none; }
  .apertura.carta .ap-carta { opacity: 1; transform: none; }
}

/* Un personaggio, con la sua curiosità */
.look-big { text-align: center; margin-bottom: 12px; }
/* Contenuto: il bottone per comprare deve restare visibile senza scorrere */
.look-big img { width: 150px; max-width: 48%; height: auto; display: block; margin: 0 auto 8px; }
.curio { background: var(--bg); border-radius: 16px; padding: 12px 14px; }
.curio-tag { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .6px; color: var(--accent-dark); }
.curio h4 { margin: 6px 0 6px; font-size: 16px; }
.curio p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--muted); }
.curio.locked { text-align: center; }
.curio.locked .curio-tag { color: var(--muted); }

/* I nove titoli */
.tit-riga {
  display: flex; align-items: center; gap: 12px; padding: 9px 4px;
  border-bottom: 1px solid var(--border); opacity: .55;
}
.tit-riga:last-child { border-bottom: 0; }
.tit-riga.fatto, .tit-riga.ora { opacity: 1; }
.tit-riga.ora { background: var(--bg); border-radius: 12px; padding-left: 8px; padding-right: 8px; }
.tit-n {
  width: 30px; height: 30px; flex: 0 0 30px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 14px;
}
.tit-riga div { flex: 1; }
.tit-riga small { display: block; font-size: 12px; color: var(--muted); }
.tit-ok { color: var(--green); font-weight: 800; }

/* ───────── Ricompense ───────── */
.badge-list { display: flex; flex-direction: column; gap: 10px; }
.badge-item {
  background: var(--card); border: 1.5px solid var(--border); border-radius: 16px;
  padding: 12px 14px; display: flex; align-items: center; gap: 12px;
  box-shadow: var(--shadow);
}
.badge-item .badge-emoji { font-size: 26px; }
.week-bars { display: flex; align-items: flex-end; gap: 24px; height: 100px; margin: 10px 0 6px; }
.week-bar-col { text-align: center; flex: 1; font-weight: 700; }
.week-bar { background: var(--accent); border-radius: 10px 10px 0 0; margin: 0 auto; width: 46px; }
.week-bar.prev { background: var(--border); }

/* ───────── Toast + confetti ───────── */
.toast {
  position: fixed; bottom: 96px; left: 50%; transform: translateX(-50%);
  background: var(--ink); color: var(--bg); padding: 11px 20px; border-radius: 24px;
  font-size: 14px; font-weight: 600; z-index: 60; opacity: 0; pointer-events: none;
  transition: opacity .2s ease, transform .2s ease; max-width: 88vw; text-align: center;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(-6px); pointer-events: auto; }

#confetti-layer { position: fixed; inset: 0; pointer-events: none; z-index: 70; overflow: hidden; }
.confetto {
  position: absolute; font-size: 22px;
  animation: confetti-fall 1.4s ease-in forwards;
}
@keyframes confetti-fall {
  0% { transform: translateY(-10px) rotate(0deg) scale(1); opacity: 1; }
  100% { transform: translateY(75vh) rotate(360deg) scale(0.7); opacity: 0; }
}

.td-created { color: var(--muted); font-size: 12.5px; margin-bottom: 10px; }
#td-photo-box img { width: 100%; border-radius: 16px; margin-bottom: 10px; }

/* ───────── Inbox / cattura rapida ───────── */
.inbox-btn { background: var(--sunny); color: #4a3200; box-shadow: 0 4px 14px rgba(255, 201, 77, .4); }
.center-hint { text-align: center; font-size: 12px; margin-top: 2px; }
.inbox-item {
  background: var(--card); border: 1.5px solid var(--border); border-radius: 16px;
  padding: 12px 14px; margin-bottom: 10px;
}
.inbox-item .ib-title { font-weight: 700; margin-bottom: 8px; }
.inbox-item .ib-row { display: flex; gap: 8px; align-items: center; }
.inbox-item select { margin-bottom: 0; flex: 1; padding: 9px 10px; font-size: 14px; }
.inbox-item .ib-ok { padding: 9px 14px; border-radius: 12px; border: none; background: var(--green); color: white; font-weight: 800; }
.inbox-item .ib-del { background: none; border: none; color: var(--muted); font-size: 16px; padding: 6px; }

/* ───────── Swipe sulle task ───────── */
.task-swipe-wrap { position: relative; margin-bottom: 10px; }
.task-swipe-wrap .task-item { margin-bottom: 0; position: relative; z-index: 2; background: var(--card); touch-action: pan-y; }
.swipe-under {
  position: absolute; inset: 0; border-radius: 18px; z-index: 1;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 18px; font-size: 20px; font-weight: 800;
}
.swipe-under .su-right { color: white; }
.swipe-under .su-left { color: white; margin-left: auto; }
.swipe-under.reveal-done { background: var(--green); }
.swipe-under.reveal-actions { background: var(--sunny); }

/* ───────── Checklist ───────── */
.check-item {
  display: flex; align-items: center; gap: 10px;
  background: var(--card); border: 1.5px solid var(--border);
  border-radius: 12px; padding: 9px 12px; margin-bottom: 7px;
}
.check-item .ck-box {
  width: 22px; height: 22px; border-radius: 7px; border: 2px solid var(--accent);
  background: transparent; color: white; font-size: 13px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.check-item .ck-box.done { background: var(--green); border-color: var(--green); }
.check-item .ck-text { flex: 1; font-size: 14px; font-weight: 600; }
.check-item.done .ck-text { text-decoration: line-through; color: var(--muted); }
.check-item .ck-del { background: none; border: none; color: var(--muted); padding: 2px 4px; }
.check-add-row { display: flex; gap: 8px; margin-bottom: 12px; }
.check-add-row input { margin-bottom: 0; flex: 1; }
.check-progress { font-size: 12px; }

/* ───────── Focus mode ───────── */
#focus-overlay {
  position: fixed; inset: 0; z-index: 90;
  background: radial-gradient(circle at 50% 20%, #3a2c22, #1c1611 70%);
  display: flex; align-items: center; justify-content: center;
  animation: fadeIn .25s ease;
}
.focus-inner { text-align: center; padding: 30px; max-width: 420px; width: 100%; }
.focus-cat { font-size: 54px; margin-bottom: 8px; }
.focus-title { color: #fff; font-size: 22px; font-weight: 800; margin-bottom: 20px; }
.focus-timer {
  color: var(--sunny); font-size: 64px; font-weight: 800;
  font-variant-numeric: tabular-nums; margin-bottom: 6px; letter-spacing: 2px;
}
.focus-timer.overtime { color: var(--accent); animation: pulseTimer 1s ease infinite; }
@keyframes pulseTimer { 0%,100% { opacity: 1; } 50% { opacity: .5; } }
.focus-sub { color: #b7a795; margin-bottom: 30px; font-weight: 600; }

/* ───────── Toast con azione ───────── */
.toast button {
  background: none; border: none; color: var(--sunny);
  font-weight: 800; font-size: 14px; margin-left: 12px; padding: 0;
}
@media (prefers-color-scheme: light) {
  .toast button { color: #ffd166; }
}

/* ───────── Toggle all'aperto ───────── */
.outdoor-toggle {
  width: 100%; text-align: left;
  background: var(--card); border: 1.5px solid var(--border); border-radius: 16px;
  padding: 12px 14px; margin-bottom: 12px; color: var(--ink);
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  font-weight: 700; font-size: 15px;
}
.outdoor-toggle small { display: block; width: 100%; color: var(--muted); font-weight: 500; }
.outdoor-toggle.on { border-color: var(--green); background: #e9f9ef; }
@media (prefers-color-scheme: dark) {
  .outdoor-toggle.on { background: #1d3327; }
}

.tag.snooze-tag { background: #e8e3f8; color: #5b4a9e; }
@media (prefers-color-scheme: dark) {
  .tag.snooze-tag { background: #2e2749; color: #b3a4e8; }
}
.tag.recur-tag { background: #dff2f5; color: #216a76; }
@media (prefers-color-scheme: dark) {
  .tag.recur-tag { background: #16333a; color: #7fc7d4; }
}

/* ───────── Interruttori impostazioni notifiche ───────── */
.switch-row {
  width: 100%; display: flex; align-items: center; gap: 11px;
  background: var(--card); border: 1.5px solid var(--border);
  border-radius: 16px; padding: 12px 14px; margin-bottom: 9px;
  color: var(--ink); text-align: left;
}
.switch-row.on { border-color: var(--green); }
.switch-row .sw-icon { font-size: 20px; flex-shrink: 0; }
.switch-row .sw-text { flex: 1; min-width: 0; }
.switch-row .sw-text strong { display: block; font-size: 14.5px; font-weight: 800; }
.switch-row .sw-text small { display: block; color: var(--muted); font-size: 12px; margin-top: 2px; line-height: 1.35; }
.switch-row .sw-toggle {
  width: 44px; height: 26px; border-radius: 20px; background: var(--border);
  position: relative; flex-shrink: 0; transition: background .2s ease;
}
.switch-row .sw-toggle::after {
  content: ""; position: absolute; top: 3px; left: 3px;
  width: 20px; height: 20px; border-radius: 50%; background: #fff;
  transition: transform .2s ease; box-shadow: 0 1px 3px rgba(0,0,0,.25);
}
.switch-row.on .sw-toggle { background: var(--green); }
.switch-row.on .sw-toggle::after { transform: translateX(18px); }
.indent-row { padding-left: 10px; margin-bottom: 6px; }
#modal-notif h4 {
  margin: 20px 0 10px; font-size: 13px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .5px; color: var(--muted);
}

/* ───────── Diagnostica notifiche ───────── */
.diag-list { margin-bottom: 12px; }
.diag-row {
  display: flex; align-items: center; gap: 8px;
  font-size: 13.5px; font-weight: 600; padding: 5px 0;
  border-bottom: 1px solid var(--border);
}
.diag-row:last-child { border-bottom: none; }
.diag-row .diag-label { flex: 1; color: var(--muted); font-weight: 500; }
.diag-row .diag-val { font-weight: 800; }
.diag-row.ok .diag-val { color: var(--green); }
.diag-row.ko .diag-val { color: var(--accent-dark); }
.diag-row.warn .diag-val { color: #b45309; }
@media (prefers-color-scheme: dark) { .diag-row.warn .diag-val { color: #fbbf24; } }
.info-box ol { margin: 6px 0 0; padding-left: 20px; }
.info-box li { margin-bottom: 4px; }

/* ───────── Modali secondari sopra quelli principali ───────── */
#modal-snooze, #modal-conflict, #modal-slot { z-index: 58; }

/* ───────── Categoria ad accordion ───────── */
.acc-group { margin-bottom: 10px; }
.acc-head {
  width: 100%; display: flex; align-items: center; gap: 10px;
  background: var(--card); border: 1.5px solid var(--border);
  border-radius: 16px; padding: 12px 14px; color: var(--ink);
  font-weight: 800; font-size: 15px; text-align: left;
  box-shadow: var(--shadow);
}
.acc-head.open { border-color: var(--accent); }
.acc-head .acc-icon { font-size: 19px; flex-shrink: 0; }
.acc-head .acc-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acc-head .acc-count {
  background: var(--accent); color: white; font-size: 11.5px; font-weight: 800;
  border-radius: 20px; min-width: 21px; height: 21px; padding: 0 6px;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.acc-head .acc-count.zero { background: var(--border); color: var(--muted); }
.acc-head .acc-arrow { font-size: 12px; color: var(--muted); transition: transform .2s ease; flex-shrink: 0; }
.acc-head.open .acc-arrow { transform: rotate(90deg); }
/* Le bacheche dentro "Insieme": non si aprono a fisarmonica, ci si entra */
.board-row-cat { border-left: 4px solid var(--accent); }
.board-row-cat .acc-go { font-size: 20px; color: var(--muted); flex-shrink: 0; margin-left: 2px; }
.acc-body { padding: 10px 0 2px 8px; }
.acc-empty { color: var(--muted); font-size: 13px; padding: 6px 0 10px 6px; }
.acc-add {
  width: 100%; border: 1.5px dashed var(--border); background: transparent;
  border-radius: 14px; padding: 10px; color: var(--muted); font-weight: 700; font-size: 13.5px;
  margin-bottom: 8px;
}

/* ───────── Blocchi calendario cliccabili ───────── */
.cal-block.clickable { cursor: pointer; }
.cal-block.clickable:active { transform: scale(0.99); }
.cal-block .cb-go { color: var(--muted); font-size: 15px; flex-shrink: 0; }

/* ───────── Periodi: ferie e vacanza ───────── */
.special-row { display: flex; gap: 8px; margin-bottom: 14px; }
.special-btn {
  flex: 1; text-align: left; padding: 11px 12px;
  border-radius: 16px; border: 1.5px solid var(--border);
  background: var(--card); color: var(--ink);
  font-weight: 800; font-size: 14px;
}
.special-btn small { display: block; color: var(--muted); font-weight: 500; font-size: 11.5px; margin-top: 2px; }
.special-btn.holiday-btn.on { border-color: #f59e0b; background: #fff5e0; color: #b45309; }
.special-btn.vacation-btn.on { border-color: #0ea5e9; background: #e2f4fd; color: #0369a1; }
@media (prefers-color-scheme: dark) {
  .special-btn.holiday-btn.on { background: #3b2a10; color: #fbbf24; }
  .special-btn.vacation-btn.on { background: #10293b; color: #7dd3fc; }
}

.range-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 10px; }
.info-box {
  background: var(--sunny-soft); border-radius: 14px; padding: 11px 13px;
  font-size: 13px; line-height: 1.45; color: var(--ink); margin-bottom: 12px;
}
#ov-exempt-chips button.selected { background: var(--green); border-color: var(--green); color: #fff; }

.cal-block.holiday-blk { background: #fff5e0; border-color: #fcd34d; }
.cal-block.holiday-blk .cb-time { color: #b45309; }
.cal-block.vacation-blk { background: #e2f4fd; border-color: #7dd3fc; }
.cal-block.vacation-blk .cb-time { color: #0369a1; }
@media (prefers-color-scheme: dark) {
  .cal-block.holiday-blk { background: #3b2a10; border-color: #6b4d16; }
  .cal-block.holiday-blk .cb-time { color: #fbbf24; }
  .cal-block.vacation-blk { background: #10293b; border-color: #1e4a63; }
  .cal-block.vacation-blk .cb-time { color: #7dd3fc; }
}
.period-banner {
  border-radius: 16px; padding: 11px 14px; margin-bottom: 10px;
  font-weight: 700; font-size: 14px; display: flex; align-items: center; gap: 8px;
}
.period-banner.holiday { background: #fff5e0; color: #b45309; }
.period-banner.vacation { background: #e2f4fd; color: #0369a1; }
@media (prefers-color-scheme: dark) {
  .period-banner.holiday { background: #3b2a10; color: #fbbf24; }
  .period-banner.vacation { background: #10293b; color: #7dd3fc; }
}
.period-banner .pb-del { margin-left: auto; background: none; border: none; color: inherit; opacity: .7; font-size: 15px; }
.commit-suspended { opacity: .45; text-decoration: line-through; }

/* ───────── Task importanti (blu) ───────── */
:root { --important: #1d4ed8; }
@media (prefers-color-scheme: dark) { :root { --important: #82aaff; } }
.important-title { color: var(--important) !important; font-weight: 800 !important; }
.imp-toggle {
  width: 100%; text-align: left;
  background: var(--card); border: 1.5px solid var(--border); border-radius: 16px;
  padding: 12px 14px; margin-bottom: 12px; color: var(--ink);
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  font-weight: 800; font-size: 15px;
}
.imp-toggle small { display: block; width: 100%; color: var(--muted); font-weight: 500; }
.imp-toggle.on { border-color: var(--important); background: #e8efff; color: var(--important); }
@media (prefers-color-scheme: dark) { .imp-toggle.on { background: #1c2a4a; } }
.tag.imp-tag { background: #e8efff; color: var(--important); font-weight: 800; }
@media (prefers-color-scheme: dark) { .tag.imp-tag { background: #1c2a4a; } }
/* "Anche se sono impegnato" è un'altra cosa dall'importante: colore diverso,
   se no sembrano due interruttori che fanno la stessa cosa. */
.imp-toggle.anytime.on { border-color: #b07d1a; background: #fdf1d6; color: #8a6100; }
@media (prefers-color-scheme: dark) { .imp-toggle.anytime.on { background: #3a2f14; color: #f0c565; } }
.tag.busy-tag { background: #fdf1d6; color: #8a6100; font-weight: 800; }
@media (prefers-color-scheme: dark) { .tag.busy-tag { background: #3a2f14; color: #f0c565; } }

.slot-hint { font-size: 12.5px; color: var(--muted); font-weight: 600; margin: -4px 0 12px; min-height: 16px; }

/* ───────── Puntini ruota (stile Instagram) ───────── */
.wheel-dots { display: flex; gap: 7px; justify-content: center; align-items: center; padding: 10px 0 10px; min-height: 22px; }
.wheel-dots button {
  width: 8px; height: 8px; border-radius: 50%;
  border: none; background: var(--border); padding: 0;
  transition: transform .15s ease, background .15s ease;
}
.wheel-dots button.on { background: var(--accent); transform: scale(1.3); }

/* ───────── Riordino categorie ───────── */
.managecat-item { position: relative; }
.mc-arrows { margin-left: auto; display: flex; gap: 4px; flex-shrink: 0; }
.mc-arrows span {
  width: 30px; height: 30px; border-radius: 10px;
  border: 1.5px solid var(--border); background: var(--bg);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; color: var(--muted);
}

/* ───────── Popup conflitto ───────── */
.conflict-opt {
  display: flex; align-items: center; gap: 10px; width: 100%;
  background: var(--card); border: 1.5px solid var(--border); border-radius: 16px;
  padding: 13px 15px; margin-bottom: 10px; text-align: left; color: var(--ink);
  font-weight: 700; font-size: 14.5px;
}
.conflict-opt .co-badge {
  font-size: 11px; font-weight: 800; border-radius: 8px; padding: 3px 7px; flex-shrink: 0;
}
.conflict-opt .co-badge.imp { background: #e8efff; color: var(--important); }
.conflict-opt .co-badge.sched { background: var(--sunny-soft); color: #7c5a00; }
@media (prefers-color-scheme: dark) {
  .conflict-opt .co-badge.imp { background: #1c2a4a; }
  .conflict-opt .co-badge.sched { color: #ffd98a; }
}

/* ───────── Selettore lingua ───────── */
.lang-row { display: flex; gap: 8px; justify-content: center; margin-bottom: 18px; }
.lang-row button {
  padding: 8px 14px; border-radius: 20px;
  border: 1.5px solid var(--border); background: var(--card);
  font-weight: 700; font-size: 13.5px; color: var(--ink);
}
.lang-row button.selected { background: var(--ink); border-color: var(--ink); color: var(--bg); }

/* ───────── Vista settimana / mese ───────── */
.cal-tabs button { font-size: 13px; padding: 9px 4px; }
.cal-range-label { flex: 1; text-align: center; font-weight: 800; font-size: 15.5px; }
.week-day {
  background: var(--card); border: 1.5px solid var(--border); border-radius: 16px;
  padding: 11px 13px; margin-bottom: 10px;
}
.week-day.today-day { border-color: var(--accent); }
.week-day.past-day { opacity: .45; }
.month-cell.past-cell { opacity: .3; }
.week-day-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 6px; }
.week-day-name { font-weight: 800; font-size: 14px; }
.week-day.today-day .week-day-name { color: var(--accent-dark); }
.week-day-date { color: var(--muted); font-size: 12.5px; font-weight: 600; }
.week-task {
  display: flex; align-items: center; gap: 8px; width: 100%;
  background: var(--bg); border: none; border-radius: 12px;
  padding: 8px 10px; margin-bottom: 6px; text-align: left; color: var(--ink);
  font-weight: 600; font-size: 13.5px;
}
.week-task:last-child { margin-bottom: 0; }
.week-task .wt-icon { flex-shrink: 0; }
.week-task .wt-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.week-task.overdue-task .wt-title { color: var(--accent-dark); }
.week-empty-line { color: var(--muted); font-size: 12.5px; }

.month-grid-head { display: grid; grid-template-columns: repeat(7, 1fr); margin-bottom: 4px; }
.month-grid-head span { text-align: center; font-size: 11px; font-weight: 800; color: var(--muted); text-transform: uppercase; }
.month-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin-bottom: 14px; }
.month-cell {
  aspect-ratio: 1 / 1.05;
  border-radius: 12px; border: 1.5px solid transparent;
  background: var(--card);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  font-weight: 700; font-size: 13.5px; color: var(--ink);
  position: relative; padding: 0;
}
.month-cell.other-month { opacity: 0.32; }
.month-cell.today-cell { border-color: var(--accent); }
.month-cell.selected-cell { background: var(--ink); color: var(--bg); }
.month-cell .mc-count {
  min-width: 17px; height: 17px; border-radius: 10px;
  background: var(--accent); color: white;
  font-size: 10px; font-weight: 800;
  display: flex; align-items: center; justify-content: center; padding: 0 4px;
}
.month-cell.selected-cell .mc-count { background: var(--sunny); color: #4a3200; }
.month-cell .mc-dot-space { height: 17px; }

/* ───────── Tutorial a vignette ───────── */
#tour-overlay { position: fixed; inset: 0; z-index: 85; }
#tour-highlight {
  position: absolute;
  border-radius: 20px;
  box-shadow: 0 0 0 9999px rgba(22, 13, 6, 0.62), 0 0 0 3px var(--sunny);
  transition: all .35s ease;
  pointer-events: none;
}
#tour-bubble {
  position: absolute;
  background: var(--card);
  border-radius: 20px;
  padding: 16px 18px;
  width: min(310px, calc(100vw - 24px));
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
  transition: left .35s ease, top .35s ease;
  animation: bubblePop .3s ease;
}
@keyframes bubblePop { from { transform: scale(.92); opacity: 0; } to { transform: none; opacity: 1; } }
.tour-title { font-weight: 800; font-size: 16.5px; margin-bottom: 6px; }
.tour-text { color: var(--muted); font-size: 14px; line-height: 1.5; margin-bottom: 12px; }
.tour-dots { display: flex; gap: 5px; margin-bottom: 12px; }
.tour-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--border); }
.tour-dot.on { background: var(--accent); }
.tour-btns { display: flex; gap: 8px; justify-content: flex-end; }
.tour-btns button {
  border: none; border-radius: 30px; padding: 10px 18px;
  font-weight: 700; font-size: 14px;
}
.tour-skip { background: transparent; color: var(--muted); }
.tour-next { background: var(--accent); color: white; }

.hidden { display: none !important; }

/* ═══════════════ SBRIGHIAMOLO INSIEME ═══════════════ */
:root {
  --candy-link: #5b8def;
  --candy-group: #9061f9;
}

.bottom-nav button { position: relative; }
.nav-dot {
  position: absolute; top: 4px; right: calc(50% - 18px);
  width: 9px; height: 9px; border-radius: 50%; background: var(--accent);
  box-shadow: 0 0 0 2px var(--card);
}

.code-card { text-align: center; }
/* Voce 18: il QR dell'invito, per due persone nella stessa stanza. Sfondo
   bianco sempre, anche col tema scuro: un QR su fondo scuro non si inquadra. */
.inv-qr { background: #fff; border-radius: 14px; padding: 14px; margin: 10px 0; text-align: center; }
.inv-qr svg { width: 200px; height: 200px; display: block; margin: 0 auto; }
.inv-qr .hint-text { color: #6d6154; margin: 10px 0 0; }

/* ── La pagina del collegamento, ridisegnata ──
   Una testa con l'iniziale colorata e la matita per cambiare colore, un'azione
   principale grande, il resto in riquadri. Prima erano otto bottoncini in fila. */
.lk-testa {
  background: var(--card); border: 1px solid var(--border); border-left: 4px solid #e8734a;
  border-radius: 18px; padding: 14px 15px; margin-bottom: 12px;
}
.lk-chi { display: flex; align-items: center; gap: 12px; }
.lk-avwrap { position: relative; flex-shrink: 0; }
.lk-avwrap .lh-avatar { margin: 0; }
.lk-matita {
  position: absolute; right: -6px; bottom: -6px; height: 26px; width: 26px;
  border-radius: 999px; border: 1px solid var(--border); background: var(--card);
  font-size: 13px; line-height: 1; padding: 0; cursor: pointer;
  box-shadow: 0 2px 8px rgba(80, 50, 20, .18);
}
.lh-avatar.grp-av { background: var(--sunny-soft); font-size: 24px; }
.lk-nome { min-width: 0; }
.lk-nome b { display: block; font-size: 18px; letter-spacing: -.3px; }
.lk-nome small { color: var(--muted); font-size: 11.5px; }
.lk-colori { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.lk-testa .lh-stats { margin-top: 12px; }
.lk-principale { margin: 2px 0 10px; }
.lk-griglia { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 6px; }
.lk-azione {
  background: var(--card); border: 1px solid var(--border); border-radius: 15px;
  padding: 11px 8px; font: inherit; cursor: pointer; text-align: center; color: var(--ink);
  display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 0;
}
.lk-azione span { font-size: 20px; line-height: 1.2; }
.lk-azione small {
  font-size: 11.5px; font-weight: 700; color: #6d6154;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%;
}
.lk-azione:active { transform: scale(.97); }
.lk-scollega { display: block; margin: 18px auto 4px; color: var(--danger, #d94f3d); }

/* Voce 23: la tendina dei parcheggiati in fondo a Tutte le task */
.at-tendina { margin: 16px 0 30px; border: 1px dashed var(--border); border-radius: 15px; padding: 4px 12px 8px; }
.at-tendina summary { padding: 10px 0; font-weight: 800; font-size: 13.5px; color: var(--muted); cursor: pointer; }

/* Voce 17: le righe di aggiunta rapida nella pagina del figlio */
.fg-aggiungi { background: var(--card); border: 1px dashed var(--border); border-radius: 15px; padding: 12px; margin-top: 4px; }
.fg-aggiungi input { margin-bottom: 8px; }
.fg-aggiungi .btn { margin-top: 4px; }
@media (prefers-color-scheme: dark) {
  .lk-azione small { color: #b5a893; }
}

/* Voce 15: le ricorrenze a turni — la riga che dice a chi tocca */
.rt-turno {
  margin-top: 8px; display: flex; align-items: center; gap: 7px;
  background: #eef4fb; border: 1px solid #d3e2f2; border-radius: 12px;
  padding: 9px 11px; font-size: 12.5px; color: #2d5580; font-weight: 700;
}
.rt-turno.mio { background: #eaf6ee; border-color: #cfe7d7; color: #2c6b45; }
.rt-turno.attesa { background: #fff4dd; border-color: #f0dcae; color: #8a6a24; }
.rt-tag { margin-top: 5px; font-size: 11px; color: var(--muted); }
@media (prefers-color-scheme: dark) {
  .rt-turno { background: #232a33; border-color: #2e3a47; color: #9cc0e8; }
  .rt-turno.mio { background: #22302a; border-color: #2e4237; color: #93ceaa; }
  .rt-turno.attesa { background: #322b1c; border-color: #4a3f26; color: #e0bd72; }
}

.code-pair { display: flex; gap: 10px; margin: 10px 0 12px; }
.code-pair > div {
  flex: 1; background: var(--ink); color: var(--bg); border-radius: 16px; padding: 10px 6px;
}
.code-lbl { display: block; font-size: 10.5px; letter-spacing: 1.2px; text-transform: uppercase; opacity: .6; font-weight: 700; }
.code-val { display: block; font-size: 22px; font-weight: 800; letter-spacing: 2px; margin-top: 3px; font-variant-numeric: tabular-nums; }

.todo-row {
  display: flex; align-items: center; gap: 11px; background: var(--card);
  border: 1.5px solid var(--border); border-left: 4px solid var(--sunny);
  border-radius: 16px; padding: 11px 13px; margin-bottom: 9px; box-shadow: var(--shadow);
}
.todo-row .tr-ico { font-size: 20px; flex-shrink: 0; }
.todo-row .tr-body { flex: 1; min-width: 0; }
.todo-row .tr-title { font-weight: 800; font-size: 14px; }
.todo-row .tr-sub { color: var(--muted); font-size: 12px; margin-top: 2px; line-height: 1.35; }
.todo-row .tr-actions { display: flex; flex-direction: column; gap: 5px; flex-shrink: 0; }

.mini-btn {
  border: 1.5px solid var(--border); background: var(--card); color: var(--ink);
  border-radius: 14px; padding: 7px 11px; font-size: 12.5px; font-weight: 700; cursor: pointer;
  white-space: nowrap; font-family: inherit;
}
.mini-btn.ok { background: var(--green); border-color: var(--green); color: #fff; }
.mini-btn.danger { color: var(--accent-dark); border-color: #f3cfc8; }

.person-card {
  background: var(--card); border: 1.5px solid var(--border); border-radius: 18px;
  padding: 13px 14px; margin-bottom: 10px; box-shadow: var(--shadow);
  border-left: 4px solid var(--candy-link);
}
.person-card.group { border-left-color: var(--candy-group); }
.pc-top { display: flex; align-items: center; gap: 10px; }
.pc-avatar {
  width: 38px; height: 38px; border-radius: 50%; background: var(--candy-link); color: #fff;
  display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 17px; flex-shrink: 0;
}
.pc-avatar.grp { background: var(--candy-group); }
.pc-name { flex: 1; font-weight: 800; font-size: 15.5px; min-width: 0; }
.pc-candy {
  background: var(--candy-link); color: #fff; border-radius: 20px; padding: 4px 10px;
  font-size: 12.5px; font-weight: 800; white-space: nowrap;
}
.pc-candy.grp { background: var(--candy-group); }
.pc-sub { color: var(--muted); font-size: 12.5px; margin-top: 7px; line-height: 1.4; }
.pc-code { font-size: 12.5px; margin-top: 6px; color: var(--muted); }
.pc-code b { color: var(--ink); letter-spacing: 1.5px; }
.pc-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }

.board-row {
  display: flex; align-items: center; gap: 10px; background: var(--card);
  border: 1.5px dashed var(--border); border-radius: 16px; padding: 11px 12px; margin-bottom: 9px;
}
.board-row.taken { border-style: solid; background: var(--sunny-soft); }
.board-row .br-ico { font-size: 19px; flex-shrink: 0; }
.board-row .br-body { flex: 1; min-width: 0; }
.board-row .br-title { font-weight: 700; font-size: 14px; }
.board-row .br-sub { color: var(--muted); font-size: 12px; margin-top: 2px; }
.board-row .br-actions { display: flex; flex-direction: column; gap: 5px; flex-shrink: 0; align-items: flex-end; }
.take-btn {
  border: none; background: var(--sunny); color: #4a3200; font-weight: 800;
  border-radius: 18px; padding: 8px 13px; font-size: 12.5px; cursor: pointer; font-family: inherit; white-space: nowrap;
}
.take-btn.ok { background: var(--green); color: #fff; }
.val-pill {
  background: var(--candy-group); color: #fff; border-radius: 20px; padding: 4px 9px;
  font-size: 11.5px; font-weight: 800; white-space: nowrap; flex-shrink: 0;
}
.pill {
  background: var(--border); color: var(--muted); border-radius: 12px; padding: 4px 9px;
  font-size: 11px; font-weight: 700; white-space: nowrap;
}
.pill.wait { background: var(--sunny-soft); color: #8a6100; }

.val-pick { display: flex; gap: 7px; margin-bottom: 8px; }
.val-pick button {
  flex: 1; padding: 12px 0; border-radius: 14px; border: 1.5px solid var(--border);
  background: var(--card); color: var(--muted); font-weight: 800; font-size: 15px;
  cursor: pointer; font-family: inherit;
}
.val-pick button.selected { background: var(--candy-group); border-color: var(--candy-group); color: #fff; }
.imp-toggle.selected { border-color: var(--green); background: #e8f8ee; color: #1e7c45; }
.switch-row .sw-ico { font-size: 20px; flex-shrink: 0; }
.divider-line { height: 1px; background: var(--border); margin: 16px 0; }

.member-pick {
  display: flex; align-items: center; gap: 9px; background: var(--card);
  border: 1.5px solid var(--border); border-radius: 14px; padding: 10px 12px; margin-bottom: 7px; cursor: pointer;
}
.member-pick.on { border-color: var(--candy-group); background: #f5efff; }
.member-pick .mp-name { flex: 1; font-weight: 700; font-size: 14px; }
.member-pick .mp-role {
  font-size: 11px; font-weight: 800; border-radius: 10px; padding: 4px 9px;
  background: var(--border); color: var(--muted); text-transform: uppercase; letter-spacing: .3px;
}
.member-pick.on .mp-role { background: #e5d9ff; color: #6b3fd4; }
.member-pick .mp-check { font-size: 17px; color: var(--muted); }
.member-pick.on .mp-check::before { content: "✓"; }
.member-pick.on .mp-check { font-size: 0; color: var(--candy-group); }
.member-pick.on .mp-check::before { font-size: 17px; font-weight: 800; }

.jar-row { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin: 10px 0 18px; }
.jar-mini { width: 84px; text-align: center; }
.jm-glass {
  width: 54px; height: 66px; margin: 0 auto; border: 2.5px solid var(--accent-dark);
  border-radius: 8px 8px 14px 14px; position: relative; overflow: hidden; background: var(--card);
}
.jm-glass i { position: absolute; left: 0; right: 0; bottom: 0; background: var(--candy-link); display: block; }
.jm-glass.grp i { background: var(--candy-group); }
.jm-name { font-size: 12px; font-weight: 800; margin-top: 5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jm-count { font-size: 11.5px; color: var(--muted); font-weight: 600; margin-bottom: 5px; }

.ledger-line {
  display: flex; align-items: center; gap: 10px; padding: 10px 2px;
  border-bottom: 1px solid var(--border); font-size: 13.5px;
}
.ledger-line:last-child { border-bottom: none; }
/* La metà dell'altro nella cronologia del legame: presente ma in punta di piedi */
.ledger-line.sua .ll-title { font-weight: 600; opacity: .85; }
.ll-amt.sua { color: var(--muted); font-weight: 700; }
.ledger-line .ll-body { flex: 1; min-width: 0; }
.ledger-line .ll-title { font-weight: 700; }
.ledger-line .ll-sub { color: var(--muted); font-size: 11.5px; margin-top: 2px; }
.ll-amt { font-weight: 800; white-space: nowrap; }
.ll-amt.plus { color: var(--green); }
.ll-amt.minus { color: var(--accent-dark); }

.balance-strip {
  background: var(--sunny-soft); border-radius: 14px; padding: 10px 14px;
  font-size: 14px; font-weight: 600; margin-bottom: 14px; text-align: center;
}
.prize-card {
  background: var(--card); border: 1.5px solid var(--border); border-radius: 18px;
  overflow: hidden; margin-bottom: 12px; box-shadow: var(--shadow); position: relative;
}
.pz-photo { height: 120px; background: var(--sunny-soft); display: flex; align-items: center; justify-content: center; }
.pz-photo.emoji { font-size: 46px; }
.pz-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pz-limit {
  position: absolute; top: 9px; right: 9px; background: rgba(0,0,0,.55); color: #fff;
  font-size: 11px; font-weight: 700; border-radius: 12px; padding: 3px 9px;
}
.pz-body { padding: 12px 14px; }
.pz-title { font-weight: 800; font-size: 15px; }
.pz-desc { color: var(--muted); font-size: 12.5px; margin-top: 3px; line-height: 1.4; }
.pz-foot { display: flex; align-items: center; gap: 7px; margin-top: 11px; flex-wrap: wrap; }
.price {
  display: inline-flex; align-items: center; gap: 5px; font-weight: 800; font-size: 14px;
  background: var(--sunny-soft); border-radius: 20px; padding: 6px 12px;
}
.redeem {
  margin-left: auto; border: none; background: var(--accent); color: #fff;
  font-weight: 800; border-radius: 20px; padding: 9px 16px; font-size: 13.5px; cursor: pointer; font-family: inherit;
}
.redeem.off { background: var(--border); color: var(--muted); }

.promise-card {
  background: var(--card); border: 1.5px solid var(--border); border-radius: 18px;
  padding: 13px 14px; margin-bottom: 11px; box-shadow: var(--shadow);
}
.prm-head { display: flex; align-items: center; gap: 9px; }
.prm-title { font-weight: 800; font-size: 14.5px; flex: 1; }
.prm-sub { color: var(--muted); font-size: 12.5px; margin: 6px 0 10px; }

.rank-line { display: flex; align-items: center; gap: 10px; padding: 11px 2px; border-bottom: 1px solid var(--border); }
.rank-line:last-of-type { border-bottom: none; }
.rk-pos { font-size: 18px; width: 26px; text-align: center; flex-shrink: 0; }
.rk-body { flex: 1; min-width: 0; }
.rk-name { font-weight: 800; font-size: 14px; }
.rk-bar { height: 7px; border-radius: 6px; background: var(--border); margin-top: 5px; overflow: hidden; }
.rk-bar i { display: block; height: 100%; border-radius: 6px; background: var(--candy-group); }
.rk-score { font-weight: 800; font-size: 14px; color: var(--candy-group); white-space: nowrap; }
.record-box {
  background: var(--card); border: 1.5px solid var(--border); border-radius: var(--radius);
  padding: 16px; margin-top: 16px; text-align: center; box-shadow: var(--shadow);
}
.rec-lbl { font-size: 12.5px; color: var(--muted); font-weight: 700; }
.rec-num { font-size: 32px; font-weight: 800; color: var(--candy-group); line-height: 1.15; margin: 2px 0 4px; }
.rec-sub { font-size: 12.5px; color: var(--muted); line-height: 1.4; }

/* Le bacheche attive nella ruota di casa */
.wheel-cat.board-link { box-shadow: 0 0 0 2.5px var(--candy-link), var(--shadow); }
.wheel-cat.board-link .w-count { background: var(--candy-link); }
.wheel-cat.board-link .w-name { color: var(--candy-link); font-weight: 800; }
.wheel-cat.board-group { box-shadow: 0 0 0 2.5px var(--candy-group), var(--shadow); }
.wheel-cat.board-group .w-count { background: var(--candy-group); }
.wheel-cat.board-group .w-name { color: var(--candy-group); font-weight: 800; }

/* ═══════════════ INSIEME v2 ═══════════════ */
.date-field {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  background: var(--card); border: 1.5px solid var(--border); border-radius: 16px;
  padding: 13px 14px; font-size: 15px; margin-bottom: 12px; color: var(--ink);
  font-family: inherit; cursor: pointer; font-weight: 600;
}
.date-field .df-ico { font-size: 18px; }

.quick-dates { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 14px; }
.quick-dates button {
  flex: 1 1 auto; padding: 11px 12px; border-radius: 16px; border: 1.5px solid var(--border);
  background: var(--card); color: var(--ink); font-weight: 700; font-size: 13px;
  cursor: pointer; font-family: inherit; white-space: nowrap;
}
.mini-cal {
  background: var(--card); border: 1.5px solid var(--border);
  border-radius: 18px; padding: 12px; margin-bottom: 12px;
}
.mc-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.mc-head span { font-weight: 800; font-size: 15px; text-transform: capitalize; }
.mc-dows, .mc-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.mc-dows span {
  text-align: center; font-size: 11px; font-weight: 800; color: var(--muted);
  text-transform: uppercase; padding-bottom: 4px;
}
.mc-day {
  aspect-ratio: 1; border: none; background: var(--bg); color: var(--ink);
  border-radius: 12px; font-weight: 700; font-size: 14.5px; cursor: pointer; font-family: inherit;
}
.mc-day.today { background: var(--sunny); color: #4a3200; font-weight: 800; }
.mc-day.past { opacity: .38; }
.mc-empty { aspect-ratio: 1; }

.pr-notes {
  background: var(--bg); border-radius: 14px; padding: 11px 13px;
  font-size: 14px; line-height: 1.5; margin: 0 0 12px;
}
.pr-photo { border-radius: 16px; overflow: hidden; margin-bottom: 14px; }
.pr-photo img { width: 100%; display: block; max-height: 300px; object-fit: cover; }
.pc-avatar.small { width: 28px; height: 28px; font-size: 13px; }

.reason-opt {
  width: 100%; text-align: left; background: var(--card); border: 1.5px solid var(--border);
  border-radius: 16px; padding: 13px 14px; margin-bottom: 8px; font-size: 14.5px;
  font-weight: 600; color: var(--ink); cursor: pointer; font-family: inherit;
}
.reason-opt.on { border-color: var(--accent); background: #fff1ee; color: var(--accent-dark); font-weight: 800; }

.person-card.tappable {
  width: 100%; text-align: left; cursor: pointer; font-family: inherit; color: var(--ink); display: block;
}
.todo-row.tappable { cursor: pointer; }
.pc-arrow { color: var(--muted); font-size: 20px; margin-left: 4px; }
.pc-actions.wide { margin: 0 0 16px; }

.link-head {
  background: var(--card); border: 1.5px solid var(--border); border-radius: var(--radius);
  padding: 16px; margin-bottom: 14px; box-shadow: var(--shadow); text-align: center;
}
.lh-avatar {
  width: 62px; height: 62px; border-radius: 50%; background: var(--candy-link); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 27px; font-weight: 800;
  margin: 0 auto 12px;
}
.lh-stats { display: flex; gap: 8px; }
.lh-stats > div { flex: 1; }
.lh-stats b { display: block; font-size: 17px; font-weight: 800; }
.lh-stats small { display: block; font-size: 11px; color: var(--muted); margin-top: 2px; line-height: 1.3; }

.member-line {
  display: flex; align-items: center; gap: 9px; background: var(--card);
  border: 1.5px solid var(--border); border-radius: 14px; padding: 10px 12px; margin-bottom: 7px;
  flex-wrap: wrap;
}
.member-line .ml-name { flex: 1; font-weight: 700; font-size: 14px; min-width: 90px; }
.role-tag {
  font-size: 10.5px; font-weight: 800; border-radius: 9px; padding: 3px 8px;
  text-transform: uppercase; letter-spacing: .3px; white-space: nowrap;
}
.role-tag.boss { background: #efe6ff; color: #6b3fd4; }
.role-tag.kid { background: var(--bg); color: var(--muted); }

.br-reward { font-size: 11.5px; color: var(--candy-link); font-weight: 700; margin-top: 3px; }
.icon-grid button { flex: 0 0 auto; font-size: 19px; padding: 8px 10px; }

/* ═══════════════ MOTTO + GUIDA ═══════════════ */
.auth-motto {
  margin: 4px 0 18px; padding: 12px 16px; border-left: 3px solid var(--accent);
  background: rgba(255, 255, 255, .55); border-radius: 0 14px 14px 0;
  font-size: 13.5px; line-height: 1.5; font-style: italic; color: var(--ink); text-align: left;
}
.auth-motto cite {
  display: block; margin-top: 6px; font-size: 11.5px; font-style: normal;
  font-weight: 800; color: var(--accent-dark); letter-spacing: .3px;
}
@media (prefers-color-scheme: dark) { .auth-motto { background: rgba(255, 255, 255, .06); } }

.gu-chapter {
  background: var(--card); border: 1.5px solid var(--border); border-radius: 18px;
  margin-bottom: 10px; box-shadow: var(--shadow); overflow: hidden;
}
.gu-head {
  width: 100%; display: flex; align-items: center; gap: 11px; padding: 14px;
  background: none; border: none; font-family: inherit; color: var(--ink);
  font-size: 15px; font-weight: 800; text-align: left; cursor: pointer;
}
.gu-head .gu-ico { font-size: 21px; flex-shrink: 0; }
.gu-head .gu-name { flex: 1; }
.gu-head .gu-caret { color: var(--muted); font-size: 15px; transition: transform .2s; }
.gu-chapter.open .gu-head .gu-caret { transform: rotate(90deg); }
.gu-body { display: none; padding: 0 15px 15px; }
.gu-chapter.open .gu-body { display: block; }
.gu-body p { font-size: 14px; line-height: 1.6; margin: 0 0 10px; }
.gu-body p b { font-weight: 800; }
.gu-example {
  background: var(--sunny-soft); border-radius: 14px; padding: 12px 13px;
  font-size: 13.5px; line-height: 1.55; margin-top: 4px;
}
.gu-example strong { display: block; font-weight: 800; margin-bottom: 4px; }
.gu-empty { color: var(--muted); font-size: 14px; padding: 14px 2px; }
.gu-hit { background: var(--sunny); border-radius: 4px; padding: 0 2px; }
.tour-section {
  font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .8px;
  color: var(--accent-dark); margin-bottom: 5px;
}

/* ═══════════════ PIANO E NUMERI ═══════════════ */
.plan-card { border-left: 4px solid var(--green); }
.plan-card.warn { border-left-color: var(--sunny); }
.plan-card.over { border-left-color: var(--accent); }
.pl-top { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.pl-badge {
  font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .6px;
  border-radius: 10px; padding: 4px 9px; background: #e6f8ee; color: #1e7c45; white-space: nowrap;
}
.pl-badge.trial { background: var(--sunny-soft); color: #8a6100; }
.pl-badge.free { background: #ffecea; color: var(--accent-dark); }
.pl-name { font-weight: 800; font-size: 15px; flex: 1; }
.pl-sub { color: var(--muted); font-size: 13px; line-height: 1.5; }
.pl-meter { height: 8px; border-radius: 6px; background: var(--border); margin: 10px 0 5px; overflow: hidden; }
.pl-meter i { display: block; height: 100%; border-radius: 6px; background: var(--green); }
.pl-meter.warn i { background: var(--sunny); }
.pl-meter.over i { background: var(--accent); }
.pl-counts { display: flex; gap: 14px; font-size: 12.5px; color: var(--muted); font-weight: 600; }

.pw-emoji { font-size: 46px; text-align: center; margin: 4px 0 10px; }
.pw-text { font-size: 15px; line-height: 1.6; text-align: center; margin: 0 0 14px; }
.pw-list { margin-bottom: 14px; }
.pw-list div {
  display: flex; gap: 9px; align-items: flex-start; font-size: 13.5px;
  line-height: 1.45; padding: 7px 0; border-bottom: 1px solid var(--border);
}
.pw-list div:last-child { border-bottom: none; }
/* Il segno di spunta non si stringe; il testo sì, e va a capo invece di
   uscire dal foglio. */
.pw-list span:first-child { flex-shrink: 0; }
.pw-list span + span { flex: 1; min-width: 0; }

.pu-grid { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 16px; }
.pu-tile {
  flex: 1 1 88px; background: var(--card); border: 1.5px solid var(--border);
  border-radius: 16px; padding: 12px 10px; text-align: center; box-shadow: var(--shadow);
}
.pu-num { font-size: 22px; font-weight: 800; line-height: 1.1; }
.pu-lbl { font-size: 11px; color: var(--muted); font-weight: 700; margin-top: 3px; line-height: 1.25; }
.pu-coh {
  display: flex; align-items: center; gap: 11px; padding: 12px 0;
  border-bottom: 1px solid var(--border);
}
.pu-coh:last-child { border-bottom: none; }
.pu-day { font-weight: 800; font-size: 14px; width: 74px; flex-shrink: 0; }
.pu-bar { flex: 1; height: 10px; border-radius: 6px; background: var(--border); overflow: hidden; }
.pu-bar i { display: block; height: 100%; border-radius: 6px; background: var(--green); }
.pu-bar.low i { background: var(--accent); }
.pu-bar.mid i { background: var(--sunny); }
.pu-pct { font-weight: 800; font-size: 14px; width: 68px; text-align: right; flex-shrink: 0; }
.pu-verdict { border-radius: 16px; padding: 13px 14px; font-size: 13.5px; line-height: 1.55; margin: 14px 0; }
.pu-verdict.good { background: #e6f8ee; }
.pu-verdict.mid { background: var(--sunny-soft); }
.pu-verdict.bad { background: #ffecea; }
.pu-verdict.wait { background: var(--bg); border: 1.5px dashed var(--border); }
.code-pill {
  display: inline-block; font-family: ui-monospace, monospace; font-weight: 800;
  background: var(--ink); color: var(--bg); border-radius: 10px;
  padding: 7px 11px; margin: 4px 5px 0 0; letter-spacing: 1.5px; font-size: 14px;
}
.day-row { display: flex; align-items: center; gap: 9px; font-size: 12.5px; padding: 5px 0; }
.day-row b { width: 62px; flex-shrink: 0; color: var(--muted); font-weight: 700; }
.day-row i { display: block; height: 9px; border-radius: 5px; background: var(--accent); }
.frozen-box { background: #ffecea; }
.frozen-box .mini-btn { margin-top: 8px; }

/* ═══════════════ ELENCO ACCOUNT ═══════════════ */
.acc {
  background: var(--card); border: 1.5px solid var(--border); border-left: 4px solid var(--border);
  border-radius: 16px; padding: 12px 13px; margin-bottom: 9px; box-shadow: var(--shadow);
}
.acc.admin { border-left-color: var(--accent); }
.acc.test { border-left-color: var(--muted); opacity: .82; }
.acc-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.acc-id { font-family: ui-monospace, monospace; font-size: 12px; color: var(--muted); font-weight: 700; }
.acc-name { font-weight: 800; font-size: 15px; }
.acc-tag {
  font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .4px;
  background: var(--bg); color: var(--muted); border-radius: 9px; padding: 3px 8px; white-space: nowrap;
}
.acc-tag.admin { background: #ffecea; color: var(--accent-dark); }
.acc-tag.test { background: var(--border); color: var(--muted); }
.acc-mail { font-size: 13px; margin-top: 4px; word-break: break-all; }
.acc-meta { font-size: 11.5px; color: var(--muted); margin-top: 5px; line-height: 1.5; }
.acc-codes { font-size: 12px; color: var(--muted); margin-top: 4px; }
.acc-codes b { color: var(--ink); font-family: ui-monospace, monospace; letter-spacing: 1px; }
.acc-actions { display: flex; gap: 6px; margin-top: 9px; }

/* ═══════════════ PASSWORD DIMENTICATA ═══════════════ */
.link-btn {
  background: none; border: none; color: var(--accent-dark); font-family: inherit;
  font-size: 13.5px; font-weight: 700; text-decoration: underline; cursor: pointer;
  padding: 10px; margin-top: 2px;
}
.rec-row {
  display: flex; align-items: center; gap: 9px; background: var(--card);
  border: 1.5px solid var(--border); border-left: 4px solid var(--sunny);
  border-radius: 14px; padding: 10px 12px; margin-bottom: 8px; flex-wrap: wrap;
}
.rec-row.done { border-left-color: var(--green); opacity: .7; }
.rec-mail { flex: 1; font-size: 13px; font-weight: 700; word-break: break-all; min-width: 120px; }
.rec-when { font-size: 11.5px; color: var(--muted); }

/* ═══════════════ DATA DI PARTENZA DELLE STATISTICHE ═══════════════ */
.since-box {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  background: #e6f8ee; border-radius: 14px; padding: 11px 13px; margin-bottom: 14px;
  font-size: 13px; font-weight: 700;
}
.since-box.warn { background: var(--sunny-soft); }
.since-box span { flex: 1; min-width: 150px; }
.since-box small { display: block; width: 100%; font-weight: 500; color: var(--muted); font-size: 11.5px; }

/* ═════════ Franklin ═════════
   Il vecchio compare nella schermata di ingresso e, quando ha qualcosa
   da dirti, in cima alla home. Il riquadro è dello stesso colore della
   sua faccia: verde quando è contento, ambra quando brontola. */
.fr-auth { display: flex; justify-content: center; margin: 2px 0 10px; }
.fr-auth img { height: 132px; width: auto; filter: drop-shadow(0 6px 14px rgba(60,40,20,.18)); }

.fr-card {
  display: flex; align-items: flex-end; gap: 10px;
  background: var(--card); border: 1.5px solid var(--border);
  border-radius: 18px; padding: 10px 12px 10px 10px;
  margin-bottom: 12px; box-shadow: var(--shadow);
  position: relative; animation: frEntra .35s ease;
}
@keyframes frEntra { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.fr-card .fr-img { height: 84px; width: auto; flex: 0 0 auto; margin-bottom: -10px; }
.fr-card .fr-say { flex: 1; min-width: 0; padding-bottom: 6px; }
.fr-card .fr-line { font-weight: 800; font-size: 15px; line-height: 1.25; }
.fr-card .fr-quote { font-size: 12px; color: var(--muted); font-style: italic; margin-top: 4px; line-height: 1.35; }
.fr-card .fr-close {
  position: absolute; top: 4px; right: 6px; border: none; background: none;
  color: var(--muted); font-size: 20px; line-height: 1; padding: 4px 6px; cursor: pointer;
}
.fr-card.contento { background: #f2faf3; border-color: #cfe8d3; }
.fr-card.infastidito { background: #fdf6e6; border-color: #f0e0b8; }
.fr-card.arrabbiato { background: #fdefe9; border-color: #f3cdbd; }

/* Il momento di gloria: si presenta di persona */
.fr-pop {
  position: fixed; inset: 0; z-index: 95; display: flex;
  align-items: center; justify-content: center; padding: 24px;
  background: rgba(25, 15, 8, .45); opacity: 0; transition: opacity .26s ease;
}
.fr-pop.dentro { opacity: 1; }
.fr-pop.via { opacity: 0; }
.fr-pop-in {
  background: var(--card); border-radius: 26px; padding: 18px 20px 20px;
  max-width: 320px; width: 100%; text-align: center; box-shadow: 0 18px 50px rgba(0,0,0,.28);
  transform: translateY(14px) scale(.96); transition: transform .3s cubic-bezier(.2,.9,.3,1.2);
}
.fr-pop.dentro .fr-pop-in { transform: none; }
.fr-pop-in img { height: 168px; width: auto; margin: -6px 0 4px; }
.fr-pop-in h3 { margin: 0 0 4px; font-size: 21px; font-weight: 800; }
.fr-pop-in p { margin: 0 0 14px; color: var(--muted); font-size: 14px; }

/* Le task in programma dentro la giornata del calendario */
.cal-block.task-blk {
  background: #fff4e2; border-color: #f2ddb9;
  border-left: 4px solid var(--accent);
}

/* Finestra "nuova task": la categoria proposta e il pulsante della foto */
.guess-note { font-size: 12px; color: var(--accent-dark); margin: -6px 0 8px; }
.photo-row { display: flex; align-items: center; gap: 10px; margin: 10px 0 4px; }
.photo-row .mini-btn { flex: 0 0 auto; }
.photo-name { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Colore che distingue le persone nell'elenco dei collegamenti */
.person-card { border-left: 5px solid transparent; }
.pc-avatar { color: #fff; }
.link-head { border-left: 5px solid transparent; padding-left: 10px; }
.lh-avatar { color: #fff; }
.col-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 4px 0 14px; }
.col-row .col-lbl { font-size: 12px; color: var(--muted); width: 100%; }
.col-dot {
  width: 30px; height: 30px; border-radius: 50%; border: 3px solid transparent;
  padding: 0; cursor: pointer; box-shadow: 0 1px 4px rgba(0,0,0,.15);
}
.col-dot.selected { border-color: var(--ink); transform: scale(1.08); }

/* ═══════════════════════════════════════════════════════════
   TEMA SCURO: i riquadri colorati
   ───────────────────────────────────────────────────────────
   Questi blocchi hanno uno sfondo chiaro scritto a mano ma lasciano il
   colore del testo a var(--ink), che col tema scuro diventa chiaro: risultato,
   scritta chiara su sfondo chiaro, illeggibile. Erano invisibili "Sono fiero
   di te" nella home e i titoli delle task nel calendario.
   Qui ogni sfondo chiaro ha il suo corrispettivo scuro, così il tema resta
   scuro davvero invece di essere rattoppato sul colore del testo.
   ═══════════════════════════════════════════════════════════ */
@media (prefers-color-scheme: dark) {
  /* Le task in programma dentro la giornata */
  .cal-block.task-blk { background: #35291a; border-color: #5d4a2c; }

  /* Le facce di Franklin nella home */
  .fr-card.contento    { background: #1b3324; border-color: #2f5940; }
  .fr-card.infastidito { background: #33290f; border-color: #5c4a1c; }
  .fr-card.arrabbiato  { background: #3a231a; border-color: #63382a; }

  /* Riquadri di stato: verdetti, conto congelato, data delle statistiche */
  .pu-verdict.good, .since-box { background: #16301f; }
  .pu-verdict.bad, .frozen-box { background: #3a1f1c; }

  /* Scelta dei membri di un gruppo */
  .member-pick.on { background: #251d3a; }

  /* Il motivo di un rifiuto, quando è selezionato */
  .reason-opt.on { background: #3a231a; }

  /* "In prova": il marrone su fondo scuro non si leggeva */
  .pl-badge.trial { color: #f0c565; }
  .pl-badge.free { background: #3a1f1c; }
}

/* Il passo delle notifiche nel questionario */
.ob-ok {
  background: #e6f8ee; border-radius: 14px; padding: 13px 15px;
  font-weight: 700; font-size: 15px; color: #1e7c45; margin-bottom: 12px;
}
.ob-warn {
  background: var(--sunny-soft); border-radius: 14px; padding: 13px 15px;
  font-size: 14px; line-height: 1.5; color: #8a6100; margin-bottom: 12px;
}
@media (prefers-color-scheme: dark) {
  .ob-ok { background: #16301f; color: #6fdd9a; }
  .ob-warn { background: #33290f; color: #f0c565; }
}

/* L'avviso al turnista: è ora di riscrivere i turni */
.tn-avviso {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: #ddf0ef; border: 1.5px solid #a9d4d2; border-radius: 16px;
  padding: 11px 13px; margin-bottom: 12px;
  font-size: 13.5px; font-weight: 700; color: #23595a;
}
.tn-avviso span { flex: 1; min-width: 150px; }
.tn-avviso.hidden { display: none; }
@media (prefers-color-scheme: dark) {
  .tn-avviso { background: #16332f; border-color: #2c5b56; color: #7fd0c9; }
}

/* ═══════════════════════════════════════════════════════════
   Bottone al lavoro: si spegne e mostra la rotellina.
   Serve contro il doppio tocco — segnalato dai tester: pigiando
   più volte "Aggiungi" la stessa task entrava più volte.
   ═══════════════════════════════════════════════════════════ */
button.in-corso {
  position: relative;
  color: transparent !important;
  pointer-events: none;
  opacity: .85;
}
button.in-corso > * { visibility: hidden; }
button.in-corso::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 16px; height: 16px;
  margin: -8px 0 0 -8px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  color: #fff;
  animation: giraRotella .6s linear infinite;
}
/* sui bottoni chiari la rotellina deve vedersi lo stesso */
button.in-corso.btn-secondary::after,
button.in-corso.btn-ghost::after,
button.in-corso.link-btn::after { color: #7a6a58; }
@keyframes giraRotella { to { transform: rotate(360deg); } }

/* Casella "questo pasto non lo faccio" nel questionario */
.ob-salto {
  display: flex; align-items: center; gap: 8px;
  font-size: 14px; color: #7a6a58; font-weight: 500;
  margin: -4px 0 14px; cursor: pointer;
}
.ob-salto input { width: 18px; height: 18px; accent-color: #ff6b57; margin: 0; }

/* ═══════════════════════════════════════════════════════════
   Pallini della ruota: quello di una pagina che ha cose aperte
   porta un numerino. Segnalato dai tester: le categorie della
   seconda pagina si dimenticavano perché non si vedeva niente.
   ═══════════════════════════════════════════════════════════ */
/* Il numero sta DENTRO il pallino, non in un fumetto sopra.
   Il fumetto galleggiava fuori dalla riga e andava a finire addosso al nome
   della categoria in fondo alla ruota: qualsiasi spazio gli lasciassi, su un
   telefono un po' più piccolo tornava a toccarla. Un pallino che si allarga e
   si scrive dentro il numero non può sovrapporsi a niente per costruzione. */
#wheel-dots button.con-roba {
  width: auto;
  min-width: 22px;
  height: 15px;
  border-radius: 8px;
  background: #ff6b57;
  color: #fff;
  padding: 0 5px;
  font-size: 9px;
  font-weight: 800;
  line-height: 15px;
  font-family: inherit;
}
#wheel-dots button.con-roba::before { content: attr(data-quante); }
#wheel-dots button.con-roba.on { background: var(--accent-dark, #d9482f); transform: none; }

/* ═══════════════════════════════════════════════════════════
   Niente scorrimento laterale, mai.
   Segnalato dai tester: certi campi sporgevano di pochi pixel e
   la schermata si spostava a destra e sinistra invece di restare
   ferma. Non l'ho saputo riprodurre con un account vuoto, quindi
   invece di rincorrere il singolo campo blocco la causa: nessun
   elemento può essere più largo dello schermo, e le parole lunghe
   vanno a capo invece di allargare il contenitore.
   ═══════════════════════════════════════════════════════════ */
html, body { overflow-x: hidden; max-width: 100%; }
input, select, textarea { max-width: 100%; }

/* I contenitori a righe: le parti che devono restringersi devono poterlo
   fare. Senza questo un titolo lungo allarga tutta la riga. */
.task-title, .w-name, .c-name, .rec-mail, .at-title,
.list-item-title, .modal-title { overflow-wrap: anywhere; min-width: 0; }

/* Campo spento: si deve vedere che non è più in gioco */
input:disabled, select:disabled, textarea:disabled {
  background: #f3ece2; color: #a89684; cursor: not-allowed;
}

/* ═══════════════════════════════════════════════════════════
   IL CAMPO DELL'ORA CHE SPORGE.
   Questo era il disallineamento segnalato dai tester, e non si vede
   sul computer: su iPhone il campo "ora" ha una larghezza minima sua
   che il browser rispetta a costo di allargare la colonna. Le celle
   di una griglia, se non gliene si dà il permesso, non si stringono
   mai sotto il contenuto — da cui i riquadri che escono dalla carta
   e la pagina che scivola di lato.
   ═══════════════════════════════════════════════════════════ */
.time-grid > *, .range-grid > * { min-width: 0; }
.time-grid input, .range-grid input { width: 100%; min-width: 0; }
input[type="time"], input[type="date"], input[type="datetime-local"] {
  min-width: 0;
  /* Safari centra il contenuto e allarga il campo: lo riportiamo in riga
     con tutti gli altri, testo a sinistra e larghezza della colonna. */
  -webkit-appearance: none;
  appearance: none;
  text-align: left;
}

/* ═══════════════════════════════════════════════════════════
   "Da smistare" dentro Tutte le task: stesso elenco, ma raccolte
   in un gruppo a tendina già aperto, così non si confondono con
   quelle che hanno già una categoria.
   ═══════════════════════════════════════════════════════════ */
.gr-smistare { margin-bottom: 14px; }
.gr-testa {
  display: flex; align-items: center; gap: 8px;
  width: 100%; padding: 9px 12px; margin-bottom: 8px;
  background: #f6efe4; border: 1px solid var(--border); border-radius: 14px;
  font-size: 14px; font-weight: 700; color: #7a6a58; cursor: pointer;
}
.gr-testa .gr-nome { flex: 1; text-align: left; min-width: 0; }
.gr-testa .gr-conta {
  background: #ff6b57; color: #fff; font-size: 12px; font-weight: 800;
  border-radius: 20px; padding: 1px 8px; flex-shrink: 0;
}
.gr-freccia { transition: transform .18s ease; flex-shrink: 0; }
.gr-smistare:not(.aperto) .gr-freccia { transform: rotate(-90deg); }
.gr-smistare:not(.aperto) .gr-corpo { display: none; }
.gr-corpo { padding-left: 6px; border-left: 3px solid #f0e0c8; margin-left: 4px; }
@media (prefers-color-scheme: dark) {
  .gr-testa { background: #2f2a24; color: #ddd2c4; }
  .gr-corpo { border-left-color: #443c33; }
}

/* ═══════════════════════════════════════════════════════════
   SCHERMATA LAMPO — la risposta in due gesti su iPhone.
   Copre tutto: niente menu, niente navigazione, niente da cercare.
   ═══════════════════════════════════════════════════════════ */
.lampo-velo {
  position: fixed; top: 0; right: 0; left: 0;
  height: 100vh; height: 100dvh;
  background: var(--bg, #fff8ef);
  z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
body.con-lampo { overflow: hidden; }
.lampo-carta { width: 100%; max-width: 380px; text-align: center; }
.lampo-attesa { font-size: 40px; animation: giraRotella 1.2s linear infinite; }
.lampo-cat { font-size: 11px; letter-spacing: 1.6px; color: #ff6b57; font-weight: 800; }
.lampo-tit { font-size: 28px; font-weight: 800; line-height: 1.2; margin: 10px 0 6px; letter-spacing: -.4px; }
.lampo-sub { font-size: 14px; color: var(--muted, #9a8a76); margin-bottom: 28px; }
.lampo-grosso {
  width: 100%; background: #ff6b57; color: #fff;
  border: none; border-radius: 18px; padding: 22px;
  font-size: 19px; font-weight: 800; font-family: inherit; cursor: pointer;
}
.lampo-minori { display: flex; gap: 8px; margin-top: 10px; }
.lampo-minori button {
  flex: 1; background: #f1e8db; color: #7a6a58;
  border: none; border-radius: 14px; padding: 14px 8px;
  font-size: 14px; font-weight: 700; font-family: inherit; cursor: pointer;
}
.lampo-esci {
  background: none; border: none; color: var(--muted, #9a8a76);
  font-size: 13px; font-family: inherit; margin-top: 22px; cursor: pointer;
  text-decoration: underline;
}
/* Le quattro domande a tutto schermo: non è un avviso, è un passaggio
   obbligato. Il velo può scorrere perché su un telefono corto quattro righe
   più i testi non ci stanno tutte insieme. */
.domande-velo { align-items: flex-start; overflow-y: auto; padding: 28px 20px 40px; }
.domande-velo .lampo-carta { text-align: left; margin: auto; }
.domande-velo .casa-card { margin-bottom: 0; }
.domande-velo .casa-card.esito { text-align: center; }
.domande-velo .casa-tit { font-size: 22px; }

.lampo-festa { font-size: 56px; }
.lampo-hg { font-size: 18px; font-weight: 800; color: #ff6b57; margin-top: 6px; }
.lampo-nota { font-size: 12px; color: var(--muted, #9a8a76); margin-top: 20px; }
@media (prefers-color-scheme: dark) {
  .lampo-minori button { background: #3a352e; color: #ddd2c4; }
}

/* ═══════════════════════════════════════════════════════════
   La striscia che compare quando un avviso arriva mentre stai
   già usando l'app. Su iPhone il tocco sulla notifica in quel
   caso non arriva a noi, quindi il pulsante ce lo mettiamo qui.
   ═══════════════════════════════════════════════════════════ */
.striscia-avviso {
  position: fixed; top: 0; right: 0; left: 0;
  z-index: 9998;
  display: flex; align-items: center; gap: 10px;
  padding: max(12px, env(safe-area-inset-top)) 14px 12px;
  background: #2b2620; color: #fff;
  box-shadow: 0 4px 16px rgba(0,0,0,.28);
  transform: translateY(-110%);
  transition: transform .25s ease;
}
.striscia-avviso.dentro { transform: translateY(0); }
.sa-testo { flex: 1; min-width: 0; line-height: 1.3; }
.sa-testo b { display: block; font-size: 12px; color: #ffb3a7; letter-spacing: .4px; }
.sa-testo span { font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }
.striscia-avviso button {
  border: none; font-family: inherit; font-weight: 800; cursor: pointer; flex-shrink: 0;
}
.sa-si { background: #ff6b57; color: #fff; border-radius: 12px; padding: 11px 15px; font-size: 14px; }
.sa-no { background: none; color: #9a8a76; font-size: 18px; padding: 6px 4px; }

/* ═══════════════════════════════════════════════════════════
   Le cose di casa: le cinque domande e poi UNA scadenza a settimana.
   ═══════════════════════════════════════════════════════════ */
.casa-card {
  background: #fff; border: 1.5px solid #ffd9d1; border-radius: 18px;
  padding: 18px; margin-bottom: 14px;
}
.casa-tag { font-size: 10px; letter-spacing: 1.2px; color: #ff6b57; font-weight: 800; margin-bottom: 6px; }
.casa-tit { font-size: 18px; font-weight: 800; line-height: 1.3; }
.casa-sub { font-size: 13px; color: var(--muted, #8a7a68); margin-top: 6px; line-height: 1.5; }
.casa-dom { display: flex; flex-direction: column; gap: 7px; margin: 14px 0; }
.casa-si {
  display: flex; align-items: center; gap: 10px; width: 100%;
  background: #faf5ee; border: 1.5px solid var(--border, #eee0cd); border-radius: 14px;
  padding: 12px 14px; font-family: inherit; font-size: 15px; cursor: pointer; color: inherit;
}
.casa-si .cs-i { font-size: 19px; }
.casa-si .cs-t { flex: 1; text-align: left; min-width: 0; }
.casa-si .cs-v {
  font-size: 12px; font-weight: 800; color: #c0b09b;
  border: 1.5px solid #e0d2bf; border-radius: 20px; padding: 3px 11px;
}
.casa-si.on { background: #fff0eb; border-color: #ff6b57; }
.casa-si.on .cs-v { background: #ff6b57; border-color: #ff6b57; color: #fff; }
.casa-card input[type="date"] { margin: 14px 0 0; }
.casa-minori { display: flex; gap: 8px; margin-top: 8px; }
.casa-minori button {
  flex: 1; background: none; border: none; font-family: inherit;
  font-size: 13px; color: var(--muted, #9a8a76); padding: 8px; cursor: pointer;
  text-decoration: underline;
}
.casa-dopo {
  display: block; width: 100%; background: none; border: none; font-family: inherit;
  font-size: 13px; color: var(--muted, #9a8a76); padding: 10px; margin-top: 4px;
  cursor: pointer; text-decoration: underline;
}
.casa-card.esito { text-align: center; border-color: #b8dcc0; }
.casa-festa { font-size: 40px; margin-bottom: 6px; }
@media (prefers-color-scheme: dark) {
  .casa-card { background: #2f2a24; border-color: #5d4a2c; }
  .casa-si { background: #3a352e; }
  .casa-si.on { background: #4a2f28; }
}

/* ═══════════════════════════════════════════════════════════
   Andamento (voce 6): l'imbuto, i segmenti, le coorti.
   ═══════════════════════════════════════════════════════════ */
.an-imbuto { margin-bottom: 6px; }
.an-gr { display: flex; align-items: center; gap: 8px; font-size: 13px; padding: 5px 0; }
.an-gr .an-et { width: 132px; flex-shrink: 0; color: var(--muted, #7a6a58); line-height: 1.25; }
.an-gr .an-bar { flex: 1; background: #f1e8db; height: 14px; border-radius: 5px; overflow: hidden; min-width: 0; }
.an-gr .an-bar i { display: block; height: 100%; background: #ff6b57; border-radius: 5px; }
.an-gr b { width: 30px; text-align: right; flex-shrink: 0; }
.an-gr em { width: 42px; text-align: right; font-style: normal; color: var(--muted, #9a8a76); font-size: 12px; flex-shrink: 0; }
.an-gr.ko .an-bar i { background: #c0392b; }
.an-gr.ko b { color: #c0392b; }

.an-seg { margin-bottom: 6px; }
.an-sr { display: flex; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px solid #f0e5d5; font-size: 13px; }
.an-sn { flex: 1; min-width: 0; }
.an-sv { flex-shrink: 0; font-weight: 800; font-size: 13px; }
.an-sv.si { color: #3f6b41; }
.an-sv.no { color: #9a8a76; }
.an-sv em { font-style: normal; font-weight: 500; font-size: 11px; opacity: .8; }

.an-tab { font-size: 12.5px; }
.an-th, .an-tr { display: flex; gap: 4px; padding: 6px 0; border-bottom: 1px solid #f0e5d5; }
.an-th { font-weight: 800; color: var(--muted, #9a8a76); font-size: 11px; text-transform: uppercase; }
.an-th span, .an-tr span { flex: 1; text-align: right; min-width: 0; }
.an-th span:first-child, .an-tr span:first-child { flex: 1.3; text-align: left; }

.an-giorni { display: flex; align-items: flex-end; gap: 3px; height: 90px; margin: 4px 0 2px; }
.an-g { flex: 1; display: flex; align-items: flex-end; gap: 1px; height: 100%; position: relative; }
.an-g i { flex: 1; border-radius: 2px 2px 0 0; display: block; min-height: 2px; }
.an-g .an-v { background: #2b2620; }
.an-g .an-c { background: #ff6b57; }
.an-g span { position: absolute; bottom: -15px; left: 0; right: 0; text-align: center; font-size: 8px; color: #a89684; }
.an-giorni + .hint-text { margin-top: 18px; }
@media (prefers-color-scheme: dark) {
  .an-gr .an-bar { background: #3a352e; }
  .an-g .an-v { background: #ddd2c4; }
}

/* ═══════════════════════════════════════════════════════════
   L'INVITO — voce 3
   La schermata di chi arriva da un link e non ha ancora niente:
   stesso velo della schermata lampo, perché è lo stesso mestiere
   (una cosa sola, grande, senza niente da cercare intorno).
   ═══════════════════════════════════════════════════════════ */
.invito-velo .lampo-carta { max-width: 400px; }
.invito-velo .lampo-carta { max-height: 100%; overflow-y: auto; }
.invito-velo input {
  width: 100%; box-sizing: border-box; margin: 6px 0 4px;
  padding: 16px; border-radius: 14px; font-size: 16px; font-family: inherit;
  border: 2px solid var(--line, #e8dccb); background: var(--card, #fff);
  color: inherit; text-align: center;
}
.invito-velo .lampo-sub { margin-bottom: 14px; }
.lampo-grosso.chiaro { background: #2b2620; }
.iv-cosa {
  background: var(--card, #fff); border: 2px solid #ff6b57;
  border-radius: 18px; padding: 18px 16px; margin: 18px 0 14px;
}
.iv-cosa-eti { font-size: 11px; letter-spacing: 1.4px; color: #ff6b57; font-weight: 800; }
.iv-cosa-tit { font-size: 19px; font-weight: 800; line-height: 1.25; margin-top: 6px; }
.iv-cosa-min { font-size: 13px; color: var(--muted, #9a8a76); margin-top: 4px; }
.iv-senza { font-size: 12px; color: var(--muted, #9a8a76); margin-top: 8px; }
.iv-err { color: #d05b47 !important; min-height: 18px; margin: 4px 0 0 !important; }
.iv-riga {
  display: flex; align-items: center; gap: 10px;
  margin: 26px 0 12px; font-size: 12px; color: var(--muted, #9a8a76);
}
.iv-riga span { flex: 1; height: 1px; background: var(--line, #e8dccb); }

/* Il link da mandare, dentro la finestra del collegamento */
.inv-link {
  background: var(--bg, #fff8ef); border: 1px dashed var(--line, #e8dccb);
  border-radius: 12px; padding: 12px; margin: 10px 0 12px;
  font-size: 12px; word-break: break-all; color: var(--muted, #9a8a76);
}

/* La striscia dell'ospite: quanto gli resta, e come tenersi tutto */
.ospite-striscia {
  position: fixed; right: 10px; bottom: calc(72px + env(safe-area-inset-bottom)); left: 10px;
  z-index: 60; display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: 14px;
  background: #2b2620; color: #fff; font-size: 13px;
  box-shadow: 0 6px 20px rgba(0,0,0,.22);
}
.ospite-striscia.urgente { background: #c2452f; }
.ospite-striscia span { flex: 1; }
.ospite-striscia button {
  background: #fff; color: #2b2620; border: none; border-radius: 10px;
  padding: 8px 12px; font-size: 12px; font-weight: 800; font-family: inherit; cursor: pointer;
}
body.con-lampo .ospite-striscia { display: none; }
@media (prefers-color-scheme: dark) {
  .invito-velo input { background: #2b2620; border-color: #3a352e; }
  .lampo-grosso.chiaro { background: #ddd2c4; color: #2b2620; }
}

/* Conti secchi dentro l'andamento (il passaparola della voce 3) */
.an-conti { margin: 10px 0 6px; }
.an-riga {
  display: flex; align-items: baseline; gap: 10px;
  padding: 8px 0; border-bottom: 1px solid var(--line, #e8dccb);
  font-size: 14px;
}
.an-riga span { flex: 1; color: var(--muted, #9a8a76); }
.an-riga b { font-size: 17px; font-weight: 800; }
/* Con la striscia dell'ospite in fondo, il contenuto ha bisogno di respiro
   in più: senza, l'ultima scheda resta coperta per sempre. */
body.con-ospite .screen.active { padding-bottom: 116px; }

/* ═══════════════════════════════════════════════════════════
   Quello che un accesso di prova non può fare.
   Si vede prima di toccarlo: spento, non finto-acceso.
   ═══════════════════════════════════════════════════════════ */
body.con-ospite [data-solo-registrati] {
  opacity: .45;
  filter: grayscale(1);
  position: relative;
}
body.con-ospite [data-solo-registrati]::after {
  content: "🔒";
  font-size: .8em;
  margin-left: 6px;
  filter: none;
}

/* La scheda in cima al profilo di chi è entrato col solo nome */
.ospite-card { border: 2px solid #ff6b57; }
.ospite-card .oc-tit { font-size: 17px; font-weight: 800; margin-bottom: 6px; }
.ospite-card .oc-sub { font-size: 14px; color: var(--muted, #9a8a76); line-height: 1.5; margin-bottom: 14px; }

/* Come mettersi Sbrigalo sul telefono, senza store */
.iv-installa {
  background: var(--card, #fff); border: 1px solid var(--line, #e8dccb);
  border-radius: 14px; padding: 14px; margin: 4px 0 16px;
  font-size: 13px; line-height: 1.55; text-align: left; color: var(--muted, #9a8a76);
}
.iv-installa b { color: inherit; }
@media (prefers-color-scheme: dark) {
  .iv-installa { background: #241f1a; border-color: #3a352e; }
}

/* La forchetta dell'invito: ce l'hai già o è la prima volta */
.iv-scelte { display: flex; gap: 8px; margin-bottom: 14px; }
.iv-scelta {
  flex: 1; background: var(--card, #fff); border: 2px solid var(--line, #e8dccb);
  border-radius: 16px; padding: 14px 10px; font-family: inherit; cursor: pointer;
  color: inherit; text-align: center; display: block;
}
.iv-scelta b { display: block; font-size: 14px; font-weight: 800; }
.iv-scelta small { display: block; font-size: 11px; margin-top: 4px; color: var(--muted, #9a8a76); line-height: 1.35; }
.iv-scelta.on { border-color: #ff6b57; background: #fff1ec; }
@media (prefers-color-scheme: dark) {
  .iv-scelta { background: #2b2620; border-color: #3a352e; }
  .iv-scelta.on { background: #3b2a24; border-color: #ff6b57; }
}

/* Sveglia, letto e pasti dentro la riga del turno (voce turnisti) */
.tn-orari {
  display: grid; grid-template-columns: 1fr 1fr; gap: 6px 8px;
  margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--line, #e8dccb);
}
.tn-ora { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tn-ora span { font-size: 10px; color: var(--muted, #9a8a76); font-weight: 700; letter-spacing: .2px; }
.tn-ora input[type="time"] {
  width: 100%; box-sizing: border-box; min-width: 0;
  padding: 7px 8px; font-size: 14px; border-radius: 9px;
  border: 1.5px solid var(--line, #e8dccb); background: var(--card, #fff);
  color: inherit; font-family: inherit; -webkit-appearance: none; text-align: left;
}
.tn-riga.riposo .tn-orari { opacity: .75; }
@media (prefers-color-scheme: dark) {
  .tn-ora input[type="time"] { background: #2b2620; border-color: #3a352e; }
}

/* ═══════════════════════════════════════════════════════════
   Il dettaglio degli animali: un blocco per bestia, dentro la
   scheda che compare la prima volta che entri nella categoria.
   ═══════════════════════════════════════════════════════════ */
.an-card { text-align: left; }
.an-blocco {
  border: 1.5px solid var(--line, #e8dccb); border-radius: 16px;
  padding: 12px; margin: 12px 0;
}
.an-testa { display: flex; gap: 8px; align-items: center; }
.an-nome {
  flex: 1; min-width: 0; box-sizing: border-box;
  padding: 12px; border-radius: 12px; font-size: 16px; font-family: inherit;
  border: 1.5px solid var(--line, #e8dccb); background: var(--card, #fff); color: inherit;
}
.an-via {
  background: none; border: none; color: #c2452f; font-size: 18px;
  padding: 6px 8px; cursor: pointer; font-family: inherit;
}
.an-specie { margin: 10px 0 4px; }
.an-eti {
  font-size: 11px; font-weight: 800; letter-spacing: .4px;
  color: var(--muted, #9a8a76); text-transform: uppercase; margin: 12px 0 6px;
}
.an-az { display: flex; gap: 8px; align-items: center; margin-bottom: 6px; }
.an-az-si {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px;
  background: var(--bg, #fff8ef); border: 1.5px solid var(--line, #e8dccb);
  border-radius: 12px; padding: 10px 12px; font-family: inherit;
  font-size: 14px; color: inherit; cursor: pointer; text-align: left;
}
.an-az.on .an-az-si { border-color: #3f8f6b; background: rgba(63,143,107,.08); }
.an-az-t { flex: 1; min-width: 0; }
.an-az-v { color: #3f8f6b; font-weight: 800; flex-shrink: 0; margin-left: 4px; width: 12px; text-align: right; }
.an-ritmo {
  flex-shrink: 0; max-width: 46%;
  padding: 10px 8px; border-radius: 12px; font-size: 13px; font-family: inherit;
  border: 1.5px solid var(--line, #e8dccb); background: var(--card, #fff); color: inherit;
}
.an-extra { display: flex; gap: 8px; margin-top: 10px; }
.an-ex-t {
  flex: 1; min-width: 0; box-sizing: border-box;
  padding: 10px; border-radius: 12px; font-size: 14px; font-family: inherit;
  border: 1.5px dashed var(--line, #e8dccb); background: transparent; color: inherit;
}
.an-piu {
  width: 100%; background: none; border: 1.5px dashed var(--line, #e8dccb);
  border-radius: 12px; padding: 12px; color: var(--accent, #ff6b57);
  font-size: 14px; font-weight: 700; font-family: inherit; cursor: pointer;
  margin-bottom: 10px;
}
/* Gli orari dei giorni liberi nel questionario, fuori dalla griglia dei turni */
.tn-orari.libero { border-top: none; margin-top: 4px; }
@media (prefers-color-scheme: dark) {
  .an-nome, .an-ritmo { background: #2b2620; border-color: #3a352e; }
  .an-az-si { background: #241f1a; border-color: #3a352e; }
}

/* Le date del dettaglio (bollo, assicurazione, revisione di quel mezzo) */
/* Sono <label>, e la regola generale dei label le voleva tutte maiuscole:
   "QUANDO SCADE IL BOLLO?" urlato non è una domanda, è un cartello. Qui la
   domanda va scritta come si parla. */
.an-data { display: block; margin-bottom: 10px; text-transform: none; letter-spacing: 0; }
.an-data > span {
  display: block; font-size: 13.5px; font-weight: 600; line-height: 1.45;
  color: var(--muted, #9a8a76); margin-bottom: 5px;
  text-transform: none; letter-spacing: 0;
}
/* "obbligo di legge" va a capo da sola invece di spezzarsi a metà parola */
.an-legge {
  display: block; font-style: normal; font-size: 10px; font-weight: 800;
  letter-spacing: .3px; color: #c2452f; text-transform: uppercase; margin-top: 2px;
}
.an-data input[type="date"] {
  width: 100%; box-sizing: border-box; min-width: 0;
  padding: 11px 12px; border-radius: 12px; font-size: 15px; font-family: inherit;
  border: 1.5px solid var(--line, #e8dccb); background: var(--card, #fff);
  color: inherit; -webkit-appearance: none;
}
.an-nota { font-size: 12px; color: var(--muted, #9a8a76); line-height: 1.5; margin: 2px 0 6px; }
.an-campo {
  width: 100%; box-sizing: border-box; margin-top: 8px;
  padding: 11px 12px; border-radius: 12px; font-size: 15px; font-family: inherit;
  border: 1.5px dashed var(--line, #e8dccb); background: transparent; color: inherit;
  text-transform: uppercase;
}
.an-fisso {
  flex-shrink: 0; font-size: 12px; color: var(--muted, #9a8a76);
  padding: 0 4px; max-width: 40%; text-align: right;
}
@media (prefers-color-scheme: dark) {
  .an-data input[type="date"] { background: #2b2620; border-color: #3a352e; }
}

/* Il campo dell'età: piccolo, perché è un numero di due cifre */
.an-campo.numero { max-width: 140px; text-transform: none; text-align: center; }

/* Il pallino della categoria smart che ha un questionario dentro: un punto di
   domanda, non un numero. Un numero direbbe "hai tre cose da fare" e sarebbe
   falso — la categoria è vuota proprio perché la domanda non è ancora stata
   fatta. Il punto di domanda dice la cosa vera: qui dentro c'è una domanda. */
.wheel-cat .w-count.chiede {
  background: #ff6b57;
  font-weight: 900;
  animation: chiedePulsa 2.4s ease-in-out infinite;
}
@keyframes chiedePulsa {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.18); }
}
@media (prefers-reduced-motion: reduce) {
  .wheel-cat .w-count.chiede { animation: none; }
}

/* L'elenco delle cose già inserite, ognuna col suo "modifica": un nome scritto
   male o una scuola sbagliata si correggono, non si ricomincia da capo. */
.cose-riga {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 10px 12px; margin-bottom: 8px;
  border: 1.5px solid var(--line, #e8dccb); border-radius: 14px;
  background: var(--card, #fff);
}
.cose-ico { font-size: 20px; flex-shrink: 0; }
.cose-nome { font-weight: 700; font-size: 15px; }
.cose-eti { font-weight: 700; font-size: 15px; flex: 1; min-width: 0; }
.cose-sotto { flex: 1; min-width: 0; font-size: 12px; color: var(--muted, #9a8a76); }
.cose-mod {
  flex-shrink: 0; background: var(--bg, #fff8ef); border: 1.5px solid var(--line, #e8dccb);
  border-radius: 10px; padding: 7px 11px; font-size: 12px; font-weight: 700;
  font-family: inherit; color: var(--accent, #ff6b57); cursor: pointer;
}
@media (prefers-color-scheme: dark) {
  .cose-riga { background: #241f1a; border-color: #3a352e; }
  .cose-mod { background: #2b2620; border-color: #3a352e; }
}

/* La matita dentro l'header della sottocategoria, prima del numero: correggere
   Fido o Sara è una cosa che si fa una volta l'anno, e non merita una riga sua
   che riempie la pagina tutti i giorni. */
.acc-head .acc-mod {
  flex-shrink: 0;
  margin-left: auto;
  padding: 4px 8px;
  border-radius: 8px;
  font-size: 14px;
  color: var(--muted, #9a8a76);
  background: var(--bg, #fff8ef);
  border: 1px solid var(--line, #e8dccb);
  line-height: 1.2;
}
.acc-head .acc-mod + .acc-count { margin-left: 8px; }
/* Per gli elenchi senza sottocategorie (casa, giardino) una riga sola e bassa */
.cose-cambia {
  width: 100%; background: none; border: 1.5px dashed var(--line, #e8dccb);
  border-radius: 12px; padding: 10px; margin-bottom: 10px;
  color: var(--muted, #9a8a76); font-size: 13px; font-family: inherit; cursor: pointer;
}
/* Quando la categoria è ancora vuota questa riga non è un ripensamento, è
   l'unica cosa da fare lì dentro: si vede. */
.cose-cambia.vuota {
  border-color: #ffb3a7; color: #ff6b57; font-weight: 700; padding: 13px;
}
@media (prefers-color-scheme: dark) {
  .acc-head .acc-mod { background: #2b2620; border-color: #3a352e; }
}

/* La riga che separa le cose di adesso da quelle di là da venire */
.acc-avanti {
  display: flex; align-items: center; gap: 8px;
  margin: 14px 4px 8px;
  font-size: 11px; font-weight: 800; letter-spacing: .5px;
  color: var(--muted, #9a8a76); text-transform: uppercase;
}
.acc-avanti::before, .acc-avanti::after {
  content: ""; flex: 1; height: 1px; background: var(--line, #e8dccb);
}

/* La promessa a chi è stato invitato. Non è una carta di benvenuto: è quello
   che ci guadagna LUI, detto in due righe, prima di ogni altra cosa. */
.casa-card.promessa {
  background: #2b2620; color: #fff; border: none; text-align: left;
}
.casa-card.promessa .pr-tit {
  font-size: 12px; font-weight: 800; letter-spacing: 1.2px;
  text-transform: uppercase; opacity: .65; margin-bottom: 8px;
}
.casa-card.promessa .pr-testo {
  font-size: 17px; line-height: 1.5; margin-bottom: 16px;
}
.casa-card.promessa .pr-testo b { font-weight: 800; }
.casa-card.promessa .btn { background: #fff; color: #2b2620; }
@media (prefers-color-scheme: dark) {
  .casa-card.promessa { background: #3a352e; }
}

/* ── Voce 7: l'app dell'ospite è più povera, apposta ──
   Il calendario e i suggerimenti servono a chi organizza la propria vita. Chi
   è arrivato per dare una mano a qualcuno non deve configurare la sua
   giornata: deve vedere la bacheca, fare una cosa ed essere a posto. */
body.con-ospite #bottom-nav button[data-nav="calendar"] { display: none; }
/* Livello è il gioco delle clessidre, e le clessidre sono la moneta di chi
   sbriga le proprie cose. L'ospite non ne prende: lui raccoglie le caramelle
   di Insieme, che stanno dentro Insieme. Una sezione che resta a zero per
   sempre non è una funzione, è una domanda senza risposta. */
body.con-ospite #bottom-nav button[data-nav="rewards"],
body.con-ospite #home-candy { display: none; }
body.con-ospite #sugg-card,
body.con-ospite .quick-time,
body.con-ospite #btn-manage-cats,
body.con-ospite .center-hint,
body.con-ospite #franklin-home { display: none; }
body.con-ospite .wheel-wrap { padding-top: 8px; }
/* Per l'ospite anche la ruota è di troppo: ha una categoria sola, e non è
   venuto a organizzare le sue. La sua home è la promessa e la bacheca. */
body.con-ospite .wheel-wrap,
body.con-ospite .wheel-dots { display: none; }

/* ═══════════════════════════════════════════════════════════
   HOME DUE — "una cosa sola". Vive dietro l'interruttore nel
   Profilo: body.home2 accende questa, spegne i pezzi della
   classica. La classica resta intatta sotto.
   ═══════════════════════════════════════════════════════════ */
.h2-solo { display: none; }
body.home2 .h2-solo {
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; line-height: 1; padding: 0;
}

/* Nella nuova la testa si fa piccola: il saluto è una didascalia, non un titolo */
body.home2 .home-head { padding: 4px 2px 8px; }
/* Niente deve finire sotto il + che galleggia: la pagina si allunga di
   quel tanto che basta a far scorrere l'ultimo pulsante sopra di lui. */
body.home2 #screen-home { padding-bottom: 150px; }
body.home2 .home-head h1 { font-size: 19px; }
body.home2 .home-head p { font-size: 12px; margin-top: 1px; }

/* Cosa si spegne della classica */
body.home2 #sugg-card,
body.home2 #btn-inbox,
body.home2 .center-hint { display: none !important; }
/* Franklin nella home nuova non vive in una striscia: si presenta di
   persona, col popup grande, nei momenti che contano — benvenuto, prima
   task, cancellazioni, serie. La carta qui non serve. */
body.home2 #franklin-home { display: none !important; }
body.home2 #casa-card { display: none; }
body.home2.h2-vuota #casa-card { display: block; }

/* Le chip del tempo stanno dietro la tendina */
body.home2 #quick-time { display: none; }
body.home2 #quick-time .quick-label { display: none; }
body.home2.h2-tempo-aperto #quick-time { display: block; margin: 8px 0 0; }
body.home2 .h2-tendina {
  display: block; width: 100%; margin: 10px 0 0;
  background: none; border: 1px dashed #dfd2c0; border-radius: 14px; padding: 11px;
  font-family: inherit; font-size: 12.5px; color: var(--muted); cursor: pointer;
}
body.home2.h2-tempo-aperto .h2-tendina { border-style: solid; color: var(--ink); font-weight: 700; }
body:not(.home2) .h2-tendina { display: none; }

/* La striscia gialla dello smistamento */
.h2-smista {
  display: flex; align-items: center; gap: 8px; width: 100%; margin-bottom: 12px;
  background: #fff4dd; border: 1px solid #f0dcae; border-radius: 14px; padding: 11px 14px;
  font-family: inherit; font-size: 13px; font-weight: 700; color: #8a6a24;
  cursor: pointer; text-align: left;
}
.h2-smista b { margin-left: auto; font-weight: 800; }
body:not(.home2) .h2-smista { display: none !important; }

/* ── lo scivolo della carta: adesso · oggi · domani ── */
.h2-scivolo {
  display: flex; overflow-x: auto; gap: 10px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  /* Altezza FISSA per tutte e tre le pagine: sfogliando, la carta resta
     dov'è e non spinge giù mezza schermata. Se le righe sono tante,
     scorrono dentro la carta (.h2-lista). */
  height: min(258px, 34vh);
  align-items: stretch;
}
.h2-scivolo::-webkit-scrollbar { display: none; }
.h2-slide {
  flex: 0 0 100%; scroll-snap-align: center; scroll-snap-stop: always;
  min-width: 0; height: 100%;
}
.h2-punti { display: flex; justify-content: center; gap: 5px; margin-top: 8px; }
.h2-punti s {
  width: 5px; height: 5px; border-radius: 50%; background: #ddd0bd;
  display: block; transition: all .2s ease;
}
.h2-punti s.on { background: var(--accent); width: 14px; border-radius: 3px; }
/* Le righe delle pagine Oggi e Domani */
.h2-riga {
  display: flex; align-items: center; gap: 8px; width: 100%;
  background: none; border: none; border-top: 1px dashed var(--border);
  padding: 9px 2px; font-family: inherit; font-size: 13px; color: var(--ink);
  cursor: pointer; text-align: left;
}
.h2-riga:first-of-type { border-top: none; }
.h2-riga .ico { flex-shrink: 0; font-size: 16px; }
.h2-riga .tx { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
.h2-riga .qn { flex-shrink: 0; font-size: 10.5px; color: var(--muted); font-weight: 700; }
.h2-riga .qn.ora { color: var(--accent); }
.h2-slide .h2-niente {
  text-align: center; color: var(--muted); font-size: 12.5px; line-height: 1.5; padding: 18px 6px;
}
.h2-slide .h2-niente .fa2 { font-size: 30px; display: block; margin-bottom: 6px; }

/* La carta */
.h2-cosa {
  background: var(--card); border: 1px solid var(--border); border-radius: 22px;
  padding: 16px 16px 14px; box-shadow: var(--shadow);
  height: 100%; box-sizing: border-box;
  display: flex; flex-direction: column; overflow: hidden;
}
/* L'elenco delle pagine Oggi e Domani: scorre lui, mentre la testata e il
   pulsante del calendario restano fermi ai loro posti. */
.h2-lista {
  flex: 1; min-height: 0; overflow-y: auto; margin-top: 8px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin; scrollbar-color: #d8cab5 transparent;
}
.h2-lista::-webkit-scrollbar { width: 4px; }
.h2-lista::-webkit-scrollbar-thumb { background: #d8cab5; border-radius: 3px; }
.h2-lista::-webkit-scrollbar-track { background: transparent; }
/* Nella pagina «adesso» il testo si centra e i pulsanti restano in fondo:
   con l'altezza fissa, il respiro va diviso invece che ammucchiato sopra
   il pulsante. */
.h2-cosa.adesso .h2-occhio { margin-top: auto; }
.h2-cosa.adesso .h2-sot { margin-bottom: auto; }
.h2-cosa .h2-vuoto {
  flex: 1; min-height: 0; overflow-y: auto;
  display: flex; flex-direction: column; justify-content: center;
}
@media (prefers-color-scheme: dark) {
  .h2-lista { scrollbar-color: #4a4034 transparent; }
  .h2-lista::-webkit-scrollbar-thumb { background: #4a4034; }
}
.h2-cosa.urgente { border: 1.5px solid #ffb3a7; box-shadow: 0 6px 24px rgba(217, 79, 61, .18); }
.h2-occhio {
  font-size: 11px; letter-spacing: 1.4px; font-weight: 800; color: var(--accent);
  display: flex; align-items: center; gap: 6px;
}
.h2-occhio.rosso { color: #d94f3d; }
.h2-tit {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3;
  overflow: hidden;
  width: 100%; background: none; border: none; text-align: left;
  font-family: inherit; color: var(--ink); cursor: pointer; padding: 0;
  font-size: 21px; font-weight: 800; line-height: 1.2; letter-spacing: -.5px; margin: 8px 0 6px;
}
.h2-sot { font-size: 12.5px; color: var(--muted); line-height: 1.5; }
.h2-sot .ferma { color: #c98a3c; font-weight: 700; }
.h2-sot .tardi { color: #d94f3d; font-weight: 700; }
.h2-fatto {
  width: 100%; margin-top: 14px; background: var(--accent); color: #fff; border: none;
  border-radius: 16px; padding: 15px; font-family: inherit; font-size: 16px; font-weight: 800;
  cursor: pointer; box-shadow: 0 6px 18px rgba(255, 107, 87, .32);
}
.h2-nonad {
  width: 100%; margin-top: 4px; background: none; border: none; color: var(--muted);
  font-family: inherit; font-size: 13px; padding: 8px; text-decoration: underline; cursor: pointer;
}
.h2-vuoto { text-align: center; padding: 8px 4px; }
.h2-vuoto .fa { font-size: 46px; }
.h2-vuoto .vt { font-size: 21px; font-weight: 800; margin: 10px 0 6px; letter-spacing: -.4px; }
.h2-vuoto .vs { font-size: 13px; color: var(--muted); line-height: 1.55; }
.h2-scrivi {
  width: 100%; margin-top: 14px; background: var(--accent); color: #fff; border: none;
  border-radius: 17px; padding: 16px; font-family: inherit; font-size: 15.5px; font-weight: 800; cursor: pointer;
}

/* Le pillole delle prossime */
#h2-pross { margin-top: 12px; }
#h2-pross .eti { font-size: 10px; letter-spacing: 1.2px; font-weight: 800; color: var(--muted); margin-bottom: 7px; }
.h2-pillole button small.tardi2 { color: #d94f3d; }
#h2-pross:empty { margin-top: 0; }
.h2-pillole { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 3px; }
.h2-pillole::-webkit-scrollbar { height: 0; }
.h2-pillole button {
  flex-shrink: 0; background: var(--card); border: 1px solid var(--border); border-radius: 14px;
  padding: 10px 12px; font-family: inherit; font-size: 12.5px; font-weight: 600; color: #5f5346;
  cursor: pointer; max-width: 168px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  text-align: left;
}
.h2-pillole button small { display: block; font-size: 10px; color: var(--muted); font-weight: 700; }
.h2-pillole button.piu { color: var(--muted); font-weight: 700; }
.h2-conta { margin-top: 10px; font-size: 11.5px; color: var(--muted); }
.h2-conta .tardi { color: #d94f3d; font-weight: 800; border-bottom: 1px solid #f0b9b0; cursor: pointer; }

/* L'etichetta sopra la griglia delle categorie */
.h2-scorri {
  text-align: left; font-size: 10px; color: var(--muted); font-weight: 800;
  margin: 16px 2px 0; letter-spacing: 1.2px;
}
body.home2 .h2-scorri { display: block; }

/* Nella home nuova la ruota lascia il posto alla griglia: stesse bolle,
   stessi badge, stesso tocco — ma compatte, in righe da quattro. */
body.home2 .wheel-wrap,
body.home2 .wheel-dots,
body.home2 #btn-alltasks { display: none; }
body.home2 #h2-griglia { display: block; margin-top: 10px; }
#h2-griglia .h2-gscroll {
  /* I pallini sporgono sopra le bolle: senza questo respiro il bordo del
     contenitore li rifilava. */
  padding-top: 8px;
  display: flex; overflow-x: auto; gap: 12px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
#h2-griglia .h2-gscroll::-webkit-scrollbar { display: none; }
#h2-griglia .h2-gpag {
  flex: 0 0 100%; scroll-snap-align: center; scroll-snap-stop: always;
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 12px 6px; min-width: 0; align-content: start;
}
#h2-griglia { display: none; }
#h2-griglia button {
  background: none; border: none; padding: 0; font-family: inherit; cursor: pointer;
  text-align: center; font-size: 10px; color: var(--muted); font-weight: 600; min-width: 0;
}
#h2-griglia button i {
  display: flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; margin: 0 auto 4px; border-radius: 50%;
  background: var(--card); box-shadow: 0 3px 10px rgba(180, 140, 90, .14);
  font-size: 23px; font-style: normal; position: relative;
}
#h2-griglia button span {
  display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#h2-griglia button i b {
  position: absolute; top: -3px; right: -3px; background: var(--accent); color: #fff;
  min-width: 18px; height: 18px; border-radius: 999px; padding: 0 4px;
  font-size: 10px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
}
#h2-griglia button i b.chiede { background: #c9a227; }
@media (prefers-color-scheme: dark) {
  #h2-griglia button i { background: var(--card); }
}

/* Il + che galleggia: si spegne quando la ruota è in vista */
.h2-galla {
  /* Sotto ai fogli modali (z-index 50): quando un foglio è aperto il +
     scivola dietro al velo scuro invece di galleggiarci sopra. */
  position: fixed; right: max(16px, env(safe-area-inset-right)); bottom: 86px; z-index: 40;
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--accent); color: #fff; border: none; font-size: 28px; font-weight: 300; line-height: 1;
  box-shadow: 0 8px 22px rgba(255, 107, 87, .45); cursor: pointer;
  transition: opacity .25s ease, transform .25s ease;
}
.h2-galla.via { opacity: 0; transform: scale(.6); pointer-events: none; }
@media (min-width: 480px) {
  /* L'app è larga al massimo 480: il + resta dentro la sua colonna */
  .h2-galla { right: calc(50vw - 240px + 16px); }
}

@media (prefers-color-scheme: dark) {
  .h2-smista { background: #3a301c; border-color: #5d4a2c; color: #e8c987; }
  .h2-cosa { background: var(--card); }
}


/* ── La giornata tipo in una schermata: sezioni e coppie di campi ── */
.ob-sezione {
  font-size: 10.5px; letter-spacing: 1.2px; font-weight: 800; color: var(--muted);
  text-transform: uppercase; margin: 16px 2px 2px; text-align: left;
}
.ob-due { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; text-align: left; }
.ob-due label { font-size: 11.5px; }


/* ── Il piccolo Franklin seduto sul + ──
   Sempre presente ma mai invadente: sta lì, ogni quattro secondi si
   dondola un attimo, e cambia posa a seconda di come vanno le task.
   Non ruba i tocchi: il + sotto di lui funziona come sempre. */
.h2-galla { overflow: visible; }
.galla-fr {
  position: absolute; left: 50%; bottom: 38px; height: 66px; width: auto;
  transform: translateX(-50%);
  transform-origin: 50% 92%;
  pointer-events: none;
  filter: drop-shadow(0 2px 3px rgba(80, 50, 20, .28));
  animation: frMiniDondola 4s ease-in-out infinite;
}
@keyframes frMiniDondola {
  0%, 55%, 100% { transform: translateX(-50%) rotate(0deg) translateY(0); }
  62% { transform: translateX(-50%) rotate(-9deg) translateY(-4px); }
  70% { transform: translateX(-50%) rotate(8deg) translateY(-1px); }
  78% { transform: translateX(-50%) rotate(-6deg) translateY(-3px); }
  86% { transform: translateX(-50%) rotate(4deg) translateY(0); }
  93% { transform: translateX(-50%) rotate(0deg) translateY(0); }
}


/* ── La nuvoletta di Franklin ──
   Compare ogni tanto sopra la sua testa, dice una frase e se ne va.
   Non intercetta i tocchi e non compare mai sopra un foglio aperto. */
.galla-bolla {
  position: fixed; right: max(14px, env(safe-area-inset-right)); bottom: 198px;
  max-width: 215px; z-index: 41;
  background: var(--card); border: 1.5px solid var(--border);
  border-radius: 16px 16px 4px 16px;
  padding: 9px 12px; font-size: 12.5px; line-height: 1.45; color: var(--ink);
  box-shadow: 0 6px 18px rgba(120, 80, 40, .18);
  opacity: 0; transform: translateY(8px);
  transition: opacity .3s ease, transform .3s ease;
  pointer-events: none;
}
.galla-bolla.su { opacity: 1; transform: translateY(0); }
.galla-bolla::after {
  content: ""; position: absolute; right: 22px; bottom: -6.5px;
  width: 10px; height: 10px; background: var(--card);
  border-right: 1.5px solid var(--border); border-bottom: 1.5px solid var(--border);
  transform: rotate(45deg);
}
@media (min-width: 480px) {
  .galla-bolla { right: calc(50vw - 240px + 14px); }
}


/* ── Il sipario dell'avvio ── */
#velo-avvio {
  position: fixed; inset: 0; z-index: 10000; background: var(--bg);
  display: flex; flex-direction: column; align-items: center; justify-content: space-between;
  padding: max(60px, env(safe-area-inset-top)) 24px max(48px, env(safe-area-inset-bottom));
  transition: opacity .45s ease;
}
#velo-avvio.via { opacity: 0; pointer-events: none; }
.va-logo { font-size: 30px; font-weight: 800; letter-spacing: -.6px; }
.va-centro { position: relative; height: 190px; width: 190px; }
.va-anello {
  position: absolute; inset: 0; border-radius: 999px;
  border: 10px solid var(--border); border-top-color: var(--accent);
  animation: va-gira 1s linear infinite;
}
@keyframes va-gira { to { transform: rotate(360deg); } }
.va-fr {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -54%);
  height: 118px; width: auto;
}
.va-motto { color: var(--muted); font-size: 14.5px; font-style: italic; text-align: center; max-width: 300px; line-height: 1.5; }

/* ── Schermata di caricamento della sezione Insieme ── */
#velo-insieme {
  position: fixed; inset: 0; z-index: 9500; background: var(--bg);
  display: flex; flex-direction: column; align-items: center;
  padding: max(70px, env(safe-area-inset-top)) 24px max(48px, env(safe-area-inset-bottom));
  transition: opacity .35s ease;
}
#velo-insieme.via { opacity: 0; pointer-events: none; }
.vi-titolo { text-align: center; font-weight: 800; letter-spacing: -.5px; line-height: 1.15; }
.vi-titolo .vi-r1 { display: block; font-size: 26px; }
.vi-titolo .vi-r2 { display: block; font-size: 36px; color: var(--accent); }
.vi-centro { position: relative; height: 170px; width: 170px; margin: auto 0; }
.vi-anello {
  position: absolute; inset: 0; border-radius: 999px;
  border: 9px solid var(--border); border-top-color: var(--accent);
  animation: va-gira 1s linear infinite;
}
.vi-ico { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-size: 62px; }

/* ── Voce 30: il campo unico e le etichette dedotte ── */
.tk-etichette { margin: 10px 0 2px; }
.tk-etichette button {
  background: #fff0ed; border: 1.5px solid #ffd0c8; color: #c14e3e;
  border-radius: 14px; padding: 7px 11px; font: inherit; font-size: 12.5px; font-weight: 700;
}
.tk-etichette button.vuota { background: var(--card); border-color: var(--border); color: var(--muted); }
.tk-etichette button.aperta { outline: 2px solid var(--accent); }
.tk-popover {
  background: var(--card); border: 1.5px solid var(--border); border-radius: 14px;
  padding: 10px 12px 12px; margin: 8px 0 2px;
}
.tk-popover label { margin-top: 4px; }
.tk-memoria {
  margin: 10px 0 2px; background: #fdf3df; border: 1px solid #f3ddb0; border-radius: 13px;
  padding: 10px 13px; font-size: 12.5px; line-height: 1.55; color: #7a6636;
}
.urg-riga {
  display: flex; align-items: center; gap: 9px; width: 100%; margin-top: 12px;
  background: none; border: none; padding: 4px 2px; font: inherit; font-size: 13.5px;
  font-weight: 600; color: var(--ink); text-align: left;
}
.urg-riga .q {
  width: 21px; height: 21px; border: 2px solid var(--border); border-radius: 6px;
  background: var(--card); flex-shrink: 0;
}
.urg-riga.on .q { background: var(--accent); border-color: var(--accent); }
.urg-riga.on .q::after { content: "✓"; color: #fff; font-size: 13px; display: block; text-align: center; line-height: 17px; }
.apri-alt {
  display: flex; justify-content: space-between; align-items: center; width: 100%;
  margin-top: 10px; padding: 10px 2px; background: none; border: none;
  border-top: 1px dashed var(--border); font: inherit; font-size: 13px;
  font-weight: 700; color: var(--muted);
}
.apri-alt #tk-freccia { transition: transform .2s; }
.apri-alt.aperta #tk-freccia { transform: rotate(180deg); }
@media (prefers-color-scheme: dark) {
  .tk-etichette button { background: #4a2f28; border-color: #6b4038; color: #ffb3a8; }
  .tk-etichette button.vuota { background: var(--card); border-color: var(--border); color: var(--muted); }
  .tk-memoria { background: #3d3422; border-color: #5a4c2e; color: #d9c48a; }
}

/* ── Voce 31: il microfono accanto al + ── */
.h2-mic {
  position: fixed; right: calc(max(16px, env(safe-area-inset-right)) + 68px);
  bottom: 86px; z-index: 40;
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--card); color: var(--accent); border: 2.5px solid var(--accent);
  font-size: 23px; line-height: 1; cursor: pointer;
  box-shadow: 0 8px 22px rgba(255, 107, 87, .3);
  transition: opacity .25s ease, transform .25s ease;
  -webkit-user-select: none; user-select: none; touch-action: none;
  -webkit-touch-callout: none;
}
.h2-mic.via { opacity: 0; transform: scale(.6); pointer-events: none; }
.h2-mic.ascolta { background: var(--accent); color: #fff; transform: scale(1.1); }
@media (min-width: 480px) {
  .h2-mic { right: calc(50vw - 240px + 16px + 68px); }
}
#mic-velo {
  position: fixed; inset: 0; z-index: 60; background: rgba(35, 26, 18, .55);
  display: flex; align-items: flex-end;
  /* La pressione lunga non deve mettersi a selezionare testo e icone */
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
#mic-velo * { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
#mic-velo.hidden { display: none; }
.mic-pann {
  background: var(--card); width: 100%; border-radius: 26px 26px 0 0;
  padding: 22px 18px calc(26px + env(safe-area-inset-bottom)); text-align: center;
}
.mic-pann > b { font-size: 12px; letter-spacing: 1.2px; color: var(--accent); }
.mic-onda { display: flex; gap: 4px; justify-content: center; align-items: flex-end; height: 44px; margin: 10px 0 14px; }
.mic-onda i { width: 5px; background: var(--accent); border-radius: 3px; animation: mic-su .7s ease-in-out infinite alternate; }
.mic-onda i:nth-child(1) { height: 12px; }
.mic-onda i:nth-child(2) { height: 30px; animation-delay: .1s; }
.mic-onda i:nth-child(3) { height: 42px; animation-delay: .2s; }
.mic-onda i:nth-child(4) { height: 22px; animation-delay: .05s; }
.mic-onda i:nth-child(5) { height: 38px; animation-delay: .15s; }
.mic-onda i:nth-child(6) { height: 16px; animation-delay: .25s; }
.mic-onda i:nth-child(7) { height: 28px; animation-delay: .08s; }
@keyframes mic-su { to { transform: scaleY(.35); } }
#mic-testo { font-size: 16px; font-weight: 700; min-height: 24px; color: var(--ink); }
.mic-pann small { display: block; color: var(--muted); font-size: 11.5px; margin-top: 8px; }

/* ── Voce 35: le righe della ricerca globale ── */
.cg-riga {
  display: flex; align-items: center; gap: 10px; width: 100%;
  background: var(--card); border: 1px solid var(--border); border-radius: 13px;
  padding: 10px 13px; margin-bottom: 7px; font: inherit; text-align: left; color: var(--ink);
}
.cg-riga > span { font-size: 18px; flex-shrink: 0; }
.cg-riga .cg-corpo { flex: 1; min-width: 0; }
.cg-riga .cg-corpo b { display: block; font-size: 13.5px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cg-riga .cg-corpo small { color: var(--muted); font-size: 11px; }

/* ── Voce 37: l'etichetta del peso sulla carta ── */
.peso-eti.leggera { color: #3f8f5c; font-weight: 700; }
.peso-eti.media { color: #c98a3c; font-weight: 700; }
.peso-eti.pesante { color: #8a6d5c; font-weight: 700; }

/* ── Voce 38: la barra del progresso sui pezzi ── */
.h2-avanza, .td-avanza { margin-top: 10px; }
.h2-avanza small, .td-avanza small {
  display: flex; justify-content: space-between; font-size: 11px;
  color: var(--muted); font-weight: 700; letter-spacing: .5px; margin-bottom: 4px;
}
.h2-avanza .barra, .td-avanza .barra {
  height: 9px; background: #f3ece1; border-radius: 6px; overflow: hidden;
}
.h2-avanza .barra i, .td-avanza .barra i {
  display: block; height: 100%; background: #3f8f5c; border-radius: 6px;
}
@media (prefers-color-scheme: dark) {
  .h2-avanza .barra, .td-avanza .barra { background: #3a332b; }
}

/* ── Voce 39: il legame materiale/preparatoria nel dettaglio ── */
.td-mat {
  margin-top: 10px; background: #fdf3df; border: 1px solid #f3ddb0;
  border-radius: 13px; padding: 10px 13px; font-size: 12.5px;
  line-height: 1.55; color: #7a6636;
}
@media (prefers-color-scheme: dark) {
  .td-mat { background: #3d3422; border-color: #5a4c2e; color: #d9c48a; }
}

/* ── Voce 39: la sotto-task azzurrina ── */
.task-item.prep {
  background: #eef5fb;
  border-left: 3px solid #7db4e0;
  margin-left: 14px;
}
.task-item.prep .tag.prep-tag {
  background: #dcebf7; color: #39586e; font-weight: 700;
}
@media (prefers-color-scheme: dark) {
  .task-item.prep { background: #22303c; border-left-color: #4a7396; }
  .task-item.prep .tag.prep-tag { background: #2d3f4e; color: #9cc3e0; }
}

/* ── Voce 39: la sotto-task azzurrina anche in calendario ── */
.task-blk.prep-blk {
  background: #eef5fb !important;
  border-left: 3px solid #7db4e0;
}
.week-task.prep {
  background: #eef5fb;
  border-left: 3px solid #7db4e0;
  border-radius: 10px;
}
@media (prefers-color-scheme: dark) {
  .task-blk.prep-blk { background: #22303c !important; border-left-color: #4a7396; }
  .week-task.prep { background: #22303c; border-left-color: #4a7396; }
}

/* ── Voce 39: più materiali nel foglio ── */
#task-materiali .task-mat { margin-bottom: 7px; }
#task-mat-piu { margin-bottom: 4px; }

/* ── Voce 45: la carta della prova che si allunga ── */
.prova-card.hidden { display: none; }
.pv-testa { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 7px; }
.pv-testa b { font-size: 25px; font-weight: 800; letter-spacing: -.6px; }
.pv-testa small { font-size: 11px; color: var(--muted); font-weight: 700; letter-spacing: .4px; }
.pv-barra { height: 11px; background: #f3ece1; border-radius: 7px; overflow: hidden; }
.pv-barra i { display: block; height: 100%; border-radius: 7px;
  background: linear-gradient(90deg, #ffb27a, var(--accent)); transition: width .5s ease; }
.pv-scade { font-size: 11.5px; color: var(--muted); font-weight: 600; margin-top: 6px; }
.pv-extra { margin-top: 9px; background: #e9f4ec; border: 1px solid #bcd9c4; border-radius: 12px;
  padding: 9px 12px; font-size: 12.5px; color: #2f6b45; line-height: 1.45; }
.pv-lista { margin-top: 12px; }
.pv-lista div { display: flex; align-items: center; gap: 9px; font-size: 12.5px;
  padding: 8px 0; border-top: 1px dashed var(--border); line-height: 1.4; color: var(--ink); }
.pv-lista div:first-child { border-top: none; }
.pv-lista div > span:first-child { flex-shrink: 0; color: #ccc0b0; font-weight: 800; }
.pv-lista div.ok > span:first-child { color: #3f8f5c; }
.pv-lista div.ok > span:nth-child(2) { color: var(--muted); text-decoration: line-through; }
.pv-lista div > span:nth-child(2) { flex: 1; min-width: 0; }
.pv-lista .pv-q { font-style: normal; color: var(--muted); font-size: 11.5px; }
.pv-lista div > b { flex-shrink: 0; color: var(--accent); font-weight: 800; }
.pv-nota { margin-top: 10px; font-size: 11.5px; color: var(--muted); line-height: 1.5; }
/* la storia dentro il muro */
.pw-storia { display: flex; align-items: center; gap: 12px; background: #fff5f2;
  border: 1px solid #ffd0c8; border-radius: 14px; padding: 12px 14px; margin-bottom: 10px; }
.pw-storia b { font-size: 32px; font-weight: 800; color: var(--accent); line-height: 1; letter-spacing: -1px; }
.pw-storia span { font-size: 12.5px; color: #8a5a4e; line-height: 1.4; }
@media (prefers-color-scheme: dark) {
  .pv-barra { background: #3a332b; }
  .pv-extra { background: #1e3326; border-color: #2f5c3c; color: #9fd4b0; }
  .pw-storia { background: #4a2f28; border-color: #6b4038; }
  .pw-storia span { color: #e0b5aa; }
}
.plan-card.hidden { display: none; }

/* ── Voce 47: il listino dentro il muro ── */
.pw-listino { margin: 14px 0 4px; }
.pw-lstit { font-size: 10.5px; letter-spacing: 1.3px; font-weight: 800; color: var(--muted); margin-bottom: 8px; }
.pw-piano {
  position: relative; display: grid; grid-template-columns: 1fr auto;
  width: 100%; text-align: left; gap: 2px 10px;
  background: var(--card); border: 2px solid var(--border); border-radius: 16px;
  padding: 13px 15px; margin-bottom: 9px; font: inherit; color: var(--ink); cursor: pointer;
}
.pw-piano.top { border-color: var(--accent); background: #fff5f2; }
.pw-piano.regalo { border-color: #bcd9c4; background: #f2f7f3; }
.pw-nome { font-size: 15px; font-weight: 800; }
.pw-eu {
  font-size: 21px; font-weight: 800; color: var(--accent); letter-spacing: -.5px;
  grid-column: 2; grid-row: 1 / span 2; align-self: center; white-space: nowrap;
}
.pw-nome, .pw-sotto { grid-column: 1; }
.pw-piano.regalo .pw-eu { color: #3f8f5c; }
.pw-sotto { font-size: 11.5px; color: var(--muted); line-height: 1.4; }
.pw-eti {
  position: absolute; top: -9px; right: 12px; background: var(--accent); color: #fff;
  font-size: 9.5px; font-weight: 800; letter-spacing: .8px; padding: 3px 8px; border-radius: 8px;
}
@media (prefers-color-scheme: dark) {
  .pw-piano.top { background: #4a2f28; }
  .pw-piano.regalo { background: #1e3326; border-color: #2f5c3c; }
}

/* ── I criteri della password ── */
.pw-forza { display: flex; gap: 4px; margin: -4px 0 8px; }
.pw-forza.hidden { display: none; }
.pw-forza i { flex: 1; height: 4px; border-radius: 3px; background: #ece3d6; transition: background .25s; }
.pw-forza i.mid { background: #c98a3c; }
.pw-forza i.on { background: #3f8f5c; }
.pw-regole { font-size: 11.5px; line-height: 1.75; color: var(--muted); margin: 0 0 10px; }
.pw-regole.hidden { display: none; }
.pw-regole div { display: flex; gap: 7px; align-items: baseline; }
.pw-regole div > span { color: #ccc0b0; font-weight: 800; flex-shrink: 0; }
.pw-regole div.ok > span { color: #3f8f5c; }
.pw-regole i { font-style: normal; opacity: .75; }
/* Il campo del codice: sei cifre grandi e distanziate */
.otp-campo {
  text-align: center; font-size: 30px; font-weight: 800;
  letter-spacing: 12px; padding-left: 12px;
}
@media (prefers-color-scheme: dark) {
  .pw-forza i { background: #3a332b; }
}

/* ── Promemoria: email non ancora confermata ── */
.avviso-mail {
  display: flex; align-items: center; gap: 10px;
  background: #fdf3df; border: 1px solid #f3ddb0; border-radius: 14px;
  padding: 11px 14px; margin-bottom: 12px; font-size: 12.5px;
  color: #7a6636; line-height: 1.4;
}
.avviso-mail.hidden { display: none; }
.avviso-mail span { flex: 1; min-width: 0; }
@media (prefers-color-scheme: dark) {
  .avviso-mail { background: #3d3422; border-color: #5a4c2e; color: #d9c48a; }
}