/* I dieci aspetti dell'app.
 *
 * Ogni tema ridefinisce le stesse variabili di app.css: colori, caratteri, quanto è
 * sfocato il vetro e che alone ha lo sfondo. Nessuna regola nuova per schermata, così
 * ogni pagina — diario, dispensa, ricette, pagamento — cambia aspetto da sola.
 *
 * `--blur` a 0 spegne l'effetto vetro; `--texture` è la riga della carta a quadretti;
 * `--glow1`/`--glow2` sono i due aloni sullo sfondo.
 */

:root {
  --f-display: 'Playfair Display', Georgia, serif;
  --f-body: 'Lato', system-ui, sans-serif;
  --f-hand: 'Caveat', cursive;
  --blur: 0px;
  --texture: 0.4;
  --glow1: transparent;
  --glow2: transparent;
  --glow-size: 340px;
}

/* Lo sfondo colorato dei temi a vetro: sta dietro a tutto e non intercetta i tocchi. */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(var(--glow-size) var(--glow-size) at 12% -6%, var(--glow1), transparent 70%),
    radial-gradient(var(--glow-size) var(--glow-size) at 92% 38%, var(--glow2), transparent 70%);
}

body::before { opacity: var(--texture); }

/* Le superfici diventano vetro solo dove `--blur` è maggiore di zero. */
header, nav, .fpaper, .mcard, .frow, .sc, .modal, .datestrip, .shelftop, .sday, .chip {
  backdrop-filter: blur(var(--blur));
  -webkit-backdrop-filter: blur(var(--blur));
}

/* ---------------------------------------------------------------- 9 · Notte OLED (di partenza) */
[data-tema="notte-oled"] {
  --f-display: 'Bricolage Grotesque', system-ui, sans-serif;
  --f-body: 'DM Sans', system-ui, sans-serif;
  --f-hand: 'DM Sans', system-ui, sans-serif;
  --cream: #000000; --paper: rgba(255,255,255,0.05); --ink: #f5f5f5; --ink2: #b0b0b0; --ink3: #8a8a8a;
  --rust: #ff6b4a; --rust-light: rgba(255,107,74,0.16); --rust-mid: #ff8a6d;
  --sage: #4ade80; --sage-light: rgba(74,222,128,0.14);
  --honey: #fbbf24; --honey-light: rgba(251,191,36,0.14);
  --slate: #7dd3fc; --slate-light: rgba(125,211,252,0.14);
  --border: rgba(255,255,255,0.09); --border2: rgba(255,255,255,0.18);
  --r: 20px; --rs: 14px; --sh: 0 6px 22px rgba(0,0,0,0.6);
  --blur: 18px; --texture: 0; --glow1: rgba(255,107,74,0.28); --glow2: rgba(255,107,74,0.1);
  color-scheme: dark;
}

/* ---------------------------------------------------------------- 1 · Vetro Notte */
[data-tema="vetro-notte"] {
  --f-display: 'Sora', system-ui, sans-serif;
  --f-body: 'Sora', system-ui, sans-serif;
  --f-hand: 'Sora', system-ui, sans-serif;
  --cream: #070b14; --paper: rgba(255,255,255,0.07); --ink: #eef2ff; --ink2: #c3cbe6; --ink3: #949dbb;
  --rust: #7dd3fc; --rust-light: rgba(125,211,252,0.16); --rust-mid: #a78bfa;
  --sage: #34d399; --sage-light: rgba(52,211,153,0.14);
  --honey: #fbbf24; --honey-light: rgba(251,191,36,0.14);
  --slate: #a78bfa; --slate-light: rgba(167,139,250,0.16);
  --border: rgba(255,255,255,0.12); --border2: rgba(255,255,255,0.2);
  --r: 24px; --rs: 16px; --sh: 0 10px 30px rgba(0,0,0,0.45);
  --blur: 20px; --texture: 0; --glow1: rgba(67,56,202,0.55); --glow2: rgba(14,165,233,0.35);
  --glow-size: 380px;
  color-scheme: dark;
}

