/* =====================================================================
   Account e salvataggi cloud: solo l'indicatore di sincronizzazione e
   le due finestre nuove (importazione, conflitto).

   La schermata di accesso non viene toccata: quella e' 22-au31-css.css.
   Tutto sotto il prefisso cl-, nessuna regola globale.
   ===================================================================== */

.cl-stato{
  position:fixed; right:16px; bottom:16px; z-index:99990;
  display:flex; align-items:center; gap:8px;
  padding:8px 12px;
  background:rgba(9,13,19,.86);
  border:1px solid rgba(222,210,184,.16);
  border-radius:6px;
  font-family:'Inter',sans-serif;
  font-size:11px; font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; color:rgba(244,241,234,.72);
  opacity:0; transform:translateY(6px);
  transition:opacity .2s ease, transform .2s ease;
  pointer-events:none;
}
.cl-stato.on{ opacity:1; transform:translateY(0); }

/* il punto marca uno stato vero, non decora: un colore per stato */
.cl-punto{ width:6px; height:6px; border-radius:50%; background:currentColor; flex:none; }
.cl-stato.s-local  { color:rgba(244,241,234,.66); }
.cl-stato.s-sync   { color:#ded2b8; }
.cl-stato.s-cloud  { color:#8fbf8a; }
.cl-stato.s-offline{ color:rgba(244,241,234,.46); }
.cl-stato.s-fail   { color:#c98b7a; border-color:rgba(201,139,122,.34); }

@media (prefers-reduced-motion:reduce){ .cl-stato{ transition:none; } }

/* --- finestre: importazione e conflitto --- */
.cl-ov{
  position:fixed; inset:0; z-index:99996;
  display:flex; align-items:center; justify-content:center;
  padding:24px;
  background:rgba(5,8,12,.82);
  font-family:'Inter',sans-serif;
}
.cl-box{
  width:100%; max-width:520px;
  padding:32px;
  background:rgba(12,17,24,.96);
  border:1px solid rgba(222,210,184,.18);
  border-radius:10px;
  color:#f4f1ea;
}
.cl-tit{
  font-family:'Anton',sans-serif; font-weight:400;
  font-size:22px; letter-spacing:.01em; text-transform:uppercase;
}
.cl-tx{
  margin-top:16px;
  font-size:13px; line-height:1.65; color:rgba(244,241,234,.66);
}
.cl-tx b{ color:#f4f1ea; font-weight:600; }
.cl-el{ margin:12px 0 0; padding-left:16px; }
.cl-el li{ margin-bottom:8px; }

.cl-cfr{
  display:grid; grid-template-columns:1fr 1fr; gap:12px;
  margin:16px 0;
}
.cl-cfr > div{
  padding:12px;
  border:1px solid rgba(222,210,184,.16);
  border-radius:6px;
}
.cl-cfr b{ display:block; font-size:11px; letter-spacing:.16em; text-transform:uppercase; }
.cl-cfr span{ display:block; margin-top:8px; font-size:13px; color:rgba(244,241,234,.66); }

.cl-row{ display:flex; gap:12px; justify-content:flex-end; margin-top:24px; flex-wrap:wrap; }
.cl-btn{
  padding:12px 24px;
  background:none;
  border:1px solid rgba(222,210,184,.20);
  border-radius:6px;
  font-family:inherit;
  font-size:11px; font-weight:600; letter-spacing:.18em;
  text-transform:uppercase; color:rgba(244,241,234,.72);
  cursor:pointer;
}
.cl-btn:hover, .cl-btn:focus-visible{ border-color:rgba(222,210,184,.52); color:#f4f1ea; outline:none; }
.cl-btn.forte{ border-color:rgba(222,210,184,.52); color:#f4f1ea; }

@media (max-width:560px){
  .cl-box{ padding:24px; }
  .cl-cfr{ grid-template-columns:1fr; }
  .cl-row{ justify-content:stretch; }
  .cl-btn{ flex:1; }
}