/* =====================================================================
   Ratio · Stile
   ===================================================================== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ---------- Tema base (Aurora, scuro) ---------- */
:root {
  color-scheme: dark;
  --bg: #0b0d1a;
  --bg-blob-1: #6c63ff;
  --bg-blob-2: #22d3ee;
  --bg-blob-3: #f472b6;
  --blob-opacity: 0.55;
  --surface: rgba(20, 22, 44, 0.72);
  --surface-solid: #161832;
  --list-bg: rgba(18, 20, 40, 0.62);
  --list-border: rgba(255, 255, 255, 0.08);
  --card: rgba(36, 38, 70, 0.92);
  --card-hover: rgba(46, 48, 88, 0.98);
  --card-border: rgba(255, 255, 255, 0.06);
  --accent: #7c74ff;
  --accent-2: #38bdf8;
  --accent-light: #9d96ff;
  --accent-glow: rgba(124, 116, 255, 0.35);
  --accent-soft: rgba(124, 116, 255, 0.12);
  --text: #eceef8;
  --text-muted: #9aa0c0;
  --text-dim: #626a92;
  --border: rgba(255, 255, 255, 0.1);
  --danger: #ff6b6b;
  --success: #4ade80;
  --warning: #fbbf24;
  --radius: 14px;
  --radius-sm: 9px;
  --shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.55);
  --transition: 0.18s cubic-bezier(0.4, 0, 0.2, 1);
  --header-h: 62px;
  --sicuro-su: env(safe-area-inset-top, 0px);
  --sicuro-giu: env(safe-area-inset-bottom, 0px);
  --sicuro-sx: env(safe-area-inset-left, 0px);
  --sicuro-dx: env(safe-area-inset-right, 0px);
  --noise-opacity: 0.045;
}

:root[data-theme="oceano"] {
  --bg: #061420; --bg-blob-1: #0ea5e9; --bg-blob-2: #14b8a6; --bg-blob-3: #6366f1;
  --accent: #38bdf8; --accent-2: #2dd4bf; --accent-light: #7dd3fc;
  --accent-glow: rgba(56, 189, 248, 0.35); --accent-soft: rgba(56, 189, 248, 0.12);
  --surface: rgba(10, 30, 46, 0.72); --surface-solid: #0c2234;
  --list-bg: rgba(8, 26, 40, 0.62); --card: rgba(18, 48, 70, 0.92); --card-hover: rgba(24, 60, 88, 0.98);
}
:root[data-theme="tramonto"] {
  --bg: #170a12; --bg-blob-1: #f97316; --bg-blob-2: #ec4899; --bg-blob-3: #a855f7;
  --accent: #fb923c; --accent-2: #f472b6; --accent-light: #fdba74;
  --accent-glow: rgba(251, 146, 60, 0.35); --accent-soft: rgba(251, 146, 60, 0.12);
  --surface: rgba(40, 18, 30, 0.72); --surface-solid: #2a1520;
  --list-bg: rgba(34, 14, 26, 0.62); --card: rgba(64, 30, 46, 0.92); --card-hover: rgba(80, 38, 58, 0.98);
}
:root[data-theme="foresta"] {
  --bg: #07130e; --bg-blob-1: #22c55e; --bg-blob-2: #84cc16; --bg-blob-3: #14b8a6;
  --accent: #4ade80; --accent-2: #a3e635; --accent-light: #86efac;
  --accent-glow: rgba(74, 222, 128, 0.32); --accent-soft: rgba(74, 222, 128, 0.12);
  --surface: rgba(14, 34, 24, 0.72); --surface-solid: #10281c;
  --list-bg: rgba(10, 28, 20, 0.62); --card: rgba(22, 52, 36, 0.92); --card-hover: rgba(28, 66, 46, 0.98);
}
:root[data-theme="notte"] {
  --bg: #0a0a0c; --bg-blob-1: #27272a; --bg-blob-2: #3f3f46; --bg-blob-3: #18181b; --blob-opacity: 0.6;
  --accent: #a1a1aa; --accent-2: #d4d4d8; --accent-light: #e4e4e7;
  --accent-glow: rgba(161, 161, 170, 0.25); --accent-soft: rgba(161, 161, 170, 0.1);
  --surface: rgba(20, 20, 24, 0.85); --surface-solid: #141418;
  --list-bg: rgba(18, 18, 22, 0.7); --card: rgba(34, 34, 40, 0.95); --card-hover: rgba(44, 44, 52, 1);
}
:root[data-theme="chiaro"] {
  color-scheme: light;
  --bg: #eef1fb; --bg-blob-1: #a5b4fc; --bg-blob-2: #99f6e4; --bg-blob-3: #fbcfe8; --blob-opacity: 0.75;
  --surface: rgba(255, 255, 255, 0.78); --surface-solid: #ffffff;
  --list-bg: rgba(255, 255, 255, 0.6); --list-border: rgba(30, 30, 60, 0.08);
  --card: rgba(255, 255, 255, 0.95); --card-hover: #ffffff; --card-border: rgba(30, 30, 60, 0.08);
  --accent: #6366f1; --accent-2: #0ea5e9; --accent-light: #4f46e5;
  --accent-glow: rgba(99, 102, 241, 0.25); --accent-soft: rgba(99, 102, 241, 0.1);
  --text: #1a1c33; --text-muted: #5b6080; --text-dim: #9a9fbf; --border: rgba(30, 30, 60, 0.12);
  --shadow: 0 6px 24px rgba(40, 40, 90, 0.12); --shadow-lg: 0 16px 48px rgba(40, 40, 90, 0.2);
  --noise-opacity: 0.03;
}
:root[data-theme="carta"] {
  color-scheme: light;
  --bg: #f6f1e7; --bg-blob-1: #fdba74; --bg-blob-2: #fde68a; --bg-blob-3: #fca5a5; --blob-opacity: 0.55;
  --surface: rgba(255, 252, 245, 0.8); --surface-solid: #fffcf5;
  --list-bg: rgba(255, 252, 245, 0.62); --list-border: rgba(80, 50, 20, 0.1);
  --card: rgba(255, 255, 255, 0.95); --card-hover: #ffffff; --card-border: rgba(80, 50, 20, 0.1);
  --accent: #ea580c; --accent-2: #d97706; --accent-light: #c2410c;
  --accent-glow: rgba(234, 88, 12, 0.22); --accent-soft: rgba(234, 88, 12, 0.1);
  --text: #2b2117; --text-muted: #6b5a4a; --text-dim: #a8998a; --border: rgba(80, 50, 20, 0.14);
  --shadow: 0 6px 24px rgba(90, 60, 20, 0.12); --shadow-lg: 0 16px 48px rgba(90, 60, 20, 0.2);
  --noise-opacity: 0.05;
}

/* ---------- Temi monocromatici (sfondo di una sola tinta, massima leggibilità) ----------
   Le tre macchie condividono la stessa tinta con luminosità diverse: lo sfondo resta
   calmo e il testo non deve mai competere con due colori che si incontrano. */
