/* Phase 10: account-aware cloud-save panel. */
.cloud-status-card,
.cloud-login-card,
.cloud-conflict-note {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 14px;
  padding: 14px;
  margin-bottom: 12px;
  background: rgba(255,255,255,0.035);
}
.cloud-status-card strong,
.cloud-login-card strong { display:block; margin-bottom:4px; }
.cloud-status-card small { display:block; color:#aeb8c5; line-height:1.45; }
.cloud-status-icon {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  display:grid;
  place-items:center;
  border-radius:50%;
  border:1px solid rgba(0,255,157,0.35);
  background:rgba(0,255,157,0.08);
  color:var(--neon);
  font-size:1.1rem;
  box-shadow:0 0 18px rgba(0,255,157,0.12);
}
.cloud-status-card[data-state="synced"] { border-color:rgba(0,255,157,0.35); }
.cloud-status-card[data-state="conflict"] { border-color:rgba(255,190,92,0.45); background:rgba(255,170,70,0.05); }
.cloud-status-card[data-state="error"] { border-color:rgba(255,95,120,0.45); background:rgba(255,70,95,0.05); }
.cloud-status-card[data-state="guest"] { border-color:rgba(0,183,255,0.35); }
.cloud-meta-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
  margin-bottom:12px;
}
.cloud-meta-card {
  border:1px solid rgba(255,255,255,0.08);
  border-radius:10px;
  padding:10px;
  background:rgba(0,0,0,0.24);
}
.cloud-meta-card span,
.cloud-meta-card small { display:block; color:#9ca9b8; font-size:.58rem; letter-spacing:.07em; text-transform:uppercase; }
.cloud-meta-card strong { display:block; margin-top:4px; font-size:.72rem; word-break:break-word; }
.cloud-actions { display:flex; flex-wrap:wrap; gap:8px; margin:10px 0 12px; }
.cloud-actions .btn { flex:1 1 130px; }
.cloud-actions .btn:disabled { opacity:.42; cursor:not-allowed; transform:none; }
.cloud-conflict-note { display:block; border-color:rgba(255,190,92,0.30); color:#ead6b0; line-height:1.5; font-size:.66rem; }
.cloud-conflict-note strong { color:#ffd58a; }
.cloud-login-card { display:block; text-align:center; }
.cloud-login-card p { color:#aeb8c5; font-size:.66rem; line-height:1.5; }
.cloud-sync-spinner { animation:cloudSpin .9s linear infinite; }
@keyframes cloudSpin { to { transform:rotate(360deg); } }
@media (max-width:520px) {
  .cloud-meta-grid { grid-template-columns:1fr; }
  .cloud-actions { flex-direction:column; }
  .cloud-actions .btn { width:100%; flex:auto; }
}