.conto-attesa { visibility: hidden; }
.conto-tasto { position: relative; color: var(--inchiostro); font-weight: 400; white-space: nowrap; }
.conto-tasto:not([hidden]) { display: inline-flex; align-items: center; gap: 7px; }
@media (hover: hover) { .conto-tasto:hover { font-weight: 500; } }
.conto-tasto[aria-expanded="true"] { font-weight: 500; }
.conto-tasto__icona { flex: none; width: 18px; height: 18px; }
.conto-tasto__nome { max-width: 12em; overflow: hidden; text-overflow: ellipsis; }
.conto-tasto__chi {
  position: absolute; width: 1px; height: 1px; padding: 0; border: 0;
  overflow: hidden; overflow: clip; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.testa__voci--conto { align-items: center; }

.conto {
  position: fixed; z-index: 50; top: 0; right: var(--bordo);
  width: 280px; max-width: calc(100vw - 2 * var(--bordo));
  padding: 6px;
  background: var(--nero); color: var(--inchiostro);
  border: 1px solid var(--inchiostro-riga); border-radius: 16px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.35);
  opacity: 0; transform: translateY(-6px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.conto.is-aperta { opacity: 1; transform: none; }
.conto:focus { outline: none; }
.conto__testa {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px 14px; margin-bottom: 6px;
  border-bottom: 1px solid var(--inchiostro-riga);
}
.conto__iniziale {
  flex: none; display: grid; place-items: center;
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--giallo); color: var(--nero);
  font-size: 18px; font-weight: 600; line-height: 1; letter-spacing: 0;
}
.conto__chi { display: flex; flex-direction: column; min-width: 0; }
.conto__chi b { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.conto__chi span { font-size: 12px; color: var(--inchiostro-spento); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.conto__voce {
  width: 100%; padding: 10px 12px; border-radius: 10px;
  color: inherit; text-align: left; cursor: pointer;
}
.conto__voce:not([hidden]) { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.conto .conto__voce--dashboard { display: none; }
@media (hover: hover) { .conto__voce:hover { background: rgba(255, 255, 255, 0.08); } }
.conto__voce:focus-visible { outline: 2px solid currentColor; outline-offset: -2px; }
.conto__dove { font-size: 12px; color: var(--inchiostro-spento); }
.conto__voce--esci { color: var(--inchiostro-spento); }
.conto__voce--esci:disabled { cursor: progress; }
.conto__nota { margin: 2px 12px 8px; font-size: 12px; color: #ff6b5e; }

@media (max-width: 767px) {
  .testa__voci.testa__voci--conto { display: flex; }
  .testa__voci--conto:not(.testa__voci--sempre) > :not(.conto-tasto),
  .testa__voci [data-conto-accedi],
  .testa__voci [data-conto-dashboard] { display: none; }
  .conto-tasto:not([hidden]) { justify-content: center; min-width: 44px; min-height: 44px; }
  .conto-tasto__icona { width: 20px; height: 20px; }
  .conto-tasto__nome {
    position: absolute; width: 1px; height: 1px;
    overflow: hidden; overflow: clip; clip: rect(0 0 0 0); clip-path: inset(50%);
  }
  .conto { left: var(--bordo) !important; right: var(--bordo) !important; width: auto; max-width: none; }
  .conto .conto__voce--dashboard:not([hidden]) { display: flex; }
}