:root[data-theme="inchiostro"] {
  --bg: #070c18; --bg-blob-1: #1e3a8a; --bg-blob-2: #2563eb; --bg-blob-3: #172554;
  --blob-opacity: 0.38;
  --accent: #60a5fa; --accent-2: #93c5fd; --accent-light: #bfdbfe;
  --accent-glow: rgba(96, 165, 250, 0.3); --accent-soft: rgba(96, 165, 250, 0.12);
  --surface: rgba(12, 19, 36, 0.82); --surface-solid: #0d1527;
  --list-bg: rgba(10, 17, 32, 0.7); --card: rgba(23, 34, 60, 0.95); --card-hover: rgba(31, 45, 78, 1);
  --text: #e8edf8; --text-muted: #9aa8c6; --text-dim: #616e8e;
}
:root[data-theme="ardesia"] {
  --bg: #0c1116; --bg-blob-1: #334155; --bg-blob-2: #475569; --bg-blob-3: #1e293b;
  --blob-opacity: 0.5;
  --accent: #94a3b8; --accent-2: #cbd5e1; --accent-light: #e2e8f0;
  --accent-glow: rgba(148, 163, 184, 0.26); --accent-soft: rgba(148, 163, 184, 0.11);
  --surface: rgba(18, 24, 32, 0.84); --surface-solid: #121820;
  --list-bg: rgba(15, 21, 28, 0.72); --card: rgba(30, 39, 50, 0.95); --card-hover: rgba(40, 51, 64, 1);
  --text: #e9edf2; --text-muted: #98a4b3; --text-dim: #626e7d;
}
:root[data-theme="salvia"] {
  --bg: #08120d; --bg-blob-1: #14532d; --bg-blob-2: #166534; --bg-blob-3: #052e16;
  --blob-opacity: 0.42;
  --accent: #6ee7a8; --accent-2: #a7f3c9; --accent-light: #bbf7d0;
  --accent-glow: rgba(110, 231, 168, 0.26); --accent-soft: rgba(110, 231, 168, 0.1);
  --surface: rgba(12, 26, 19, 0.84); --surface-solid: #0c1a13;
  --list-bg: rgba(10, 22, 16, 0.72); --card: rgba(21, 43, 32, 0.95); --card-hover: rgba(28, 55, 41, 1);
  --text: #e8f2ec; --text-muted: #93ab9e; --text-dim: #5e7568;
}
:root[data-theme="prugna"] {
  --bg: #100a18; --bg-blob-1: #4c1d95; --bg-blob-2: #6d28d9; --bg-blob-3: #2e1065;
  --blob-opacity: 0.36;
  --accent: #a78bfa; --accent-2: #c4b5fd; --accent-light: #ddd6fe;
  --accent-glow: rgba(167, 139, 250, 0.28); --accent-soft: rgba(167, 139, 250, 0.11);
  --surface: rgba(25, 16, 38, 0.84); --surface-solid: #191026;
  --list-bg: rgba(21, 13, 32, 0.72); --card: rgba(44, 29, 65, 0.95); --card-hover: rgba(57, 38, 83, 1);
  --text: #ece8f7; --text-muted: #a79bc2; --text-dim: #6f6389;
}
:root[data-theme="ambra"] {
  --bg: #150f08; --bg-blob-1: #78350f; --bg-blob-2: #92400e; --bg-blob-3: #451a03;
  --blob-opacity: 0.36;
  --accent: #fbbf24; --accent-2: #fcd34d; --accent-light: #fde68a;
  --accent-glow: rgba(251, 191, 36, 0.26); --accent-soft: rgba(251, 191, 36, 0.1);
  --surface: rgba(34, 24, 14, 0.84); --surface-solid: #22180e;
  --list-bg: rgba(28, 20, 12, 0.72); --card: rgba(56, 41, 25, 0.95); --card-hover: rgba(71, 52, 32, 1);
  --text: #f4ece0; --text-muted: #b8a68f; --text-dim: #806f5a;
}
:root[data-theme="nebbia"] {
  color-scheme: light;
  --bg: #eef1f5; --bg-blob-1: #cbd5e1; --bg-blob-2: #e2e8f0; --bg-blob-3: #b8c4d4;
  --blob-opacity: 0.7;
  --surface: rgba(255, 255, 255, 0.86); --surface-solid: #ffffff;
  --list-bg: rgba(255, 255, 255, 0.7); --list-border: rgba(30, 41, 59, 0.09);
  --card: rgba(255, 255, 255, 0.97); --card-hover: #ffffff; --card-border: rgba(30, 41, 59, 0.09);
  --accent: #475569; --accent-2: #64748b; --accent-light: #334155;
  --accent-glow: rgba(71, 85, 105, 0.2); --accent-soft: rgba(71, 85, 105, 0.08);
  --text: #15191f; --text-muted: #556070; --text-dim: #94a0b0; --border: rgba(30, 41, 59, 0.13);
  --shadow: 0 6px 24px rgba(30, 41, 59, 0.1); --shadow-lg: 0 16px 48px rgba(30, 41, 59, 0.18);
  --noise-opacity: 0.025;
}
:root[data-theme="avorio"] {
  color-scheme: light;
  --bg: #f5f1e9; --bg-blob-1: #e3d6bf; --bg-blob-2: #efe6d5; --bg-blob-3: #d7c6a8;
  --blob-opacity: 0.7;
  --surface: rgba(255, 253, 248, 0.86); --surface-solid: #fffdf8;
  --list-bg: rgba(255, 253, 248, 0.7); --list-border: rgba(74, 59, 38, 0.1);
  --card: rgba(255, 255, 255, 0.97); --card-hover: #ffffff; --card-border: rgba(74, 59, 38, 0.1);
  --accent: #8a6a45; --accent-2: #a78458; --accent-light: #6f5436;
  --accent-glow: rgba(138, 106, 69, 0.18); --accent-soft: rgba(138, 106, 69, 0.08);
  --text: #241c12; --text-muted: #63543f; --text-dim: #a3927a; --border: rgba(74, 59, 38, 0.14);
  --shadow: 0 6px 24px rgba(74, 59, 38, 0.1); --shadow-lg: 0 16px 48px rgba(74, 59, 38, 0.18);
  --noise-opacity: 0.035;
}
:root[data-theme="nebbia"] .bg .grid, :root[data-theme="avorio"] .bg .grid {
  background-image:
    linear-gradient(to right, rgba(0,0,40,0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(0,0,40,0.05) 1px, transparent 1px);
}

html, body { height: 100%; }
body {
  font-family: 'Segoe UI Variable Text', 'Segoe UI', Inter, system-ui, -apple-system, sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  transition: background 0.5s ease, color 0.3s ease;
}
button, input, textarea, select { font-family: inherit; color: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }

/* ---------- Sfondo animato ---------- */
.bg {
  position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none;
  background: var(--bg);
  transition: background 0.5s ease;
}
.bg .blob {
  position: absolute; border-radius: 50%;
  filter: blur(90px);
  opacity: var(--blob-opacity);
  will-change: transform;
  transition: background 0.6s ease, opacity 0.6s ease;
  animation: drift 26s ease-in-out infinite alternate;
}
.bg .blob-1 { width: 55vmax; height: 55vmax; left: -15vmax; top: -20vmax; background: var(--bg-blob-1); }
.bg .blob-2 { width: 50vmax; height: 50vmax; right: -12vmax; top: 10vmax; background: var(--bg-blob-2); animation-duration: 32s; animation-delay: -8s; }
.bg .blob-3 { width: 45vmax; height: 45vmax; left: 25vmax; bottom: -25vmax; background: var(--bg-blob-3); animation-duration: 38s; animation-delay: -16s; }
.bg .grain {
  position: absolute; inset: 0; opacity: var(--noise-opacity); mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.bg .grid {
  position: absolute; inset: 0; opacity: 0.35;
  background-image:
    linear-gradient(to right, rgba(255,255,255,0.035) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.035) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(ellipse at 50% 30%, black 20%, transparent 80%);
}
:root[data-theme="chiaro"] .bg .grid, :root[data-theme="carta"] .bg .grid {
  background-image:
    linear-gradient(to right, rgba(0,0,40,0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(0,0,40,0.05) 1px, transparent 1px);
}
@keyframes drift {
  0%   { transform: translate(0, 0) scale(1); }
  50%  { transform: translate(6vw, -4vh) scale(1.12); }
  100% { transform: translate(-5vw, 6vh) scale(0.95); }
}
@media (prefers-reduced-motion: reduce) {
  .bg .blob { animation: none; }
  * { transition-duration: 0.01ms !important; }
}

.app { position: relative; z-index: 1; display: flex; flex-direction: column; height: 100vh; height: 100dvh; }

/* ---------- Header ---------- */
.header {
  height: calc(var(--header-h) + var(--sicuro-su));
  display: flex; align-items: center; gap: 12px;
  padding: var(--sicuro-su) calc(18px + var(--sicuro-dx)) 0 calc(18px + var(--sicuro-sx));
  background: var(--surface);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.header-left { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1; }
.header-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.logo {
  display: flex; align-items: center; gap: 8px;
  font-size: 21px; font-weight: 800; letter-spacing: -0.5px;
  color: var(--text); text-decoration: none; user-select: none;
}
.logo img { width: 28px; height: 28px; border-radius: 7px; box-shadow: 0 2px 8px var(--accent-glow); }
.logo span {
  background: linear-gradient(120deg, var(--accent), var(--accent-2));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.board-switcher {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 10px 7px 12px; border-radius: var(--radius-sm);
  border: 1px solid transparent; background: transparent;
  font-size: 14px; color: var(--text-muted); max-width: 240px;
  transition: var(--transition);
  /* deve poter rimpicciolire: senza questo un titolo lungo non si accorcia e
     finisce sopra i pulsanti a destra, che invece non si restringono mai */
  min-width: 0; flex-shrink: 1;
}
.board-switcher svg { flex-shrink: 0; }
.board-switcher:hover { background: var(--accent-soft); border-color: var(--border); color: var(--text); }
.board-switcher .name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; color: var(--text); }
.board-title {
  font-size: 17px; font-weight: 700; background: transparent;
  border: 1px solid transparent; padding: 6px 10px; border-radius: var(--radius-sm);
  outline: none; min-width: 80px; max-width: 360px; width: 100%;
  transition: var(--transition);
}
.board-title:hover { border-color: var(--border); }
.board-title:focus { border-color: var(--accent); background: var(--surface-solid); box-shadow: 0 0 0 3px var(--accent-glow); }
.board-stats { font-size: 12px; color: var(--text-dim); white-space: nowrap; display: flex; align-items: center; gap: 6px; }
.save-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--success); box-shadow: 0 0 8px var(--success); transition: var(--transition); }
.save-dot.pending { background: var(--warning); box-shadow: 0 0 8px var(--warning); }

.search {
  position: relative; display: flex; align-items: center;
}
.search svg { position: absolute; left: 10px; color: var(--text-dim); pointer-events: none; }
.search input {
  width: 200px; padding: 8px 30px 8px 32px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--surface-solid); font-size: 13px; outline: none;
  transition: var(--transition);
}
.search input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); width: 260px; }
.search .clear { position: absolute; right: 6px; width: 22px; height: 22px; border-radius: 50%; border: none; background: transparent; color: var(--text-dim); font-size: 16px; line-height: 1; display: none; }
.search.has-value .clear { display: block; }
.search .clear:hover { background: var(--accent-soft); color: var(--text); }

/* ---------- Bottoni ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 14px; border: 1px solid transparent; border-radius: var(--radius-sm);
  font-size: 13.5px; font-weight: 500; transition: var(--transition); white-space: nowrap;
}
.btn:active { transform: scale(0.97); }
.btn-primary { background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #fff; box-shadow: 0 4px 14px var(--accent-glow); }
.btn-primary:hover { filter: brightness(1.1); box-shadow: 0 6px 22px var(--accent-glow); }
.btn-ghost { background: transparent; color: var(--text-muted); border-color: var(--border); }
.btn-ghost:hover { color: var(--text); background: var(--accent-soft); border-color: var(--accent); }
.btn-danger { background: rgba(255, 107, 107, 0.12); color: var(--danger); border-color: rgba(255, 107, 107, 0.3); }
.btn-danger:hover { background: rgba(255, 107, 107, 0.22); }
.btn-icon {
  width: 34px; height: 34px; padding: 0; display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius-sm); background: transparent; color: var(--text-muted); border: none;
  transition: var(--transition); font-size: 18px; flex-shrink: 0;
}
.btn-icon:hover { background: var(--accent-soft); color: var(--text); }
.btn .label { display: inline; }

/* ---------- Board ---------- */
.board-wrap { flex: 1; overflow: auto; position: relative; }
.board {
  display: flex; flex-wrap: wrap; gap: 16px;
  padding: 22px calc(22px + var(--sicuro-dx)) calc(40px + var(--sicuro-giu)) calc(22px + var(--sicuro-sx));
  align-items: flex-start; align-content: flex-start; min-height: 100%;
}
/* ---------- Disposizione: colonne, griglia, righe o libero ----------
   La scelta sta su <html data-layout>. In colonne le liste stanno tutte in
   una fila e si scorre in orizzontale (la lavagna classica); in griglia
   restano affiancate ma vanno a capo quando finisce lo spazio; in righe sono
   impilate a tutta larghezza e cresce la pagina. */
