:root {
  --navy: #1C2434; --slate: #64748B; --line: #E2E8F0; --bg: #F8FAFC; --white: #fff;
  --giallo: #FFD500; --giallo-chiaro: #FFF9D9; --giallo-scuro: #8A6E00;
  --verde: #1F7A4D; --verde-bg: #E6F4EC; --ambra: #8A6E00; --ambra-bg: #FFF4CC; --rosso: #B3261E; --rosso-bg: #FBE9E7;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body { font-family: var(--font); color: var(--navy); background: var(--bg); display: flex; flex-direction: column; font-size: 14px; }
[hidden] { display: none !important; }

/* Testata */
.top { display: flex; align-items: center; gap: 10px; padding: 10px 16px; background: var(--white); border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.brand { font-weight: 700; font-size: 15px; }
.spacer { flex: 1; }
.models { display: flex; gap: 4px; background: var(--bg); padding: 3px; border-radius: 9px; border: 1px solid var(--line); }
.model { border: 0; background: none; padding: 6px 12px; border-radius: 7px; font: inherit; color: var(--slate); cursor: pointer; }
.model.on { background: var(--navy); color: var(--white); font-weight: 600; }
.model:disabled { cursor: not-allowed; opacity: .6; }
.model small { font-size: 10px; margin-left: 4px; text-transform: uppercase; letter-spacing: .04em; }
.btn { font: inherit; padding: 6px 12px; border-radius: 8px; border: 1px solid var(--line); background: var(--white); color: var(--navy); cursor: pointer; }
.btn:hover:not(:disabled) { border-color: var(--navy); }
.btn:disabled { opacity: .45; cursor: default; }
.btn.ghost { color: var(--slate); }
.btn:focus-visible, .model:focus-visible, .part:focus-visible, .riga-canale:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }
#lista, #nome, #picker-cerca, #picker-tipo { font: inherit; padding: 6px 10px; border-radius: 8px; border: 1px solid var(--line); background: var(--white); color: var(--navy); }
#nome { width: 200px; }
#lista { max-width: 180px; }

/* Area */
.area { flex: 1; display: flex; min-height: 0; }
.canvas { position: relative; flex: 1; overflow: hidden; cursor: grab; touch-action: none; outline: none;
  background-color: var(--bg); background-image: radial-gradient(#CBD5E1 1px, transparent 1px); background-size: 24px 24px; }
.canvas.panning { cursor: grabbing; }
.world { position: absolute; left: 0; top: 0; transform-origin: 0 0; width: 0; height: 0; }
.world.anim { transition: transform .26s ease; }
.edges { position: absolute; left: 0; top: 0; width: 1px; height: 1px; overflow: visible; pointer-events: none; }
.arco { fill: none; stroke: var(--navy); stroke-width: 1.8; }
.arco.sel { stroke: var(--rosso); stroke-width: 2.6; }
.arco.temp { stroke: #B7960A; stroke-dasharray: 6 4; }
.edge-hit { fill: none; stroke: transparent; stroke-width: 16; pointer-events: stroke; cursor: pointer; }
.arco.ghost { stroke: #B7960A; stroke-dasharray: 5 5; stroke-width: 1.5; }

/* Card */
.card { --st: #64748B; position: absolute; border-left: 4px solid var(--st); background: var(--white); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; cursor: pointer;
  box-shadow: 0 1px 2px rgba(28,36,52,.06); display: flex; flex-direction: column; gap: 4px; user-select: none; overflow: hidden; }
.card:hover { border-color: #94A3B8; }
.card.sel { border-color: var(--navy); box-shadow: 0 0 0 2px var(--giallo), 0 4px 12px rgba(28,36,52,.12); z-index: 3; }
.card.trascina { cursor: grabbing; box-shadow: 0 8px 20px rgba(28,36,52,.18); z-index: 5; }
.c-riga { display: flex; align-items: center; gap: 6px; }
.c-nome { font-weight: 700; font-size: 14px; line-height: 1.25; }
.c-testo { color: var(--slate); font-size: 12px; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.aperta { position: absolute; right: 8px; bottom: 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--giallo); border: 1px solid #B7960A; }
.card.ghost { background: rgba(255,249,217,.7); border: 1.5px dashed #B7960A; box-shadow: none; }
.card.ghost:hover { background: var(--giallo-chiaro); border-style: solid; }
.card.ghost .c-nome { color: #4A3C00; }
.card.ghost .aggiungi { position: absolute; left: 0; right: 0; bottom: 0; text-align: center; font-size: 11px; font-weight: 700; padding: 4px; background: var(--giallo); opacity: 0; transition: opacity .12s; }
.card.ghost:hover .aggiungi { opacity: 1; }
.card.ghost .x { position: absolute; right: 6px; top: 6px; width: 22px; height: 22px; border: 0; border-radius: 50%; background: transparent; color: var(--slate); font-size: 16px; line-height: 1; cursor: pointer; z-index: 2; }
.card.ghost .x:hover { background: rgba(0,0,0,.08); color: var(--navy); }
.card.ghost .c-riga { padding-right: 22px; }

.chip { font-size: 10.5px; font-weight: 600; padding: 1px 7px; border-radius: 999px; background: var(--bg); border: 1px solid var(--line); color: var(--slate); white-space: nowrap; }
.chip.on { background: #EAF1FB; border-color: #D2E1F6; color: #2A5BA0; }
.chip.off { background: #F3EEF9; border-color: #E2D7F0; color: #6A4A93; }
.chip.lead { background: var(--verde-bg); border-color: #C6E5D3; color: var(--verde); }
.score { margin-left: auto; font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 999px; white-space: nowrap; }
.score.alto { background: var(--verde-bg); color: var(--verde); }
.score.medio { background: var(--ambra-bg); color: var(--ambra); }
.score.basso { background: var(--rosso-bg); color: var(--rosso); }

/* Stato vuoto */
.vuoto { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 24px; pointer-events: none; z-index: 8; background: radial-gradient(ellipse at center, rgba(248,250,252,.98) 40%, rgba(248,250,252,.6)); }
.vuoto > * { pointer-events: auto; }
.vuoto h1 { margin: 0 0 8px; font-size: 26px; }
.vuoto p { max-width: 520px; color: var(--slate); line-height: 1.5; margin: 0 0 20px; }
.partenza { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; max-width: 760px; }
.part { font: inherit; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 138px; text-align: left; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--white); cursor: pointer; }
.part:hover { border-color: var(--navy); box-shadow: 0 0 0 2px var(--giallo); }
.part small { color: var(--slate); }

/* Zoom */
.zoom { position: absolute; left: 14px; bottom: 14px; display: flex; gap: 4px; background: var(--white); border: 1px solid var(--line); border-radius: 10px; padding: 4px; z-index: 9; }
.zoom button { font: inherit; border: 0; background: none; padding: 6px 10px; border-radius: 7px; cursor: pointer; color: var(--navy); }
.zoom button:hover { background: var(--bg); }
body:not(.con-nodi) .zoom { display: none; }

/* Pannello */
.pannello { width: 340px; flex: none; background: var(--white); border-left: 1px solid var(--line); overflow-y: auto; padding: 4px 0 24px; }
.p-sez { padding: 14px 18px; border-bottom: 1px solid var(--line); }
.p-sez h2 { margin: 2px 0 8px; font-size: 18px; line-height: 1.25; }
.p-stadio { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--giallo-scuro); font-weight: 700; }
.p-badge { display: flex; gap: 6px; align-items: center; margin-bottom: 10px; }
.p-badge .score { margin-left: 0; }
.p-tit { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--slate); margin-bottom: 8px; }
.dato { margin: 10px 0 0; }
.dato-k { font-size: 11px; font-weight: 700; color: var(--slate); text-transform: uppercase; letter-spacing: .05em; }
.dato-v { line-height: 1.5; margin-top: 2px; }
.nota { color: var(--slate); line-height: 1.5; margin: 0 0 10px; }
.azioni .btn { margin: 0 6px 6px 0; }
.cop { display: grid; gap: 4px; }
.cop-voce { display: flex; justify-content: space-between; padding: 6px 10px; border-radius: 8px; background: var(--bg); color: var(--slate); }
.cop-voce.si { background: var(--giallo-chiaro); color: var(--navy); }
.lettura { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.lettura li { padding: 8px 10px 8px 12px; border-radius: 8px; line-height: 1.45; background: var(--bg); border-left: 3px solid #94A3B8; }
.lettura li.buco, .lettura li.debole { background: var(--ambra-bg); border-left-color: #B7960A; }
.lettura li.ok { background: var(--verde-bg); border-left-color: var(--verde); }

/* Picker */
.picker { position: fixed; inset: 0; background: rgba(28,36,52,.45); display: flex; align-items: center; justify-content: center; padding: 20px; z-index: 50; }
.picker-box { width: min(720px, 100%); max-height: 86vh; background: var(--white); border-radius: 16px; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 20px 50px rgba(0,0,0,.25); }
.picker-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 18px 20px 8px; }
.picker-titolo { font-size: 18px; font-weight: 700; }
.picker-sotto { color: var(--slate); margin-top: 4px; line-height: 1.4; }
.picker-filtri { display: flex; gap: 8px; padding: 8px 20px 12px; }
.picker-filtri input { flex: 1; }
.picker-lista { overflow-y: auto; padding: 0 12px 12px; border-top: 1px solid var(--line); }
.riga-canale { display: block; width: 100%; text-align: left; font: inherit; color: inherit; background: none; border: 0; border-bottom: 1px solid var(--line); padding: 12px 8px; cursor: pointer; border-radius: 8px; }
.riga-canale:hover:not(:disabled) { background: var(--giallo-chiaro); }
.riga-canale:disabled { opacity: .45; cursor: default; }
.rc-testa { display: flex; gap: 8px; align-items: center; }
.rc-testa .score { margin-left: auto; }
.rc-testo { color: var(--slate); font-size: 12.5px; line-height: 1.45; margin-top: 4px; }
.rc-usato { font-size: 11px; font-weight: 700; color: var(--giallo-scuro); margin-top: 4px; }

.toast { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%); background: var(--navy); color: var(--white); padding: 8px 16px; border-radius: 999px; z-index: 99; transition: opacity .4s; }
.toast.via { opacity: 0; }

@media (max-width: 900px) {
  .area { flex-direction: column; }
  .pannello { width: 100%; max-height: 38vh; border-left: 0; border-top: 1px solid var(--line); }
  #nome { width: 140px; }
}
@media (prefers-reduced-motion: reduce) { .world.anim { transition: none; } }

/* Tela libera */
.stadio { font-size: 10.5px; font-weight: 700; color: var(--st); text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; }
.card.ghost { border-left-style: dashed; }
.maniglia { position: absolute; right: -7px; top: 50%; width: 14px; height: 14px; margin-top: -7px; border-radius: 50%; background: var(--white); border: 2px solid var(--navy); cursor: crosshair; opacity: 0; transition: opacity .12s, transform .12s; z-index: 4; }
.card:hover .maniglia, .card.sel .maniglia { opacity: 1; }
.maniglia:hover { transform: scale(1.35); background: var(--giallo); }
.card { overflow: visible; }
.card .c-testo { max-width: 100%; }
.legenda { position: absolute; left: 14px; top: 12px; right: 14px; z-index: 9; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; pointer-events: none; }
.legenda > * { pointer-events: auto; }
body:not(.con-nodi) .legenda { display: none; }
.leg { font: inherit; font-size: 12.5px; display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px; border-radius: 999px; border: 1px solid var(--line); background: var(--white); color: var(--navy); cursor: pointer; }
.leg:hover { border-color: var(--navy); }
.leg i { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.leg b { font-size: 11px; background: var(--bg); border-radius: 999px; padding: 0 6px; }
.leg-nota { font-size: 12px; color: var(--slate); margin-left: 6px; }
.sel-stadio { font: inherit; width: 100%; margin: 4px 0 8px; padding: 6px 10px; border-radius: 8px; border: 1px solid var(--line); background: var(--white); color: var(--navy); }
#picker-stadio { font: inherit; padding: 6px 10px; border-radius: 8px; border: 1px solid var(--line); background: var(--white); color: var(--navy); }
.c-nome { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card.ghost .x { right: -9px; top: -9px; width: 20px; height: 20px; background: var(--white); border: 1px solid var(--line); font-size: 14px; }
.card.ghost .c-riga { padding-right: 0; }

/* Brief, modelli, profilo */
.c-pie { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--slate); margin-top: auto; }
.fuori-tag { font-size: 10px; font-weight: 700; color: var(--rosso); background: var(--rosso-bg); border-radius: 999px; padding: 0 6px; }
.rc-pie { font-size: 11.5px; color: var(--slate); margin-top: 4px; }
.rc-fuori { font-size: 11.5px; font-weight: 600; color: var(--rosso); margin-top: 3px; }
.avviso { margin-top: 10px; padding: 8px 10px; border-radius: 8px; background: var(--rosso-bg); color: var(--rosso); font-weight: 600; line-height: 1.4; }
.nota.piccola { font-size: 11.5px; margin: 10px 0 0; }
.brief { display: grid; gap: 10px; margin-top: 10px; }
.b-riga { display: grid; gap: 4px; font-size: 12.5px; color: var(--slate); }
.b-riga select { font: inherit; padding: 6px 10px; border-radius: 8px; border: 1px solid var(--line); background: var(--white); color: var(--navy); }
details.brief-box > summary { cursor: pointer; margin: 0; }
.vuoto { overflow-y: auto; justify-content: flex-start; align-items: center; pointer-events: auto; background: rgba(248,250,252,.97); }
.vuoto-box { width: min(760px, 100%); padding: 28px 0 40px; text-align: left; }
.vuoto-box h1 { text-align: center; }
.vuoto-box > p { margin: 0 auto 22px; text-align: center; }
.vuoto-box section { background: var(--white); border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px; margin-bottom: 14px; }
.vuoto-box h2 { margin: 0 0 4px; font-size: 15px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.vuoto-box h2 small { color: var(--slate); font-weight: 400; font-size: 12.5px; }
.vuoto .brief { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.modelli { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 10px; margin-top: 10px; }
.modello { font: inherit; text-align: left; display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--white); cursor: pointer; color: var(--navy); }
.modello:hover { border-color: var(--navy); box-shadow: 0 0 0 2px var(--giallo); }
.modello small { color: var(--slate); line-height: 1.4; }
.vuoto .partenza { justify-content: flex-start; margin-top: 10px; }
.num { width: 22px; height: 22px; border-radius: 50%; background: var(--navy); color: var(--white); font-size: 12px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; flex: none; }

.vuoto { justify-content: flex-start; }   /* centrare con justify-content tagliava la parte alta quando la schermata è più alta della finestra */
.vuoto-box { margin-block: auto; }
.vuoto-box > p { max-width: 520px; }
.vuoto .partenza { justify-content: center; }

/* Documento di stampa (PDF) */
.stampa { display: none; }
@page { size: A4 landscape; margin: 12mm; }
@media print {
  html, body { height: auto !important; background: #fff !important; display: block !important; }
  .top, .area, .picker, .toast { display: none !important; }
  .stampa { display: block !important; color: #1C2434; font-family: -apple-system, Helvetica, Arial, sans-serif; font-size: 10.5pt; line-height: 1.45; }
  .stampa * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .s-sopra { font-size: 9pt; text-transform: uppercase; letter-spacing: .06em; color: #8A6E00; font-weight: 700; }
  .s-testa h1 { font-size: 24pt; margin: 4px 0 14px; line-height: 1.15; border-bottom: 3px solid #FFD500; padding-bottom: 10px; }
  .s-sez { margin-bottom: 16px; }
  .s-sez h2 { font-size: 13pt; margin: 0 0 8px; break-after: avoid; }
  .stampa-svg { width: 100%; height: auto; max-height: 150mm; border: 1px solid #E2E8F0; border-radius: 8px; break-inside: avoid; }
  .s-testa { break-after: avoid; }
  .s-map { break-after: page; }
  .s-canali { column-count: 2; column-gap: 10mm; }
  .s-ob { column-count: 2; column-gap: 10mm; }
  .s-stadio { margin-bottom: 12px; }
  .s-stadio h3 { font-size: 11.5pt; margin: 0 0 6px; display: flex; align-items: center; gap: 8px; break-after: avoid; }
  .s-stadio h3 span { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
  .s-stadio h3 small { color: #64748B; font-weight: 400; font-size: 9.5pt; }
  .s-canale { border-left: 3px solid #E2E8F0; padding: 2px 0 2px 10px; margin: 0 0 8px; break-inside: avoid; }
  .s-canale h4 { margin: 0 0 2px; font-size: 11pt; }
  .s-canale h4 em { font-style: normal; font-weight: 400; color: #64748B; font-size: 9.5pt; margin-left: 6px; }
  .s-canale p { margin: 2px 0; }
  .s-vuoto { color: #64748B; margin: 0; }
  .s-coll, .s-lett { margin: 0; padding-left: 18px; }
  .s-coll span { color: #64748B; }
  .s-pie { margin-top: 18px; font-size: 8.5pt; color: #64748B; border-top: 1px solid #E2E8F0; padding-top: 8px; }
}

/* Obiettivi */
.card.obiettivo { background: var(--giallo); border: 1.5px solid #B7960A; border-left: 1.5px solid #B7960A; box-shadow: 0 2px 6px rgba(183,150,10,.25); }
.card.obiettivo .c-nome { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 15px; }
.card.obiettivo .c-testo { color: #4A3C00; }
.card.obiettivo.sel { box-shadow: 0 0 0 2px var(--navy), 0 4px 12px rgba(28,36,52,.2); }
.stadio.ob { color: #6B5900; }
.stadio.ob::before { content: "⚑ "; }
.leg-ob { background: var(--giallo); border-color: #B7960A; }
.leg-ob i { display: none; }
.ob-box { margin-top: 10px; }
.ob-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 6px 14px; }
.ob-voce { display: flex; align-items: flex-start; gap: 8px; padding: 7px 10px; border: 1px solid var(--line); border-radius: 10px; cursor: pointer; font-size: 13.5px; line-height: 1.35; background: var(--white); }
.ob-voce:hover { border-color: var(--navy); }
.ob-voce input { margin-top: 2px; }
.ob-voce em { color: var(--slate); font-style: normal; font-size: 11.5px; }
.ob-voce.gia { opacity: .55; cursor: default; }
.ob-altro { display: flex; gap: 8px; margin-top: 10px; }
.ob-altro input { flex: 1; font: inherit; padding: 7px 10px; border-radius: 8px; border: 1px solid var(--line); }
.ob-pie { padding: 12px 20px 16px; display: flex; justify-content: flex-end; border-top: 1px solid var(--line); }
.btn.primario { background: var(--navy); color: var(--white); border-color: var(--navy); }
#obmodal .ob-box { overflow-y: auto; }

/* Selezione testo, freccia eliminabile, obiettivi obbligatori */
.top, .legenda, .viste, .zoom, .canvas, .btn, .part, .leg, .model { user-select: none; -webkit-user-select: none; }
.canvas input, .canvas select { user-select: text; -webkit-user-select: text; }
.edge-hit:hover { stroke: rgba(179,38,30,.28); stroke-width: 10; }
.arco-x { position: absolute; width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%; border: 2px solid var(--white); background: var(--rosso); color: var(--white); display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 6; box-shadow: 0 2px 8px rgba(0,0,0,.28); padding: 0; }
.arco-x:hover { background: #8C1C15; transform: scale(1.12); }
.part:disabled { opacity: .4; cursor: not-allowed; }
.part:disabled:hover { border-color: var(--line); box-shadow: none; }
.ob-salta { display: flex; align-items: center; gap: 10px; margin-top: 10px; color: var(--slate); font-size: 13px; flex-wrap: wrap; }
.nota-part { margin: 10px 0 0; font-size: 12.5px; }

/* Invito a scegliere l'obiettivo */
.invito-box { background: var(--giallo-chiaro); border-bottom: 2px solid var(--giallo); }
.invito-box .p-tit { color: #6B5900; }
.invito-t { margin: 0 0 10px; line-height: 1.5; }
.invito-box .btn { margin: 0 6px 6px 0; }
.invito-ok { background: var(--verde-bg); }
@keyframes pulsa { 0%, 100% { box-shadow: 0 0 0 0 rgba(255,213,0,.9), 0 2px 6px rgba(183,150,10,.25); } 50% { box-shadow: 0 0 0 10px rgba(255,213,0,0), 0 2px 6px rgba(183,150,10,.25); } }
.card.obiettivo.invito { animation: pulsa 1.3s infinite; cursor: pointer; border-color: var(--navy); }
@media (prefers-reduced-motion: reduce) { .card.obiettivo.invito { animation: none; box-shadow: 0 0 0 3px var(--giallo); } }

/* Dati d'uso */
.c-uso { font-size: 10.5px; font-weight: 600; color: var(--verde); margin-top: auto; line-height: 1.25; }

/* Cosa mostrare: sagoma del modello e pannello dei dettagli */
.viste { position: absolute; right: 14px; bottom: 14px; display: flex; gap: 4px; background: var(--white); border: 1px solid var(--line); border-radius: 9px; padding: 3px; z-index: 5; }
.viste button { font: inherit; font-size: 13px; border: 0; background: none; color: var(--navy); padding: 5px 10px; border-radius: 6px; cursor: pointer; }
.viste button.off { background: var(--giallo-chiaro); }
.viste button:hover { background: var(--bg); }
.viste button:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }
body.no-sagoma #zone { display: none; }
body.no-pannello .pannello { display: none; }
@media print { .viste { display: none; } }

/* Maniglia di un flusso: titolo trascinabile + nascondi */
.lane-man { position: absolute; width: max-content; white-space: nowrap; display: flex; align-items: center; gap: 8px; padding: 5px 8px 5px 10px; background: var(--white); border: 1px solid var(--line); border-radius: 9px; font-size: 14px; cursor: grab; user-select: none; box-shadow: 0 1px 3px rgba(28,36,52,.08); }
.lane-man:active { cursor: grabbing; }
.lane-man { background: transparent; border-color: transparent; box-shadow: none; font-size: 17px; }
.lane-man small { font-size: 11px; color: var(--slate); font-weight: 400; }
.lane-man .lm-g { color: var(--slate); font-size: 16px; line-height: 1; }
.lane-man .lm-b { font: inherit; font-size: 12px; border: 1px solid var(--line); background: var(--bg); color: var(--navy); border-radius: 6px; padding: 2px 8px; cursor: pointer; }
.lane-man .lm-b:hover { background: var(--giallo-chiaro); }
.lane-man.nasc { background: var(--white); border-color: var(--line); }
.lane-man .lm-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }

/* Intestazioni dei flussi: a schermo, sempre leggibili */
.corsie-ui { position: absolute; inset: 0; pointer-events: none; z-index: 4; overflow: hidden; }
.lane-head { position: absolute; display: flex; align-items: center; gap: 10px; padding: 6px 8px 6px 6px; background: var(--white); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 2px 8px rgba(28,36,52,.10); pointer-events: auto; white-space: nowrap; user-select: none; }
.lane-head.nasc { background: var(--bg); }
.lane-grip { cursor: grab; color: var(--slate); font-size: 18px; line-height: 1; padding: 6px 4px; border-radius: 6px; }
.lane-grip:hover { background: var(--bg); color: var(--navy); }
.lane-grip:active { cursor: grabbing; }
.lane-num { width: 24px; height: 24px; border-radius: 50%; color: var(--white); font-size: 13px; font-weight: 700; display: grid; place-items: center; flex: none; }
.lane-testo { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.lane-nome { font-size: 15px; font-weight: 700; max-width: 320px; overflow: hidden; text-overflow: ellipsis; cursor: text; }
.lane-testo small { font-size: 12px; color: var(--slate); }
.lane-nome-input { font: inherit; font-size: 15px; font-weight: 700; border: 1px solid var(--navy); border-radius: 6px; padding: 3px 6px; width: 260px; }
.lane-b { display: inline-flex; align-items: center; gap: 6px; font: inherit; font-size: 13px; border: 1px solid var(--line); background: var(--white); color: var(--navy); border-radius: 8px; padding: 6px 10px; cursor: pointer; }
.lane-b:hover { background: var(--bg); }
.lane-b:focus-visible, .lane-grip:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }
.lane-del { padding: 6px 8px; color: var(--rosso); }
.lane-del:hover { background: var(--rosso-bg); border-color: var(--rosso); }
@media print { .corsie-ui { display: none; } }
.picker-head .btn { white-space: nowrap; flex: none; }

/* Elenco delle strategie, avviso di backup, footer */
.conta { display: inline-block; min-width: 20px; padding: 0 6px; margin-left: 4px; border-radius: 10px; background: var(--bg); border: 1px solid var(--line); font-size: 12px; text-align: center; }
.avviso-backup { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 16px; background: var(--white); border-bottom: 1px solid var(--line); font-size: 14px; }
.avviso-backup[hidden] { display: none; }
.avviso-backup span { flex: 1 1 320px; }
.str-lista { overflow: auto; padding: 4px 12px 8px; max-height: 52vh; }
.str-riga { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 8px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.str-riga.in-uso { background: var(--bg); border-radius: 8px; }
.str-info { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1 1 280px; }
.str-info small { color: var(--slate); font-size: 12.5px; }
.str-nome { font: inherit; font-size: 15px; font-weight: 700; text-align: left; border: 0; background: none; padding: 0; cursor: pointer; color: var(--navy); }
.str-nome:hover { text-decoration: underline; }
.str-nome-input { font: inherit; font-size: 15px; font-weight: 700; border: 1px solid var(--navy); border-radius: 6px; padding: 4px 8px; max-width: 360px; }
.str-az { display: flex; gap: 6px; flex-wrap: wrap; }
.str-del { color: var(--rosso); }
.str-pie { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-start; }
.piede { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 6px 24px; padding: 8px 16px; background: var(--white); border-top: 1px solid var(--line); font-size: 11.5px; color: var(--slate); line-height: 1.5; }
.piede a { color: var(--slate); text-decoration: none; }
.piede a:hover { color: var(--navy); text-decoration: underline; }
.piede-chi b { color: var(--navy); }
.piede-priv { display: block; }
.piede-link { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px 16px; }
@media print { .piede, .avviso-backup { display: none; } }
/* il pulsante fisso di iubenda sta in basso a sinistra: si lascia spazio così non copre il testo del piè di pagina */
.piede { padding-left: 64px; }
.piede-pref { display: inline; font: inherit; font-size: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; }

/* Testata più colorata */
.top { box-shadow: 0 1px 0 var(--line), 0 4px 14px -10px rgba(28,36,52,.35); gap: 8px; }
.brand { display: flex; align-items: center; gap: 8px; font-size: 17px; font-weight: 800; letter-spacing: -.3px; margin-right: 6px; }
.brand b { color: var(--giallo-scuro); font-weight: 800; }
.logo { display: grid; grid-template-columns: repeat(2, 9px); grid-auto-rows: 9px; gap: 3px; }
.logo i { border-radius: 3px; background: var(--navy); }
.logo i:nth-child(1) { background: var(--giallo); }
.logo i:nth-child(2) { background: #7C5CFF; }
.logo i:nth-child(3) { grid-column: 1 / 3; background: var(--navy); height: 9px; }
.logo-img { height: 72px; width: auto; display: block; }
.models { background: #EEF2F7; }
.model.on { background: var(--giallo); color: var(--navy); box-shadow: 0 1px 2px rgba(28,36,52,.2); }
.top .btn { font-weight: 600; transition: transform .1s, box-shadow .1s, background .1s; }
.top .btn:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 3px 8px -3px rgba(28,36,52,.35); }
.b-viola { background: #EFEAFF; border-color: #D5CBFF; color: #4B34B8; }
.b-viola .conta { background: #7C5CFF; color: #fff; }
.b-giallo { background: var(--giallo); border-color: var(--giallo); color: var(--navy); }
.b-azzurro { background: #E3F1FF; border-color: #BFDDFB; color: #1459A6; }
.b-verde { background: var(--verde-bg); border-color: #BFE2CE; color: var(--verde); }
.b-navy { background: var(--navy); border-color: var(--navy); color: #fff; }
.b-rosso { background: transparent; border-color: transparent; color: var(--rosso); }
.b-rosso:hover:not(:disabled) { background: var(--rosso-bg); border-color: var(--rosso) !important; }

.top .btn { padding: 6px 10px; font-size: 13px; white-space: nowrap; }
.top #nome { width: 150px; min-width: 0; }
.top .models .model { padding: 6px 10px; font-size: 13px; }

.card:not(.ghost):not(.obiettivo) .c-testo { -webkit-line-clamp: 3; }
.card.ghost .c-testo { -webkit-line-clamp: 2; }


/* barra in basso e menu: solo telefono */
.dock, .m-menu, .p-barra { display: none; }

/* ---------- Versione per telefono e tablet stretto ---------- */
@media (max-width: 820px) {
  html, body { height: 100dvh; }
  input, select, textarea { font-size: 16px !important; }   /* evita lo zoom automatico di iPhone */

  /* testata: logo, scelta del modello e nome della strategia su una riga */
  .top { flex-wrap: wrap; gap: 6px 8px; padding: 8px 10px; padding-top: max(8px, env(safe-area-inset-top)); overflow: hidden; }
  .top > .spacer, .top > .btn, #strategie-btn { display: none; }
  .brand { font-size: 0; gap: 0; margin: 0; flex: 1 0 100%; }          /* resta solo il logo */
  .logo-img { height: 58px; }
  .models { flex: none; }
  .top .models .model { padding: 7px 9px; font-size: 12.5px; }
  .top #nome { flex: 1; min-width: 0; width: auto; font-weight: 700; padding: 8px 10px; }
  .avviso-backup { flex-wrap: wrap; font-size: 12.5px; padding: 8px 10px; gap: 6px; }
  .avviso-backup .btn { padding: 8px 12px; }

  .vuoto { justify-content: flex-start !important; padding: 8px 10px 90px; }
  .vuoto-box { padding: 14px 0 20px; }
  .vuoto h1 { font-size: 22px; }
  /* tela */
  .legenda { left: 8px; right: 8px; top: 8px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; }
  .legenda::-webkit-scrollbar { display: none; }
  .legenda > * { flex: none; }
  .leg { padding: 7px 11px; }
  .leg-ob { order: -1; }                       /* gli obiettivi per primi: sono la cosa più importante */
  .leg-nota { display: none; }
  .zoom { left: 8px; bottom: 8px; }
  .zoom button { padding: 11px 14px; }
  .zoom #zpiu, .zoom #zmeno { display: none; }   /* sul telefono si pizzica con due dita */
  .viste { right: 8px; bottom: 8px; }
  .viste button { padding: 11px 12px; }
  .viste [data-vista="pannello"] { display: none; }
  .maniglia { width: 24px; height: 24px; right: -12px; margin-top: -12px; opacity: 1; }
  .card.ghost .x { width: 28px; height: 28px; right: -12px; top: -12px; }
  .lane-head .btn, .lane-head button { min-height: 36px; }

  /* dettagli: foglio in basso, solo con una card selezionata o con "Riepilogo" */
  .pannello { display: none; max-height: 64vh; box-shadow: 0 -8px 20px -10px rgba(28,36,52,.4); border-radius: 16px 16px 0 0; }
  body.ha-sel .pannello { display: block !important; }
  body.ha-sel .viste, body.ha-sel .piede { display: none; }
  .p-sez .btn { padding: 9px 14px; }
  /* il foglio parte "ridotto" (solo la barra) e si apre con Apri */
  .p-barra { touch-action: none; cursor: grab; display: flex; align-items: center; gap: 8px; padding: 18px 12px 10px; position: sticky; top: 0; z-index: 3; background: var(--white); border-bottom: 1px solid var(--line); }
  .p-barra::before { content: ''; position: absolute; left: 50%; top: 6px; width: 40px; height: 4px; margin-left: -20px; border-radius: 4px; background: #CBD5E1; }
  .p-barra-t { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.2; }
  .p-barra-t small { font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--giallo-scuro); font-weight: 700; }
  .p-barra-t b { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .p-b { font: inherit; font-size: 14px; font-weight: 600; border: 1px solid var(--line); background: var(--white); color: var(--navy); border-radius: 999px; padding: 9px 16px; min-height: 40px; }
  .p-b:first-of-type { background: var(--navy); color: #fff; border-color: var(--navy); }
  .p-b-x { color: var(--slate); }
  body:not(.sheet-aperto):not(.sheet-trascina) .pannello > :not(.p-barra) { display: none; }
  body:not(.sheet-aperto) .pannello, body.sheet-trascina .pannello { overflow: hidden; }
  body:not(.sheet-aperto) .pannello { padding: 0; }

  /* finestre di scelta: a tutta larghezza, ancorate in basso */
  .picker { padding: 0; align-items: flex-end; }
  .picker-box { width: 100%; max-height: 90dvh; border-radius: 18px 18px 0 0; }
  .picker .picker-head { flex-wrap: nowrap; gap: 8px; padding: 16px 16px 8px; }
  .picker .picker-head > div:first-child { flex: 1; min-width: 0; }
  .picker .picker-filtri { padding: 8px 16px 12px; }
  .picker .picker-filtri { flex-wrap: wrap; }
  .picker .picker-filtri > * { min-width: 0; flex: 1 1 40%; }
  .picker .picker-filtri #picker-cerca { flex: 1 1 100%; order: -1; }
  .picker .picker-lista { padding: 0 10px calc(12px + env(safe-area-inset-bottom)); }
  .riga-canale { padding: 12px; }
  .str-riga { flex-wrap: wrap; }
  .str-az .btn { padding: 8px 12px; }

  /* barra in basso */
  .dock { display: flex; background: var(--white); border-top: 1px solid var(--line); padding: 6px 8px calc(6px + env(safe-area-inset-bottom)); gap: 6px; }
  .dock button { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; font: inherit; font-size: 11.5px; font-weight: 600; color: var(--slate); background: none; border: 0; border-radius: 12px; padding: 6px 4px; min-height: 48px; -webkit-tap-highlight-color: transparent; }
  .dock button:active { background: var(--bg); }
  .dock .ic { font-size: 18px; line-height: 1; }
  .dock .dock-main { flex: 1.3; background: var(--giallo); color: var(--navy); }
  .dock .dock-main:active { background: #E6BF00; }
  body.ha-sel .dock { box-shadow: none; }
  .m-menu { position: fixed; inset: 0; z-index: 900; background: rgba(28,36,52,.45); align-items: flex-end; }
  .m-menu:not([hidden]) { display: flex; }
  .m-menu-box { width: 100%; background: var(--white); border-radius: 18px 18px 0 0; padding: 10px 12px calc(12px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 4px; }
  .m-menu-box button { font: inherit; font-size: 16px; text-align: left; padding: 14px 12px; border: 0; background: none; border-radius: 10px; color: var(--navy); }
  .m-menu-box button:active { background: var(--bg); }
  .m-menu-box .m-rosso { color: var(--rosso); }
  .m-menu-box .m-grande { display: flex; flex-direction: column; gap: 2px; padding: 16px 16px; border-radius: 14px; margin-bottom: 4px; }
  .m-menu-box .m-grande b { font-size: 17px; }
  .m-menu-box .m-grande small { font-size: 13px; opacity: .85; font-weight: 400; }
  .m-menu-box .m-prompt { background: var(--verde); color: #fff; }
  .m-menu-box .m-pdf { background: var(--navy); color: #fff; }
  .m-menu-box .m-prompt:active, .m-menu-box .m-pdf:active { filter: brightness(1.15); background: inherit; }
  .m-menu-box .m-chiudi { text-align: center; color: var(--slate); border-top: 1px solid var(--line); border-radius: 0; margin-top: 4px; }

  /* piè di pagina compatto; il pulsante fisso di iubenda copriva «Strategie»: su telefono si nasconde e le preferenze si aprono dal piè di pagina o da «Altro» */
  .iubenda-tp-btn { display: none !important; }
  .piede { padding-left: 10px; }
  .piede-pref { display: inline; }
  .piede { flex-direction: column; align-items: center; text-align: center; padding: 4px 10px; font-size: 10.5px; gap: 0; }
  .piede-priv { display: none; }
  .piede-link a:last-of-type { display: none; }
  .piede-link { justify-content: center; gap: 2px 12px; }
  .toast { bottom: 80px; max-width: 90vw; text-align: center; }
}
@media print { .dock, .m-menu { display: none !important; } }

@media (hover: none) and (pointer: coarse) { .iubenda-tp-btn { display: none !important; } }

/* Radar: onde che partono dai pulsanti di uscita (PDF, prompt per la tua AI, «Altro» su telefono) quando c'è almeno una card */
@keyframes radar-verde { 0% { box-shadow: 0 0 0 0 rgba(31,122,77,.55); } 70%, 100% { box-shadow: 0 0 0 12px rgba(31,122,77,0); } }
@keyframes radar-navy { 0% { box-shadow: 0 0 0 0 rgba(28,36,52,.5); } 70%, 100% { box-shadow: 0 0 0 12px rgba(28,36,52,0); } }
@keyframes radar-giallo { 0% { box-shadow: 0 0 0 0 rgba(255,213,0,.75); } 70%, 100% { box-shadow: 0 0 0 14px rgba(255,213,0,0); } }
body.radar #prompt { animation: radar-verde 2.2s ease-out infinite; }
body.radar #esporta { animation: radar-navy 2.2s ease-out .5s infinite; }
body.radar #prompt:hover, body.radar #esporta:hover { animation: none; }
@media (max-width: 820px) {
  body.radar #m-altro .ic { width: 30px; height: 30px; border-radius: 50%; background: var(--giallo); color: var(--navy); display: grid; place-items: center; font-size: 17px; animation: radar-giallo 2s ease-out infinite; }
  body.radar #m-altro { color: var(--navy); }
}
@media (prefers-reduced-motion: reduce) { body.radar #prompt, body.radar #esporta, body.radar #m-altro .ic { animation: none; } }
@media print { body.radar #prompt, body.radar #esporta { animation: none; } }

/* Feedback */
.b-feedback { background: #FFF4E5; border-color: #F6D9AE; color: #8A5200; }
.fb-box { width: min(560px, 100%); }
.fb-form { padding: 4px 20px 20px; display: flex; flex-direction: column; gap: 6px; overflow-y: auto; }
.fb-dom { font-weight: 700; font-size: 16px; margin-top: 6px; }
.fb-sec { font-size: 13.5px; color: var(--slate); margin-top: 10px; }
.fb-sec span { font-weight: 400; }
.fb-form textarea, .fb-form input[type="email"] { font: inherit; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--white); color: var(--navy); width: 100%; resize: vertical; }
.fb-form textarea:focus, .fb-form input[type="email"]:focus { outline: 2px solid var(--giallo); border-color: var(--navy); }
.fb-conta { align-self: flex-end; font-size: 11.5px; color: var(--slate); }
.fb-trappola { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.fb-esito { min-height: 20px; font-size: 14px; font-weight: 600; }
.fb-esito.ok { color: var(--verde); }
.fb-esito.errore { color: var(--rosso); }
.fb-pie { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.fb-nota { font-size: 12px; color: var(--slate); flex: 1 1 200px; line-height: 1.4; }
@media (max-width: 820px) { .fb-form { padding: 4px 16px calc(16px + env(safe-area-inset-bottom)); } .fb-form textarea { min-height: 140px; } }
@media print { #feedback { display: none !important; } }

/* Frecce per scorrere le idee proposte */
.pager { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); display: flex; align-items: center; gap: 2px; background: var(--white); border: 1px solid var(--line); border-radius: 999px; padding: 3px; box-shadow: 0 2px 10px rgba(28,36,52,.18); z-index: 6; user-select: none; }
.pager[hidden] { display: none; }
.pager button { font: inherit; font-size: 24px; line-height: 1; width: 44px; height: 40px; border: 0; background: var(--giallo); color: var(--navy); border-radius: 999px; cursor: pointer; padding: 0 0 3px; }
.pager button:disabled { background: var(--bg); color: #94A3B8; cursor: default; }
.pager button:not(:disabled):active { background: #E6BF00; }
.pager span { font-size: 13px; font-weight: 700; padding: 0 12px; min-width: 76px; text-align: center; color: var(--navy); }
@media (max-width: 820px) { .pager { bottom: 8px; } .pager button { width: 46px; height: 44px; } .pager span { min-width: 68px; padding: 0 8px; } }
@media print { .pager { display: none; } }

.pager [hidden] { display: none !important; }
.pager #pg-chiudi { width: auto; padding: 0 16px 3px; font-size: 14px; font-weight: 700; background: var(--navy); color: #fff; margin-left: 6px; }
.pager #pg-chiudi:active { background: #0F1624; }
@media (max-width: 820px) { .pager { left: auto; right: 8px; transform: none; } }

/* schermata "Nuova strategia": cursore normale (non la manina della tela) e scorrimento con rotellina/trackpad */
.vuoto { cursor: default; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; touch-action: pan-y; }