/* ---------------------------------------------------------------- 2 · Vetro Giorno */
[data-tema="vetro-giorno"] {
  --f-display: 'Manrope', system-ui, sans-serif;
  --f-body: 'Manrope', system-ui, sans-serif;
  --f-hand: 'Manrope', system-ui, sans-serif;
  --cream: #eef2ff; --paper: rgba(255,255,255,0.72); --ink: #111827; --ink2: #4b5563; --ink3: #6b7280;
  --rust: #4f46e5; --rust-light: rgba(79,70,229,0.12); --rust-mid: #818cf8;
  --sage: #059669; --sage-light: rgba(5,150,105,0.12);
  --honey: #b45309; --honey-light: rgba(180,83,9,0.12);
  --slate: #db2777; --slate-light: rgba(219,39,119,0.12);
  --border: rgba(17,24,39,0.08); --border2: rgba(17,24,39,0.16);
  --r: 26px; --rs: 16px; --sh: 0 10px 30px rgba(79,70,229,0.12);
  --blur: 22px; --texture: 0; --glow1: rgba(199,210,254,0.9); --glow2: rgba(251,207,232,0.8);
  --glow-size: 360px;
  color-scheme: light;
}

/* ---------------------------------------------------------------- 3 · Cucina Calda */
[data-tema="cucina-calda"] {
  --f-display: 'Fraunces', Georgia, serif;
  --f-body: 'Lato', system-ui, sans-serif;
  --f-hand: 'Caveat', cursive;
  --cream: #f5f0e8; --paper: rgba(255,252,247,0.82); --ink: #2e2620; --ink2: #6b5b4b; --ink3: #8a7b6b;
  --rust: #c2410c; --rust-light: rgba(194,65,12,0.1); --rust-mid: #e0854f;
  --sage: #4d7c0f; --sage-light: rgba(77,124,15,0.12);
  --honey: #a16207; --honey-light: rgba(161,98,7,0.12);
  --slate: #7c2d12; --slate-light: rgba(124,45,18,0.1);
  --border: rgba(107,91,75,0.16); --border2: rgba(107,91,75,0.3);
  --r: 20px; --rs: 12px; --sh: 0 8px 22px rgba(120,90,60,0.1);
  --blur: 16px; --texture: 0.35; --glow1: rgba(244,201,163,0.85); --glow2: rgba(207,217,189,0.8);
  color-scheme: light;
}

/* ---------------------------------------------------------------- 4 · Acquerello */
[data-tema="acquerello"] {
  --f-display: 'Quicksand', system-ui, sans-serif;
  --f-body: 'Quicksand', system-ui, sans-serif;
  --f-hand: 'Quicksand', system-ui, sans-serif;
  --cream: #fbfaff; --paper: rgba(255,255,255,0.75); --ink: #1f2937; --ink2: #4b5563; --ink3: #6b7280;
  --rust: #0d9488; --rust-light: rgba(13,148,136,0.12); --rust-mid: #5eead4;
  --sage: #047857; --sage-light: rgba(4,120,87,0.12);
  --honey: #b45309; --honey-light: rgba(180,83,9,0.12);
  --slate: #6d28d9; --slate-light: rgba(109,40,217,0.12);
  --border: rgba(31,41,55,0.08); --border2: rgba(31,41,55,0.16);
  --r: 26px; --rs: 18px; --sh: 0 8px 24px rgba(13,148,136,0.1);
  --blur: 16px; --texture: 0; --glow1: rgba(167,243,208,0.85); --glow2: rgba(221,214,254,0.85);
  color-scheme: light;
}