:root[data-layout="colonne"] .board {
  flex-wrap: nowrap;
  /* min-width, non width: cosi' il padding a destra resta anche quando la
     fila e' piu' larga dello schermo e si scorre fino in fondo */
  min-width: max-content;
}
:root[data-layout="righe"] .board {
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: stretch;
}
:root[data-layout="righe"] .list,
:root[data-layout="righe"] .add-list {
  width: 100%;
  max-width: 100%;
}
:root[data-layout="righe"] .list {
  /* impilate non ha senso limitarle all'altezza dello schermo: scorre la pagina */
  max-height: none;
}
/* Libero: ogni riquadro sta dove l'hai messo tu. Le liste escono dal flusso e
   si posizionano da sole; la board prende una dimensione calcolata a mano,
   altrimenti non ci sarebbe niente da scorrere. */
:root[data-layout="libero"] .board {
  display: block;
  position: relative;
}
:root[data-layout="libero"] .list {
  position: absolute;
  max-height: none;
}
/* in libero il riquadro "Aggiungi lista" darebbe fastidio: si usa il pulsante
   in alto, che c'e' sempre */
:root[data-layout="libero"] .add-list { display: none; }
:root[data-layout="libero"] .list.list-drop-before,
:root[data-layout="libero"] .list.list-drop-after { box-shadow: var(--shadow); }

/* l'indicatore di inserimento segue la direzione in cui si sta lavorando */
:root[data-layout="righe"] .list.list-drop-before { box-shadow: 0 -4px 0 var(--accent), 0 0 24px var(--accent-glow); }
:root[data-layout="righe"] .list.list-drop-after  { box-shadow: 0 4px 0 var(--accent), 0 0 24px var(--accent-glow); }

.board-wrap::-webkit-scrollbar { height: 10px; width: 10px; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 8px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: var(--text-dim); background-clip: padding-box; }

