.pp-pagina {
  --pp-bg: var(--dp-bg, #0a0a0b);
  --pp-accento: #f4f4f5;
  --pp-accento-chiaro: #ffffff;
  --pp-testo: var(--dp-fg, #ededf0);
  --pp-testo-2: var(--dp-muted, #a1a1aa);
  --pp-dim: var(--dp-dim, #71717a);
  --pp-bordo: rgba(255, 255, 255, 0.09);
  --pp-vetro: rgba(24, 24, 26, 0.62);
  --pp-vetro-2: rgba(40, 40, 43, 0.7);
  --pp-ok: #22c55e;
  --pp-attenzione: #f59e0b;
  --pp-urgente: #ef4444;
  --pp-fatto: #a1a1aa;
  --pp-spento: #52525b;
  --pp-segnale: #dc2626;
  display: grid;
  gap: 14px;
  max-width: 1700px;
  color: var(--pp-testo);
}
.pp-pagina :focus-visible { outline: 2px solid var(--pp-accento-chiaro); outline-offset: 2px; }
.pp-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.pp-testata h1 { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 1.6rem; font-weight: 600; color: var(--pp-testo); }
.pp-testata h1 svg { color: var(--pp-accento-chiaro); }
.pp-sotto { margin: 4px 0 0; color: var(--pp-testo-2); font-size: 0.9375rem; max-width: 70ch; }
.pp-tasto {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px; padding: 8px 16px;
  border: 1px solid var(--pp-bordo); border-radius: 999px; background: var(--pp-vetro-2); color: var(--pp-testo);
  font: inherit; font-size: 0.9rem; text-decoration: none; cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07);
  transition: background 160ms ease-out, border-color 160ms ease-out;
}
.pp-tasto:hover:not(:disabled) { background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.35); }
.pp-tasto:disabled { opacity: 0.5; cursor: default; }
.pp-tasto--pieno { background: var(--pp-accento); border-color: transparent; color: #0a0a0b; font-weight: 600; }
.pp-tasto--pieno:hover:not(:disabled) { background: #ffffff; border-color: transparent; }
.pp-tasto-tondo {
  display: inline-grid; place-items: center; width: 40px; height: 40px; padding: 0;
  border: 1px solid var(--pp-bordo); border-radius: 50%; background: rgba(18, 18, 19, 0.9); color: var(--pp-testo);
  font: 600 1.15rem/1 system-ui, "Segoe UI", Roboto, sans-serif; cursor: pointer;
  transition: background 160ms ease-out;
}
.pp-tasto-tondo:hover { background: rgba(255, 255, 255, 0.12); }
.pp-segno-schermo { width: 14px; height: 14px; border: 2px solid currentColor; border-radius: 3px; }
.pp-schermo-intero .pp-segno-schermo { width: 10px; height: 10px; }
.pp-tennis { display: grid; grid-template-columns: minmax(230px, 280px) minmax(0, 1fr) minmax(250px, 310px); gap: 14px; align-items: stretch; }
.pp-colonna { display: grid; gap: 14px; align-content: start; min-width: 0; }
.pp-pannello {
  display: grid; gap: 10px; padding: 14px 16px; min-width: 0;
  border: 1px solid var(--pp-bordo); border-radius: 16px; background: var(--pp-vetro);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 8px 30px rgba(0, 0, 0, 0.25);
}
.pp-pannello-titolo { margin: 0; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--pp-testo-2); }
.pp-nota { margin: 0; color: var(--pp-testo-2); font-size: 0.8125rem; line-height: 1.45; }
.pp-coppia { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pp-coppia .pp-tasto { padding: 8px 10px; font-size: 0.8125rem; }
.pp-campo {
  width: 100%; min-height: 42px; padding: 8px 14px; border: 1px solid var(--pp-bordo); border-radius: 999px;
  background: rgba(8, 8, 9, 0.7); color: var(--pp-testo); font: inherit; font-size: 0.9375rem;
}
.pp-campo::placeholder { color: #8b8b95; }
.pp-risultati { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.pp-risultato {
  display: flex; align-items: center; gap: 8px; width: 100%; min-height: 38px; padding: 6px 10px;
  border: 0; border-radius: 10px; background: none; color: var(--pp-testo); font: inherit; font-size: 0.9rem; text-align: left; cursor: pointer;
}
.pp-risultato:hover { background: rgba(255, 255, 255, 0.12); }
.pp-risultato-nome { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.pp-interruttore {
  display: flex; align-items: center; gap: 10px; min-height: 42px; padding: 8px 12px;
  border: 1px solid var(--pp-bordo); border-radius: 999px; background: rgba(8, 8, 9, 0.7); color: var(--pp-testo);
  font: inherit; font-size: 0.9375rem; cursor: pointer;
}
.pp-interruttore-segno { position: relative; width: 34px; height: 20px; border-radius: 999px; background: #3f3f46; flex: none; }
.pp-interruttore-segno::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; border-radius: 50%;
  background: var(--pp-testo-2); transition: transform 200ms ease-out;
}
.pp-interruttore[aria-pressed="true"] { border-color: rgba(167, 139, 250, 0.55); }
.pp-interruttore[aria-pressed="true"] .pp-interruttore-segno { background: #d4d4d8; }
.pp-interruttore[aria-pressed="true"] .pp-interruttore-segno::after { transform: translateX(14px); background: #0a0a0b; }
.pp-conteggi { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.pp-conto { display: grid; gap: 2px; padding: 10px 6px; border-radius: 10px; background: rgba(8, 8, 9, 0.7); text-align: center; }
.pp-conto-n { font-size: 1.5rem; font-weight: 300; font-variant-numeric: tabular-nums; }
.pp-conto-t { color: var(--pp-testo-2); font-size: 0.75rem; }
.pp-conto--urgente .pp-conto-n { color: #ff8a80; }
.pp-conto--attenzione .pp-conto-n { color: #fbd38d; }
.pp-legenda { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; font-size: 0.875rem; }
.pp-legenda li { display: flex; align-items: center; gap: 8px; }
.pp-punto { display: inline-block; flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--pp-spento); }
.pp-punto--ok { background: var(--pp-ok); }
.pp-punto--attenzione { background: var(--pp-attenzione); }
.pp-punto--urgente { background: var(--pp-urgente); }
.pp-punto--fatto { background: var(--pp-fatto); }
.pp-punto--segnale { background: var(--pp-segnale); box-shadow: 0 0 0 2px #050507, 0 0 0 3px rgba(239, 68, 68, 0.5); }
.pp-filo-legenda { flex: none; width: 22px; height: 0; border-top: 2px dashed rgba(255, 255, 255, 0.7); }
.pp-chip-esempio {
  display: inline-block; padding: 1px 8px; border-radius: 999px; border: 1px dashed #c9b26a;
  color: #e6d59a; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.02em;
}
.pp-scena {
  position: relative; min-width: 0; min-height: 460px; height: calc(100vh - 230px);
  border: 1px solid rgba(167, 139, 250, 0.2); border-radius: 16px; overflow: hidden; background: #050507;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 0 60px rgba(255, 255, 255, 0.04);
}
.pp-tela { display: block; width: 100%; height: 100%; cursor: grab; touch-action: none; }
.pp-tela.su-sfera { cursor: pointer; }
.pp-tela.trascina { cursor: grabbing; }
.pp-tela:focus-visible { outline: 2px solid var(--pp-accento-chiaro); outline-offset: -3px; }
.pp-comandi { position: absolute; right: 12px; top: 12px; display: grid; gap: 8px; }
.pp-vuoto-scena {
  position: absolute; left: 50%; top: 58%; transform: translateX(-50%); width: min(440px, calc(100% - 40px));
  padding: 16px 18px; border-radius: 16px; background: rgba(18, 18, 19, 0.9); border: 1px solid var(--pp-bordo); text-align: center;
}
.pp-vuoto-scena h2 { margin: 0 0 6px; font-size: 1.05rem; }
.pp-vuoto-scena p { margin: 0; color: var(--pp-testo-2); font-size: 0.875rem; line-height: 1.5; }
.pp-vuoto-scena[hidden] { display: none; }
.pp-schedina {
  position: absolute; z-index: 2; display: grid; gap: 4px; max-width: 280px; padding: 10px 12px; pointer-events: none;
  border: 1px solid rgba(255, 255, 255, 0.35); border-radius: 12px; background: rgba(14, 14, 15, 0.96);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); font-size: 0.8125rem;
}
.pp-schedina[hidden] { display: none; }
.pp-schedina-titolo { font-size: 0.9375rem; overflow-wrap: anywhere; }
.pp-schedina-riga { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.pp-schedina-info { color: var(--pp-testo-2); }
.pp-schedina-segnale { color: #fca5a5; font-weight: 600; }
.pp-schedina-aiuto { margin-top: 2px; color: #8b8b95; font-size: 0.75rem; }
.pp-dettaglio { display: grid; gap: 10px; }
.pp-dettaglio-testa { display: flex; align-items: center; gap: 12px; }
.pp-dettaglio-titolo { margin: 0; font-size: 1.15rem; font-weight: 600; overflow-wrap: anywhere; }
.pp-sfera { flex: none; width: 40px; height: 40px; border-radius: 50%; background: radial-gradient(circle at 34% 30%, #fafafa 0%, #a1a1aa 48%, #3f3f46 100%); }
.pp-sfera--fatto { background: radial-gradient(circle at 34% 30%, #d4d4d8 0%, #71717a 48%, #27272a 100%); }
.pp-sfera--spento { background: radial-gradient(circle at 34% 30%, #a1a1aa 0%, #52525b 48%, #18181b 100%); }
.pp-sfera--radice { background: radial-gradient(circle at 34% 30%, #ffffff 0%, #e4e4e7 48%, #71717a 100%); }
.pp-dettaglio-stato { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 0; font-size: 0.9375rem; }
.pp-segnale-testo { margin: 0; color: #fca5a5; font-weight: 600; font-size: 0.9375rem; }
.pp-info { display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; margin: 0; font-size: 0.875rem; }
.pp-info dt { color: var(--pp-testo-2); }
.pp-info dd { margin: 0; text-align: right; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.pp-azioni { display: flex; flex-wrap: wrap; gap: 8px; }
.pp-vuoto h3 { margin: 0 0 6px; font-size: 1rem; }
.pp-vuoto p { margin: 0; color: var(--pp-testo-2); font-size: 0.875rem; line-height: 1.5; }
.pp-elenco { max-height: 46vh; overflow: auto; overscroll-behavior: contain; padding-right: 4px; }
.pp-albero, .pp-albero ul { margin: 0; padding: 0; list-style: none; }
.pp-albero ul { margin-left: 12px; padding-left: 10px; border-left: 1px solid var(--pp-bordo); }
.pp-albero summary { padding: 6px 4px; color: var(--pp-testo-2); font-size: 0.8125rem; cursor: pointer; }
.pp-albero summary:hover { color: var(--pp-testo); }
.pp-voce { display: flex; align-items: center; gap: 8px; min-height: 36px; }
.pp-voce-nome {
  flex: 1; min-width: 0; padding: 6px; border: 0; border-radius: 8px; background: none;
  color: var(--pp-testo); font: inherit; font-size: 0.875rem; text-align: left; overflow-wrap: anywhere; cursor: pointer;
}
.pp-voce-nome:hover { background: rgba(255, 255, 255, 0.12); }
.pp-voce-apri { flex: none; color: var(--pp-accento-chiaro); font-size: 0.8125rem; }
.pp-caricamento { padding: 40px; color: var(--pp-testo-2); }
.pp-pagina.pp-schermo-intero { max-width: none; height: 100vh; padding: 14px; overflow: auto; background: var(--pp-bg); grid-template-rows: auto 1fr; }
.pp-schermo-intero .pp-tennis { min-height: 0; }
.pp-schermo-intero .pp-scena { height: calc(100vh - 120px); }
@media (max-width: 1180px) {
  .pp-tennis { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .pp-tennis > .pp-colonna:first-child { order: 2; }
  .pp-scena { order: 1; grid-column: 1 / -1; height: 62vh; }
  .pp-tennis > .pp-colonna:last-child { order: 3; }
}
@media (max-width: 760px) {
  .pp-tennis { grid-template-columns: minmax(0, 1fr); }
  .pp-scena { height: 58vh; min-height: 340px; }
  .pp-elenco { max-height: none; }
}
.dp-senza-vetro .pp-pannello { background: #17151f; box-shadow: none; }
.dp-senza-vetro .pp-scena { box-shadow: none; }
.dp-senza-vetro .pp-interruttore-segno::after { transition: none; }
@media (prefers-reduced-motion: reduce) {
  .pp-interruttore-segno::after, .pp-tasto, .pp-tasto-tondo { transition: none; }
}
@media print { .pp-comandi { display: none; } }