/* ---------------------------------------------------------------- 5 · Neon Mercato */
[data-tema="neon-mercato"] {
  --f-display: 'Space Grotesk', system-ui, sans-serif;
  --f-body: 'Space Grotesk', system-ui, sans-serif;
  --f-hand: 'Space Grotesk', system-ui, sans-serif;
  --cream: #0b0f0c; --paper: rgba(236,252,203,0.06); --ink: #ecfccb; --ink2: #c3d49b; --ink3: #93a475;
  --rust: #b6ff3b; --rust-light: rgba(182,255,59,0.12); --rust-mid: #a3e635;
  --sage: #4ade80; --sage-light: rgba(74,222,128,0.12);
  --honey: #facc15; --honey-light: rgba(250,204,21,0.12);
  --slate: #67e8f9; --slate-light: rgba(103,232,249,0.12);
  --border: rgba(236,252,203,0.12); --border2: rgba(236,252,203,0.24);
  --r: 16px; --rs: 10px; --sh: 0 8px 24px rgba(0,0,0,0.5);
  --blur: 18px; --texture: 0; --glow1: rgba(63,98,18,0.85); --glow2: rgba(22,101,52,0.7);
  color-scheme: dark;
}

/* ---------------------------------------------------------------- 6 · Minimal Svizzero */
[data-tema="minimal-svizzero"] {
  --f-display: 'Archivo', system-ui, sans-serif;
  --f-body: 'Archivo', system-ui, sans-serif;
  --f-hand: 'Archivo', system-ui, sans-serif;
  --cream: #ffffff; --paper: #ffffff; --ink: #111111; --ink2: #525252; --ink3: #737373;
  --rust: #e11d48; --rust-light: rgba(225,29,72,0.08); --rust-mid: #fb7185;
  --sage: #15803d; --sage-light: rgba(21,128,61,0.1);
  --honey: #a16207; --honey-light: rgba(161,98,7,0.1);
  --slate: #1d4ed8; --slate-light: rgba(29,78,216,0.1);
  --border: #e5e5e5; --border2: #111111;
  --r: 0px; --rs: 0px; --sh: none;
  --blur: 0px; --texture: 0; --glow1: transparent; --glow2: transparent;
  color-scheme: light;
}

/* ---------------------------------------------------------------- 7 · Vetro Brina */
[data-tema="vetro-brina"] {
  --f-display: 'Figtree', system-ui, sans-serif;
  --f-body: 'Figtree', system-ui, sans-serif;
  --f-hand: 'Figtree', system-ui, sans-serif;
  --cream: #dde3ea; --paper: rgba(255,255,255,0.5); --ink: #0f172a; --ink2: #475569; --ink3: #64748b;
  --rust: #0f172a; --rust-light: rgba(15,23,42,0.08); --rust-mid: #64748b;
  --sage: #0f766e; --sage-light: rgba(15,118,110,0.1);
  --honey: #b45309; --honey-light: rgba(180,83,9,0.1);
  --slate: #1e40af; --slate-light: rgba(30,64,175,0.1);
  --border: rgba(255,255,255,0.8); --border2: rgba(15,23,42,0.14);
  --r: 30px; --rs: 18px; --sh: 0 16px 34px rgba(15,23,42,0.1);
  --blur: 30px; --texture: 0; --glow1: rgba(255,255,255,0.95); --glow2: rgba(195,204,216,0.9);
  --glow-size: 380px;
  color-scheme: light;
}

/* ---------------------------------------------------------------- 8 · Agrumi */
[data-tema="agrumi"] {
  --f-display: 'Outfit', system-ui, sans-serif;
  --f-body: 'Outfit', system-ui, sans-serif;
  --f-hand: 'Outfit', system-ui, sans-serif;
  --cream: #b8480d; --paper: rgba(255,247,237,0.18); --ink: #fff7ed; --ink2: #ffe7cf; --ink3: #ffd3ae;
  --rust: #fff7ed; --rust-light: rgba(255,247,237,0.18); --rust-mid: #ffedd5;
  --sage: #bbf7d0; --sage-light: rgba(187,247,208,0.18);
  --honey: #fde68a; --honey-light: rgba(253,230,138,0.18);
  --slate: #bae6fd; --slate-light: rgba(186,230,253,0.18);
  --border: rgba(255,247,237,0.26); --border2: rgba(255,247,237,0.42);
  --r: 26px; --rs: 16px; --sh: 0 10px 28px rgba(120,53,15,0.28);
  --blur: 20px; --texture: 0; --glow1: rgba(251,191,36,0.8); --glow2: rgba(21,128,61,0.85);
  --glow-size: 420px;
  color-scheme: dark;
}