.empty-board {
  /* min-width: 0 e max-width al 100%: senza, su un telefono il riquadro
     resta largo quanto vorrebbe e la board scorre di lato con il testo
     tagliato ai bordi */
  margin: auto; text-align: center; padding: 48px 24px;
  width: 100%; max-width: 460px; min-width: 0; box-sizing: border-box;
  background: var(--list-bg); border: 1px dashed var(--border); border-radius: 20px;
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.empty-board h2 { font-size: 22px; margin-bottom: 8px; }
.empty-board p { color: var(--text-muted); font-size: 14px; margin-bottom: 20px; line-height: 1.6; }
.empty-board .pulsanti { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.empty-board .btn { max-width: 100%; }
/* Una board senza liste non ha niente da far scorrere di lato. Il selettore
   è pesante apposta: deve battere la regola della disposizione Colonne, che
   allarga la board quanto il suo contenuto. */
:root[data-layout] .board.senza-liste { min-width: 100%; width: 100%; max-width: 100%; }
@media (max-width: 640px) {
  .empty-board { padding: 32px 18px; border-radius: 16px; }
  .empty-board h2 { font-size: 19px; }
  .empty-board p { font-size: 13.5px; }
  .empty-board .btn { width: 100%; }
}

/* ---------- Lista ---------- */
.list {
  width: 300px; flex-shrink: 0;
  background: var(--list-bg);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border: 1px solid var(--list-border);
  border-radius: var(--radius);
  display: flex; flex-direction: column;
  max-height: calc(100vh - var(--header-h) - 62px);
  max-height: calc(100dvh - var(--header-h) - var(--sicuro-su) - var(--sicuro-giu) - 62px);
  box-shadow: 0 2px 12px rgba(0,0,0,0.12);
  transition: box-shadow var(--transition), transform var(--transition), opacity 0.25s;
  position: relative;
}
.list::before {
  content: ''; position: absolute; left: 14px; right: 14px; top: 0; height: 3px;
  background: var(--list-color, var(--accent)); border-radius: 0 0 4px 4px; opacity: 0.95;
}
.list.drag-over { box-shadow: 0 0 0 2px var(--accent), 0 0 30px var(--accent-glow); }

/* Mentre si trascina, lo sfondo animato costringerebbe a ricalcolare il blur delle liste
   a ogni fotogramma: lo si congela e si spengono hover e transizioni delle card. */
body.dragging { touch-action: none; }
body.dragging .bg .blob { animation-play-state: paused; }
body.dragging .card, body.dragging .list { transition: none; }
body.dragging .card:hover { transform: none; box-shadow: none; background: var(--card); border-color: var(--card-border); }
body.dragging .card-actions { opacity: 0 !important; }
.list.list-dragging { opacity: 0.4; transform: scale(0.98); }
.list.list-drop-before { box-shadow: -4px 0 0 var(--accent), 0 0 24px var(--accent-glow); }
.list.list-drop-after { box-shadow: 4px 0 0 var(--accent), 0 0 24px var(--accent-glow); }
.list-header {
  display: flex; align-items: center; gap: 6px;
  padding: 14px 10px 10px 14px;
  /* tutta la testata è la presa per spostare la lista: col dito il browser non
     deve usarla per scorrere, altrimenti annullerebbe il trascinamento */
  cursor: grab; touch-action: none;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
.list-header:active { cursor: grabbing; }
.list-title[readonly] { cursor: grab; -webkit-user-select: none; user-select: none; }
.list-title.in-modifica { cursor: text; -webkit-user-select: text; user-select: text; }
.list-header .btn-icon { cursor: pointer; }
/* Sul telefono il browser, appena vede un dito che si muove, si prende il gesto
   e lo usa per scorrere la pagina: il trascinamento viene annullato prima di
   iniziare. Su questa maniglia glielo si vieta, così il movimento arriva
   all'app. Senza questa riga, col dito le liste non si spostano. */
.list-handle {
  cursor: grab; color: var(--text-dim); display: flex; padding: 4px 2px; border-radius: 4px;
  touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
.list-handle:hover { color: var(--text-muted); background: var(--accent-soft); }
.list-handle:active { cursor: grabbing; }
.list-title {
  font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.6px;
  color: var(--text-muted); background: transparent; border: 1px solid transparent; outline: none;
  flex: 1; min-width: 0; padding: 4px 6px; border-radius: 6px; transition: var(--transition);
}
.list-title:hover { border-color: var(--border); }
.list-title:focus { color: var(--text); background: var(--surface-solid); border-color: var(--accent); }
.list-count {
  background: var(--accent-soft); color: var(--text-muted); font-size: 11.5px; font-weight: 700;
  padding: 2px 8px; border-radius: 10px; min-width: 24px; text-align: center;
}
.list-cards { flex: 1; overflow-y: auto; padding: 4px 10px 8px; display: flex; flex-direction: column; gap: 8px; min-height: 30px; }
.list-cards::-webkit-scrollbar { width: 5px; }
.list-footer { padding: 8px 10px 10px; }
.add-card-btn {
  width: 100%; padding: 9px; background: transparent; border: 1px dashed var(--border);
  border-radius: var(--radius-sm); color: var(--text-dim); font-size: 13.5px;
  display: flex; align-items: center; gap: 6px; justify-content: center; transition: var(--transition);
}
.add-card-btn:hover { border-color: var(--accent); color: var(--accent-light); background: var(--accent-soft); }

/* ---------- Card ---------- */
.card {
  background: var(--card); border: 1px solid var(--card-border); border-radius: var(--radius-sm);
  padding: 10px 12px 10px 12px; cursor: grab; position: relative; user-select: none;
  transition: transform var(--transition), box-shadow var(--transition), background var(--transition), opacity 0.2s;
  animation: none;
}
@keyframes cardIn { from { opacity: 0; transform: translateY(6px); } }
.card.nuova { animation: cardIn 0.22s ease both; }
.card:hover { background: var(--card-hover); transform: translateY(-1px); box-shadow: var(--shadow); border-color: var(--border); }
.card:active { cursor: grabbing; }
.card.dragging { opacity: 0.45; transform: rotate(2deg) scale(1.02); box-shadow: var(--shadow-lg); }
.card.done .card-text { text-decoration: line-through; color: var(--text-dim); }
.card.done { opacity: 0.72; }
.card.hidden-by-search { display: none; }
.card-drag-placeholder {
  background: var(--accent-soft); border: 2px dashed var(--accent); border-radius: var(--radius-sm);
  min-height: 46px; flex-shrink: 0;
}
.card-row { display: flex; gap: 10px; align-items: flex-start; }
.card-check {
  width: 17px; height: 17px; border-radius: 50%; border: 2px solid var(--text-dim); flex-shrink: 0; margin-top: 2px;
  display: flex; align-items: center; justify-content: center; background: transparent; padding: 0; transition: var(--transition);
}
.card-check svg { opacity: 0; transform: scale(0.5); transition: var(--transition); }
.card-check:hover { border-color: var(--success); }
.card.done .card-check { background: var(--success); border-color: var(--success); }
.card.done .card-check svg { opacity: 1; transform: scale(1); }
.card-body { flex: 1; min-width: 0; }
.card-labels { display: flex; gap: 4px; margin-bottom: 7px; flex-wrap: wrap; }
.card-label { height: 6px; width: 34px; border-radius: 3px; }
.card-text { font-size: 14px; line-height: 1.5; word-wrap: break-word; white-space: pre-wrap; }
.card-meta { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; align-items: center; }
.chip {
  display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 600;
  padding: 2px 8px; border-radius: 6px; background: var(--accent-soft); color: var(--text-muted);
}
.chip.due-late { background: rgba(255, 107, 107, 0.18); color: var(--danger); }
.chip.due-soon { background: rgba(251, 191, 36, 0.18); color: var(--warning); }
.chip.due-ok { background: rgba(74, 222, 128, 0.14); color: var(--success); }
.card-actions { position: absolute; top: 6px; right: 6px; display: flex; gap: 2px; opacity: .5; transition: var(--transition); }
.card:hover .card-actions, .card:focus-within .card-actions { opacity: 1; }
/* I pulsanti della scheda non si nascondono più in attesa di un passaggio
   del mouse: col dito quel passaggio non esiste, e anche col mouse chi non
   sapeva di doverci passare sopra non trovava il modo di aprire l'elemento. */
.card-body { padding-right: 84px; }
@media (hover: none) {
  .card-actions { opacity: 1; }
  .card-action-btn { background: var(--surface-solid); border: 1px solid var(--border); }
}
.card-action-btn {
  width: 24px; height: 24px; display: flex; align-items: center; justify-content: center;
  background: var(--surface-solid); border: 1px solid var(--border); border-radius: 5px; color: var(--text-muted);
  transition: var(--transition);
}
.card-action-btn:hover { color: var(--text); border-color: var(--accent); }
.card-action-btn.delete:hover { color: var(--danger); border-color: var(--danger); }
.card.removing, .list.removing { transform: scale(0.92); opacity: 0; }

/* ---------- Aggiungi lista ---------- */
.add-list { width: 300px; flex-shrink: 0; }
.add-list-btn {
  width: 100%; padding: 14px; background: var(--accent-soft); border: 1px dashed var(--border);
  border-radius: var(--radius); color: var(--text-muted); font-size: 14px; font-weight: 500;
  display: flex; align-items: center; gap: 8px; justify-content: center; transition: var(--transition);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.add-list-btn:hover { border-color: var(--accent); color: var(--accent-light); background: var(--accent-soft); box-shadow: 0 0 24px var(--accent-glow); }

/* ---------- Editing inline ---------- */
.inline-input {
  width: 100%; padding: 10px 12px; background: var(--surface-solid); border: 1px solid var(--accent);
  border-radius: var(--radius-sm); font-size: 14px; outline: none; resize: vertical; min-height: 40px;
  box-shadow: 0 0 0 3px var(--accent-glow); line-height: 1.5;
}
.inline-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; align-items: center; }
.inline-hint { margin-left: auto; font-size: 11px; color: var(--text-dim); }
.inline-actions .btn.registrando { background: var(--danger); border-color: var(--danger); color: #fff; }
@media (max-width: 640px) { .inline-hint { display: none; } }

/* ---------- Modali ---------- */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  z-index: 1000; display: flex; align-items: center; justify-content: center;
  opacity: 0; visibility: hidden; transition: var(--transition); padding: 16px;
}
.modal-overlay.active { opacity: 1; visibility: visible; pointer-events: auto; }
/* mentre una finestra sta sparendo non deve più prendersi i clic: chi tocca
   subito qualcos'altro lo trova sotto, invece di cliccare a vuoto */
.modal-overlay:not(.active) { pointer-events: none; }
.modal {
  background: var(--surface-solid); border-radius: 18px; border: 1px solid var(--border);
  width: 100%; max-width: 600px; max-height: 88vh; overflow-y: auto; box-shadow: var(--shadow-lg);
  transform: translateY(16px) scale(0.97); transition: var(--transition);
}
.modal.wide { max-width: 760px; }
.modal-overlay.active .modal { transform: translateY(0) scale(1); }
.modal-header { display: flex; align-items: center; justify-content: space-between; padding: 18px 22px; border-bottom: 1px solid var(--border); }
.modal-title { font-size: 17px; font-weight: 700; }
.modal-body { padding: 22px; }
.modal-footer { padding: 14px 22px; border-top: 1px solid var(--border); display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; align-items: center; }
.modal-footer .left { margin-right: auto; }
.field { margin-bottom: 16px; }
.field-label { font-size: 11.5px; font-weight: 700; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.6px; margin-bottom: 7px; display: block; }
.input, .textarea, .select {
  width: 100%; padding: 11px 13px; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-sm); font-size: 14px; outline: none; transition: var(--transition); line-height: 1.5;
}
.textarea { resize: vertical; min-height: 70px; }
.input:focus, .textarea:focus, .select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); }
.field-row { display: flex; gap: 12px; }
.field-row .field { flex: 1; }
.label-picker { display: flex; gap: 8px; flex-wrap: wrap; }
.label-pick {
  width: 38px; height: 22px; border-radius: 6px; border: 2px solid transparent; cursor: pointer;
  transition: var(--transition); padding: 0;
}
.label-pick:hover { transform: scale(1.1); }
.label-pick.selected { border-color: var(--text); transform: scale(1.12); box-shadow: 0 0 0 2px var(--surface-solid); }
.label-red { background: #ff6b6b; } .label-orange { background: #ffa94d; } .label-yellow { background: #ffd43b; }
.label-green { background: #51cf66; } .label-blue { background: #339af0; } .label-purple { background: #9775fa; }
.label-pink { background: #f06595; } .label-teal { background: #20c997; }

/* ---------- Importazione ---------- */
.import-zone {
  border: 2px dashed var(--border); border-radius: var(--radius); padding: 26px; text-align: center;
  transition: var(--transition); cursor: pointer; margin-bottom: 14px; color: var(--text-dim);
}
.import-zone:hover, .import-zone.dragover { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-light); }
.import-zone-text { color: var(--text-muted); font-size: 14px; margin: 8px 0 4px; }
.import-zone-hint { font-size: 12px; }
.import-textarea { font-family: 'Cascadia Code', 'Consolas', monospace; font-size: 13px; min-height: 140px; }
.import-options { display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
.import-option {
  display: flex; align-items: center; gap: 8px; padding: 9px 14px; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text-muted); cursor: pointer;
  transition: var(--transition); font-size: 13px;
}
.import-option:hover { border-color: var(--accent); color: var(--text); }
.import-option.selected { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-light); }
.import-preview { margin-top: 14px; padding: 12px 14px; background: var(--surface); border-radius: var(--radius-sm); border: 1px solid var(--border); max-height: 190px; overflow-y: auto; }
.import-preview-item { padding: 6px 10px; margin: 4px 0; background: var(--card); border-radius: 5px; font-size: 13px; color: var(--text-muted); }
.notice { padding: 10px 14px; border-radius: var(--radius-sm); background: var(--accent-soft); border: 1px solid var(--accent); font-size: 13px; margin-top: 12px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

/* ---------- Temi ---------- */
.theme-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.theme-card {
  border-radius: 12px; border: 2px solid var(--border); overflow: hidden; cursor: pointer; background: var(--surface);
  transition: var(--transition); padding: 0; text-align: left;
}
.theme-card:hover { transform: translateY(-2px); border-color: var(--accent); }
.theme-card.selected { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); }
.theme-preview { height: 78px; position: relative; overflow: hidden; }
.theme-preview i { position: absolute; border-radius: 50%; filter: blur(14px); opacity: 0.8; }
.theme-preview i:nth-child(1) { width: 70px; height: 70px; left: -10px; top: -15px; }
.theme-preview i:nth-child(2) { width: 80px; height: 80px; right: -15px; top: 10px; }
.theme-preview i:nth-child(3) { width: 60px; height: 60px; left: 50px; bottom: -25px; }
.theme-preview b { position: absolute; left: 14px; right: 14px; bottom: 12px; height: 22px; border-radius: 5px; background: rgba(255,255,255,0.18); border: 1px solid rgba(255,255,255,0.25); }
.theme-name { padding: 9px 12px; font-size: 13px; font-weight: 600; }
.theme-name span { display: block; font-size: 11px; font-weight: 500; color: var(--text-dim); margin-top: 1px; }
.theme-section-title {
  font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--text-muted); margin: 20px 0 10px; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
}
.theme-section-title:first-child { margin-top: 0; }
.theme-section-title span { font-size: 11.5px; font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--text-dim); }
.theme-scope { display: flex; gap: 8px; margin-top: 16px; font-size: 13px; color: var(--text-muted); align-items: center; }

/* ---------- Popover board ---------- */
.popover {
  position: fixed; background: var(--surface-solid); border: 1px solid var(--border); border-radius: 12px;
  box-shadow: var(--shadow-lg); z-index: 2000; min-width: 260px; max-width: 340px; padding: 6px; display: none;
  max-height: 70vh; overflow-y: auto;
}
.popover.active { display: block; animation: popIn 0.15s ease; }
@keyframes popIn { from { opacity: 0; transform: translateY(-4px); } }
.popover-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.6px; color: var(--text-dim); padding: 8px 12px 4px; }
.board-item {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 12px; border: none; background: transparent;
  border-radius: 8px; text-align: left; font-size: 13.5px; transition: var(--transition); color: var(--text);
}
.board-item:hover { background: var(--accent-soft); }
.board-item.current { background: var(--accent-soft); color: var(--accent-light); }
.board-item .b-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.board-item .b-count { font-size: 11px; color: var(--text-dim); }
/* il cestino si vede sempre: sul telefono non esiste il "passarci sopra" */
.board-item .b-del { width: 28px; height: 28px; border: none; background: transparent; color: var(--text-dim); border-radius: 5px; display: flex; align-items: center; justify-content: center; opacity: 0.55; cursor: pointer; }
.board-item:hover .b-del { opacity: 1; }
.board-item .b-del:hover { color: var(--danger); background: rgba(255,107,107,0.15); }

/* ---------- Menu contestuale ---------- */
.context-menu {
  position: fixed; background: var(--surface-solid); border: 1px solid var(--border); border-radius: 10px;
  box-shadow: var(--shadow-lg); z-index: 2000; min-width: 200px; padding: 5px; display: none;
  max-width: calc(100vw - 16px); overflow-y: auto; overscroll-behavior: contain;
}
.context-menu-item svg { flex: none; }
/* nel menu principale le icone hanno tutte la stessa misura, così le scritte restano allineate */
.context-menu-titolo ~ .context-menu-item svg { width: 15px; height: 15px; opacity: 0.85; }
.context-menu-titolo {
  padding: 7px 12px 3px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 290px;
}
.context-menu-titolo span { text-transform: none; letter-spacing: 0; font-weight: 500; }
.context-menu.active { display: block; animation: popIn 0.15s ease; }
.context-menu-item {
  display: flex; align-items: center; gap: 10px; padding: 8px 12px; border: none; background: transparent;
  font-size: 13px; border-radius: 6px; width: 100%; text-align: left; transition: var(--transition); color: var(--text);
}
.context-menu-item:hover { background: var(--accent-soft); }
.context-menu-item.danger { color: var(--danger); }
.context-menu-item kbd { margin-left: auto; font-size: 10.5px; color: var(--text-dim); font-family: inherit; }
.context-menu-sep { height: 1px; background: var(--border); margin: 5px 8px; }
.color-row { padding: 6px 12px; display: flex; gap: 6px; flex-wrap: wrap; }
.color-dot { width: 22px; height: 22px; border-radius: 6px; cursor: pointer; border: 2px solid transparent; transition: var(--transition); padding: 0; }
.color-dot:hover { transform: scale(1.12); }
.color-dot.selected { border-color: var(--text); }

/* ---------- Toast ---------- */
.toast-container { position: fixed; bottom: calc(22px + var(--sicuro-giu)); right: calc(22px + var(--sicuro-dx)); z-index: 3000; display: flex; flex-direction: column; gap: 8px; max-width: calc(100vw - 44px); }
.toast {
  padding: 11px 16px; background: var(--surface-solid); border: 1px solid var(--border); border-radius: 10px;
  font-size: 13.5px; box-shadow: var(--shadow-lg); animation: toastIn 0.25s ease; display: flex; align-items: center; gap: 10px;
  transition: 0.3s ease;
}
.toast.success { border-left: 3px solid var(--success); }
.toast.error { border-left: 3px solid var(--danger); }
.toast.info { border-left: 3px solid var(--accent); }
.toast .undo { margin-left: 6px; padding: 4px 10px; border-radius: 6px; border: 1px solid var(--accent); background: var(--accent-soft); color: var(--accent-light); font-size: 12.5px; font-weight: 600; }
.toast .undo:hover { background: var(--accent); color: #fff; }
.toast.out { opacity: 0; transform: translateX(60px); }
@keyframes toastIn { from { transform: translateX(80px); opacity: 0; } }

/* ---------- Scorciatoie (info) ---------- */
.shortcuts { display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; font-size: 13.5px; color: var(--text-muted); }
.shortcuts kbd { display: inline-block; padding: 2px 7px; border-radius: 5px; border: 1px solid var(--border); background: var(--surface); font-size: 12px; color: var(--text); font-family: inherit; min-width: 26px; text-align: center; }
.about { font-size: 13.5px; color: var(--text-muted); line-height: 1.7; }
.about b { color: var(--text); }

/* ---------- Responsive ---------- */
@media (max-width: 860px) {
  .btn .label { display: none; }
  .btn { padding: 8px 10px; }
  .board-stats { display: none; }
  .search input { width: 140px; }
  .search input:focus { width: 180px; }
}
@media (max-width: 640px) {
  .header { gap: 6px; padding: var(--sicuro-su) calc(10px + var(--sicuro-dx)) 0 calc(10px + var(--sicuro-sx)); }
  .logo span { display: none; }
  .board-title { display: none; }
  /* sul telefono il nome prende quello che c'è, senza rubare spazio ai tasti */
  .board-switcher { max-width: 42vw; padding-left: 8px; padding-right: 6px; }
  .header { gap: 4px; }
  .search { display: none; }
  .board { gap: 12px; padding: 14px calc(14px + var(--sicuro-dx)) calc(30px + var(--sicuro-giu)) calc(14px + var(--sicuro-sx)); }
  .list-handle { padding: 10px 8px; margin: -6px -4px; }
  .list, .add-list { width: min(86vw, 320px); }
  .list { max-height: calc(100vh - var(--header-h) - 44px); max-height: calc(100dvh - var(--header-h) - var(--sicuro-su) - var(--sicuro-giu) - 44px); }
  .modal { max-height: 94vh; border-radius: 14px; }
  .field-row { flex-direction: column; gap: 0; }
  .toast-container { left: 12px; right: 12px; bottom: calc(12px + var(--sicuro-giu)); }
}

/* ---------- Account e sincronizzazione ---------- */
.cloud-utente { display: flex; align-items: center; gap: 12px; }
.cloud-punto { width: 10px; height: 10px; border-radius: 50%; background: var(--success); box-shadow: 0 0 10px var(--success); flex-shrink: 0; }
.cloud-email { font-size: 15px; font-weight: 600; word-break: break-all; }
.cloud-quando { font-size: 12.5px; color: var(--text-dim); margin-top: 2px; }
.upd-novita {
  margin: 14px 0 0; padding: 11px 13px; border-radius: var(--radius-sm); font-size: 13.5px; line-height: 1.55;
  background: var(--accent-soft); border: 1px solid var(--border); color: var(--text);
  white-space: pre-wrap;
}
.cloud-errore {
  margin: 10px 0 4px; padding: 9px 12px; border-radius: var(--radius-sm); font-size: 13px;
  background: rgba(255, 107, 107, 0.12); color: var(--danger); border: 1px solid rgba(255, 107, 107, 0.3);
}
.sync-dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--text-dim); flex-shrink: 0;
  transition: var(--transition);
}
.sync-dot.attivo { background: var(--accent); box-shadow: 0 0 8px var(--accent-glow); }
.sync-dot.lavora { background: var(--warning); box-shadow: 0 0 8px var(--warning); animation: sync-pulsa 1s ease-in-out infinite; }
.sync-dot.guaio { background: var(--danger); box-shadow: 0 0 8px var(--danger); }
@keyframes sync-pulsa { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

/* ---------- Pannello amministratore ---------- */
.tabella-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius-sm); }
.tabella { width: 100%; border-collapse: collapse; font-size: 13px; }
.tabella th, .tabella td { padding: 9px 11px; text-align: left; white-space: nowrap; }
.tabella th {
  font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.5px; font-weight: 700;
  color: var(--text-dim); border-bottom: 1px solid var(--border);
}
.tabella tbody tr { border-top: 1px solid var(--border); cursor: pointer; transition: var(--transition); }
.tabella tbody tr:hover { background: var(--accent-soft); }
.tabella td.numero { text-align: right; font-variant-numeric: tabular-nums; }
.tabella .email { font-weight: 600; max-width: 260px; overflow: hidden; text-overflow: ellipsis; }
.tabella .io { color: var(--accent-light); }
.admin-dettaglio { margin-top: 16px; padding: 13px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); }
.admin-dettaglio h4 { font-size: 13.5px; margin-bottom: 9px; }
.admin-dettaglio ul { list-style: none; display: flex; flex-direction: column; gap: 5px; }
.admin-dettaglio li { font-size: 13px; color: var(--text-muted); display: flex; justify-content: space-between; gap: 12px; }

/* ---------- Grafica leggera ----------
   Lo sfondo di Ratio è bello ma caro: tre macchie sfocate grandi mezzo schermo
   che si muovono senza sosta, e sotto ogni lista una sfocatura del fondo. Ogni
   singolo fotogramma il dispositivo deve rifare tutto: su un telefono si vede,
   e si vede male.

   In leggera lo sfondo resta (stessi colori, stessa atmosfera) ma sta fermo, e
   i pannelli diventano pieni invece che trasparenti-sfocati. Si attiva da sola
   dove serve: schermi touch, poca memoria, o animazioni ridotte per scelta. */