/* ---------------------------------------------------------------- 10 · Terracotta */
[data-tema="terracotta"] {
  --f-display: 'Lora', Georgia, serif;
  --f-body: 'Karla', system-ui, sans-serif;
  --f-hand: 'Lora', Georgia, serif;
  --cream: #241a15; --paper: rgba(244,236,229,0.08); --ink: #f4ece5; --ink2: #d6c5b8; --ink3: #ab9a8c;
  --rust: #e07a5f; --rust-light: rgba(224,122,95,0.14); --rust-mid: #e5a893;
  --sage: #81b29a; --sage-light: rgba(129,178,154,0.14);
  --honey: #e6b45e; --honey-light: rgba(230,180,94,0.14);
  --slate: #9ab7c7; --slate-light: rgba(154,183,199,0.14);
  --border: rgba(244,236,229,0.14); --border2: rgba(244,236,229,0.26);
  --r: 22px; --rs: 14px; --sh: 0 10px 26px rgba(0,0,0,0.4);
  --blur: 18px; --texture: 0; --glow1: rgba(224,122,95,0.5); --glow2: rgba(129,178,154,0.35);
  color-scheme: dark;
}

/* ---------------------------------------------------------------- scelta del tema, nelle impostazioni */
.temigrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  gap: 10px;
  margin-top: 4px;
}

.temacard {
  border: 1.5px solid var(--border2);
  border-radius: var(--rs);
  background: var(--paper);
  padding: 0;
  cursor: pointer;
  overflow: hidden;
  text-align: left;
  font-family: var(--f-body);
  color: var(--ink);
  transition: transform .15s, border-color .15s;
}

.temacard:hover { transform: translateY(-2px); border-color: var(--rust); }
.temacard.active { border-color: var(--rust); border-width: 2.5px; }

.temaprev {
  height: 62px;
  position: relative;
  display: flex;
  align-items: flex-end;
  gap: 4px;
  padding: 8px;
}

.temaprev span {
  display: block;
  height: 10px;
  border-radius: 5px;
  flex: 1;
}

.temanome {
  padding: 7px 9px 9px;
  font-size: 0.72rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 5px;
}

.temacheck { color: var(--rust); font-size: 0.8rem; }

/* ---------------------------------------------------------------- il giro di presentazione */
.tutwrap { position: fixed; inset: 0; z-index: 400; }

.tutvelo { position: absolute; inset: 0; background: rgba(0,0,0,0.55); }

.tutanello {
  position: fixed;
  border: 2.5px solid var(--rust);
  border-radius: calc(var(--rs) + 4px);
  box-shadow: 0 0 0 4px rgba(0,0,0,0.25), 0 0 22px var(--rust);
  pointer-events: none;
  transition: top .25s, left .25s, width .25s, height .25s;
}

.tutcard {
  position: absolute;
  left: 50%;
  bottom: 26px;
  transform: translateX(-50%);
  width: min(420px, calc(100vw - 32px));
  background: var(--paper);
  backdrop-filter: blur(var(--blur));
  -webkit-backdrop-filter: blur(var(--blur));
  border: 1.5px solid var(--border2);
  border-radius: var(--r);
  box-shadow: var(--sh);
  padding: 18px 20px 16px;
  color: var(--ink);
}

.tutconta {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink3);
}

.tuttitolo {
  font-family: var(--f-display);
  font-size: 1.12rem;
  font-weight: 700;
  margin: 6px 0 8px;
  outline: none;
}