:root[data-grafica="leggera"] .bg .blob {
  animation: none;
  filter: blur(60px);
}
:root[data-grafica="leggera"] .bg .grain { display: none; }
:root[data-grafica="leggera"] .header,
:root[data-grafica="leggera"] .list,
:root[data-grafica="leggera"] .empty-board,
:root[data-grafica="leggera"] .add-list-btn,
:root[data-grafica="leggera"] .modal-overlay,
:root[data-grafica="leggera"] .popover,
:root[data-grafica="leggera"] .context-menu {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
:root[data-grafica="leggera"] .header,
:root[data-grafica="leggera"] .list {
  background: var(--surface-solid);
}
:root[data-grafica="leggera"] .modal-overlay { background: rgba(0, 0, 0, 0.55); }

/* Quando la pagina non si vede, l'animazione non serve a nessuno: vale
   sempre, anche in grafica piena. Su telefono è batteria risparmiata. */
:root[data-nascosta="si"] .bg .blob { animation-play-state: paused; }

.grafica-scelta { display: flex; gap: 8px; align-items: center; margin-top: 14px; font-size: 13px; color: var(--text-muted); }

/* ---------- Allegati: note vocali e immagini ---------- */
.allegati-barra { display: flex; gap: 8px; flex-wrap: wrap; }
.allegati-barra .btn { padding: 8px 12px; font-size: 13px; }
.allegati-barra .btn.registrando { background: var(--danger); border-color: var(--danger); color: #fff; }
.allegati-elenco { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.allegato {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px;
  border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface);
}
.allegato-mini {
  width: 44px; height: 44px; border-radius: 8px; object-fit: cover; flex-shrink: 0;
  border: 1px solid var(--border); cursor: zoom-in; background: var(--surface-solid);
}
.allegato-nome { flex: 1; min-width: 0; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.allegato-sotto { font-size: 11.5px; color: var(--text-dim); }
.allegato-btn {
  width: 34px; height: 34px; flex-shrink: 0; border-radius: 8px; border: 1px solid var(--border);
  background: transparent; color: var(--text-muted); display: flex; align-items: center; justify-content: center;
}
.allegato-btn:hover { color: var(--text); background: var(--accent-soft); }
.allegato-btn.scarta:hover { color: var(--danger); border-color: var(--danger); }
.allegati-vuoto { font-size: 13px; color: var(--text-dim); margin-top: 8px; }

/* l'immagine si guarda solo se la si tocca: nella scheda resta un francobollo */
.modal-immagine { max-width: min(96vw, 1100px); width: 100%; }
.immagine-piena { display: flex; align-items: center; justify-content: center; padding: 10px; position: relative; }
.foto-freccia {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--border);
  background: rgba(0, 0, 0, 0.45); color: #fff; font-size: 28px; line-height: 1;
  display: flex; align-items: center; justify-content: center; z-index: 1;
}
.foto-freccia:hover { background: rgba(0, 0, 0, 0.65); }
.foto-freccia.prec { left: 16px; }
.foto-freccia.succ { right: 16px; }
/* l'icona della foto sulla scheda è un pulsante: si vede che si può toccare */
.chip-azione { border: 1px solid transparent; font-family: inherit; cursor: pointer; transition: var(--transition); }
.chip-azione:hover { border-color: var(--accent); color: var(--text); background: var(--accent-glow); }
.immagine-piena img { max-width: 100%; max-height: 78vh; border-radius: 10px; display: block; }

/* ---------- Board condivise ---------- */
.riga-persona { display: flex; align-items: center; gap: 10px; padding: 9px 11px;
  border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); }
.riga-persona .chi { flex: 1; min-width: 0; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.riga-persona .ruolo { font-size: 11.5px; color: var(--text-dim); }
.riga-persona .link-lungo { font-family: ui-monospace, monospace; font-size: 11.5px; color: var(--text-muted); word-break: break-all; white-space: normal; }
.distintivo-ruolo { font-size: 11px; padding: 3px 8px; border-radius: 999px; background: var(--accent-soft);
  color: var(--accent-light); border: 1px solid var(--border); white-space: nowrap; }

/* In sola lettura i comandi che il server rifiuterebbe non si vedono proprio:
   meglio un pulsante assente che un pulsante che dà errore. */
body.sola-lettura .card-actions,
body.sola-lettura .add-card-btn,
body.sola-lettura .add-list,
body.sola-lettura .list-header .btn-icon { display: none; }
body.sola-lettura .list-title { pointer-events: none; }

/* ---------- Cose assegnate ---------- */
#btnMieCose { position: relative; }
#btnMieCose .quante {
  background: var(--accent); color: #fff; border-radius: 999px; font-size: 11px;
  padding: 1px 6px; margin-left: 6px; font-weight: 700;
}
.card .chip.incarico { background: var(--accent-soft); color: var(--accent-light); }
.list-header .incarico-lista {
  display: inline-flex; align-items: center; gap: 4px; flex-shrink: 1; min-width: 0;
  font-size: 11px; color: var(--accent-light); background: var(--accent-soft);
  border: 1px solid var(--border); border-radius: 999px; padding: 2px 8px;
}
.list-header .incarico-lista .chi { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 90px; }
.list-header .incarico-lista svg { flex-shrink: 0; }
.mia-cosa { cursor: pointer; }
.mia-cosa:hover { border-color: var(--accent); }
.mia-cosa.fatta .allegato-nome { text-decoration: line-through; color: var(--text-dim); }
/* quando si salta a una cosa dall'elenco "In carico a te", si fa vedere dov'è */
.appena-arrivato { animation: lampeggia 1.4s ease-out; }
@keyframes lampeggia {
  0%, 100% { box-shadow: none; }
  20%, 60% { box-shadow: 0 0 0 3px var(--accent), 0 0 26px var(--accent-glow); }
}

/* ---------- Frecce di flusso fra le liste (solo in Libero) ---------- */
.flussi {
  position: absolute; left: 0; top: 0; overflow: visible;
  /* sta sotto le liste e non ruba i tocchi: li prendono solo le frecce */
  z-index: 0; pointer-events: none;
}
:root[data-layout="libero"] .list { z-index: 1; }
.flusso-linea { fill: none; stroke: var(--accent); stroke-width: 2.5; opacity: .85; pointer-events: stroke; cursor: pointer; }
.flusso-tocco { fill: none; stroke: transparent; stroke-width: 22px; pointer-events: stroke; cursor: pointer; }
.flusso-linea:hover, .flusso-tocco:hover + .flusso-linea { opacity: 1; stroke-width: 3.5; }
.flusso-scritta {
  font-size: 11.5px; fill: var(--text-muted); paint-order: stroke;
  stroke: var(--bg); stroke-width: 4px; stroke-linejoin: round; pointer-events: none;
}
/* trasparente ai tocchi: altrimenti la linea che si sta tirando finisce
   sotto il dito e copre la lista che si vuole raggiungere */
.flusso-provvisorio { stroke-dasharray: 6 5; opacity: .7; pointer-events: none; }
/* la maniglia da cui parte una freccia: c'è solo in Libero */
.list-collega { display: none; }
:root[data-layout="libero"] .list-collega {
  display: flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; flex-shrink: 0; border-radius: 50%;
  border: 1px dashed var(--border); background: transparent; color: var(--text-dim);
  cursor: crosshair; touch-action: none;
}
:root[data-layout="libero"] .list-collega:hover { color: var(--accent); border-color: var(--accent); }
.list.bersaglio-flusso { box-shadow: 0 0 0 3px var(--accent), 0 0 26px var(--accent-glow); }
body.sola-lettura .list-collega { display: none; }

/* ---------- Riquadro "Chiedi all'AI" ---------- */
.conversazione { display: flex; flex-direction: column; gap: 10px; max-height: 46vh; overflow-y: auto; }
.battuta { padding: 10px 13px; border-radius: 12px; font-size: 14px; line-height: 1.5; white-space: pre-wrap; word-break: break-word; }
.battuta.io { background: var(--accent-soft); border: 1px solid var(--border); align-self: flex-end; max-width: 85%; }
.battuta.ai { background: var(--surface); border: 1px solid var(--border); align-self: flex-start; max-width: 95%; }
.battuta.guaio { border-color: var(--danger); color: #ffb3b3; }
.battuta .azioni { display: block; margin-top: 6px; font-size: 11.5px; color: var(--text-dim); }
.conversazione-vuota { font-size: 13px; color: var(--text-dim); }

/* ---------- Avviso di scadenza ---------- */
.modal-avviso { max-width: 420px; text-align: center; padding: 26px 22px 20px; }
.avviso-campanella { font-size: 44px; line-height: 1; margin-bottom: 10px; animation: avviso-dondola 0.9s ease-in-out 3; }
@keyframes avviso-dondola { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-14deg); } 75% { transform: rotate(14deg); } }
.avviso-titolo { font-size: 19px; font-weight: 700; margin-bottom: 6px; word-break: break-word; }
.avviso-quando { font-size: 13px; color: var(--accent-light); font-weight: 600; margin-bottom: 14px; }
.avviso-nota { text-align: left; white-space: pre-wrap; font-size: 14px; line-height: 1.55; padding: 11px 13px;
  border-radius: var(--radius-sm); background: var(--accent-soft); border: 1px solid var(--border); margin-bottom: 12px;
  max-height: 40vh; overflow: auto; }
.avviso-altri { font-size: 12px; color: var(--text-dim); min-height: 16px; margin-bottom: 8px; }
.avviso-pulsanti { display: flex; flex-direction: column; gap: 8px; }
.field-aiuto { font-size: 12px; color: var(--text-dim); margin-top: 5px; min-height: 15px; }
.card.evidenziata { box-shadow: 0 0 0 2px var(--accent), 0 0 24px var(--accent-glow); }