.tuttesto { font-size: 0.88rem; color: var(--ink2); line-height: 1.55; }

.tutazioni { display: flex; align-items: center; gap: 8px; margin-top: 16px; }
.tutspazio { flex: 1; }

/* ---------------------------------------------------------------- il tondo + */
.fab {
  position: fixed;
  right: 18px;
  bottom: calc(18px + env(safe-area-inset-bottom));
  width: 58px;
  height: 58px;
  border-radius: 50%;
  border: none;
  background: var(--rust);
  color: var(--cream);
  box-shadow: 0 12px 28px rgba(0,0,0,0.3);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 150;
  transition: transform .15s, filter .15s;
}

.fab svg { width: 26px; height: 26px; }
.fab:hover { transform: translateY(-2px); filter: brightness(1.08); }
.fab.hidden { display: none; }

/* Il pulsante coprirebbe l'ultima riga della lista: si lascia spazio sotto. */
main { padding-bottom: 104px; }

/* ---------------------------------------------------------------- ricettario */
.ai-banner {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  text-align: left;
  padding: 14px 16px;
  margin-bottom: 16px;
  border-radius: var(--r);
  border: 1.5px solid var(--rust);
  background: var(--rust-light);
  color: var(--ink);
  font-family: var(--f-body);
  cursor: pointer;
  backdrop-filter: blur(var(--blur));
  -webkit-backdrop-filter: blur(var(--blur));
}

.ai-icona {
  width: 38px; height: 38px; flex-shrink: 0;
  border-radius: var(--rs);
  background: var(--rust);
  color: var(--cream);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem;
}

.ai-testi { display: flex; flex-direction: column; gap: 2px; }
.ai-titolo { font-weight: 700; font-size: 0.9rem; }
.ai-sub { font-size: 0.76rem; color: var(--ink2); }

.rcard {
  background: var(--paper);
  border: 1.5px solid var(--border);
  border-radius: var(--r);
  padding: 15px 16px;
  margin-bottom: 10px;
  box-shadow: var(--sh);
  backdrop-filter: blur(var(--blur));
  -webkit-backdrop-filter: blur(var(--blur));
}

/* Le ricette incomplete restano leggibili ma in secondo piano. */
.rcard.spenta { opacity: 0.62; box-shadow: none; }
.rcard.spenta .rname { color: var(--ink2); }

.rtop { display: flex; align-items: center; gap: 10px; margin-bottom: 5px; }
.rname { font-family: var(--f-display); font-weight: 700; font-size: 1rem; flex: 1; }

.rbadge {
  font-size: 0.62rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
  padding: 3px 9px; border-radius: 20px; white-space: nowrap;
}
.rb-ok { background: var(--sage-light); color: var(--sage); }
.rb-manca { background: var(--honey-light); color: var(--honey); }

.rmeta { font-size: 0.74rem; color: var(--ink3); margin-bottom: 9px; }
.rfoot { margin-top: 11px; }

/* ---------------------------------------------------------------- schermata Pro */
.pro-tag {
  display: inline-block; padding: 4px 11px; border-radius: 20px;
  background: var(--rust); color: var(--cream);
  font-size: 0.64rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  margin-bottom: 12px;
}

.pro-lista { list-style: none; text-align: left; margin: 0 auto 18px; max-width: 330px; }
.pro-lista li {
  position: relative; padding: 7px 0 7px 26px;
  font-size: 0.85rem; color: var(--ink2);
}
.pro-lista li::before {
  content: '✓'; position: absolute; left: 0; top: 7px;
  color: var(--rust); font-weight: 700;
}

.pro-prezzo { margin-bottom: 16px; }
.pro-cifra { font-family: var(--f-display); font-size: 2rem; font-weight: 700; line-height: 1; }
.pro-periodo { font-size: 0.74rem; color: var(--ink3); }
.pro-nota { margin-top: 14px; font-size: 0.7rem; color: var(--ink3); }