/* nota vocale in ascolto dalla scheda */
.chip-azione.in-ascolto { background: var(--accent); color: #fff; border-color: var(--accent); }

/* menu della graffetta: scatta, galleria, registra, file */
.menu-allega {
  position: fixed; z-index: 1300; min-width: 220px; max-width: calc(100vw - 16px); padding: 6px;
  background: var(--surface-solid); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow-lg);
  display: flex; flex-direction: column; gap: 2px; animation: cardIn 0.15s ease both;
}
.menu-allega button {
  display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: 9px; border: 0;
  background: transparent; color: var(--text); font-size: 14px; text-align: left; min-width: 0;
}
.menu-allega button:hover, .menu-allega button:active { background: var(--accent-soft); }
.menu-allega button svg { width: 18px; height: 18px; color: var(--accent-light); flex-shrink: 0; }
.menu-allega button span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu-allega button small { color: var(--text-dim); font-size: 11.5px; }
/* registrazione da una scheda */
.modal-registra { max-width: 360px; }
.registra-corpo { text-align: center; padding: 28px 22px 20px; }
.registra-titolo { font-size: 16px; font-weight: 700; margin-top: 16px; }
.registra-su { color: var(--text-muted); font-size: 13px; margin-top: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.registra-onda { display: flex; gap: 5px; justify-content: center; align-items: center; height: 44px; }
.registra-onda span { width: 6px; height: 14px; border-radius: 3px; background: var(--danger); animation: onda 0.9s ease-in-out infinite; }
.registra-onda span:nth-child(2) { animation-delay: -0.7s; } .registra-onda span:nth-child(3) { animation-delay: -0.5s; }
.registra-onda span:nth-child(4) { animation-delay: -0.3s; } .registra-onda span:nth-child(5) { animation-delay: -0.1s; }
@keyframes onda { 50% { height: 40px; } }
.modal-registra .btn.registrando { background: var(--danger); border-color: var(--danger); color: #fff; box-shadow: none; }

/* ---------- Appunti fissi: testo lungo, link, password ---------- */
.card-tipo {
  width: 22px; height: 22px; border-radius: 7px; flex-shrink: 0; margin-top: -1px;
  display: flex; align-items: center; justify-content: center;
  background: var(--accent-soft); color: var(--accent-light);
}
.appunto-password .card-tipo { background: rgba(251, 191, 36, 0.15); color: var(--warning); }
.appunto-link .card-tipo { background: rgba(56, 189, 248, 0.15); color: #7dd3fc; }
.card.appunto .card-text { font-weight: 600; }
.anteprima {
  margin-top: 4px; font-size: 13px; line-height: 1.5; color: var(--text-muted);
  white-space: pre-wrap; word-wrap: break-word; cursor: pointer;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.anteprima.sfuma { -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent); mask-image: linear-gradient(180deg, #000 55%, transparent); }
.anteprima.vuota { font-style: italic; color: var(--text-dim); }
.leggi-tutto {
  margin-top: 6px; display: inline-flex; align-items: center; gap: 4px; padding: 3px 0;
  background: none; border: 0; color: var(--accent-light); font-size: 12.5px; font-weight: 600;
}
.leggi-tutto svg { width: 12px; height: 12px; }
.link-appunto {
  margin-top: 6px; display: inline-flex; align-items: center; gap: 6px; max-width: 100%;
  padding: 5px 10px; border-radius: 8px; background: rgba(56, 189, 248, 0.12); color: #7dd3fc;
  font-size: 12.5px; font-weight: 600; text-decoration: none; border: 1px solid transparent;
}
.link-appunto:hover { border-color: #7dd3fc; }
.link-appunto svg { width: 12px; height: 12px; flex-shrink: 0; }
.link-appunto span { overflow-wrap: anywhere; word-break: break-all; }
.link-appunto { align-items: flex-start; }
.link-appunto svg { margin-top: 2px; }
.segreto-chiuso {
  margin-top: 6px; display: inline-flex; align-items: center; gap: 8px; padding: 5px 10px;
  border-radius: 8px; background: rgba(251, 191, 36, 0.1); border: 1px solid transparent; color: var(--warning); font-size: 12.5px;
}
.segreto-chiuso:hover { border-color: var(--warning); }
.segreto-chiuso svg { width: 12px; height: 12px; }
.segreto-chiuso .puntini { letter-spacing: 2px; color: var(--text-muted); }
.segreto-chiuso .mostra { font-weight: 700; }
.tipi-appunto { display: flex; gap: 4px; padding: 4px; margin-bottom: 18px; border-radius: 11px; background: var(--surface); border: 1px solid var(--border); }
.tipi-appunto button {
  flex: 1; padding: 9px 6px; border-radius: 8px; border: 0; background: transparent;
  color: var(--text-muted); font-size: 13px; font-weight: 600;
}
.tipi-appunto button.attivo { background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #fff; }
.textarea.testo-lungo { min-height: 220px; font-size: 14.5px; line-height: 1.6; }
.campo-con-occhio { display: flex; gap: 6px; align-items: center; }
.campo-con-occhio .input { flex: 1; }
.protezione { margin-top: 6px; padding: 14px; border-radius: 12px; background: rgba(251, 191, 36, 0.07); border: 1px solid rgba(251, 191, 36, 0.25); }
.protezione-titolo { font-weight: 700; font-size: 13.5px; margin-bottom: 4px; color: var(--warning); }
.protezione .field-aiuto { margin: 0 0 10px; }
#apChiusuraNota .field-aiuto { margin: 0; }
.link-btn { background: none; border: 0; padding: 0; color: var(--accent-light); font-weight: 600; text-decoration: underline; font-size: inherit; }
.modal-lettore { max-width: 760px; }
.lettore-corpo {
  font-size: 16px; line-height: 1.75; white-space: pre-wrap; word-wrap: break-word;
  max-height: calc(88vh - 140px); overflow-y: auto;
}
.lettore-corpo a, .segreto-valore a { color: var(--accent-light); }
.modal-piccola { max-width: 420px; }
.sblocca-corpo { text-align: center; padding-top: 28px; }
.sblocca-icona { width: 56px; height: 56px; margin: 0 auto 12px; border-radius: 16px; display: flex; align-items: center; justify-content: center; background: rgba(251, 191, 36, 0.14); color: var(--warning); }
.sblocca-titolo { font-size: 17px; font-weight: 700; margin-bottom: 4px; }
.sblocca-corpo .input { text-align: center; margin-top: 8px; }
.sblocca-errore { margin-top: 10px; color: var(--danger); font-size: 13px; font-weight: 600; }
.segreto-riga { display: flex; align-items: center; gap: 8px; padding: 12px 0; border-bottom: 1px solid var(--border); }
.segreto-riga:last-child { border-bottom: 0; }
.segreto-riga.colonna { flex-direction: column; align-items: stretch; }
.segreto-etichetta { width: 74px; flex-shrink: 0; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-dim); }
.segreto-valore { flex: 1; min-width: 0; font-size: 15px; word-break: break-all; }
.segreto-valore.mono { font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace; letter-spacing: 0.5px; }
.segreto-valore.testo { word-break: normal; white-space: pre-wrap; font-size: 14px; color: var(--text-muted); }
@media (max-width: 640px) {
  .modal-lettore { max-height: 100dvh; height: 100dvh; max-width: none; border-radius: 0; }
  #lettoreModal { padding: 0; }
  .lettore-corpo { max-height: none; flex: 1; }
  .modal-lettore { display: flex; flex-direction: column; }
}

/* gli avvisi a comparsa non devono rubare i tocchi ai pulsanti che coprono:
   si tocca attraverso, tranne il loro "Annulla" */
.toast-container, .toast { pointer-events: none; }
.toast .undo, .toast button { pointer-events: auto; }

/* in lista del testo si vede solo la prima riga; gli indirizzi scritti
   dentro compaiono sotto, toccabili */
.card.appunto .anteprima { display: block; -webkit-line-clamp: unset; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; -webkit-mask-image: none; mask-image: none; }
.link-appunti { display: flex; flex-wrap: wrap; gap: 6px; }
.link-appunti .link-appunto { margin-top: 6px; }
.appunto-link .link-appunto + .anteprima { margin-top: 6px; }

/* suggerimenti @persona */
.popover.chiocciola { min-width: 220px; max-width: 320px; z-index: 2500; }
.popover.chiocciola .board-item { padding: 7px 12px; }
.popover.chiocciola .b-count { max-width: 45%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* accesso scaduto su questo dispositivo */
.avviso-accesso {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 10px 18px; font-size: 13.5px; line-height: 1.45;
  background: rgba(251, 191, 36, 0.16); border-bottom: 1px solid rgba(251, 191, 36, 0.5); color: var(--text);
}
.avviso-accesso span { flex: 1; min-width: 200px; }

/* dettatura a voce */
.btn-mic { margin-left: 8px; padding: 2px 8px; border-radius: 6px; border: 1px solid var(--border); background: var(--surface); color: var(--text-muted); font-size: 11.5px; font-weight: 600; text-transform: none; letter-spacing: 0; cursor: pointer; vertical-align: middle; }
.btn-mic:hover { border-color: var(--accent); color: var(--text); }
.btn-mic.registrando, .btn.registrando { background: rgba(255, 107, 107, 0.18); border-color: var(--danger); color: var(--danger); animation: pulsaMic 1.2s ease-in-out infinite; }
@keyframes pulsaMic { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 107, 107, 0.35); } 50% { box-shadow: 0 0 0 6px rgba(255, 107, 107, 0); } }
.onda-dettatura { display: flex; align-items: center; gap: 8px; width: 100%; margin-top: 8px; padding: 6px 10px; border-radius: 8px; background: var(--surface); border: 1px solid var(--border); font-size: 12px; color: var(--text-muted); }
.onda-tempo { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--danger); }
.onda-barre { display: flex; align-items: flex-end; gap: 2px; height: 22px; flex: 1; }
.onda-barre i { display: block; width: 3px; border-radius: 2px; background: var(--text-dim); opacity: 0.6; }
.onda-barre i.voce { background: var(--danger); opacity: 1; }
.onda-coda { color: var(--text-dim); }

/* graffetta + tipo di allegato */
.ico-allegato { position: relative; display: inline-flex; width: 20px; height: 18px; flex-shrink: 0; vertical-align: -3px; margin-right: 2px; }
.ico-allegato > svg { width: 15px; height: 15px; opacity: 0.8; }
.ico-allegato .ico-badge { position: absolute; right: -2px; bottom: -3px; width: 14px; height: 14px; border-radius: 50%; background: var(--accent); color: #fff; border: 1.5px solid var(--surface-solid); display: flex; align-items: center; justify-content: center; }
.ico-allegato .ico-badge svg { width: 9px; height: 9px; stroke-width: 2.5; }
.chip .ico-allegato { margin-right: 3px; }

/* avanzamento a tappe: il cerchietto si riempie a spicchio */
.card-check.av { border-color: var(--success); background: conic-gradient(var(--success) var(--av), transparent 0); }
.card-check.av svg { opacity: 0; }
.card-check:active { transform: scale(0.9); }
.chip.avanzamento { background: rgba(74, 222, 128, 0.14); color: var(--success); font-variant-numeric: tabular-nums; }
.avanzamento-scelta { display: flex; gap: 8px; flex-wrap: wrap; }
.avanzamento-scelta button {
  display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; border-radius: var(--radius-sm);
  border: 1px solid var(--border); background: var(--surface); color: var(--text-muted); font-size: 13px; font-weight: 600; cursor: pointer;
  transition: var(--transition);
}
.avanzamento-scelta button i { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--text-dim); background: conic-gradient(var(--success) var(--av), transparent 0); }
.avanzamento-scelta button[data-av="100"] i { background: var(--success); border-color: var(--success); }
.avanzamento-scelta button:hover { border-color: var(--success); color: var(--text); }
.avanzamento-scelta button.selected { border-color: var(--success); background: rgba(74, 222, 128, 0.14); color: var(--text); }
.avanzamento-scelta button.selected i { border-color: var(--success); }

/* scelta rapida dell'avanzamento dal cerchietto */
.scelta-avanzamento { display: flex; gap: 4px; padding: 4px; }
.scelta-avanzamento button {
  display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 52px; padding: 7px 6px; border-radius: 8px; white-space: nowrap;
  border: 1px solid transparent; background: transparent; color: var(--text-muted); font-size: 13px; font-weight: 700; cursor: pointer; transition: var(--transition);
}
.scelta-avanzamento button i { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--text-dim); background: conic-gradient(var(--success) var(--av), transparent 0); }
.scelta-avanzamento button[data-av="100"] i { background: var(--success); border-color: var(--success); }
.scelta-avanzamento button:hover { background: var(--accent-soft); color: var(--text); }
.scelta-avanzamento button.selected { border-color: var(--success); color: var(--text); }

/* tappe dell'avanzamento nel menu della lista */
.menu-etichetta { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.6px; color: var(--text-dim); padding: 6px 12px 2px; }
.passi-row { display: flex; gap: 4px; padding: 4px 8px 6px; flex-wrap: wrap; }
.passi-row button { padding: 4px 9px; border-radius: 6px; border: 1px solid var(--border); background: transparent; color: var(--text-muted); font-size: 12px; cursor: pointer; }
.passi-row button:hover { border-color: var(--accent); color: var(--text); }
.passi-row button.selected { border-color: var(--success); color: var(--text); background: rgba(74, 222, 128, 0.14); }
.scelta-avanzamento { flex-wrap: wrap; max-width: 300px; }
.avanzamento-scelta button[data-av="100"] i, .scelta-avanzamento button[data-av="100"] i { background: var(--success); border-color: var(--success); }

/* liste di appunti: un puntino al posto della spunta, niente barrato */
.card-punto { width: 8px; height: 8px; border-radius: 50%; background: var(--text-dim); flex-shrink: 0; margin: 7px 5px 0 4px; opacity: 0.7; }
.card.nota { cursor: default; }

/* Telefoni e tablet (dito, non mouse): la GPU è piccola e la batteria conta.
   Le sfere di sfondo restano ma ferme e meno sfocate; le liste perdono il
   vetro (backdrop-filter), che con molte liste costa un ridisegno continuo. */
@media (pointer: coarse), (max-width: 700px) {
  .bg .blob { animation: none; filter: blur(60px); }
  .list, .add-list-btn, .empty-board, .header { backdrop-filter: none; -webkit-backdrop-filter: none; }
  .list { background: var(--surface); }
  .bg .grain { display: none; }
}

/* scarica l'app */
.scarica-griglia { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.scarica-voce { display: flex; flex-direction: column; gap: 6px; padding: 16px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); color: var(--text); text-decoration: none; transition: var(--transition); }
.scarica-voce:hover { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); transform: translateY(-1px); }
.scarica-voce b { font-size: 16px; }
.scarica-voce span { font-size: 13px; color: var(--text-muted); line-height: 1.45; }
.scarica-voce small { font-size: 11.5px; color: var(--text-dim); }

/* account: recupero password ed eliminazione */
.link-btn { background: none; border: none; padding: 6px 0; color: var(--accent-light); font-size: 13px; cursor: pointer; text-decoration: underline; }
.zona-account { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--border); }
.zona-account.pericolo .field-label { color: var(--danger); }
.recupero-box { margin-top: 12px; padding: 14px; border-radius: 10px; border: 1px solid var(--accent); background: var(--accent-soft); }
.recupero-codice { font-family: 'Cascadia Code', Consolas, monospace; font-size: 18px; font-weight: 700; letter-spacing: 1px; user-select: all; word-break: break-all; }
.about a { color: var(--accent-light); }

.scarica-voce.senza-link { cursor: default; }
.scarica-voce.senza-link:hover { border-color: var(--border); box-shadow: none; transform: none; }

/* "Chiedi all'AI": detta e manda sulla stessa riga */
.riga-manda { display: flex; gap: 8px; }
.riga-manda .btn-primary { flex: 1; justify-content: center; }
.riga-manda .btn-ghost { min-width: 118px; justify-content: center; }

/* Telefoni stretti: con il microfono dell'AI nella barra i tasti si stringono
   un poco, e il selettore delle board tiene comunque una misura toccabile. */
@media (max-width: 480px) {
  .header { gap: 3px; }
  .header-left { gap: 6px; }
  .header-right { gap: 4px; }
  .header .btn { padding: 8px 7px; }
}

/* Striscia del microfono dell'AI: sta sotto la barra, non è una finestra */
.striscia-voce {
  position: fixed; z-index: 1500; top: calc(var(--header-h) + var(--sicuro-su) + 8px); left: 50%; transform: translateX(-50%);
  width: min(620px, calc(100vw - 20px)); display: flex; align-items: flex-start; gap: 10px; flex-wrap: wrap;
  padding: 10px 40px 10px 12px; border-radius: 12px; background: var(--surface-solid); border: 1px solid var(--border);
  box-shadow: var(--shadow-lg); font-size: 14px; line-height: 1.45; animation: popIn 0.15s ease;
}
.striscia-voce.ascolto { border-color: var(--danger); }
.striscia-voce.fatto { border-color: var(--success); }
.striscia-voce.guaio { border-color: var(--danger); }
.striscia-voce .onda-dettatura { width: 150px; flex: none; margin-top: 0; }
.striscia-voce .voce-testo { flex: 1; min-width: 160px; color: var(--text); white-space: pre-wrap; word-break: break-word; padding-top: 3px; }
.striscia-voce .voce-testo.vuoto, .striscia-voce .voce-testo.domanda { color: var(--text-dim); }
.striscia-voce .voce-testo.domanda { flex-basis: 100%; font-size: 12.5px; padding-top: 0; }
.striscia-voce .voce-stato { flex-basis: 100%; color: var(--text-muted); font-size: 12.5px; }
.striscia-voce .voce-risposta { flex-basis: 100%; white-space: pre-wrap; word-break: break-word; max-height: 40vh; overflow-y: auto; }
.striscia-voce.guaio .voce-risposta { color: #ffb3b3; }
.striscia-voce [data-voce-chiudi] { position: absolute; top: 6px; right: 6px; }

/* "Chiedi all'AI": i tre abbonamenti e la scelta di chi risponde */
.ai-abbonamenti { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.ai-abbonamenti .riga-persona .btn { padding: 6px 12px; font-size: 12.5px; flex: none; }
.ai-abbonamenti .riga-persona.collegato { border-color: var(--success); }
.ai-scelta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; font-size: 12.5px; color: var(--text-muted); }
.ai-scelta button { padding: 5px 12px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); color: var(--text-muted); font-size: 12.5px; font-weight: 600; cursor: pointer; }
.ai-scelta button.attivo { background: var(--accent); border-color: var(--accent); color: #fff; }
.ai-codice-breve { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; border: 1px dashed var(--accent); background: var(--accent-soft); }
.ai-codice-breve span { flex: 1; font-family: ui-monospace, monospace; font-size: 22px; font-weight: 700; letter-spacing: 0.12em; color: var(--text); user-select: all; }

/* Risposte dell'AI formattate (grassetti, elenchi, titoli) invece dei segni del markdown */
.ricca { white-space: normal; }
.ricca > div { margin: 0; }
.ricca .stacco { height: 8px; }
.ricca .titolo { font-weight: 700; font-size: 1.05em; margin: 4px 0 2px; }
.ricca ul, .ricca ol { margin: 4px 0; padding-left: 22px; }
.ricca li { margin: 2px 0; }
.ricca strong { font-weight: 700; color: var(--text); }
.ricca em { font-style: italic; color: var(--text-muted); }
.ricca code { font-family: ui-monospace, monospace; font-size: 0.92em; padding: 1px 5px; border-radius: 5px; background: var(--accent-soft); }
.ricca pre { font-family: ui-monospace, monospace; font-size: 12.5px; padding: 8px 10px; border-radius: 8px; background: var(--accent-soft); overflow-x: auto; white-space: pre; margin: 6px 0; }
.ricca a { color: var(--accent-light); text-decoration: underline; }
.ricca hr { border: none; border-top: 1px solid var(--border); margin: 8px 0; }
.ricca table { border-collapse: collapse; margin: 6px 0; font-size: 0.95em; display: block; overflow-x: auto; }
.ricca th, .ricca td { text-align: left; padding: 4px 10px 4px 0; border-bottom: 1px solid var(--border); vertical-align: top; }
.ricca th { font-weight: 700; }

/* "Chiedi all'AI": la parte separata delle chiavi API a pagamento */
.ai-chiavi { margin-top: 14px; border-top: 1px solid var(--border); padding-top: 12px; }
.ai-chiavi > summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--text-muted); list-style-position: inside; }
.ai-chiavi > summary:hover { color: var(--text); }
.ai-chiavi[open] > summary { color: var(--text); }

/* "Segnala" sotto una risposta dell'AI */
.battuta .segnala-ai { display: block; margin-top: 6px; padding: 0; border: none; background: none; color: var(--text-dim); font-size: 11.5px; text-decoration: underline; cursor: pointer; }
.battuta .segnala-ai:hover { color: var(--text-muted); }
.battuta .segnala-ai:disabled { text-decoration: none; cursor: default; }